@juspay/svelte-ui-components 2.80.3 → 2.80.5

package/dist/Banner/Banner.svelte

@@ -114,7 +114,7 @@
     line-height: var(--banner-line-height, 1.3);
     border-bottom: var(--banner-border-bottom, none);
     border: var(--banner-border);
-    border-radius: var(--banner-border-radius, 0);
+    border-radius: var(--banner-border-radius, var(--radius, 4px));
     cursor: var(--banner-cursor, pointer);
     position: var(--banner-position, sticky);
     top: var(--banner-top, 0);

package/dist/BarChart/BarChart.svelte

@@ -18,6 +18,7 @@
   import { formatNumber } from '../_chart/format';
   import { roundedRectPath } from '../_chart/paths';
   import type { LegendItem, BarRect } from '../_chart/types';
+  import { DEFAULT_CHART_CORNER_RADIUS } from '../_chart/types';
   import { SvelteMap } from 'svelte/reactivity';
 
   // ── Per-instance uid prefix for <defs> ids (A1-3) ─────────────
@@ -52,7 +53,7 @@
     showYAxis = true,
     showLegend = false,
     barPadding = 0.2,
-    barRadius = 4,
+    barRadius = DEFAULT_CHART_CORNER_RADIUS,
     aspectRatio = 16 / 9,
     xAxisLabel,
     yAxisLabel,
@@ -754,7 +755,12 @@
                     onclick={() => handleClick(bar)}
                   />
                 {/if}
