From 92efbda95ee6aadda1676d50e84144937ccb1412 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?=
 <webJose@gmail.com>
Date: Tue, 2 Sep 2025 13:01:35 -0600
Subject: [PATCH] feat:  Enable the use of clsx through ActiveState.class (via
 the activeState component prop)

---
 src/lib/Link/Link.svelte | 2 +-
 src/lib/types.ts         | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/lib/Link/Link.svelte b/src/lib/Link/Link.svelte
index 9442500..30e95aa 100644
--- a/src/lib/Link/Link.svelte
+++ b/src/lib/Link/Link.svelte
@@ -127,7 +127,7 @@
 
 <a
 	href={calcHref}
-	class={[cssClass, { [activeState?.class ?? '']: isActive }]}
+	class={[cssClass, (isActive && activeState?.class) || undefined]}
 	style={isActive ? styleString() : undefined}
 	aria-current={isActive ? (activeState?.ariaCurrent ?? 'page') : undefined}
 	onclick={handleClick}
diff --git a/src/lib/types.ts b/src/lib/types.ts
index b90b26a..4510751 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,4 +1,4 @@
-import type { HTMLAnchorAttributes } from "svelte/elements";
+import type { ClassValue, HTMLAnchorAttributes } from "svelte/elements";
 import type { SvelteURL } from "svelte/reactivity";
 
 /**
@@ -297,11 +297,13 @@ export type ActiveState = {
      */
     key?: string;
     /**
-     * Sets the class that the link will use when rendering as active.
+     * Sets the class or classes that the link will use when rendering as active.
      * 
      * For example, set it to `"active"` for Bootstrap setups.
+     * 
+     * **TIP**:  You can use any value type that is accepted by the popular `clsx` library.
      */
-    class?: string;
+    class?: ClassValue;
     /**
      * Sets the style that the link will use when rendering as active.
      *