@getmicdrop/svelte-components 5.1.3 → 5.3.0

package/dist/primitives/Alert/Alert.svelte

@@ -1,55 +1,65 @@
-<script>
-    import { createEventDispatcher } from "svelte";
-    import { InfoCircleOutline, CloseOutline } from "../Icons";
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { InfoCircleOutline, CloseOutline } from "../Icons";
 
-    /** @type {string} Alert title */
-    export let title = "";
-    /** @type {string} Alert message */
-    export let message = "";
-    /** @type {'info' | 'success' | 'warning' | 'danger'} Alert type */
-    export let type = "info";
-    /** @type {(() => void) | undefined} Close handler - when provided, shows dismiss button */
-    export let onClose = undefined;
+  interface Props {
+    title?: string;
+    message?: string;
+    type?: 'info' | 'success' | 'warning' | 'danger';
+    onClose?: () => void;
+    onclose?: () => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
 
-    const dispatch = createEventDispatcher();
+  let {
+    title = "",
+    message = "",
+    type = "info",
+    onClose,
+    onclose,
+    children,
+    ...restProps
+  }: Props = $props();
 
-    // Flowbite color classes by type
-    const colorClasses = {
-        info: "text-blue-800 bg-blue-50 dark:bg-gray-800 dark:text-blue-400",
-        success: "text-green-800 bg-green-50 dark:bg-gray-800 dark:text-green-400",
-        warning: "text-yellow-800 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300",
-        danger: "text-red-800 bg-red-50 dark:bg-gray-800 dark:text-red-400",
-    };
+  const colorClasses = {
+    info: "text-blue-800 bg-blue-50 dark:bg-gray-800 dark:text-blue-400",
+    success: "text-green-800 bg-green-50 dark:bg-gray-800 dark:text-green-400",
+    warning: "text-yellow-800 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300",
+    danger: "text-red-800 bg-red-50 dark:bg-gray-800 dark:text-red-400",
+  };
 
-    $: alertClasses = colorClasses[type] || colorClasses.info;
+  let alertClasses = $derived(colorClasses[type] || colorClasses.info);
 
-    function handleClose() {
-        if (onClose) onClose();
-        dispatch("close");
-    }
+  function handleClose() {
+    onClose?.();
+    onclose?.();
+  }
+
+  let showCloseButton = $derived(onClose !== undefined || onclose !== undefined);
 </script>
 
-<div class="flex items-center p-4 mb-4 text-sm rounded-lg {alertClasses}" role="alert">
-    <InfoCircleOutline class="shrink-0 w-4 h-4 me-3" aria-hidden="true" />
-    <span class="sr-only">{type}</span>
-    <div class="flex-1">
-        {#if title}
-            <span class="font-medium">{title}</span>
-        {/if}
-        {#if message}
-            <span class:mt-1={title}>{message}</span>
-        {/if}
-        <slot />
-    </div>
-    {#if onClose}
-        <button
-            type="button"
-            class="ms-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8 {type === 'info' ? 'bg-blue-50 text-blue-500 hover:bg-blue-200 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700' : ''}{type === 'success' ? 'bg-green-50 text-green-500 hover:bg-green-200 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700' : ''}{type === 'warning' ? 'bg-yellow-50 text-yellow-500 hover:bg-yellow-200 dark:bg-gray-800 dark:text-yellow-300 dark:hover:bg-gray-700' : ''}{type === 'danger' ? 'bg-red-50 text-red-500 hover:bg-red-200 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700' : ''}"
-            aria-label="Close"
-            on:click={handleClose}
-        >
-            <span class="sr-only">Close</span>
-            <CloseOutline class="w-3 h-3" aria-hidden="true" />
-        </button>
+<div class="flex items-center p-4 mb-4 text-sm rounded-lg {alertClasses}" role="alert" {...restProps}>
+  <InfoCircleOutline class="shrink-0 w-4 h-4 me-3" />
+  <span class="sr-only">{type}</span>
+  <div class="flex-1">
+    {#if title}
+      <span class="font-medium">{title}</span>
+    {/if}
+    {#if message}
+      <span class:mt-1={title}>{message}</span>
     {/if}
+    {#if children}{@render children()}{/if}
+  </div>
+  {#if showCloseButton}
+    <button
+      type="button"
+      class="ms-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8 {type === 'info' ? 'bg-blue-50 text-blue-500 hover:bg-blue-200 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700' : ''}{type === 'success' ? 'bg-green-50 text-green-500 hover:bg-green-200 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700' : ''}{type === 'warning' ? 'bg-yellow-50 text-yellow-500 hover:bg-yellow-200 dark:bg-gray-800 dark:text-yellow-300 dark:hover:bg-gray-700' : ''}{type === 'danger' ? 'bg-red-50 text-red-500 hover:bg-red-200 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700' : ''}"
+      aria-label="Close"
+      onclick={handleClose}
+    >
+      <span class="sr-only">Close</span>
+      <CloseOutline class="w-3 h-3" />
+    </button>
+  {/if}
 </div>

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

@@ -1,50 +1,14 @@
-export default Alert;
-type Alert = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    title?: string | undefined;
-    message?: string | undefined;
-    type?: "info" | "success" | "warning" | "danger" | undefined;
-    onClose?: (() => void) | undefined;
-}, {
-    default: {};
-}>, {
-    close: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Alert: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    title?: string | undefined;
-    message?: string | undefined;
-    type?: "info" | "success" | "warning" | "danger" | undefined;
-    onClose?: (() => void) | undefined;
-}, {
-    default: {};
-}>, {
-    close: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    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';
+interface Props {
+    title?: string;
+    message?: string;
+    type?: 'info' | 'success' | 'warning' | 'danger';
+    onClose?: () => void;
+    onclose?: () => void;
+    children?: Snippet;
+    [key: string]: unknown;
 }
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;
 //# sourceMappingURL=Alert.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Alert/Alert.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA6EA;;;;cAfW,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;;;;;;;eAe0H;sCATvH,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":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Alert/Alert.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAuDH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/primitives/Avatar/Avatar.svelte

@@ -1,56 +1,66 @@
-<script>
-  /**
-   * Avatar Component - Flowbite-style native implementation
-   *
-   * Displays a user avatar image with optional fallback initials
-   */
-
-  /** @type {string} Image source URL */
-  export let src = "";
-  /** @type {string} Alt text for the image */
-  export let alt = "";
-  /** @type {boolean} Whether to use rounded (circle) shape */
-  export let rounded = false;
-  /** @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'} Size variant */
-  export let size = "md";
-  /** @type {string} Fallback initials when no image */
-  export let initials = "";
-  /** @type {string} Additional CSS classes */
-  let className = "";
-  export { className as class };
-
-  // Size classes
-  const sizeClasses = {
-    xs: "w-6 h-6 text-xs",
-    sm: "w-8 h-8 text-xs",
-    md: "w-10 h-10 text-sm",
-    lg: "w-14 h-14 text-base",
-    xl: "w-20 h-20 text-lg"
-  };
-
-  $: sizeClass = sizeClasses[size] || sizeClasses.md;
-  $: roundedClass = rounded ? "rounded-full" : "rounded";
-</script>
-
-{#if src}
-  <img
-    {src}
-    {alt}
-    class="object-cover {sizeClass} {roundedClass} {className}"
-  />
-{:else if initials}
-  <div
-    class="flex items-center justify-center font-medium text-gray-600 bg-gray-200 dark:bg-gray-700 dark:text-gray-300 {sizeClass} {roundedClass} {className}"
-  >
-    {initials}
-  </div>
-{:else}
-  <!-- Default placeholder -->
-  <div
-    class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 {sizeClass} {roundedClass} {className}"
-  >
-    <svg class="w-1/2 h-1/2 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
-    </svg>
-  </div>
-{/if}
+<script lang="ts">
+  /**
+   * Avatar Component - Flowbite-style native implementation
+   *
+   * Displays a user avatar image with optional fallback initials
+   */
+
+  interface Props {
+    /** Image source URL */
+    src?: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Whether to use rounded (circle) shape */
+    rounded?: boolean;
+    /** Size variant */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Fallback initials when no image */
+    initials?: string;
+    /** Additional CSS classes */
+    class?: string;
+  }
+
+  let {
+    src = '',
+    alt = '',
+    rounded = false,
+    size = 'md',
+    initials = '',
+    class: className = ''
+  }: Props = $props();
+
+  // Size classes
+  const sizeClasses: Record<string, string> = {
+    xs: 'w-6 h-6 text-xs',
+    sm: 'w-8 h-8 text-xs',
+    md: 'w-10 h-10 text-sm',
+    lg: 'w-14 h-14 text-base',
+    xl: 'w-20 h-20 text-lg'
+  };
+
+  let sizeClass = $derived(sizeClasses[size] || sizeClasses.md);
+  let roundedClass = $derived(rounded ? 'rounded-full' : 'rounded');
+</script>
+
+{#if src}
+  <img
+    {src}
+    {alt}
+    class="object-cover {sizeClass} {roundedClass} {className}"
+  />
+{:else if initials}
+  <div
+    class="flex items-center justify-center font-medium text-gray-600 bg-gray-200 dark:bg-gray-700 dark:text-gray-300 {sizeClass} {roundedClass} {className}"
+  >
+    {initials}
+  </div>
+{:else}
+  <!-- Default placeholder -->
+  <div
+    class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 {sizeClass} {roundedClass} {className}"
+  >
+    <svg class="w-1/2 h-1/2 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
+    </svg>
+  </div>
+{/if}

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

@@ -1,37 +1,23 @@
-export default Avatar;
-type Avatar = SvelteComponent<{
-    class?: string | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-    rounded?: boolean | undefined;
-    src?: string | undefined;
-    alt?: string | undefined;
-    initials?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Avatar: $$__sveltets_2_IsomorphicComponent<{
-    class?: string | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-    rounded?: boolean | undefined;
-    src?: string | undefined;
-    alt?: string | undefined;
-    initials?: string | undefined;
-}, {
-    [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;
+/**
+ * Avatar Component - Flowbite-style native implementation
+ *
+ * Displays a user avatar image with optional fallback initials
+ */
+interface Props {
+    /** Image source URL */
+    src?: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Whether to use rounded (circle) shape */
+    rounded?: boolean;
+    /** Size variant */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Fallback initials when no image */
+    initials?: string;
+    /** Additional CSS classes */
+    class?: string;
 }
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;
 //# sourceMappingURL=Avatar.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Avatar/Avatar.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAqEA;;;;;;;;;mBAAqK;6CATxH,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":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Avatar/Avatar.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AAEH,UAAU,KAAK;IACb,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2CH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/primitives/Badges/Badge.svelte

@@ -1,47 +1,58 @@
-<script>
-  /**
-   * Badge Component - Flowbite Native (Pure Tailwind)
-   *
-   * NO DOMAIN LOGIC - This is a pure visual primitive.
-   *
-   * Semantic variants: neutral, success, warning, error, info
-   * Color variants: red, blue, purple, green, orange, yellow, gray, pink, indigo, cyan
-   * Sizes: xs, sm, md (default), lg
-   * Shapes: rounded (default), pill
-   *
-   * For domain-specific badges (roles, statuses), apps should:
-   * 1. Use color variants: <Badge variant="purple">Headliner</Badge>
-   * 2. Or use bgColor/textColor props with centralized constants
-   */
-  import { createEventDispatcher } from "svelte";
+<script lang="ts">
+  import type { Snippet } from 'svelte';
   import { classNames } from "./../../utils/utils.js";
 
-  const dispatch = createEventDispatcher();
-
-  /** @type {"xs"|"sm"|"md"|"lg"} Size variant */
-  export let size = "md";
-  export let className = "";
-  /** @type {string} Semantic or color variant */
-  export let variant = "neutral";
-  /** @type {string|null} Custom text color (hex) - overrides variant */
-  export let textColor = null;
-  /** @type {string|null} Custom background color (hex or rgba) - overrides variant */
-  export let bgColor = null;
-  /** @type {boolean} Show status dot before text (uses variant color) */
-  export let showDot = false;
-  /** @type {boolean} Pill mode for counts/notifications (circular, minimal padding) */
-  export let pill = false;
-  /** @type {"rounded"|"pill"} Border radius style - default or full pill */
-  export let shape = "rounded";
-  /** @type {boolean} Large size (Flowbite API compatibility) */
-  export let large = false;
-
-  // Legacy size name mapping
-  const sizeMap = { "small": "sm", "medium": "md", "large": "lg" };
-  $: resolvedSize = large ? "lg" : (sizeMap[size] || size);
-
-  // Flowbite-native size classes
-  $: sizeClasses = (() => {
+  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;
+  }
+
+  let {
+    size = "md",
+    className = '',
+    variant = "neutral",
+    textColor = null,
+    bgColor = null,
+    showDot = false,
+    pill = false,
+    shape = "rounded",
+    large = false,
+    onclick,
+    leftIcon,
+    children
+  }: Props = $props();
+
+  const sizeMap: Record<string, string> = { "small": "sm", "medium": "md", "large": "lg" };
+  
+  let resolvedSize = $derived(large ? "lg" : (sizeMap[size] || size));
+
+  let sizeClasses = $derived((() => {
     switch (resolvedSize) {
       case "xs":
         return "text-xs px-1.5 py-0.5 font-medium";
@@ -54,22 +65,17 @@
       default:
         return "text-xs px-2.5 py-0.5 font-medium";
     }
-  })();
+  })());
 
-  // Shape classes using Tailwind
-  $: shapeClasses = (() => {
+  let shapeClasses = $derived((() => {
     if (pill) return "rounded-full min-w-5 h-5 px-1.5 justify-center";
     return shape === "pill" ? "rounded-full" : "rounded";
-  })();
+  })());
 
-  // Normalize variant to lowercase
-  $: normalizedVariant = String(variant).toLowerCase();
+  let normalizedVariant = $derived(String(variant).toLowerCase());
 
-  // Flowbite-native color classes for each variant
-  // Pure visual - NO domain logic
-  $: variantClasses = (() => {
+  let variantClasses = $derived((() => {
     switch (normalizedVariant) {
-      // === Semantic variants ===
       case "success":
         return "text-green-800 bg-green-100 dark:bg-green-900 dark:text-green-300";
       case "warning":
@@ -79,9 +85,6 @@
         return "text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-300";
       case "info":
         return "text-blue-800 bg-blue-100 dark:bg-blue-900 dark:text-blue-300";
-
-      // === Flowbite color variants ===
-      // Use these for domain-specific badges (roles, entities, etc.)
       case "red":
         return "text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-300";
       case "blue":
@@ -102,29 +105,24 @@
         return "text-indigo-800 bg-indigo-100 dark:bg-indigo-900 dark:text-indigo-300";
       case "cyan":
         return "text-cyan-800 bg-cyan-100 dark:bg-cyan-900 dark:text-cyan-300";
-
-      // === Special variants ===
       case "notification":
         return "text-white bg-red-500 dark:bg-red-600";
-
-      // === Neutral / default ===
       case "neutral":
       default:
         return "text-gray-800 bg-gray-100 dark:bg-gray-700 dark:text-gray-300";
     }
-  })();
+  })());
 
-  // Custom style for text/bg color overrides
-  $: customStyle = (() => {
-    const styles = [];
+  let customStyle = $derived((() => {
+    const styles: string[] = [];
     if (textColor) styles.push(`color: ${textColor}`);
     if (bgColor) styles.push(`background-color: ${bgColor}`);
-    return styles.length > 0 ? styles.join("; ") : null;
-  })();
+    return styles.length > 0 ? styles.join("; ") : undefined;
+  })());
 </script>
 
-<!-- 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={classNames(
     "inline-flex items-center gap-1.5",
@@ -134,42 +132,11 @@
     className
   )}
   style={customStyle}
-  on:click={(e) => dispatch("click", e)}
+  onclick={(e) => onclick?.(e)}
 >
   {#if showDot}
     <span class="w-1.5 h-1.5 rounded-full bg-current flex-shrink-0"></span>
   {/if}
-  <slot name="leftIcon" />
-  <slot />
+  {@render leftIcon?.()}
+  {@render children?.()}
 </div>
-
-<!--
-  Badge Component - Flowbite Native (Pure Tailwind)
-
-  This is a PRIMITIVE - no domain logic. For domain-specific badges:
-  - Use color variants: <Badge variant="purple">Headliner</Badge>
-  - Or use bgColor prop: <Badge bgColor="#8B5CF6">Custom</Badge>
-
-  Usage:
-    <Badge variant="success">Active</Badge>
-    <Badge variant="purple">Headliner</Badge>
-    <Badge large>Large Badge</Badge>
-
-  With icon:
-    <Badge variant="success"><CheckIcon slot="leftIcon" />Verified</Badge>
-
-  With status dot:
-    <Badge variant="success" showDot>On Sale</Badge>
-
-  Props:
-    Semantic: neutral | success | warning | error | info
-    Colors:   red | blue | purple | green | orange | yellow | gray | pink | indigo | cyan
-    Special:  notification (solid red for count pills)
-    size:     xs | sm | md | lg (or legacy: small | medium | large)
-    large:    boolean (Flowbite API compatibility)
-    shape:    rounded | pill
-    pill:     boolean (notification count style)
-    showDot:  boolean (status indicator dot)
-    textColor: string (override variant text color)
-    bgColor:  string (override variant background color)
--->