-                {#if showValues && !isStackedMode}
+                <!-- Suppress the horizontal value label when its sub-band is thinner
+                     than the ~11px label, so cramped multi-series charts hide labels
+                     instead of overlapping them into an unreadable cluster. Consumers
+                     restore labels by giving the chart more height (aspectRatio /
+                     scrollable / minBandWidth). -->
+                {#if showValues && !isStackedMode && (isVertical || bar.height >= 13)}
                   <text
                     class="bar-value"
                     x={isVertical ? bar.x + bar.width / 2 : bar.x + bar.width + 4}

package/dist/BarChart/properties.d.ts

@@ -76,6 +76,12 @@ export type OptionalBarChartProperties = {
     showXAxis?: boolean;
     showYAxis?: boolean;
     barPadding?: number;
+    /**
+     * Corner radius on bar/column shapes in pixels. Defaults to
+     * `DEFAULT_CHART_CORNER_RADIUS` (4), mirroring the design system's base
+     * `--radius` token. SVG `rx`/`ry` cannot read CSS `var()`, so pass this
+     * prop explicitly to track a changed `--radius` at runtime.
+     */
     barRadius?: number;
     aspectRatio?: number;
     xAxisLabel?: string;

package/dist/Combobox/Combobox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount, tick } from 'svelte';
   import Input from '../Input/Input.svelte';
+  import Pill from '../Pill/Pill.svelte';
   import type { ComboboxItem, ComboboxProperties } from './properties';
 
   function defaultFilter(item: ComboboxItem, query: string): boolean {
@@ -29,13 +30,27 @@
     inputSuffix,
     dropdownHeader,
     dropdownFooter,
+    // multi-select + create/action
+    multiple = false,
+    selected = $bindable([]),
+    maxSelected,
+    maxSelectedText,
+    pillSnippet,
+    allowCreate = false,
+    createLabel = (query: string) => `Create "${query}"`,
+    action,
+    actionIcon,
     onselect,
     oninput,
     onopen,
     onclose,
     onkeydown,
     onfocus,
-    onblur
+    onblur,
+    onchange,
+    onadd,
+    onremove,
+    oncreate
   }: ComboboxProperties = $props();
 
   let containerEl: HTMLDivElement | null = $state(null);
@@ -45,20 +60,63 @@
     return inputRef?.getInputRef() ?? null;
   }
 
+  function focusInput(): void {
+    inputRef?.getInputRef()?.focus();
+  }
+
   const listboxId = `combobox-listbox-${Math.random().toString(36).slice(2, 9)}`;
 
+  let selectedSet = $derived(new Set(selected));
+  let trimmedQuery = $derived(inputValue.trim());
+
   let filteredItems: ComboboxItem[] = $derived(
-    inputValue.length > 0 ? items.filter((item) => filterFn(item, inputValue)) : items
+    items.filter((item) => {
+      if (multiple && selectedSet.has(item.id)) {
+        return false;
+      }
+      return inputValue.length > 0 ? filterFn(item, inputValue) : true;
+    })
   );
 
   let selectableItems: ComboboxItem[] = $derived(
     filteredItems.filter((item) => item.disabled !== true)
   );
 
+  let exactMatch: ComboboxItem | null = $derived(
+    items.find((item) => item.label.toLowerCase() === trimmedQuery.toLowerCase()) ?? null
+  );
+
+  let atLimit = $derived(
+    multiple && typeof maxSelected === 'number' && selected.length >= maxSelected
+  );
+
+  let limitText = $derived(
+    maxSelectedText ??
+      (typeof maxSelected === 'number'
+        ? `You can select up to ${maxSelected}.`
+        : 'Selection limit reached.')
+  );
+
+  let showCreate = $derived(
+    allowCreate &&
+      !atLimit &&
+      trimmedQuery !== '' &&
+      exactMatch === null &&
+      !(multiple && selectedSet.has(trimmedQuery))
+  );
+
+  // Navigable rows: selectable options (hidden at the limit) → create → action.
+  let navItemCount = $derived(atLimit ? 0 : selectableItems.length);
+  let createNavIndex = $derived(showCreate ? navItemCount : -1);
+  let actionNavIndex = $derived(action ? navItemCount + (showCreate ? 1 : 0) : -1);
+  let navCount = $derived(navItemCount + (showCreate ? 1 : 0) + (action ? 1 : 0));
+
   let highlightedOptionId: string | null = $derived(
     highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : null
   );
 
+  const labelOf = (id: string): string => items.find((item) => item.id === id)?.label ?? id;
+
   function openDropdown() {
     if (disabled || open) {
       return;
@@ -77,37 +135,75 @@
     onclose?.();
   }
 
+  function emitChange(): void {
+    onchange?.([...selected]);
+  }
+
+  function addValue(id: string): void {
+    if (atLimit || selectedSet.has(id)) {
+      return;
+    }
+    selected = [...selected, id];
+    inputValue = '';
+    highlightedIndex = -1;
+    onadd?.(id);
+    emitChange();
+    focusInput();
+  }
+
+  function removeValue(id: string): void {
+    if (!selectedSet.has(id)) {
+      return;
+    }
+    selected = selected.filter((current) => current !== id);
+    onremove?.(id);
+    emitChange();
+  }
+
   function selectItem(item: ComboboxItem) {
     if (item.disabled === true) {
       return;
     }
+    onselect?.(item);
+    if (multiple) {
+      addValue(item.id);
+      return;
+    }
     value = item.id;
     inputValue = item.label;
-    onselect?.(item);
     closeDropdown();
   }
 
-  function getFilteredSelectableIndex(item: ComboboxItem): number {
-    let selectableIdx = 0;
-    for (let i = 0; i < filteredItems.length; i++) {
-      if (filteredItems[i] === item) {
-        return filteredItems[i].disabled === true ? -1 : selectableIdx;
-      }
-      if (filteredItems[i].disabled !== true) {
-        selectableIdx++;
-      }
+  function create(): void {
+    const created = trimmedQuery;
+    if (created === '') {
+      return;
+    }
+    oncreate?.(created);
+    if (multiple) {
+      addValue(created);
+      return;
+    }
+    value = created;
+    inputValue = created;
+    closeDropdown();
+  }
+
+  function runAction(): void {
+    action?.onClick();
+    if (!action?.keepOpen) {
+      closeDropdown();
     }
-    return -1;
   }
 
   async function moveHighlight(delta: number): Promise<void> {
-    if (selectableItems.length === 0) {
+    if (navCount === 0) {
       return;
     }
     let next = highlightedIndex + delta;
     if (next < 0) {
-      next = selectableItems.length - 1;
-    } else if (next >= selectableItems.length) {
+      next = navCount - 1;
+    } else if (next >= navCount) {
       next = 0;
     }
     highlightedIndex = next;
@@ -121,19 +217,38 @@
   }
 
   function selectHighlighted() {
-    if (highlightedIndex < 0 || highlightedIndex >= selectableItems.length) {
+    if (highlightedIndex < 0 || highlightedIndex >= navCount) {
       return;
     }
-    const item = selectableItems.at(highlightedIndex);
-    if (typeof item === 'object' && item !== null) {
-      selectItem(item);
+    if (highlightedIndex < navItemCount) {
+      const item = selectableItems.at(highlightedIndex);
+      if (item) {
+        selectItem(item);
+      }
+    } else if (highlightedIndex === createNavIndex) {
+      create();
+    } else if (highlightedIndex === actionNavIndex) {
+      runAction();
+    }
+  }
+
+  function getFilteredSelectableIndex(item: ComboboxItem): number {
+    let selectableIdx = 0;
+    for (let i = 0; i < filteredItems.length; i++) {
+      if (filteredItems[i] === item) {
+        return filteredItems[i].disabled === true ? -1 : selectableIdx;
+      }
+      if (filteredItems[i].disabled !== true) {
+        selectableIdx++;
+      }
     }
+    return -1;
   }
 
-  function handleInput(val: string, _event: Event) {
+  function handleInput(val: string, event: Event) {
     inputValue = val;
     oninput?.(val);
-    inputEventProperties?.onInput?.(val, _event);
+    inputEventProperties?.onInput?.(val, event);
     if (!open) {
       openDropdown();
     }
@@ -167,6 +282,17 @@
         if (open && highlightedIndex >= 0) {
           event.preventDefault();
           selectHighlighted();
+        } else if (exactMatch && !(multiple && selectedSet.has(exactMatch.id))) {
+          event.preventDefault();
+          selectItem(exactMatch);
+        } else if (showCreate) {
+          event.preventDefault();
+          create();
+        }
+        break;
+      case 'Backspace':
+        if (multiple && inputValue === '' && selected.length > 0) {
+          removeValue(selected[selected.length - 1]);
         }
         break;
       case 'Escape':
@@ -194,6 +320,13 @@
     inputEventProperties?.onBlur?.(event);
   }
 
+  function handleControlClick() {
+    if (multiple && !disabled) {
+      focusInput();
+      openDropdown();
+    }
+  }
+
   function handleClickOutside(event: Event) {
     if (
       event.target instanceof Node &&
@@ -213,16 +346,26 @@
 </script>
 
 <div class="combobox {classes ?? ''}" class:disabled bind:this={containerEl} data-pw={testId}>
-  <div class="combobox-input-wrapper">
+  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+  <div class="combobox-input-wrapper" class:multiple onclick={handleControlClick}>
     {#if typeof inputPrefix === 'function'}
       <div class="combobox-input-prefix">{@render inputPrefix()}</div>
     {/if}
+    {#if multiple}
+      {#each selected as id (id)}
+        {#if typeof pillSnippet === 'function'}
+          {@render pillSnippet(id, () => !disabled && removeValue(id), disabled)}
+        {:else}
+          <Pill text={labelOf(id)} dismissible {disabled} ondismiss={() => removeValue(id)} />
+        {/if}
+      {/each}
+    {/if}
     <div class="combobox-input">
       <Input
         {...inputProperties}
         bind:value={inputValue}
         bind:this={inputRef}
-        {placeholder}
+        placeholder={multiple && selected.length > 0 ? '' : placeholder}
         {name}
         disable={disabled}
         autoComplete="off"
@@ -249,7 +392,10 @@
       {#if typeof dropdownHeader === 'function'}
         <div class="combobox-dropdown-header">{@render dropdownHeader()}</div>
       {/if}
-      {#if filteredItems.length === 0}
+
+      {#if atLimit}
+        <div class="combobox-limit" role="alert">{limitText}</div>
+      {:else if filteredItems.length === 0 && !showCreate && !action}
         {#if typeof emptySnippet === 'function'}
           {@render emptySnippet()}
         {:else}
@@ -263,11 +409,11 @@
           <div
             class="combobox-option"
             class:highlighted={isHighlighted}
-            class:selected={item.id === value}
+            class:selected={!multiple && item.id === value}
             class:combobox-option-disabled={item.disabled === true}
             role="option"
             id={`${listboxId}-option-${selectableIndex}`}
-            aria-selected={item.id === value}
+            aria-selected={!multiple && item.id === value}
             aria-disabled={item.disabled === true ? 'true' : null}
             tabindex="-1"
             onclick={() => selectItem(item)}
@@ -286,6 +432,56 @@
           </div>
         {/each}
       {/if}
+
+      {#if showCreate}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div
+          class="combobox-option combobox-create"
+          class:highlighted={highlightedIndex === createNavIndex}
+          class:with-divider={navItemCount > 0}
+          role="option"
+          id={`${listboxId}-option-${createNavIndex}`}
+          aria-selected="false"
+          tabindex="-1"
+          onclick={() => create()}
+          onmouseenter={() => (highlightedIndex = createNavIndex)}
+          data-pw={typeof testId === 'string' ? `${testId}-create` : null}
+        >
+          <span class="combobox-create-icon" aria-hidden="true">
+            <svg viewBox="0 0 20 20" width="14" height="14" fill="none">
+              <path
+                d="M10 4v12M4 10h12"
+                stroke="currentColor"
+                stroke-width="1.7"
+                stroke-linecap="round"
+              />
+            </svg>
+          </span>
+          {createLabel(trimmedQuery)}
+        </div>
+      {/if}
+
+      {#if action}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div
+          class="combobox-option combobox-action"
+          class:highlighted={highlightedIndex === actionNavIndex}
+          class:with-divider={navItemCount > 0 || showCreate}
+          role="option"
+          id={`${listboxId}-option-${actionNavIndex}`}
+          aria-selected="false"
+          tabindex="-1"
+          onclick={() => runAction()}
+          onmouseenter={() => (highlightedIndex = actionNavIndex)}
+          data-pw={typeof testId === 'string' ? `${testId}-action` : null}
+        >
+          {#if typeof actionIcon === 'function'}
+            <span class="combobox-action-icon" aria-hidden="true">{@render actionIcon()}</span>
+          {/if}
+          {action.label}
+        </div>
+      {/if}
+
       {#if typeof dropdownFooter === 'function'}
         <div class="combobox-dropdown-footer">{@render dropdownFooter()}</div>
       {/if}
@@ -317,6 +513,14 @@
     transition: var(--combobox-input-transition, border-color 0.15s, box-shadow 0.15s);
   }
 
+  /* Multi-select control: pills wrap above the typeahead input. */
+  .combobox-input-wrapper.multiple {
+    flex-wrap: wrap;
+    gap: var(--combobox-pill-gap, 4px);
+    padding: var(--combobox-multiple-padding, 4px 6px);
+    cursor: text;
+  }
+
   .combobox-input-wrapper:hover {
     border-color: var(--combobox-input-hover-border-color, #999999);
   }
@@ -357,6 +561,12 @@
     --input-radius: 0;
   }
 
+  .combobox-input-wrapper.multiple .combobox-input {
+    flex: 1 1 60px;
+    min-width: 60px;
+    --input-padding: var(--combobox-multiple-input-padding, 2px 4px);
+  }
+
   .combobox-input::placeholder {
     color: var(--combobox-placeholder-color, #999999);
   }
@@ -378,6 +588,9 @@
   }
 
   .combobox-option {
+    display: flex;
+    align-items: center;
+    gap: var(--combobox-option-gap, 8px);
     padding: var(--combobox-option-padding, 8px 12px);
     color: var(--combobox-option-color, #333333);
     font-size: var(--combobox-option-font-size, inherit);
@@ -414,6 +627,41 @@
     pointer-events: none;
   }
 
+  .combobox-create {
+    color: var(--combobox-create-color, #2563eb);
+  }
+
+  .combobox-action {
+    color: var(--combobox-action-color, #374151);
+  }
+
+  .combobox-option.with-divider {
+    border-top: var(--combobox-divider, 1px solid #e5e7eb);
+  }
+
+  .combobox-create-icon,
+  .combobox-action-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .combobox-action-icon :global(svg) {
+    width: 14px;
+    height: 14px;
+  }
+
+  .combobox-limit {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: var(--combobox-limit-padding, 8px 12px);
+    font-size: var(--combobox-limit-font-size, 13px);
+    font-weight: 500;
+    color: var(--combobox-limit-color, #b45309);
+    background: var(--combobox-limit-background, #fffbeb);
+  }
+
   .combobox-dropdown-header {
     border-bottom: var(--combobox-dropdown-header-border, none);
     padding: var(--combobox-dropdown-header-padding, 0);

package/dist/Combobox/Combobox.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { ComboboxProperties } from './properties';
 declare const Combobox: import("svelte").Component<ComboboxProperties, {
     getInputRef: () => HTMLInputElement | HTMLTextAreaElement | null;
-}, "value" | "open" | "inputValue" | "highlightedIndex">;
+}, "value" | "open" | "selected" | "inputValue" | "highlightedIndex">;
 type Combobox = ReturnType<typeof Combobox>;
 export default Combobox;

package/dist/Combobox/properties.d.ts

@@ -5,6 +5,13 @@ export type ComboboxItem = {
     label: string;
     disabled?: boolean;
 };
+/** A persistent custom action row rendered at the foot of the dropdown. */
+export type ComboboxAction = {
+    label: string;
+    onClick: () => void;
+    /** Keep the dropdown open after the action runs. Defaults to `false`. */
+    keepOpen?: boolean;
+};
 export type ComboboxProperties = MandatoryComboboxProperties & OptionalComboboxProperties & ComboboxEventProperties;
 export type MandatoryComboboxProperties = {
     items: ComboboxItem[];
@@ -30,6 +37,27 @@ export type OptionalComboboxProperties = {
     inputSuffix?: Snippet;
     dropdownHeader?: Snippet;
     dropdownFooter?: Snippet;
+    /** Enable multi-select: picked options become removable pills inside the control. */
+    multiple?: boolean;
+    /** Bindable array of selected ids (multi-select mode). */
+    selected?: string[];
+    /** Cap the number of selections (multi-select mode). */
+    maxSelected?: number;
+    /**
+     * Message shown in the dropdown once `maxSelected` is reached (option/create rows are hidden).
+     * Defaults to "You can select up to {maxSelected}.".
+     */
+    maxSelectedText?: string;
+    /** Custom pill renderer; receives `(value, remove, disabled)`. */
+    pillSnippet?: Snippet<[string, () => void, boolean]>;
+    /** Show a "Create …" row when the query has no exact match. Default `false`. */
+    allowCreate?: boolean;
+    /** Build the create-row label from the current query. */
+    createLabel?: (query: string) => string;
+    /** A persistent custom action row shown at the foot of the dropdown. */
+    action?: ComboboxAction;
+    /** Custom leading icon for the persistent action row. */
+    actionIcon?: Snippet;
 };
 export type ComboboxEventProperties = {
     onselect?: (item: ComboboxItem) => void;
@@ -39,4 +67,12 @@ export type ComboboxEventProperties = {
     onkeydown?: (event: KeyboardEvent) => void;
     onfocus?: (event: FocusEvent) => void;
     onblur?: (event: FocusEvent) => void;
+    /** Multi-select: fires whenever the selection changes (add, remove, or create). */
+    onchange?: (selected: string[]) => void;
+    /** Multi-select: fires when a value is added. */
+    onadd?: (value: string) => void;
+    /** Multi-select: fires when a value is removed. */
+    onremove?: (value: string) => void;
+    /** Fires when the create row is chosen, with the trimmed query. */
+    oncreate?: (value: string) => void;
 };

package/dist/DualAxisBarChart/DualAxisBarChart.svelte

@@ -14,6 +14,7 @@
   import { formatNumber } from '../_chart/format';
   import { roundedRectPath, linePath } from '../_chart/paths';
   import type { LegendItem, TooltipData, LinearScale, BandScale, Point } from '../_chart/types';
+  import { DEFAULT_CHART_CORNER_RADIUS } from '../_chart/types';
 
   // ── Per-instance uid for SVG <defs> ids ────────────────────────
   const uid = Math.random().toString(36).slice(2, 9);
@@ -27,7 +28,7 @@
     rightAxis = {},
     showGridlines = true,
     showLegend = true,
-    barRadius = 3,
+    barRadius = DEFAULT_CHART_CORNER_RADIUS,
     barPadding = 0.25,
     aspectRatio = 16 / 9,
     minBarHeight = 2,

package/dist/DualAxisBarChart/properties.d.ts

@@ -77,7 +77,12 @@ export type OptionalDualAxisBarChartProperties = {
     showGridlines?: boolean;
     /** Whether to render the shared legend below the chart. Default `true`. */
     showLegend?: boolean;
-    /** Corner radius on column/bar shapes in pixels. Default `3`. */
+    /**
+     * Corner radius on column/bar shapes in pixels. Defaults to
+     * `DEFAULT_CHART_CORNER_RADIUS` (4), mirroring the design system's base
+     * `--radius` token. SVG `rx`/`ry` cannot read CSS `var()`, so pass this
+     * prop explicitly to track a changed `--radius` at runtime.
+     */
     barRadius?: number;
     /** Padding between category bands as a fraction of band width (0–1). Default `0.25`. */
     barPadding?: number;

package/dist/FunnelChart/FunnelChart.svelte

@@ -4,6 +4,7 @@
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
   import { getColor } from '../_chart/colors';
   import { formatNumber, formatPercent } from '../_chart/format';
+  import { DEFAULT_CHART_CORNER_RADIUS } from '../_chart/types';
 
   // ── Props ──────────────────────────────────────────────────────
 
@@ -16,6 +17,7 @@
     showValueLabels = true,
     valueFormat,
     aspectRatio = 16 / 9,
+    radius = DEFAULT_CHART_CORNER_RADIUS,
     testId,
     classes,
     empty,
@@ -249,7 +251,7 @@
             width={stageColumnWidth}
             height={bh}
             fill={color}
-            rx={2}
+            rx={radius}
             aria-label="{stage.category}: {formatLabel(stage)}"
             onmouseenter={(event) => handleEnter(event, index)}
             onmousemove={trackMouse}

package/dist/FunnelChart/properties.d.ts

@@ -21,6 +21,13 @@ export type OptionalFunnelChartProperties = {
      * Defaults to a light-teal shared palette neutral.
      */
     connectorColor?: string;
+    /**
+     * Corner radius on each stage bar in pixels. Defaults to
+     * `DEFAULT_CHART_CORNER_RADIUS` (4), mirroring the design system's base
+     * `--radius` token. SVG `rx`/`ry` cannot read CSS `var()`, so pass this
+     * prop explicitly to track a changed `--radius` at runtime.
+     */
+    radius?: number;
     /**
      * Horizontal width (in SVG user units relative to total inner width) of each
      * trapezoidal slope connector. Larger values produce steeper visual drops between stages.

package/dist/Input/Input.svelte

@@ -47,7 +47,13 @@
     leftIconLabel = 'Leading action',
     rightIconLabel = 'Trailing action',
     mandatory = false,
-    forceError = false
+    forceError = false,
+    rows,
+    autoResize = false,
+    minRows,
+    maxRows,
+    resize = 'none',
+    showCount = false
   }: InputProperties = $props();
 
   export function focus() {
@@ -104,6 +110,38 @@
   const hasLeftIcon = $derived(typeof leftIcon === 'function');
   const hasRightIcon = $derived(typeof rightIcon === 'function');
 
+  const charCount = $derived(value?.length ?? 0);
+  const effectiveResize = $derived(autoResize ? 'none' : resize);
+
+  // Grow the textarea to fit its content between minRows and maxRows.
+  function adjustTextAreaHeight(): void {
+    const el = inputElement;
+    if (!el || !useTextArea || !autoResize) {
+      return;
+    }
+    el.style.height = 'auto';
+    const styles = window.getComputedStyle(el);
+    const lineHeight = parseFloat(styles.lineHeight) || 20;
+    const verticalPadding = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
+    const border = parseFloat(styles.borderTopWidth) + parseFloat(styles.borderBottomWidth);
+    const lower = minRows ?? rows ?? 2;
+    const minHeight = lower * lineHeight + verticalPadding + border;
+    const maxHeight =
+      maxRows != null ? maxRows * lineHeight + verticalPadding + border : Number.POSITIVE_INFINITY;
+    const nextHeight = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
+    el.style.height = `${nextHeight}px`;
+    el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';
+  }
+
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    // Re-run on every value change (and on mount) while auto-resize is enabled.
+    void value;
+    if (useTextArea && autoResize) {
+      adjustTextAreaHeight();
+    }
+  });
+
   function handleOnInput(event: Event) {
     if (inputElement === null) {
       return;
@@ -232,8 +270,11 @@
         onpaste={handleOnPaste}
         onclick={onClick}
         onkeydown={onKeyDown}
+        data-pw={testId}
         class:action-input={actionInput}
         style="--focus-border: {addFocusColor ? 1 : 0}px;"
+        style:resize={effectiveResize}
+        rows={rows ?? null}
         disabled={disable}
         bind:this={inputElement}
         maxlength={dataType === 'tel' ? null : maxLength}
@@ -321,6 +362,11 @@
       {infoMessage}
     </div>
   {/if}
+  {#if useTextArea && showCount && !actionInput}
+    <div class="input-char-count" class:at-limit={charCount >= maxLength}>
+      {charCount}/{maxLength}
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -466,6 +512,18 @@
     padding: var(--input-info-msg-padding);
   }
 
+  .input-char-count {
+    align-self: flex-end;
+    font-size: var(--input-char-count-size, 12px);
+    color: var(--input-char-count-color, #98a2b3);
+    margin: var(--input-char-count-margin, 4px 0 0);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .input-char-count.at-limit {
+    color: var(--input-char-count-limit-color, var(--input-error-msg-text-color, #fa1405));
+  }
+
   ::placeholder {
     color: var(--input-placeholder-color);
   }

package/dist/Input/properties.d.ts

@@ -22,6 +22,24 @@ export type OptionalInputProperties = {
     max?: number;
     actionInput?: boolean;
     useTextArea?: boolean;
+    /** Initial visible rows for the textarea (only applies when `useTextArea`). */
+    rows?: number;
+    /**
+     * Grow/shrink the textarea to fit its content between `minRows` and `maxRows`
+     * (only when `useTextArea`). Disables manual resizing while active.
+     */
+    autoResize?: boolean;
+    /** Lower bound (in rows) when `autoResize` is on. Defaults to `rows`. */
+    minRows?: number;
+    /** Upper bound (in rows) when `autoResize` is on; beyond this the textarea scrolls. */
+    maxRows?: number;
+    /**
+     * Manual resize-handle behaviour for the textarea. Defaults to `'none'` (unchanged from
+     * before); forced to `'none'` when `autoResize` is on.
+     */
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    /** Show a live `current / maxLength` character counter beneath the field. */
+    showCount?: boolean;
     autoComplete?: HTMLInputAttributes['autocomplete'];
     name?: string;
     textTransformers?: TextTransformer[];

package/dist/LineChart/LineChart.svelte

@@ -44,6 +44,8 @@
     xTickFormat,
     yTickFormat,
     aspectRatio = 16 / 9,
+    minHeight = 0,
+    maxHeight = Infinity,
     tooltipSnippet,
     empty,
     highlightedIndex = null,
@@ -352,7 +354,13 @@
       <Legend items={legendItems} position="top" />
     {/if}
 
-    <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+    <ChartContainer
+      bind:width={chartWidth}
+      bind:height={chartHeight}
+      {aspectRatio}
+      {minHeight}
+      {maxHeight}
+    >
       {#if gradientFill || showArea}
         <defs>
           {#each lines as line, si (si)}

package/dist/LineChart/properties.d.ts

@@ -95,6 +95,10 @@ export type OptionalLineChartProperties = {
     yTickFormat?: (value: number | string) => string;
     /** Width-to-height ratio for the chart. */
     aspectRatio?: number;
+    /** Minimum chart height in pixels, regardless of computed aspect-ratio height. */
+    minHeight?: number;
+    /** Maximum chart height in pixels, regardless of computed aspect-ratio height. */
+    maxHeight?: number;
     /** Custom tooltip. Receives `{x, points: [{name, y, color, label?}]}`. */
     tooltipSnippet?: Snippet<[LineChartTooltipContext]>;
     /** Content rendered when all series are empty. */

package/dist/Pill/Pill.svelte

@@ -107,7 +107,7 @@
   .pill-text {
     overflow: hidden;
     text-overflow: var(--pill-text-overflow, ellipsis);
-    white-space: nowrap;
+    white-space: var(--pill-text-white-space, nowrap);
   }
 
   .pill-leading-icon {

package/dist/SankeyChart/SankeyChart.svelte

@@ -5,6 +5,7 @@
   import { computeSankeyLayout } from '../_chart/geometry';
   import { getColor } from '../_chart/colors';
   import { formatNumber } from '../_chart/format';
+  import { DEFAULT_CHART_CORNER_RADIUS } from '../_chart/types';
   import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 
   // ── Props ──────────────────────────────────────────────────────
@@ -18,6 +19,7 @@
     showValues = false,
     showLabels = true,
     aspectRatio = 16 / 9,
+    radius = DEFAULT_CHART_CORNER_RADIUS,
     maxHeight = Infinity,
     valueFormat,
     tooltipSnippet,
@@ -343,8 +345,8 @@
             y={node.y}
             width={node.width}
             height={node.height}
-            rx={2}
-            ry={2}
+            rx={radius}
+            ry={radius}
             fill={color}
             onmouseenter={(e) => handleNodeEnter(e, node.id)}
             onmousemove={trackMouse}

package/dist/SankeyChart/properties.d.ts

@@ -41,6 +41,13 @@ export type OptionalSankeyChartProperties = {
     nodeWidth?: number;
     nodePadding?: number;
     iterations?: number;
+    /**
+     * Corner radius on each node rect in pixels. Defaults to
+     * `DEFAULT_CHART_CORNER_RADIUS` (4), mirroring the design system's base
+     * `--radius` token. SVG `rx`/`ry` cannot read CSS `var()`, so pass this
+     * prop explicitly to track a changed `--radius` at runtime.
+     */
+    radius?: number;
     showValues?: boolean;
     showLabels?: boolean;
     aspectRatio?: number;

package/dist/Select/Select.svelte

@@ -17,6 +17,7 @@
     optionIndicator,
     showSelectAll = false,
     selectAllLabel = 'Select all',
+    showSelectedTick = false,
     triggerSummary,
     testId,
     itemTestId,
@@ -443,6 +444,7 @@
             <div
               class="select-option"
               class:multi={multiple}
+              class:tickable={showSelectedTick && !multiple}
               class:selected={value.includes(row.item.id)}
               class:highlighted={index === highlightedIndex}
               role="option"
@@ -478,7 +480,11 @@
                   </span>
                 {/if}
               {/if}
-              {row.item.label}
+              <span class="select-option-label">{row.item.label}</span>
+              {#if showSelectedTick && !multiple && value.includes(row.item.id)}
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                <span class="select-option-tick" aria-hidden="true">{@html checkmarkSvg}</span>
+              {/if}
             </div>
           {/if}
         {/each}
@@ -740,4 +746,31 @@
     background: var(--select-ghost-trigger-open-background, rgba(0, 0, 0, 0.06));
     box-shadow: none;
   }
+
+  /* Single-select right-edge tick (showSelectedTick) */
+  .select-option.tickable {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .select-option.tickable .select-option-label {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .select-option-tick {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--select-option-tick-size, 16px);
+    height: var(--select-option-tick-size, 16px);
+    color: var(--select-option-tick-color, #2563eb);
+  }
+
+  .select-option-tick :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
 </style>

package/dist/Select/properties.d.ts

@@ -40,6 +40,13 @@ export type OptionalSelectProperties = {
     showSelectAll?: boolean;
     /** Label for the `showSelectAll` row. Defaults to `'Select all'`. */
     selectAllLabel?: string;
+    /**
+     * Single-select only: when `true`, the currently selected option shows a
+     * checkmark at its right edge. No effect in `multiple` mode (which already
+     * renders a checkbox indicator). Themeable via `--select-option-tick-size`
+     * and `--select-option-tick-color`. Defaults to `false`.
+     */
+    showSelectedTick?: boolean;
     testId?: string;
     /** Fallback per-option test id prefix. Each option emits `data-pw="{itemTestId}-{id}"` when its own `item.testId` is not set. */
     itemTestId?: string;

package/dist/_chart/ChartTooltip.svelte

@@ -2,10 +2,47 @@
   import type { ChartTooltipProperties } from './types';
 
   let { data, mouseX = 0, mouseY = 0, customSnippet, classes }: ChartTooltipProperties = $props();
+
+  const OFFSET = 12;
+
+  let tooltipEl = $state<HTMLDivElement | null>(null);
+  let tooltipWidth = $state(0);
+  let tooltipHeight = $state(0);
+
+  // Clamp against the positioned chart container so the tooltip never spills past
+  // (and gets clipped by) an overflow:hidden edge. Re-read on each measure/move.
+  const containerWidth = $derived(tooltipEl?.offsetParent?.clientWidth ?? Number.POSITIVE_INFINITY);
+  const containerHeight = $derived(
+    tooltipEl?.offsetParent?.clientHeight ?? Number.POSITIVE_INFINITY
+  );
+
+  // Horizontal: flip to the left of the cursor when it would overflow the right edge.
+  const left = $derived.by(() => {
+    let value = mouseX + OFFSET;
+    if (value + tooltipWidth > containerWidth) {
+      value = mouseX - tooltipWidth - OFFSET;
+    }
+    return Math.max(0, value);
+  });
+
+  // Vertical: keep the tooltip within the container's top and bottom edges.
+  const top = $derived.by(() => {
+    let value = mouseY - OFFSET;
+    if (value + tooltipHeight > containerHeight) {
+      value = containerHeight - tooltipHeight;
+    }
+    return Math.max(0, value);
+  });
 </script>
 
 {#if data !== null}
-  <div class="chart-tooltip {classes ?? ''}" style="left: {mouseX + 12}px; top: {mouseY - 12}px;">
+  <div
+    bind:this={tooltipEl}
+    bind:clientWidth={tooltipWidth}
+    bind:clientHeight={tooltipHeight}
+    class="chart-tooltip {classes ?? ''}"
+    style="left: {left}px; top: {top}px;"
+  >
     {#if typeof customSnippet === 'function'}
       {@render customSnippet(data)}
     {:else}
@@ -60,7 +97,7 @@
     display: inline-block;
     width: 8px;
     height: 8px;
-    border-radius: 2px;
+    border-radius: var(--chart-swatch-radius, 2px);
     flex-shrink: 0;
   }
 

package/dist/_chart/Legend.svelte

@@ -48,7 +48,7 @@
     display: inline-block;
     width: var(--chart-legend-swatch-size, 12px);
     height: var(--chart-legend-swatch-size, 12px);
-    border-radius: 2px;
+    border-radius: var(--chart-swatch-radius, 2px);
     flex-shrink: 0;
   }
 

package/dist/_chart/geometry.js

@@ -128,7 +128,7 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
                     nodeY.set(id, Math.max(0, weightedY - (nodeH.get(id) ?? 0) / 2));
                 }
             }
-            // Resolve overlaps
+            // Resolve overlaps: push down from the top.
             ids.sort((a, b) => (nodeY.get(a) ?? 0) - (nodeY.get(b) ?? 0));
             let y = 0;
             for (const id of ids) {
@@ -138,6 +138,37 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
                 }
                 y = (nodeY.get(id) ?? 0) + (nodeH.get(id) ?? 0) + nodePadding;
             }
+            // Resolve overlaps: pull back up from the bottom. The push-down pass
+            // above only ever grows a column's block downward, so a fan-out whose
+            // members share a weighted target centre drifts past the column's
+            // height budget column-to-column instead of staying level. Sweep from
+            // the last node up, clamping each node's bottom edge to the running
+            // boundary, mirroring d3-sankey's bidirectional resolveCollisions.
+            let bottomBoundary = height;
+            for (let index = ids.length - 1; index >= 0; index--) {
+                const id = ids[index];
+                const nodeBottom = (nodeY.get(id) ?? 0) + (nodeH.get(id) ?? 0);
+                if (nodeBottom > bottomBoundary) {
+                    nodeY.set(id, bottomBoundary - (nodeH.get(id) ?? 0));
+                }
+                bottomBoundary = (nodeY.get(id) ?? 0) - nodePadding;
+            }
+            // Re-centre the column's node group within [0, height]: once overlaps
+            // are resolved, anchor the block at the midpoint of its remaining
+            // slack rather than leaving it wherever the top-down/bottom-up sweeps
+            // happened to land it, so a cluster sharing a weighted centre reads as
+            // centred on that target instead of stacked toward one edge.
+            const firstId = ids[0];
+            const lastId = ids[ids.length - 1];
+            const groupTop = nodeY.get(firstId) ?? 0;
+            const groupBottom = (nodeY.get(lastId) ?? 0) + (nodeH.get(lastId) ?? 0);
+            const idealGroupTop = Math.max(0, (height - (groupBottom - groupTop)) / 2);
+            const recentreShift = idealGroupTop - groupTop;
+            if (recentreShift !== 0) {
+                for (const id of ids) {
+                    nodeY.set(id, (nodeY.get(id) ?? 0) + recentreShift);
+                }
+            }
         }
     }
     // Build computed nodes

package/dist/_chart/types.d.ts

@@ -1,5 +1,15 @@
 import type { Snippet } from 'svelte';
 import type { BarChartDataPoint } from '../BarChart/properties';
+/**
+ * Corner radius (px) shared by every chart shape (bar/column rects, funnel
+ * stage bars, sankey nodes). Mirrors Lighthouse's `--radius` design token
+ * (0.25rem = 4px at the 16px root). SVG `rx`/`ry` attributes and the
+ * `roundedRectPath()` curve builder in `_chart/paths.ts` consume plain JS
+ * numbers, so this constant is the chart-layer equivalent of `var(--radius)`
+ * for surfaces CSS cannot reach. Consumers who need runtime sync to a
+ * *changed* `--radius` should pass the corresponding radius prop explicitly.
+ */
+export declare const DEFAULT_CHART_CORNER_RADIUS = 4;
 export type Margin = {
     top: number;
     right: number;

package/dist/_chart/types.js

@@ -1 +1,11 @@
-export {};
+// ── Shared constants ──────────────────────────────────────────
+/**
+ * Corner radius (px) shared by every chart shape (bar/column rects, funnel
+ * stage bars, sankey nodes). Mirrors Lighthouse's `--radius` design token
+ * (0.25rem = 4px at the 16px root). SVG `rx`/`ry` attributes and the
+ * `roundedRectPath()` curve builder in `_chart/paths.ts` consume plain JS
+ * numbers, so this constant is the chart-layer equivalent of `var(--radius)`
+ * for surfaces CSS cannot reach. Consumers who need runtime sync to a
+ * *changed* `--radius` should pass the corresponding radius prop explicitly.
+ */
+export const DEFAULT_CHART_CORNER_RADIUS = 4;

package/package.json

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