@juspay/svelte-ui-components 2.118.1 → 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/package.json

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