@juspay/svelte-ui-components 2.118.0 → 2.119.0

package/dist/Card/Card.svelte

@@ -8,6 +8,9 @@
     classes,
     testId,
     onclick,
+    href,
+    target,
+    rel,
     headerRight,
     footer,
     stretch = false,
@@ -15,7 +18,14 @@
     cssVars
   }: CardProperties = $props();
 
-  const isInteractive = $derived(typeof onclick === 'function');
+  const isAnchor = $derived(typeof href === 'string' && href.length > 0);
+  const isInteractive = $derived(isAnchor || typeof onclick === 'function');
+  // HTML target values are ASCII case-insensitive (e.g. "_BLANK" opens a new
+  // context identically to "_blank"), so the comparison must normalize case
+  // to keep the noopener/noreferrer default from being silently skipped.
+  const resolvedRel = $derived(
+    rel ?? (target?.toLowerCase() === '_blank' ? 'noopener noreferrer' : null)
+  );
 
   const styleAttr = $derived(
     cssVars
@@ -37,8 +47,8 @@
   };
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<div
+<svelte:element
+  this={isAnchor ? 'a' : 'div'}
   class="card {classes ?? ''}"
   class:card-interactive={isInteractive}
   class:card-stretch={stretch}
@@ -46,10 +56,13 @@
   style={styleAttr}
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
-  role={isInteractive ? 'button' : null}
-  tabindex={isInteractive ? 0 : null}
-  onclick={isInteractive ? onclick : null}
-  onkeydown={isInteractive ? handleKeydown : null}
+  role={!isAnchor && isInteractive ? 'button' : null}
+  tabindex={!isAnchor && isInteractive ? 0 : null}
+  href={isAnchor ? href : null}
+  target={isAnchor ? target : null}
+  rel={isAnchor ? resolvedRel : null}
+  onclick={onclick ?? null}
+  onkeydown={!isAnchor && isInteractive ? handleKeydown : null}
 >
   {#if (typeof title === 'string' && title.length > 0) || typeof headerRight === 'function'}
     <div class="card-header" class:card-header-split={typeof headerRight === 'function'}>
@@ -85,10 +98,16 @@
       {@render footer()}
     </footer>
   {/if}
-</div>
+</svelte:element>
 
 <style>
   .card {
+    /* Explicit so the root's layout doesn't depend on the browser default for
+       whichever tag svelte:element renders -- a <div> defaults to block and an
+       <a> defaults to inline, and an inline box ignores width/height entirely.
+       Pinning both here keeps anchor-mode cards byte-identical to div cards. */
+    display: block;
+    text-decoration: none;
     background: var(--card-background, inherit);
     border: var(--card-border, 1px solid currentColor);
     border-radius: var(--card-border-radius, var(--radius, 4px));

package/dist/Card/properties.d.ts

@@ -12,12 +12,28 @@ export type OptionalCardProperties = {
     /** Renders as `data-pw` on the root element for Playwright test selection. */
     testId?: string;
     /**
-     * When provided the root element becomes interactive:
+     * When provided (and `href` is not) the root element becomes an interactive `<div>`:
      * `role="button"`, `tabindex=0`, and keydown (Enter/Space) triggers the handler.
-     * When omitted the root is a plain `<div>` with no interactive attributes,
-     * so existing consumers see zero behaviour change.
+     * When `href` is also provided, the root renders as a native `<a>` instead (see
+     * `href`) and this synthetic role/tabindex/keydown shim is skipped, since anchor
+     * semantics already cover focus and Enter-activation; `onclick` still fires either
+     * way. When neither `onclick` nor `href` is provided the root is a plain `<div>`
+     * with no interactive attributes, so existing consumers see zero behaviour change.
      */
     onclick?: (event: MouseEvent) => void;
+    /**
+     * Render the card root as an `<a>` styled identically, instead of a `<div>`. Use
+     * for card-styled links/navigation. When set, the root is natively focusable and
+     * Enter-activates, so the `role="button"`/`tabindex`/keydown shim used for a
+     * clickable `<div>` (see `onclick`) is not applied. `onclick` (if also provided)
+     * still fires alongside navigation. Omitted by default, so existing consumers are
+     * unaffected.
+     */
+    href?: string;
+    /** Anchor target (only applied when `href` is set), e.g. `_blank`. */
+    target?: string;
+    /** Anchor rel (only applied when `href` is set). Defaults to `noopener noreferrer` when `target="_blank"`. */
+    rel?: string;
     /**
      * Snippet rendered at the top-right of the header row, alongside title/description.
      * When omitted the header row is unchanged (title block takes full width).

package/dist/ChipInput/ChipInput.svelte

@@ -94,13 +94,30 @@
        --pill-* and --input-* have not yet been re-declared: reading them in the same declaration
        that sets them would be a custom-property cycle and would compute to invalid. Consumers that
        theme Pill/Input app-wide get chips that match the rest of their UI, instead of the library's
-       hardcoded light-theme hexes overriding their theme. */
+       own values overriding their theme.
+
+       Every token that carries the chip's APPEARANCE is captured here — colour, type, spacing and
+       shape alike. An app whose Pill is a 14px, 16px-radius chip was still getting 13px and a
+       999px pill, because re-declaring a token on the element beats inheriting it no matter which
+       property it is; restoring only the colours left the same bug in a less obvious place.
+       Tokens the component owns STRUCTURALLY — the draft field's inline padding, margin and
+       shadow, and its width/height — deliberately stay fixed, since those position the field among
+       the chips rather than describe how it looks. */
     --chip-input-pill-background-default: var(--pill-background, #e0e0e0);
     --chip-input-pill-color-default: var(--pill-color, #333333);
     --chip-input-pill-dismiss-color-default: var(--pill-dismiss-color, currentColor);
+    --chip-input-pill-font-size-default: var(--pill-font-size, 13px);
+    --chip-input-pill-font-weight-default: var(--pill-font-weight, 500);
+    --chip-input-pill-padding-default: var(--pill-padding, 6px 10px);
+    --chip-input-pill-border-radius-default: var(--pill-border-radius, 999px);
+    --chip-input-pill-border-default: var(--pill-border, none);
+    --chip-input-pill-gap-default: var(--pill-gap, 4px);
+    --chip-input-pill-dismiss-size-default: var(--pill-dismiss-size, 14px);
+    --chip-input-pill-max-width-default: var(--pill-max-width);
     --chip-input-draft-border-default: var(--input-border, 1px solid transparent);
     --chip-input-draft-focus-border-default: var(--input-focus-border, 1px solid transparent);
     --chip-input-draft-radius-default: var(--input-radius, 4px);
+    --chip-input-draft-font-size-default: var(--input-font-size, 13px);
   }
 
   .chip-input-draft-wrap {
@@ -108,16 +125,25 @@
   }
 
   .chip-input :global(.chip-input-pill) {
-    --pill-gap: var(--chip-input-pill-gap, 4px);
+    --pill-gap: var(--chip-input-pill-gap, var(--chip-input-pill-gap-default));
     --pill-background: var(--chip-input-pill-background, var(--chip-input-pill-background-default));
     --pill-color: var(--chip-input-pill-color, var(--chip-input-pill-color-default));
-    --pill-font-size: var(--chip-input-pill-font-size, 13px);
-    --pill-font-weight: var(--chip-input-pill-font-weight, 500);
-    --pill-padding: var(--chip-input-pill-padding, 6px 10px);
-    --pill-border-radius: var(--chip-input-pill-border-radius, 999px);
-    --pill-border: var(--chip-input-pill-border, none);
-    --pill-max-width: var(--chip-input-pill-max-width);
-    --pill-dismiss-size: var(--chip-input-pill-dismiss-size, 14px);
+    --pill-font-size: var(--chip-input-pill-font-size, var(--chip-input-pill-font-size-default));
+    --pill-font-weight: var(
+      --chip-input-pill-font-weight,
+      var(--chip-input-pill-font-weight-default)
+    );
+    --pill-padding: var(--chip-input-pill-padding, var(--chip-input-pill-padding-default));
+    --pill-border-radius: var(
+      --chip-input-pill-border-radius,
+      var(--chip-input-pill-border-radius-default)
+    );
+    --pill-border: var(--chip-input-pill-border, var(--chip-input-pill-border-default));
+    --pill-max-width: var(--chip-input-pill-max-width, var(--chip-input-pill-max-width-default));
+    --pill-dismiss-size: var(
+      --chip-input-pill-dismiss-size,
+      var(--chip-input-pill-dismiss-size-default)
+    );
     --pill-dismiss-color: var(
       --chip-input-pill-dismiss-color,
       var(--chip-input-pill-dismiss-color-default)
@@ -133,9 +159,13 @@
       --chip-input-draft-focus-border,
       var(--chip-input-draft-focus-border-default)
     );
+    --input-font-size: var(--chip-input-draft-font-size, var(--chip-input-draft-font-size-default));
+
+    /* Structural, not thematic: the draft field sits inline among the chips, so it keeps its own
+       tight padding and no margin or shadow regardless of how the app themes Input elsewhere.
+       Override them per-instance via --chip-input-draft-* if a layout genuinely needs it. */
     --input-padding: var(--chip-input-draft-padding, 0 2px);
     --input-margin: 0;
-    --input-font-size: var(--chip-input-draft-font-size, 13px);
     --input-box-shadow: none;
   }
 </style>

package/package.json

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