@getmicdrop/svelte-components 5.1.3 → 5.3.0

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.stories.svelte

@@ -18,15 +18,14 @@
       },
     },
   });
-
 </script>
 
 <script>
-    import Button from '../Button/Button.svelte';
+  import Button from '../Button/Button.svelte';
 
-  let showBasic = false;
-  let showWithActions = false;
-  let showWithTitle = false;
+  let showBasic = $state(false);
+  let showWithActions = $state(false);
+  let showWithTitle = $state(false);
 </script>
 
 
@@ -38,11 +37,11 @@
 />
 
 <Story name="With Title">
-  <Button on:click={() => (showWithTitle = true)}>Open With Title</Button>
+  <Button onclick={() => (showWithTitle = true)}>Open With Title</Button>
   <BottomSheet
     show={showWithTitle}
     title="Bottom Sheet Title"
-    on:close={() => (showWithTitle = false)}
+    onclose={() => (showWithTitle = false)}
   >
     <p>This bottom sheet has a title at the top.</p>
     <p>The title helps provide context for the sheet's purpose.</p>
@@ -50,30 +49,30 @@
 </Story>
 
 <Story name="With Actions">
-  <Button on:click={() => (showWithActions = true)}>Open With Actions</Button>
+  <Button onclick={() => (showWithActions = true)}>Open With Actions</Button>
   <BottomSheet
     show={showWithActions}
     title="Confirm Action"
-    on:close={() => (showWithActions = false)}
+    onclose={() => (showWithActions = false)}
   >
     <p>Are you sure you want to proceed with this action?</p>
-    <p slot="actions">
-      <Button variant="secondary" on:click={() => (showWithActions = false)}>
+    {#snippet actions()}
+      <Button variant="alternative" onclick={() => (showWithActions = false)}>
         Cancel
       </Button>
-      <Button variant="primary" on:click={() => (showWithActions = false)}>
+      <Button variant="default" onclick={() => (showWithActions = false)}>
         Confirm
       </Button>
-    </p>
+    {/snippet}
   </BottomSheet>
 </Story>
 
 <Story name="Long Content">
-  <Button on:click={() => showBasic = true}>Open With Long Content</Button>
+  <Button onclick={() => showBasic = true}>Open With Long Content</Button>
   <BottomSheet
     show={showBasic}
     title="Privacy Policy"
-    on:close={() => (showBasic = false)}
+    onclose={() => (showBasic = false)}
   >
     <div>
       {#each Array(20) as _, i}

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

@@ -1,28 +1,8 @@
 export default BottomSheet;
-type BottomSheet = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type BottomSheet = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
 };
-declare const BottomSheet: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+declare const BottomSheet: import("svelte").Component<Record<string, never>, {}, "">;
 import BottomSheet from './BottomSheet.svelte';
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
 //# sourceMappingURL=BottomSheet.stories.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/BottomSheet/BottomSheet.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAuFA;;;;mBAAuH;wBAlF7F,sBAAsB;6CAyEH,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;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;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"BottomSheet.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/BottomSheet/BottomSheet.stories.svelte.js"],"names":[],"mappings":";;;;;AA6EA,qFAA0D;wBAxEhC,sBAAsB"}

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"}