@juspay/svelte-ui-components 2.81.2 → 2.82.0

package/dist/BarChart/BarChart.svelte

@@ -13,7 +13,11 @@
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
   import Legend from '../_chart/Legend.svelte';
   import { createBandScale, createLinearScale, niceLinearDomain } from '../_chart/scales';
-  import { computeChartDimensions } from '../_chart/geometry';
+  import {
+    computeChartDimensions,
+    computeHorizontalCategoryGutter,
+    measureTextWidth
+  } from '../_chart/geometry';
   import { getColor } from '../_chart/colors';
   import { formatNumber } from '../_chart/format';
   import { roundedRectPath } from '../_chart/paths';
@@ -110,17 +114,6 @@
 
   let format = $derived(valueFormat ?? formatNumber);
   let isVertical = $derived(orientation === 'vertical');
-  // When an axis is hidden its gutter (Y = 50px for tick labels, X = 40px) is dead
-  // space that squeezes the plot into the centre. Collapse the tick-label gutter but
-  // keep a symmetric breathing-room inset so the edge bars (and their value labels)
-  // don't sit flush against the container edges.
-  let dims = $derived(
-    computeChartDimensions(chartWidth, chartHeight, {
-      left: showYAxis ? 50 : 28,
-      right: 28,
-      bottom: showXAxis ? 40 : 8
-    })
-  );
 
   let isMulti = $derived(Array.isArray(series) && series.length > 0);
 
@@ -197,6 +190,58 @@
     return first.map((d) => d.label);
   });
 
+  /**
+   * Widest category label in the axis tick font, for the horizontal-orientation
+   * gutter below. Horizontal charts put category text (not short numeric ticks)
+   * on the Y axis, so the gutter must fit real words like "Submitted Address" —
+   * a fixed gutter clips them. Resolved from the mounted container so CSS-var
+   * theming (--chart-axis-font-size / --chart-axis-font-family) is honoured.
+   * Null when unmeasurable (SSR, no canvas) — the gutter then keeps its legacy
+   * fixed width.
+   */
+  let widestCategoryLabelWidth = $derived.by(() => {
+    if (isVertical || !showYAxis || labels.length === 0 || containerEl === null) {
+      return null;
+    }
+    const containerStyle = getComputedStyle(containerEl);
+    const axisFontSize = containerStyle.getPropertyValue('--chart-axis-font-size').trim() || '11px';
+    const axisFontFamilyToken = containerStyle.getPropertyValue('--chart-axis-font-family').trim();
+    const axisFontFamily =
+      axisFontFamilyToken === '' || axisFontFamilyToken === 'inherit'
+        ? containerStyle.fontFamily || 'sans-serif'
+        : axisFontFamilyToken;
+    const axisFont = `${axisFontSize} ${axisFontFamily}`;
+    let widest: number | null = null;
+    for (const label of labels) {
+      const labelWidth = measureTextWidth(label, axisFont);
+      if (labelWidth === null) {
+        return null;
+      }
+      if (widest === null || labelWidth > widest) {
+        widest = labelWidth;
+      }
+    }
+    return widest;
+  });
+
+  // When an axis is hidden its gutter (Y = 50px for tick labels, X = 40px) is dead
+  // space that squeezes the plot into the centre. Collapse the tick-label gutter but
+  // keep a symmetric breathing-room inset so the edge bars (and their value labels)
+  // don't sit flush against the container edges. In horizontal orientation the
+  // visible Y axis carries category text, so its gutter grows to fit the widest
+  // label (never shrinking below the legacy 50px, capped at 45% of the width).
+  let dims = $derived(
+    computeChartDimensions(chartWidth, chartHeight, {
+      left: showYAxis
+        ? isVertical
+          ? 50
+          : computeHorizontalCategoryGutter(widestCategoryLabelWidth, chartWidth)
+        : 28,
+      right: 28,
+      bottom: showXAxis ? 40 : 8
+    })
+  );
+
   // ── Effective highlighted index: merge declarative + imperative ─
 
   /**

package/dist/Input/Input.svelte

@@ -22,6 +22,7 @@
     actionInput = false,
     useTextArea = false,
     autoComplete = 'on',
+    inputMode,
     name = '',
     testId = '',
     textTransformers = [],
@@ -256,6 +257,7 @@
         {value}
         {placeholder}
         autocomplete={autoComplete}
+        inputmode={inputMode}
         {name}
         {role}
         aria-expanded={ariaExpanded}
@@ -286,6 +288,7 @@
         {value}
         {placeholder}
         autocomplete={autoComplete}
+        inputmode={inputMode}
         {name}
         {role}
         aria-expanded={ariaExpanded}

package/dist/Input/properties.d.ts

@@ -41,6 +41,11 @@ export type OptionalInputProperties = {
     /** Show a live `current / maxLength` character counter beneath the field. */
     showCount?: boolean;
     autoComplete?: HTMLInputAttributes['autocomplete'];
+    /**
+     * Virtual-keyboard hint rendered as the native `inputmode` attribute
+     * (e.g. `'numeric'` for OTP/PIN fields). Left off by default.
+     */
+    inputMode?: HTMLInputAttributes['inputmode'];
     name?: string;
     textTransformers?: TextTransformer[];
     textViewPresentation?: TextTransformer[];

