@juspay/svelte-ui-components 2.123.0 → 2.124.0

package/dist/Button/Button.svelte

@@ -24,7 +24,9 @@
     ariaExpanded,
     ariaHaspopup,
     ariaSelected,
+    ariaBusy,
     role,
+    title,
     onclick,
     onkeydown = () => {},
     onkeyup = () => {},
@@ -91,7 +93,8 @@
     aria-expanded={ariaExpanded ?? null}
     aria-haspopup={ariaHaspopup ?? null}
     aria-selected={ariaSelected ?? null}
-    aria-busy={isBusy || null}
+    aria-busy={isBusy || ariaBusy || null}
+    title={title ?? null}
     type={href ? null : type}
     disabled={href ? null : isDisabled}
     href={href ? (isDisabled ? null : href) : null}

package/dist/Button/properties.d.ts

@@ -59,7 +59,20 @@ export type OptionalButtonProperties = {
      */
     ariaHaspopup?: 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | boolean;
     ariaSelected?: boolean;
+    /**
+     * Native `aria-busy`, for a control that stays usable while related data loads.
+     * Deliberately separate from `loading`, which also renders the spinner and
+     * disables the button — a trigger whose *contents* are still loading must stay
+     * clickable, so it cannot express that state through `loading`.
+     */
+    ariaBusy?: boolean;
     role?: string;
+    /**
+     * Native `title`, rendered as the browser's own hover tooltip. Distinct from
+     * `ariaLabel`, which names the control for assistive tech without any visible
+     * affordance; an icon-only button generally wants both.
+     */
+    title?: string;
     disabled?: boolean;
     classes?: string;
     /**

package/dist/Input/Input.svelte

@@ -115,6 +115,9 @@
   const hasRightIcon = $derived(typeof rightIcon === 'function');
 
   const charCount = $derived(value?.length ?? 0);
+  // Every numeric use below is either tel-only normalisation or the character
+  // counter; `null` means "no attribute", not "no ceiling on those paths".
+  const effectiveMaxLength = $derived(maxLength ?? 1000);
   const effectiveResize = $derived(autoResize ? 'none' : resize);
 
   // Grow the textarea to fit its content between minRows and maxRows.
@@ -130,8 +133,16 @@
     const border = parseFloat(styles.borderTopWidth) + parseFloat(styles.borderBottomWidth);
     const lower = minRows ?? rows ?? 2;
     const minHeight = lower * lineHeight + verticalPadding + border;
-    const maxHeight =
+    const rowsCeiling =
       maxRows != null ? maxRows * lineHeight + verticalPadding + border : Number.POSITIVE_INFINITY;
+    // --input-max-height is a ceiling too. Reading only maxRows left it at Infinity, so the
+    // inline height grew past the CSS clamp and overflowY was set to `hidden` — the box
+    // stopped at the right size but its overflow became unreachable instead of scrollable.
+    const styleCeiling = parseFloat(styles.maxHeight);
+    const maxHeight = Math.min(
+      rowsCeiling,
+      Number.isFinite(styleCeiling) ? styleCeiling : 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';
@@ -163,16 +174,16 @@
         inputElement.value = value;
         return;
       }
-      if (numberLength > maxLength) {
+      if (numberLength > effectiveMaxLength) {
         const existingInput = value;
-        if (existingInput.length === maxLength) {
+        if (existingInput.length === effectiveMaxLength) {
           inputElement.value = applyTextPresentation(value);
           return;
         }
         /**
          * choose last max length number of digits if length is bigger than max length passed in props
          */
-        currentValue = currentValue.substring(numberLength - maxLength);
+        currentValue = currentValue.substring(numberLength - effectiveMaxLength);
       }
       currentValue = applyTextPresentation(currentValue);
       inputElement.value = currentValue;
@@ -221,12 +232,12 @@
         /**
          * user pasted 10+ digit number , overrides all cases
          */
