@juspay/svelte-ui-components 2.122.0 → 2.124.0

package/dist/Button/Button.svelte

@@ -22,8 +22,11 @@
     testId,
     ariaLabel,
     ariaExpanded,
+    ariaHaspopup,
     ariaSelected,
+    ariaBusy,
     role,
+    title,
     onclick,
     onkeydown = () => {},
     onkeyup = () => {},
@@ -88,8 +91,10 @@
     role={role ?? null}
     aria-label={ariaLabel ?? null}
     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

@@ -53,8 +53,26 @@ export type OptionalButtonProperties = {
     children?: Snippet;
     ariaLabel?: string;
     ariaExpanded?: boolean;
+    /**
+     * Native `aria-haspopup`. Needed when the button is the trigger for a menu, listbox or
+     * dialog — Menu hands exactly this to its `trigger` snippet.
+     */
+    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

@@ -12,6 +12,8 @@
     infoMessage = '',
     validators = [],
     disable = false,
+    readonly = false,
+    spellcheck = null,
     validationPattern = null,
     inProgressPattern = null,
     addFocusColor = false,
@@ -113,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.
@@ -128,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';
@@ -161,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;
@@ -189,6 +202,15 @@
       return;
     }
 
+    // Everything below the tel branch is tel-specific digit normalisation, and
+    // onPaste was only ever invoked from inside it — so a non-tel field (notably
+    // useTextArea) had no way to observe a paste at all. Hand the event over
+    // before that branch and return, leaving tel's behaviour byte-identical.
+    if (dataType !== 'tel') {
+      onPaste(event);
+      return;
+    }
+
     if (event.clipboardData) {
       if (dataType === 'tel') {
         let unfilteredNumber = event.clipboardData.getData('text');
@@ -210,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;
@@ -281,6 +303,8 @@
         style:resize={effectiveResize}
         rows={rows ?? null}
         disabled={disable}
+        readonly={readonly || null}
+        {spellcheck}
         bind:this={inputElement}
         maxlength={dataType === 'tel' ? null : maxLength}
         minlength={minLength}
@@ -311,6 +335,8 @@
         testID={testId}
         class:action-input={actionInput}
         disabled={disable}
+        readonly={readonly || null}
+        {spellcheck}
         bind:this={inputElement}
         maxlength={dataType === 'tel' ? null : maxLength}
         minlength={minLength}
@@ -375,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>
@@ -386,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);
@@ -393,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

@@ -13,10 +13,28 @@ export type OptionalInputProperties = {
     infoMessage?: string | null;
     validators?: CustomValidator[];
     disable?: boolean;
+    /**
+     * Renders the field read-only: the value can be focused, selected and copied but not
+     * edited. Deliberately distinct from `disable`, which also removes the element from
+     * the focus order and so cannot serve a select-all-to-copy affordance.
+     */
+    readonly?: boolean;
+    /**
+     * Native `spellcheck`. Defaults to `null`, which Svelte renders as "attribute
+     * absent", so the browser default is unchanged for every existing consumer.
+     * Pass `false` for fields holding code, JSON or identifiers, where red
+     * squiggles are noise.
+     */
+    spellcheck?: boolean | null;
     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

@@ -10,6 +10,7 @@
     open = $bindable(false),
     testId,
     trigger,
+    interactiveTrigger = false,
     onselect,
     onopen,
     onclose,
@@ -199,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) {
@@ -239,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': {
@@ -345,20 +382,45 @@
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
 >
-  <div
-    class="menu-trigger"
-    bind:this={triggerEl}
-    onclick={toggle}
-    onkeydown={handleTriggerKeydown}
-    role="button"
-    tabindex="0"
-    aria-haspopup="menu"
-    aria-expanded={open}
-  >
-    {#if typeof trigger === 'function'}
-      {@render trigger()}
-    {/if}
-  </div>
+  <!-- Two shapes on purpose. When the snippet renders its own interactive element this
+       wrapper must NOT be a second one: two focusable nodes for one conceptual trigger
+       means two Tab stops, both announcing as a button, and interactive content nested
+       inside interactive content. The wiring is handed to the snippet instead, for it to
+       spread onto the one real control. Written as two branches rather than conditional
+       attributes so role/tabindex stay statically paired — Svelte's a11y check reads them
+       together, and a dynamic pair trips a11y_no_noninteractive_tabindex. -->
+  {#if interactiveTrigger}
+    <div class="menu-trigger" bind:this={triggerEl}>
+      {#if typeof trigger === 'function'}
+        {@render trigger({
+          onclick: toggle,
+          onkeydown: handleInteractiveTriggerKeydown,
+          ariaHaspopup: 'menu',
+          ariaExpanded: open
+        })}
+      {/if}
+    </div>
+  {:else}
+    <div
+      class="menu-trigger"
+      bind:this={triggerEl}
+      onclick={toggle}
+      onkeydown={handleTriggerKeydown}
+      role="button"
+      tabindex="0"
+      aria-haspopup="menu"
+      aria-expanded={open}
+    >
+      {#if typeof trigger === 'function'}
+        {@render trigger({
+          onclick: toggle,
+          onkeydown: handleTriggerKeydown,
+          ariaHaspopup: 'menu',
+          ariaExpanded: open
+        })}
+      {/if}
+    </div>
+  {/if}
 
   {#if open}
     <div

package/dist/Menu/properties.d.ts

@@ -1,4 +1,12 @@
 import type { Snippet } from 'svelte';
+/** The interaction wiring Menu hands to its `trigger` snippet. */
+export type MenuTriggerProps = {
+    onclick: (event: MouseEvent) => void;
+    onkeydown: (event: KeyboardEvent) => void;
+    /** camelCase to match the library's own prop convention, so it spreads onto Button. */
+    ariaHaspopup: 'menu';
+    ariaExpanded: boolean;
+};
 export type MenuItem = {
     label: string;
     value: string;
@@ -23,7 +31,26 @@ export type MandatoryMenuProperties = {
 export type OptionalMenuProperties = {
     open?: boolean;
     testId?: string;
-    trigger?: Snippet;
+    /**
+     * Renders the control that opens the menu. Receives Menu's interaction wiring, so a
+     * consumer whose trigger is ITSELF an interactive element (a Button, say) can spread
+     * it onto that element and set `interactiveTrigger` — see below. A snippet that
+     * declares no parameters simply ignores what it is handed, so existing triggers are
+     * unaffected.
+     */
+    trigger?: Snippet<[MenuTriggerProps]>;
+    /**
+     * Set when the trigger snippet renders its own interactive element. Menu then stops
+     * making its wrapper a second one.
+     *
+     * By default Menu wraps the trigger in a `role="button" tabindex="0"` div carrying
+     * the click/keydown handlers. That is correct for inert trigger content, but if the
+     * snippet renders a real control the result is two focusable elements for one
+     * conceptual trigger — two Tab stops, both announcing as a button, and interactive
+     * content nested inside interactive content. Defaults to `false`, preserving the
+     * existing behaviour for every current consumer.
+     */
+    interactiveTrigger?: boolean;
     classes?: string;
     /** Value of the currently selected item. When set, opening the menu focuses the
      * selected option instead of the first item, the matching item gets the

package/dist/types.d.ts

@@ -1,9 +1,20 @@
 import type { FlyParams } from 'svelte/transition';
 /**
  * @name InputDataType
- * @description Different types of input data which can be passed to the Input Component
+ * @description Different types of input data which can be passed to the Input Component.
+ *
+ * Input renders `<input type={dataType}>`, so this union is the only thing deciding
+ * which native types a consumer may ask for. The four added beyond the original
+ * text/tel/password/email/number all keep `value` a plain string with no parallel
+ * `checked`/`files` model, so Input's existing value plumbing covers them unchanged.
+ * `validateInput()` switches on dataType with no default branch, and `number` has
+ * always fallen through it unvalidated — these fall through identically.
+ *
+ * Deliberately NOT included: checkbox and radio (driven by `checked`, which Input has
+ * no prop for), and file (rejects scripted `value` writes outright). Those need new
+ * props, not a wider union.
  */
-export type InputDataType = 'text' | 'tel' | 'password' | 'email' | 'number';
+export type InputDataType = 'text' | 'tel' | 'password' | 'email' | 'number' | 'time' | 'date' | 'search' | 'url';
 export type ModalTransition = 'IN' | 'ALL';
 /**
  * @name CustomValidator

package/package.json

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