@juspay/svelte-ui-components 2.121.0 → 2.123.0

package/dist/Button/Button.svelte

@@ -22,6 +22,7 @@
     testId,
     ariaLabel,
     ariaExpanded,
+    ariaHaspopup,
     ariaSelected,
     role,
     onclick,
@@ -88,6 +89,7 @@
     role={role ?? null}
     aria-label={ariaLabel ?? null}
     aria-expanded={ariaExpanded ?? null}
+    aria-haspopup={ariaHaspopup ?? null}
     aria-selected={ariaSelected ?? null}
     aria-busy={isBusy || null}
     type={href ? null : type}

package/dist/Button/properties.d.ts

@@ -53,6 +53,11 @@ 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;
     role?: string;
     disabled?: boolean;

package/dist/Card/Card.svelte

@@ -5,6 +5,8 @@
     children,
     title,
     description,
+    titleSnippet,
+    descriptionSnippet,
     classes,
     testId,
     onclick,
@@ -64,13 +66,17 @@
   onclick={onclick ?? null}
   onkeydown={!isAnchor && isInteractive ? handleKeydown : null}
 >
-  {#if (typeof title === 'string' && title.length > 0) || typeof headerRight === 'function'}
+  {#if (typeof title === 'string' && title.length > 0) || typeof titleSnippet === 'function' || typeof headerRight === 'function'}
     <div class="card-header" class:card-header-split={typeof headerRight === 'function'}>
       <div class="card-header-main">
-        {#if typeof title === 'string' && title.length > 0}
+        {#if typeof titleSnippet === 'function'}
+          <div class="card-title">{@render titleSnippet()}</div>
+        {:else if typeof title === 'string' && title.length > 0}
           <div class="card-title">{title}</div>
         {/if}
-        {#if typeof description === 'string' && description.length > 0}
+        {#if typeof descriptionSnippet === 'function'}
+          <div class="card-description">{@render descriptionSnippet()}</div>
+        {:else if typeof description === 'string' && description.length > 0}
           <div class="card-description">{description}</div>
         {/if}
       </div>

package/dist/Card/properties.d.ts

@@ -8,6 +8,22 @@ export type OptionalCardProperties = {
     children?: Snippet;
     title?: string;
     description?: string;
+    /**
+     * Optional snippet rendered in place of the `title` string, inside the same
+     * `.card-title` container. When provided, `title` is not rendered — the snippet
+     * takes priority — and the header row is shown even if `title` is omitted
+     * entirely. Use this when the title needs markup a string prop cannot carry:
+     * rich text, an inline icon, or a test hook such as `data-pw` /
+     * `use:testAttributes` that must sit on the title element itself.
+     */
+    titleSnippet?: Snippet;
+    /**
+     * Optional snippet rendered in place of the `description` string, inside the
+     * same `.card-description` container. When provided, `description` is not
+     * rendered. Like `titleSnippet`, this exists for descriptions that need markup
+     * or a test hook on the element itself.
+     */
+    descriptionSnippet?: Snippet;
     classes?: string;
     /** Renders as `data-pw` on the root element for Playwright test selection. */
     testId?: string;

package/dist/Input/Input.svelte

@@ -12,6 +12,8 @@
     infoMessage = '',
     validators = [],
     disable = false,
+    readonly = false,
+    spellcheck = null,
     validationPattern = null,
     inProgressPattern = null,
     addFocusColor = false,
@@ -189,6 +191,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');
@@ -281,6 +292,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 +324,8 @@
         testID={testId}
         class:action-input={actionInput}
         disabled={disable}
+        readonly={readonly || null}
+        {spellcheck}
         bind:this={inputElement}
         maxlength={dataType === 'tel' ? null : maxLength}
         minlength={minLength}

package/dist/Input/properties.d.ts

@@ -13,6 +13,19 @@ 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;

package/dist/Menu/Menu.svelte

@@ -10,6 +10,7 @@
     open = $bindable(false),
     testId,
     trigger,
+    interactiveTrigger = false,
     onselect,
     onopen,
     onclose,
@@ -345,20 +346,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: handleTriggerKeydown,
+          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.121.0",
+  "version": "2.123.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",