-        if (filteredNumber.length > maxLength) {
+        if (filteredNumber.length > effectiveMaxLength) {
           /**
            * choose last max length number of digits if length is bigger than max length passed in props
            */
           const finalValue = applyTextPresentation(
-            filteredNumber.substring(filteredNumberLength - maxLength)
+            filteredNumber.substring(filteredNumberLength - effectiveMaxLength)
           );
           // Adding reactivity
           value = finalValue;
@@ -390,8 +401,8 @@
     </div>
   {/if}
   {#if useTextArea && showCount && !actionInput}
-    <div class="input-char-count" class:at-limit={charCount >= maxLength}>
-      {charCount}/{maxLength}
+    <div class="input-char-count" class:at-limit={charCount >= effectiveMaxLength}>
+      {charCount}/{effectiveMaxLength}
     </div>
   {/if}
 </div>
@@ -401,6 +412,13 @@
   input {
     box-sizing: var(--input-box-sizing, border-box);
     height: var(--input-height, fit-content);
+
+    /* Both default to the CSS initial value, so a consumer that sets neither is
+       byte-identical to before. A textarea that grows with its content needs a
+       ceiling before it can scroll, and one used as a paste target needs a floor;
+       neither was reachable through the --input-* surface. */
+    min-height: var(--input-min-height, auto);
+    max-height: var(--input-max-height, none);
     background-color: var(--input-background, white);
     font-size: var(--input-font-size, 16px) !important;
     font-family: var(--input-font-family, inherit);
@@ -408,6 +426,12 @@
     outline: none;
     padding: var(--input-padding, 16px);
     font-weight: var(--input-font-weight, 500);
+
+    /* `normal` is what a textarea/input computes today regardless of any inherited
+       value — the UA sheet sets it, and inheritance loses to a UA declaration on the
+       element itself. So the default here is byte-identical for existing consumers,
+       and this is the only way a consumer can set it at all. */
+    line-height: var(--input-line-height, normal);
     width: var(--input-width, fit-content);
     margin: var(--input-margin, 0);
     appearance: none !important;

package/dist/Input/properties.d.ts

@@ -29,7 +29,12 @@ export type OptionalInputProperties = {
     validationPattern?: RegExp | null;
     inProgressPattern?: RegExp | null;
     addFocusColor?: boolean;
-    maxLength?: number;
+    /**
+     * Native `maxlength`. Defaults to 1000. Pass `null` for no limit — a composer or
+     * paste target that silently truncates long input is worse than an unbounded one,
+     * and the attribute is rendered unconditionally otherwise.
+     */
+    maxLength?: number | null;
     minLength?: number;
     min?: number;
     max?: number;

package/dist/Menu/Menu.svelte

@@ -200,9 +200,28 @@
     focusedIndex = -1;
     typeaheadQuery = '';
     onclose?.();
-    if (triggerEl !== null) {
-      triggerEl.focus({ preventScroll: true });
+    focusTrigger();
+  }
+
+  /**
+   * Returns focus to whatever is actually focusable for this trigger. Under
+   * `interactiveTrigger` the wrapper carries no tabindex, so focusing it is a no-op and
+   * focus falls to <body> — the control the snippet rendered is the real target.
+   */
+  function focusTrigger() {
+    if (triggerEl === null) {
+      return;
     }
+    if (interactiveTrigger) {
+      const control = triggerEl.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (control instanceof HTMLElement) {
+        control.focus({ preventScroll: true });
+        return;
+      }
+    }
+    triggerEl.focus({ preventScroll: true });
   }
 
   function selectItem(item: MenuItem) {
@@ -240,6 +259,23 @@
     }
   }
 
+  /**
+   * Keydown wiring handed to an `interactiveTrigger` snippet. Enter and Space are
+   * deliberately NOT handled here: the snippet owns a real `<button>`, which already
+   * synthesises a click from both, and that click is already wired to `toggle`. Handling
+   * them again would open a menu the click then immediately closes. Only the arrow keys —
+   * which no native button implements — are added.
+   */
+  function handleInteractiveTriggerKeydown(event: KeyboardEvent) {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      openMenu();
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      openMenu(selectableItems.length - 1);
+    }
+  }
+
   function handleMenuKeydown(event: KeyboardEvent) {
     switch (event.key) {
       case 'ArrowDown': {
@@ -358,7 +394,7 @@
       {#if typeof trigger === 'function'}
         {@render trigger({
           onclick: toggle,
-          onkeydown: handleTriggerKeydown,
+          onkeydown: handleInteractiveTriggerKeydown,
           ariaHaspopup: 'menu',
           ariaExpanded: open
         })}

package/package.json

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