@getmicdrop/svelte-components 5.3.6 → 5.3.10

package/dist/patterns/forms/FormSection.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormSection.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormSection.svelte.js"],"names":[],"mappings":";;;;;AAoCA;YAhC6B,MAAM;kBAAgB,MAAM;cAAY,OAAO;YAAU,MAAM;cAAY,GAAG;WAgCjD;wBAhCvC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"FormSection.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormSection.svelte.js"],"names":[],"mappings":";;;;;AAwCA;YAhC6B,MAAM;kBAAgB,MAAM;cAAY,OAAO;YAAU,MAAM;cAAY,GAAG;WAgCjD;wBAhCvC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/patterns/navigation/BottomNav.svelte

@@ -2,6 +2,7 @@
   import { page } from '../../__LIB_STORES__.js';
   import { base } from '../../__LIB_PATHS__.js';
   import Icon from "../../primitives/Icons/Icon.svelte";
+  import { typography } from '../../tokens/typography';
 
   let {
     links = [],
@@ -35,11 +36,11 @@
 {#each links as { label, href, icon }}
   <a
     {href}
-    class="flex-1 flex items-center justify-center py-3 px-2 no-underline bg-transparent border-none cursor-pointer min-w-0
-      text-gray-500 dark:text-gray-400 transition-colors duration-150
+    class={`flex-1 flex items-center justify-center py-3 px-2 no-underline bg-transparent border-none cursor-pointer min-w-0
+      ${typography.textMuted} transition-colors duration-150
       hover:text-gray-900 hover:no-underline dark:hover:text-white
       select-none touch-manipulation
-      {isActive(href, currentPath) ? 'text-blue-700 dark:text-blue-500' : ''}"
+      ${isActive(href, currentPath) ? 'text-blue-700 dark:text-blue-500' : ''}`}
     aria-label={label}
     style="-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;"
   >

package/dist/patterns/navigation/BottomNav.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/BottomNav.svelte.js"],"names":[],"mappings":";;;;;AA0DA;YA9C6B,GAAG,EAAE;WA8CsB;wBA9CrC;IAAE,KAAK,CAAC,EAAE,GAAG,EAAE,CAAA;CAAE"}
+{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/BottomNav.svelte.js"],"names":[],"mappings":";;;;;AA4DA;YA9C6B,GAAG,EAAE;WA8CsB;wBA9CrC;IAAE,KAAK,CAAC,EAAE,GAAG,EAAE,CAAA;CAAE"}

package/dist/patterns/navigation/Header.svelte

@@ -11,6 +11,7 @@
   import { fade, fly } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import { portal } from "../../utils/portal.js";
+  import { typography } from '../../tokens/typography';
 
   let {
     signoutHandler = () => {},
@@ -61,9 +62,9 @@
       {#each navLinks as { label, href }}
         <a
           {href}
-          class="px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 no-underline rounded-lg transition-all duration-150
+          class={`px-4 py-2 ${typography.label} ${typography.textMuted} no-underline rounded-lg transition-all duration-150
             hover:text-gray-900 hover:bg-gray-100 hover:no-underline dark:hover:text-white dark:hover:bg-gray-700
-            {isActive(href, currentPath) ? 'text-blue-700 bg-gray-100 dark:text-blue-500 dark:bg-gray-700' : ''}"
+            ${isActive(href, currentPath) ? 'text-blue-700 bg-gray-100 dark:text-blue-500 dark:bg-gray-700' : ''}`}
         >
           {label}
         </a>
@@ -87,8 +88,8 @@
           <div class="fixed inset-0 z-30 bg-transparent" onclick={() => showDesktopDropdown = false}></div>
           <div class="absolute top-[calc(100%+0.5rem)] right-0 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-40 overflow-hidden">
             <div class="py-3 px-4 border-b border-gray-200 dark:border-gray-700">
-              <span class="block font-semibold text-gray-900 dark:text-white text-sm">{name || "Performer"}</span>
-              <span class="block text-xs text-gray-500 dark:text-gray-400 mt-0.5">{email || ""}</span>
+              <span class={`block ${typography.label}`}>{name || "Performer"}</span>
+              <span class={`block ${typography.xsMuted} mt-0.5`}>{email || ""}</span>
             </div>
             {#each dropdownLinks as { label, href }}
               <Button
@@ -121,9 +122,9 @@
     {#each navLinks as { label, href }}
       <a
         {href}
-        class="px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 no-underline rounded-lg transition-all duration-150
+        class={`px-4 py-2 ${typography.label} ${typography.textMuted} no-underline rounded-lg transition-all duration-150
           hover:text-gray-900 hover:bg-gray-100 hover:no-underline dark:hover:text-white dark:hover:bg-gray-700
-          {isActive(href, currentPath) ? 'text-blue-700 bg-gray-100 dark:text-blue-500 dark:bg-gray-700' : ''}"
+          ${isActive(href, currentPath) ? 'text-blue-700 bg-gray-100 dark:text-blue-500 dark:bg-gray-700' : ''}`}
       >
         {label}
       </a>
@@ -158,8 +159,8 @@
         <div class="fixed inset-0 z-30 bg-transparent" onclick={() => showDesktopDropdown = false}></div>
         <div class="absolute top-[calc(100%+0.5rem)] right-0 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-40 overflow-hidden">
           <div class="py-3 px-4 border-b border-gray-200 dark:border-gray-700">
-            <span class="block font-semibold text-gray-900 dark:text-white text-sm">{name || "Performer"}</span>
-            <span class="block text-xs text-gray-500 dark:text-gray-400 mt-0.5">{email || ""}</span>
+            <span class={`block ${typography.label}`}>{name || "Performer"}</span>
+            <span class={`block ${typography.xsMuted} mt-0.5`}>{email || ""}</span>
           </div>
           {#each dropdownLinks as { label, href }}
             <Button
@@ -205,8 +206,8 @@
       </div>
 
       <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-        <p class="text-base font-semibold text-gray-900 dark:text-white m-0">{name || "Performer"}</p>
-        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5 m-0">{email || ""}</p>
+        <p class={`${typography.h4} m-0`}>{name || "Performer"}</p>
+        <p class={`${typography.smMuted} mt-0.5 m-0`}>{email || ""}</p>
       </div>
 
       <div class="py-2">

package/dist/patterns/navigation/Header.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.svelte.js"],"names":[],"mappings":";;;;;AA6MA;;WA/KuD,MAAM;aAAW,MAAM;YAAU,MAAM;eAAa,GAAG,EAAE;oBAAkB,GAAG,EAAE;qBAAmB,OAAO;WA+K5G;wBA/KlC;IAAE,cAAc,CAAC,WAAW;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE"}
+{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.svelte.js"],"names":[],"mappings":";;;;;AA+MA;;WA/KuD,MAAM;aAAW,MAAM;YAAU,MAAM;eAAa,GAAG,EAAE;oBAAkB,GAAG,EAAE;qBAAmB,OAAO;WA+K5G;wBA/KlC;IAAE,cAAc,CAAC,WAAW;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE"}

package/dist/patterns/page/PageHeader.svelte

@@ -1,5 +1,6 @@
 <script>
   import Breadcrumb from '../../primitives/Breadcrumb/Breadcrumb.svelte';
+  import { typography } from '../../tokens/typography';
 
   let {
     title = '',
@@ -19,10 +20,10 @@
   <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
     <div>
       {#if title}
-        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">{title}</h1>
+        <h1 class={typography.h1}>{title}</h1>
       {/if}
       {#if subtitle}
-        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{subtitle}</p>
+        <p class={`mt-1 ${typography.smMuted}`}>{subtitle}</p>
       {/if}
     </div>
 

package/dist/patterns/page/PageHeader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageHeader.svelte.js"],"names":[],"mappings":";;;;;AA2CA;YAnC6B,MAAM;eAAa,MAAM;iBAAe,GAAG,EAAE;eAAa,OAAO;YAAU,MAAM;aAAW,GAAG;WAmCnE;wBAnCtC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"PageHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageHeader.svelte.js"],"names":[],"mappings":";;;;;AA6CA;YAnC6B,MAAM;eAAa,MAAM;iBAAe,GAAG,EAAE;eAAa,OAAO;YAAU,MAAM;aAAW,GAAG;WAmCnE;wBAnCtC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE"}

package/dist/patterns/page/PageLayout.svelte

@@ -1,6 +1,7 @@
 <script>
   import Breadcrumb from '../../primitives/Breadcrumb/Breadcrumb.svelte';
   import Card from '../../primitives/Card.svelte';
+  import { typography } from '../../tokens/typography';
 
   let {
     breadcrumb = [],
@@ -16,7 +17,7 @@
 </script>
 
 {#if showHeader}
-  <nav class="pt-4 px-4 text-gray-900 dark:text-white text-lg font-semibold">
+  <nav class={`pt-4 px-4 ${typography.h3}`}>
     <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
       <Breadcrumb data={breadcrumb} {title} {subtitle} />
       {#if actions}

package/dist/patterns/page/PageLayout.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLayout.svelte.js"],"names":[],"mappings":";;;;;AAgDA;iBAtCkC,GAAG,EAAE;YAAU,MAAM;eAAa,MAAM;cAAY,MAAM;eAAa,MAAM;gBAAc,MAAM;iBAAe,OAAO;cAAY,GAAG;aAAW,GAAG;WAsC7H;wBAtCtC;IAAE,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"PageLayout.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLayout.svelte.js"],"names":[],"mappings":";;;;;AAkDA;iBAtCkC,GAAG,EAAE;YAAU,MAAM;eAAa,MAAM;cAAY,MAAM;eAAa,MAAM;gBAAc,MAAM;iBAAe,OAAO;cAAY,GAAG;aAAW,GAAG;WAsC7H;wBAtCtC;IAAE,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE"}

package/dist/patterns/page/PageLoader.svelte

@@ -2,6 +2,7 @@
   import Spinner from "../../primitives/Spinner/Spinner.svelte";
   import Alert from "../../primitives/Alert/Alert.svelte";
   import Button from "../../primitives/Button/Button.svelte";
+  import { typography } from '../../tokens/typography';
 
   let {
     isLoading = true,
@@ -20,7 +21,7 @@
     <div class="text-center">
       <Spinner />
       {#if loadingMessage}
-        <p class="mt-4 text-gray-500 dark:text-gray-400">{loadingMessage}</p>
+        <p class={`mt-4 ${typography.textMuted}`}>{loadingMessage}</p>
       {/if}
     </div>
   </div>

package/dist/patterns/page/PageLoader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageLoader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.svelte.js"],"names":[],"mappings":";;;;;AAkDA;gBAtCiC,OAAO;YAAU,GAAG;qBAAmB,MAAM;iBAAe,MAAM;gBAAc,OAAO;;gBAAkC,MAAM;cAAY,GAAG;WAsCtH;wBAtCtC;IAAE,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,WAAW;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"PageLoader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.svelte.js"],"names":[],"mappings":";;;;;AAoDA;gBAtCiC,OAAO;YAAU,GAAG;qBAAmB,MAAM;iBAAe,MAAM;gBAAc,OAAO;;gBAAkC,MAAM;cAAY,GAAG;WAsCtH;wBAtCtC;IAAE,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,WAAW;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/patterns/page/SectionHeader.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { typography } from '../../tokens/typography';
+
   let {
     title = '',
     description = '',
@@ -17,10 +19,10 @@
   <div class="flex items-center justify-between gap-4">
     <div class="flex items-center gap-2">
       {#if title}
-        <h2 class="text-lg font-medium text-gray-900 dark:text-white">{title}</h2>
+        <h2 class={typography.h3}>{title}</h2>
       {/if}
       {#if count !== null}
-        <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 rounded-full">
+        <span class={`inline-flex items-center justify-center px-2 py-0.5 ${typography.xsMuted} bg-gray-100 dark:bg-gray-700 rounded-full`}>
           {count}
         </span>
       {/if}
@@ -34,6 +36,6 @@
   </div>
 
   {#if description}
-    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{description}</p>
+    <p class={`mt-1 ${typography.smMuted}`}>{description}</p>
   {/if}
 </div>

package/dist/patterns/page/SectionHeader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/SectionHeader.svelte.js"],"names":[],"mappings":";;;;;AA6CA;YAzC6B,MAAM;kBAAgB,MAAM;YAAU,GAAG;cAAY,OAAO;YAAU,MAAM;aAAW,GAAG;WAyC3D;wBAzCzC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"SectionHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/SectionHeader.svelte.js"],"names":[],"mappings":";;;;;AAiDA;YAzC6B,MAAM;kBAAgB,MAAM;YAAU,GAAG;cAAY,OAAO;YAAU,MAAM;aAAW,GAAG;WAyC3D;wBAzCzC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE"}

package/dist/primitives/Accordion/Accordion.svelte

@@ -50,9 +50,10 @@
   });
 
   // Flowbite-native classes
+  // Note: overflow-hidden was removed to allow dropdowns/menus inside accordion items to render outside the container
   let containerClasses = $derived(flush
     ? "divide-y divide-gray-200 dark:divide-gray-700"
-    : "border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden divide-y divide-gray-200 dark:divide-gray-700");
+    : "border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700");
 </script>
 
 <div class="{containerClasses} {className}" data-accordion={multiple ? "open" : "collapse"} {...restProps}>

package/dist/primitives/Accordion/Accordion.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/Accordion.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;KAMK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAmDH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/Accordion.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;KAMK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAoDH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/primitives/Accordion/AccordionItem.svelte

@@ -12,6 +12,7 @@
   import { slide } from "svelte/transition";
   import type { Writable } from "svelte/store";
   import { ChevronUpOutline } from "../Icons";
+  import { typography } from "../../tokens/typography";
 
   interface Props {
     open?: boolean;
@@ -57,7 +58,7 @@
   // Flowbite-native header classes
   let headerClasses = $derived([
     "flex items-center justify-between w-full p-5 font-medium text-left",
-    "text-gray-500 dark:text-gray-400",
+    typography.smMuted,
     "bg-gray-100 dark:bg-gray-800",
     "hover:bg-gray-200 dark:hover:bg-gray-700",
     "focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800",
@@ -74,7 +75,7 @@
       aria-expanded={isOpen}
       onclick={handleClick}
     >
-      <span class="text-gray-900 dark:text-white">
+      <span class={typography.body}>
         {#if header}{@render header()}{:else}Accordion Item{/if}
       </span>
       <!-- Flowbite arrow icon -->
@@ -84,8 +85,8 @@
 
   {#if isOpen}
     <div transition:slide={{ duration: 200 }}>
-      <div class="p-5 {flush ? '' : 'border border-t-0 border-gray-200 dark:border-gray-700'} dark:bg-gray-900">
-        <p class="text-gray-500 dark:text-gray-400">
+      <div class="p-5 {flush ? '' : 'border border-t-0 border-gray-200 dark:border-gray-700'}">
+        <p class={typography.bodyMuted}>
           {#if children}{@render children()}{/if}
         </p>
       </div>

package/dist/primitives/Accordion/AccordionItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/AccordionItem.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;KAOK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA6EH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/AccordionItem.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;KAOK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA8EH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/primitives/BottomSheet/BottomSheet.svelte

@@ -3,6 +3,7 @@
   import { fly, fade } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import type { Snippet } from 'svelte';
+  import { typography } from "../../tokens/typography";
 
   interface Props {
     /** Whether the bottom sheet is visible */
@@ -81,7 +82,7 @@
 
       {#if title}
         <div class="px-6 pb-4 border-b border-gray-200 dark:border-gray-700 shrink-0">
-          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{title}</h3>
+          <h3 class={typography.h3}>{title}</h3>
         </div>
       {/if}
 

package/dist/primitives/BottomSheet/BottomSheet.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/BottomSheet/BottomSheet.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAmFH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"BottomSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/BottomSheet/BottomSheet.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAoFH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/primitives/Breadcrumb/Breadcrumb.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { ChevronRightOutline, HomeSolid } from "../Icons";
+  import { typography } from "../../tokens/typography";
 
   interface BreadcrumbItem {
     name: string;
@@ -37,7 +38,7 @@
 
 <div class="flex flex-col items-start gap-2 min-w-0">
   {#if data.length > 0}
-    <nav class="flex items-center text-sm font-medium text-gray-500 dark:text-gray-400 {className}" aria-label="Breadcrumb">
+    <nav class={`flex items-center ${typography.smMuted} font-medium ${className}`} aria-label="Breadcrumb">
       <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-wrap">
         {#each data as crumb, index}
           <li class="inline-flex items-center">
@@ -48,20 +49,20 @@
               <a
                 href={crumb.href}
                 onclick={() => handleClick(crumb)}
-                class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white"
+                class="{typography.smMuted} inline-flex items-center font-medium hover:text-blue-600 dark:hover:text-white"
               >
                 <HomeSolid class="w-3 h-3 me-2.5" />
                 {crumb.name}
               </a>
             {:else if index === data.length - 1}
-              <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400 max-w-48 truncate" title={crumb.name}>
+              <span class={`ms-1 ${typography.smMuted} font-medium md:ms-2 max-w-48 truncate`} title={crumb.name}>
                 {crumb.name}
               </span>
             {:else}
               <a
                 href={crumb.href}
                 onclick={() => handleClick(crumb)}
-                class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2 dark:text-gray-400 dark:hover:text-white max-w-48 truncate"
+                class="{typography.smMuted} ms-1 font-medium hover:text-blue-600 md:ms-2 dark:hover:text-white max-w-48 truncate"
                 title={crumb.name}
               >
                 {crumb.name}
@@ -81,7 +82,7 @@
         </h1>
       {/if}
       {#if subtitle}
-        <p class="text-sm text-gray-500 dark:text-gray-400">{subtitle}</p>
+        <p class={typography.smMuted}>{subtitle}</p>
       {/if}
     </div>
   {/if}

package/dist/primitives/Breadcrumb/Breadcrumb.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Breadcrumb/Breadcrumb.svelte.ts"],"names":[],"mappings":"AAME,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,6BAA6B;IAC7B,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC3C;AAiEH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Breadcrumb/Breadcrumb.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,6BAA6B;IAC7B,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC3C;AAkEH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/primitives/Button/Button.svelte

@@ -22,6 +22,7 @@
    * Sizes (Flowbite native): xs, sm, md, lg, xl
    */
   import { CheckOutline } from '../Icons';
+  import { twMerge } from 'tailwind-merge';
 
   /** @type {{
     variant?: string,
@@ -116,7 +117,7 @@
   // Variant classes with all states in Tailwind (no focus rings - design decision)
   const variantClasses = {
     default: "text-white bg-blue-700 border border-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700",
-    alternative: "text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700",
+    alternative: "text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700",
     outline: "text-blue-700 bg-transparent border border-blue-700 hover:text-white hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500",
     red: "text-white bg-red-700 border border-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700",
     "red-outline": "text-red-700 bg-transparent border border-red-700 hover:text-white hover:bg-red-800 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600",
@@ -131,20 +132,25 @@
     // Menu items - full width, left-aligned, for dropdowns/sheets and sidebar nav
     "menu-item": "w-full text-left text-gray-900 bg-transparent border-transparent hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600",
     // Danger menu item - red text version
-    "menu-item-danger": "w-full text-left text-red-600 bg-transparent border-transparent hover:bg-red-50 dark:text-red-500 dark:hover:bg-gray-700",
+    "menu-item-danger": "w-full text-left text-red-600 bg-transparent border-transparent hover:bg-red-50 dark:text-red-500 dark:hover:bg-gray-600",
     // Selectable card - bordered card-like button for list selections
     card: "w-full text-left text-gray-900 bg-white border border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700",
     // Search result item - blue hover for search dropdowns
     "search-result": "w-full text-left text-gray-900 bg-transparent border-transparent hover:bg-blue-50 focus:bg-blue-50 dark:text-white dark:hover:bg-blue-900/20 dark:focus:bg-blue-900/20",
     // Sidebar toggle - compact pill for sidebar expand/collapse
     "sidebar-toggle": "w-6 h-7 text-gray-900 bg-blue-100 border border-blue-200 hover:bg-blue-200 shadow-lg dark:text-white dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700",
+    // Bottom navigation item - vertical layout, transparent, for mobile nav bars
+    nav: "flex-col h-full py-2 text-gray-500 bg-transparent border-transparent hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-500",
+    // Calendar day cell - base styling with hover, colors overridden via className
+    "calendar-day": "border-transparent text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700",
   };
 
-  // Active state classes for ghost, toggle, and menu-item
+  // Active state classes for ghost, toggle, menu-item, and nav
   const activeClasses = {
     ghost: "text-blue-700 bg-blue-50 dark:text-white dark:bg-gray-900",
-    toggle: "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700",
+    toggle: "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 dark:text-white dark:bg-blue-600 dark:border-blue-600 dark:hover:bg-blue-700",
     "menu-item": "bg-blue-50 dark:bg-gray-700",
+    nav: "text-blue-600 dark:text-blue-500",
   };
 
   // Disabled classes
@@ -159,14 +165,16 @@
     if (resolvedVariant === "card") return cardSizes[size] || cardSizes.md;
     if (resolvedVariant === "link") return "text-sm";
     if (resolvedVariant === "sidebar-toggle") return ""; // Fixed dimensions in variant
+    if (resolvedVariant === "nav") return ""; // Nav has sizing in variant class
     return sizeClasses[size] || sizeClasses.md;
   })());
 
   let variantClass = $derived((() => {
     if (success) return variantClasses.success;
     if (disabled && !loading && !success) return disabledClasses;
-    if (active && (resolvedVariant === "ghost" || resolvedVariant === "toggle" || resolvedVariant === "menu-item")) {
-      return (activeClasses[resolvedVariant] || "") + " " + (variantClasses[resolvedVariant] || "");
+    if (active && activeClasses[resolvedVariant]) {
+      // When active, use ONLY active classes (they include all necessary styling)
+      return activeClasses[resolvedVariant];
     }
     return variantClasses[resolvedVariant] || variantClasses.default;
   })());
@@ -182,7 +190,7 @@
   // Use justify-between when there's trailing content (e.g., chevrons in nav items)
   let hasTrailing = $derived(typeof trailing === 'function' || trailing);
 
-  let buttonClasses = $derived([
+  let buttonClasses = $derived(twMerge(
     "relative",
     isLeftAligned
       ? (hasTrailing ? "flex items-center justify-between" : "flex items-center justify-start")
@@ -198,7 +206,7 @@
     variantClass,
     effectiveDisabled ? "cursor-not-allowed" : "cursor-pointer",
     className
-  ].filter(Boolean).join(" "));
+  ));
 </script>
 
 {#if href}

package/dist/primitives/Button/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAgQA;;cAfc,MAAM;WACT,MAAM;eACF,OAAO;cACR,OAAO;cACP,OAAO;kBACH,MAAM;aACX,OAAO;WACT,MAAM,GAAG,IAAI;WACb,QAAQ,GAAG,QAAQ,GAAG,OAAO;eACzB,GAAG;eACH,GAAG;YACN,MAAM;cACJ,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;WAGgB"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAyQA;;cAfc,MAAM;WACT,MAAM;eACF,OAAO;cACR,OAAO;cACP,OAAO;kBACH,MAAM;aACX,OAAO;WACT,MAAM,GAAG,IAAI;WACb,QAAQ,GAAG,QAAQ,GAAG,OAAO;eACzB,GAAG;eACH,GAAG;YACN,MAAM;cACJ,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;WAGgB"}

package/dist/primitives/Button/ButtonSaveDemo.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Button from "./Button.svelte";
+  import { typography } from "../../tokens/typography";
 
   let loading = $state(false);
   let success = $state(false);
@@ -20,5 +21,5 @@
 
 <div class="flex gap-4 items-center">
   <Button onclick={handleSave} {loading} {success}>Save</Button>
-  <button class="text-sm text-gray-500 dark:text-gray-400 underline" onclick={resetState}>Reset (simulates user edit)</button>
+  <button class={`${typography.smMuted} underline`} onclick={resetState}>Reset (simulates user edit)</button>
 </div>

package/dist/primitives/Button/ButtonSaveDemo.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonSaveDemo.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/ButtonSaveDemo.svelte.ts"],"names":[],"mappings":"AAgCA,QAAA,MAAM,cAAc,2DAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ButtonSaveDemo.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/ButtonSaveDemo.svelte.ts"],"names":[],"mappings":"AAkCA,QAAA,MAAM,cAAc,2DAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/primitives/Card.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <div
-  class="bg-white dark:bg-gray-800 rounded-lg shadow {border ? 'border border-gray-200 dark:border-gray-700' : ''} {padding ? 'p-6' : ''} {horizontal ? 'flex flex-row' : ''} {className}"
+  class="bg-white dark:bg-gray-900 rounded-lg shadow-md {border ? 'border border-gray-200 dark:border-gray-700' : ''} {padding ? 'p-6' : ''} {horizontal ? 'flex flex-row' : ''} {className}"
   {...restProps}
 >
   {#if children}{@render children()}{/if}

package/dist/primitives/DarkModeToggle.svelte

@@ -2,6 +2,7 @@
   import { onMount } from "svelte";
   import SunIcon from "./Icons/SunIcon.svelte";
   import MoonIcon from "./Icons/MoonIcon.svelte";
+  import Button from "./Button/Button.svelte";
 
   interface Props {
     /** Container selector for applying dark class */
@@ -89,49 +90,47 @@
   );
 </script>
 
-<div class="flex w-full items-center justify-center py-4 transition-all">
-  <button
-    onclick={toggleTheme}
-    ontouchend={(e) => (e.currentTarget as HTMLElement).blur()}
-    class="relative flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded-lg border border-gray-200 bg-white text-gray-900 transition-all hover:border-blue-500 hover:shadow-md focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
-    aria-label="Toggle theme"
-    title={titleText}
+<Button
+  variant="alternative"
+  onclick={toggleTheme}
+  class="relative h-10 w-10 overflow-hidden p-0"
+  aria-label="Toggle theme"
+  title={titleText}
+>
+  <span
+    class="text-amber-500 transition-all duration-300 {themeMode === 'light'
+      ? 'scale-100 rotate-0 opacity-100'
+      : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
   >
-    <span
-      class="text-amber-500 transition-all duration-300 {themeMode === 'light'
-        ? 'scale-100 rotate-0 opacity-100'
-        : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
-    >
-      <SunIcon size="20" />
-    </span>
-
-    <span
-      class="transition-all duration-300 {themeMode === 'dark'
-        ? 'scale-100 rotate-0 opacity-100'
-        : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
-    >
-      <MoonIcon size="20" color="white" />
-    </span>
-
-    {#if themeMode === "auto"}
-      <div class="absolute inset-0 overflow-hidden rounded-lg">
-        <div
-          class="absolute flex h-full w-full items-center justify-center bg-white"
-          style="clip-path: polygon(0 0, 100% 0, 0 100%)"
-        >
-          <span class="-translate-x-1 -translate-y-1 text-amber-500">
-            <SunIcon size="12" />
-          </span>
-        </div>
-        <div
-          class="absolute flex h-full w-full items-center justify-center bg-gray-800"
-          style="clip-path: polygon(100% 0, 100% 100%, 0 100%)"
-        >
-          <span class="translate-x-1 translate-y-1">
-            <MoonIcon size="12" color="white" />
-          </span>
-        </div>
+    <SunIcon size="20" />
+  </span>
+
+  <span
+    class="transition-all duration-300 {themeMode === 'dark'
+      ? 'scale-100 rotate-0 opacity-100'
+      : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
+  >
+    <MoonIcon size="20" color="white" />
+  </span>
+
+  {#if themeMode === "auto"}
+    <div class="absolute inset-0 overflow-hidden rounded-lg">
+      <div
+        class="absolute flex h-full w-full items-center justify-center bg-white"
+        style="clip-path: polygon(0 0, 100% 0, 0 100%)"
+      >
+        <span class="-translate-x-1 -translate-y-1 text-amber-500">
+          <SunIcon size="12" />
+        </span>
+      </div>
+      <div
+        class="absolute flex h-full w-full items-center justify-center bg-gray-800"
+        style="clip-path: polygon(100% 0, 100% 100%, 0 100%)"
+      >
+        <span class="translate-x-1 translate-y-1">
+          <MoonIcon size="12" color="white" />
+        </span>
       </div>
-    {/if}
-  </button>
-</div>
+    </div>
+  {/if}
+</Button>

package/dist/primitives/DarkModeToggle.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DarkModeToggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/DarkModeToggle.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAyHH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DarkModeToggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/DarkModeToggle.svelte.ts"],"names":[],"mappings":"AASE,UAAU,KAAK;IACb,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAwHH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}