package/dist/SplitInput/SplitInput.svelte

@@ -159,6 +159,8 @@
         placeholder={config.placeholder}
         validationPattern={config.validationPattern ?? null}
         validators={config.validators ?? []}
+        autoComplete={config.autoComplete ?? 'on'}
+        inputMode={config.inputMode}
         disable={disabled}
         actionInput={true}
         classes="field-group-input"

package/dist/SplitInput/properties.d.ts

@@ -1,5 +1,5 @@
 import type { OptionalInputProperties } from '../Input/properties';
-export type FieldConfig = Pick<OptionalInputProperties, 'dataType' | 'maxLength' | 'min' | 'max' | 'placeholder' | 'validationPattern' | 'validators' | 'label'>;
+export type FieldConfig = Pick<OptionalInputProperties, 'dataType' | 'maxLength' | 'min' | 'max' | 'placeholder' | 'validationPattern' | 'validators' | 'label' | 'autoComplete' | 'inputMode'>;
 export type SplitInputProperties = MandatorySplitInputProperties & OptionalSplitInputProperties & SplitInputEventProperties;
 export type MandatorySplitInputProperties = {
     values: string[];

package/dist/_chart/geometry.d.ts

@@ -1,5 +1,25 @@
 import type { Margin, ChartDimensions, PieSliceLayout, ComputedSankeyNode, ComputedSankeyLink, StackedPoint } from './types';
 export declare function computeChartDimensions(width: number, height: number, margin?: Partial<Margin>): ChartDimensions;
+/**
+ * Measures rendered text width via a shared offscreen canvas context.
+ * Returns null when measurement is unavailable (SSR, or the environment
+ * provides no working 2D canvas — e.g. jsdom) so callers can fall back to
+ * a fixed layout instead of acting on a bogus 0.
+ */
+export declare function measureTextWidth(text: string, font: string): number | null;
+/**
+ * Left margin for a horizontal bar chart's category axis, sized to fit the
+ * widest category label. Category tick labels render right-aligned 10px left
+ * of the axis line (tick mark 6px + 4px gap), so any label wider than
+ * `margin.left - 10` bleeds out of the SVG and gets clipped by the page.
+ *
+ * - Never shrinks below `fallback` (the legacy fixed gutter), so charts whose
+ *   labels already fit keep their exact current layout.
+ * - Caps at 45% of the chart width so one pathological label cannot crush the
+ *   plot area; past the cap the label bleeds as before, but the plot survives.
+ * - `widestLabelWidth === null` (SSR / unmeasurable) keeps the legacy gutter.
+ */
+export declare function computeHorizontalCategoryGutter(widestLabelWidth: number | null, chartWidth: number, fallback?: number): number;
 export declare function computePieLayout(data: Array<{
     label: string;
     value: number;

package/dist/_chart/geometry.js

@@ -13,6 +13,51 @@ export function computeChartDimensions(width, height, margin = {}) {
         innerHeight: Math.max(0, height - m.top - m.bottom)
     };
 }
+// ── Text measurement ────────────────────────────────────────────
+let textMeasurementContext = null;
+/**
+ * Measures rendered text width via a shared offscreen canvas context.
+ * Returns null when measurement is unavailable (SSR, or the environment
+ * provides no working 2D canvas — e.g. jsdom) so callers can fall back to
+ * a fixed layout instead of acting on a bogus 0.
+ */
+export function measureTextWidth(text, font) {
+    if (typeof document === 'undefined') {
+        return null;
+    }
+    if (textMeasurementContext === null) {
+        textMeasurementContext = document.createElement('canvas').getContext('2d');
+    }
+    if (textMeasurementContext === null) {
+        return null;
+    }
+    textMeasurementContext.font = font;
+    const width = textMeasurementContext.measureText(text).width;
+    // jsdom's canvas stub reports 0 for any text; treat that as "cannot measure".
+    return width > 0 ? width : null;
+}
+/**
+ * Left margin for a horizontal bar chart's category axis, sized to fit the
+ * widest category label. Category tick labels render right-aligned 10px left
+ * of the axis line (tick mark 6px + 4px gap), so any label wider than
+ * `margin.left - 10` bleeds out of the SVG and gets clipped by the page.
+ *
+ * - Never shrinks below `fallback` (the legacy fixed gutter), so charts whose
+ *   labels already fit keep their exact current layout.
+ * - Caps at 45% of the chart width so one pathological label cannot crush the
+ *   plot area; past the cap the label bleeds as before, but the plot survives.
+ * - `widestLabelWidth === null` (SSR / unmeasurable) keeps the legacy gutter.
+ */
+export function computeHorizontalCategoryGutter(widestLabelWidth, chartWidth, fallback = 50) {
+    if (widestLabelWidth === null) {
+        return fallback;
+    }
+    const tickLabelInset = 10;
+    const breathingPad = 4;
+    const cap = Math.max(fallback, chartWidth * 0.45);
+    const fitted = widestLabelWidth + tickLabelInset + breathingPad;
+    return Math.round(Math.min(Math.max(fallback, fitted), cap));
+}
 // ── Pie layout ──────────────────────────────────────────────────
 export function computePieLayout(data, startAngle = -Math.PI / 2, padAngle = 0) {
     const total = data.reduce((sum, d) => sum + Math.max(0, d.value), 0);

package/package.json

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