@getmicdrop/svelte-components 5.1.3 → 5.2.1

package/dist/primitives/Badges/Badge.svelte.d.ts

@@ -1,64 +1,33 @@
-export default Badge;
-type Badge = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    size?: "xs" | "sm" | "md" | "lg" | undefined;
-    className?: string | undefined;
-    pill?: boolean | undefined;
-    variant?: string | undefined;
-    textColor?: string | null | undefined;
-    bgColor?: string | null | undefined;
-    showDot?: boolean | undefined;
-    shape?: "rounded" | "pill" | undefined;
-    large?: boolean | undefined;
-}, {
-    leftIcon: {};
-    default: {};
-}>, {
-    click: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    leftIcon: {};
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    size?: "xs" | "sm" | "md" | "lg" | undefined;
-    className?: string | undefined;
-    pill?: boolean | undefined;
-    variant?: string | undefined;
-    textColor?: string | null | undefined;
-    bgColor?: string | null | undefined;
-    showDot?: boolean | undefined;
-    shape?: "rounded" | "pill" | undefined;
-    large?: boolean | undefined;
-}, {
-    leftIcon: {};
-    default: {};
-}>, {
-    click: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    leftIcon: {};
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import type { Snippet } from 'svelte';
+type Size = "xs" | "sm" | "md" | "lg" | "small" | "medium" | "large";
+type Variant = "neutral" | "success" | "warning" | "error" | "danger" | "info" | "red" | "blue" | "purple" | "green" | "orange" | "yellow" | "gray" | "pink" | "indigo" | "cyan" | "notification";
+interface Props {
+    /** Size variant */
+    size?: Size;
+    /** Additional CSS classes */
+    className?: string;
+    /** Semantic or color variant */
+    variant?: Variant;
+    /** Custom text color (hex) - overrides variant */
+    textColor?: string | null;
+    /** Custom background color (hex or rgba) - overrides variant */
+    bgColor?: string | null;
+    /** Show status dot before text (uses variant color) */
+    showDot?: boolean;
+    /** Pill mode for counts/notifications (circular, minimal padding) */
+    pill?: boolean;
+    /** Border radius style - default or full pill */
+    shape?: "rounded" | "pill";
+    /** Large size (Flowbite API compatibility) */
+    large?: boolean;
+    /** Click handler callback */
+    onclick?: (e: MouseEvent) => void;
+    /** Left icon slot */
+    leftIcon?: Snippet;
+    /** Child content */
+    children?: Snippet;
 }
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;
 //# sourceMappingURL=Badge.svelte.d.ts.map

package/dist/primitives/Badges/Badge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Badges/Badge.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA8KA;;;;;;;;;;;;;;;;;;;;eAA8M;sCATxK,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Badges/Badge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACrE,KAAK,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAC5E,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAC;AAEnH,UAAU,KAAK;IACb,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qEAAqE;IACrE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iDAAiD;IACjD,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkHH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/primitives/BottomSheet/BottomSheet.svelte

@@ -1,37 +1,55 @@
-<script>
-  import { createEventDispatcher, onDestroy } from "svelte";
+<script lang="ts">
+  import { onDestroy } from "svelte";
   import { fly, fade } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
+  import type { Snippet } from 'svelte';
 
-  export let show = false;
-  export let title = "";
+  interface Props {
+    /** Whether the bottom sheet is visible */
+    show?: boolean;
+    /** Title displayed in the header */
+    title?: string;
+    /** Callback when the sheet should close */
+    onclose?: () => void;
+    /** Main content */
+    children?: Snippet;
+    /** Actions slot (footer buttons) */
+    actions?: Snippet;
+  }
 
-  const dispatch = createEventDispatcher();
+  let {
+    show = false,
+    title = '',
+    onclose,
+    children,
+    actions
+  }: Props = $props();
 
   function close() {
-    dispatch("close");
+    onclose?.();
   }
 
-  function handleBackdropClick(e) {
+  function handleBackdropClick(e: MouseEvent) {
     if (e.target === e.currentTarget) {
       close();
     }
   }
 
-  function handleKeydown(e) {
+  function handleKeydown(e: KeyboardEvent) {
     if (e.key === "Escape" && show) {
       close();
     }
   }
 
-  // Lock body scroll when sheet is open
-  $: if (typeof document !== "undefined") {
-    if (show) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
+  $effect(() => {
+    if (typeof document !== "undefined") {
+      if (show) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
     }
-  }
+  });
 
   onDestroy(() => {
     if (typeof document !== "undefined") {
@@ -40,44 +58,40 @@
   });
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 {#if show}
-  <!-- Backdrop -->
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     class="fixed inset-0 z-50 flex items-end md:items-center md:justify-center bg-gray-900/50 dark:bg-gray-900/80"
-    on:click={handleBackdropClick}
+    onclick={handleBackdropClick}
     transition:fade={{ duration: 200 }}
   >
-    <!-- Bottom Sheet / Modal Container -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       class="w-full max-h-[90dvh] md:max-w-lg md:max-h-[80vh] md:m-4 bg-white dark:bg-gray-800 rounded-t-xl md:rounded-lg shadow-xl flex flex-col overflow-hidden"
-      on:click|stopPropagation
+      onclick={(e) => e.stopPropagation()}
       transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
     >
-      <!-- Handle bar (mobile only) -->
       <div class="flex justify-center pt-3 pb-2 shrink-0 md:hidden">
         <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
       </div>
 
-      <!-- Header with title -->
       {#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>
         </div>
       {/if}
 
-      <!-- Content -->
       <div class="flex-1 overflow-y-auto overscroll-contain p-4 px-6">
-        <slot />
+        {@render children?.()}
       </div>
 
-      <!-- Actions slot (optional) -->
-      {#if $$slots.actions}
+      {#if actions}
         <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 shrink-0 flex flex-col gap-3">
-          <slot name="actions" />
+          {@render actions?.()}
         </div>
       {/if}
     </div>

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

@@ -1,52 +1,17 @@
-export default BottomSheet;
-type BottomSheet = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    title?: string | undefined;
-    show?: boolean | undefined;
-}, {
-    default: {};
-    actions: {};
-}>, {
-    click: PointerEvent;
-    close: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    actions: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const BottomSheet: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    title?: string | undefined;
-    show?: boolean | undefined;
-}, {
-    default: {};
-    actions: {};
-}>, {
-    click: PointerEvent;
-    close: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    actions: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Whether the bottom sheet is visible */
+    show?: boolean;
+    /** Title displayed in the header */
+    title?: string;
+    /** Callback when the sheet should close */
+    onclose?: () => void;
+    /** Main content */
+    children?: Snippet;
+    /** Actions slot (footer buttons) */
+    actions?: Snippet;
 }
+declare const BottomSheet: import("svelte").Component<Props, {}, "">;
+type BottomSheet = ReturnType<typeof BottomSheet>;
+export default BottomSheet;
 //# sourceMappingURL=BottomSheet.svelte.d.ts.map

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.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAqGA;;;;;;;;;;;;;;eAA+I;sCATzG,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,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;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"}

package/dist/primitives/Breadcrumb/Breadcrumb.svelte

@@ -1,41 +1,56 @@
-<script>
-  import { createEventDispatcher } from "svelte";
+<script lang="ts">
   import { ChevronRightOutline, HomeSolid } from "../Icons";
 
-  /** @type {Array<{name: string, href: string}>} */
-  export let data = [];
-  /** @type {string} Additional CSS classes */
-  export let className = "";
-  /** @type {boolean} Show built-in home icon for first item */
-  export let showHomeIcon = true;
-  /** @type {string} Page title displayed below breadcrumb */
-  export let title = "";
-  /** @type {string} Subtitle displayed below title */
-  export let subtitle = "";
+  interface BreadcrumbItem {
+    name: string;
+    href: string;
+  }
+
+  interface Props {
+    /** Breadcrumb items array */
+    data?: BreadcrumbItem[];
+    /** Additional CSS classes */
+    className?: string;
+    /** Show built-in home icon for first item */
+    showHomeIcon?: boolean;
+    /** Page title displayed below breadcrumb */
+    title?: string;
+    /** Subtitle displayed below title */
+    subtitle?: string;
+    /** Click handler callback */
+    onclick?: (crumb: BreadcrumbItem) => void;
+  }
 
-  const dispatch = createEventDispatcher();
+  let {
+    data = [],
+    className = '',
+    showHomeIcon = true,
+    title = '',
+    subtitle = '',
+    onclick
+  }: Props = $props();
 
-  function handleClick(crumb) {
-    dispatch("click", crumb);
+  function handleClick(crumb: BreadcrumbItem) {
+    onclick?.(crumb);
   }
 </script>
 
-<div class="flex flex-col gap-4">
+<div class="flex flex-col gap-4 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">
       <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">
             {#if index > 0}
-              <ChevronRightOutline class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" />
+              <ChevronRightOutline class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" />
             {/if}
             {#if index === 0 && showHomeIcon}
               <a
                 href={crumb.href}
-                on:click={() => handleClick(crumb)}
+                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"
               >
-                <HomeSolid class="w-3 h-3 me-2.5" aria-hidden="true" />
+                <HomeSolid class="w-3 h-3 me-2.5" />
                 {crumb.name}
               </a>
             {:else if index === data.length - 1}
@@ -45,7 +60,7 @@
             {:else}
               <a
                 href={crumb.href}
-                on:click={() => handleClick(crumb)}
+                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"
                 title={crumb.name}
               >
@@ -61,7 +76,7 @@
   {#if title || subtitle}
     <div class="flex flex-col gap-1">
       {#if title}
-        <h1 class="text-3xl font-semibold text-gray-900 dark:text-white">
+        <h1 class="text-3xl font-semibold text-gray-900 dark:text-white truncate" title={title}>
           {title}
         </h1>
       {/if}

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

@@ -1,45 +1,22 @@
-export default Breadcrumb;
-type Breadcrumb = SvelteComponent<{
-    className?: string | undefined;
-    title?: string | undefined;
-    data?: {
-        name: string;
-        href: string;
-    }[] | undefined;
-    showHomeIcon?: boolean | undefined;
-    subtitle?: string | undefined;
-}, {
-    click: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Breadcrumb: $$__sveltets_2_IsomorphicComponent<{
-    className?: string | undefined;
-    title?: string | undefined;
-    data?: {
-        name: string;
-        href: string;
-    }[] | undefined;
-    showHomeIcon?: boolean | undefined;
-    subtitle?: string | undefined;
-}, {
-    click: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface BreadcrumbItem {
+    name: string;
+    href: string;
+}
+interface Props {
+    /** Breadcrumb items array */
+    data?: BreadcrumbItem[];
+    /** Additional CSS classes */
+    className?: string;
+    /** Show built-in home icon for first item */
+    showHomeIcon?: boolean;
+    /** Page title displayed below breadcrumb */
+    title?: string;
+    /** Subtitle displayed below title */
+    subtitle?: string;
+    /** Click handler callback */
+    onclick?: (crumb: BreadcrumbItem) => void;
 }
+declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;
 //# sourceMappingURL=Breadcrumb.svelte.d.ts.map

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.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuFA;;;;cAdwB,MAAM;cAAQ,MAAM;;;;;;;;mBAckI;6CATjI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"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"}

package/dist/primitives/Button/Button.svelte

@@ -1,6 +1,7 @@
 <script>
   /**
    * Button Component - Flowbite Native (Pure Tailwind)
+   * Migrated to Svelte 5 runes
    *
    * Variants (Flowbite naming):
    *   - default: Primary blue button
@@ -18,21 +19,34 @@
   import Spinner from '../Spinner/Spinner.svelte';
   import { CheckOutline } from '../Icons';
 
-  // Flowbite-native API
-  export let variant = "default";
-  export let size = "md";
-  export let disabled = false;
-  export let loading = false;
-  export let success = false;
-  export let successText = "";
-  export let active = false;
-  export let href = null;
-  /** @type {string | Function} Text content or Svelte 5 snippet (alternative to slot, for Storybook) */
-  export let children = "";
-  /** @type {string} Additional CSS classes */
-  let className = "";
-  export { className as class };
-
+  /** @type {{
+    variant?: string,
+    size?: string,
+    disabled?: boolean,
+    loading?: boolean,
+    success?: boolean,
+    successText?: string,
+    active?: boolean,
+    href?: string | null,
+    children?: any,
+    class?: string,
+    onclick?: (e: MouseEvent) => void,
+    [key: string]: any
+  }} */
+  let {
+    variant = "default",
+    size = "md",
+    disabled = false,
+    loading = false,
+    success = false,
+    successText = "",
+    active = false,
+    href = null,
+    children,
+    class: className = "",
+    onclick,
+    ...restProps
+  } = $props();
 
   // Legacy variant name mapping
   const variantMap = {
@@ -45,8 +59,8 @@
   };
 
   // Resolve legacy names
-  $: resolvedVariant = variantMap[variant] || variant;
-  $: effectiveDisabled = disabled || loading || success;
+  let resolvedVariant = $derived(variantMap[variant] || variant);
+  let effectiveDisabled = $derived(disabled || loading || success);
 
   // Size classes - Flowbite native sizing
   const sizeClasses = {
@@ -93,22 +107,24 @@
   // Disabled classes
   const disabledClasses = "bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500";
 
-  $: sizeClass = resolvedVariant === "icon"
-    ? (iconSizes[size] || iconSizes.sm)
-    : resolvedVariant === "link"
-    ? "text-sm"
-    : (sizeClasses[size] || sizeClasses.md);
+  let sizeClass = $derived(
+    resolvedVariant === "icon"
+      ? (iconSizes[size] || iconSizes.sm)
+      : resolvedVariant === "link"
+      ? "text-sm"
+      : (sizeClasses[size] || sizeClasses.md)
+  );
 
-  $: variantClass = (() => {
+  let variantClass = $derived((() => {
     if (success) return variantClasses.success;
     if (disabled && !loading && !success) return disabledClasses;
     if (active && (resolvedVariant === "ghost" || resolvedVariant === "toggle")) {
       return activeClasses[resolvedVariant];
     }
     return variantClasses[resolvedVariant] || variantClasses.default;
-  })();
+  })());
 
-  $: buttonClasses = [
+  let buttonClasses = $derived([
     "relative",
     "inline-flex items-center justify-center",
     "rounded-lg",
@@ -120,16 +136,19 @@
     variantClass,
     effectiveDisabled ? "cursor-not-allowed" : "cursor-pointer",
     className
-  ].filter(Boolean).join(" ");
+  ].filter(Boolean).join(" "));
 </script>
 
 {#if href}
   <a
     {href}
     class={buttonClasses}
-    on:click
-    {...$$restProps}
+    {onclick}
+    {...restProps}
   >
+    {#if loading}
+      <span class="shimmer-overlay"></span>
+    {/if}
     <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
       {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
     </span>
@@ -143,9 +162,12 @@
   <button
     class={buttonClasses}
     disabled={effectiveDisabled}
-    on:click
-    {...$$restProps}
+    {onclick}
+    {...restProps}
   >
+    {#if loading}
+      <span class="shimmer-overlay"></span>
+    {/if}
     <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
       {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
     </span>
@@ -161,3 +183,37 @@
     {/if}
   </button>
 {/if}
+
+<style>
+  .shimmer-overlay {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    border-radius: inherit;
+  }
+
+  .shimmer-overlay::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.15) 50%,
+      transparent 100%
+    );
+    animation: shimmer 1.5s ease-in-out infinite;
+  }
+
+  @keyframes shimmer {
+    0% {
+      left: -100%;
+    }
+    100% {
+      left: 100%;
+    }
+  }
+</style>