@getmicdrop/svelte-components 3.0.0 → 3.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badges/Badge.svelte.js"],"names":[],"mappings":";;;;;AAqLA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAoD"}
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/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"}

package/dist/components/BottomSheet/BottomSheet.stories.svelte

@@ -1,7 +1,9 @@
-<script context="module">
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
   import BottomSheet from './BottomSheet.svelte';
 
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/BottomSheet',
     component: BottomSheet,
     tags: ['autodocs'],
@@ -15,27 +17,18 @@
         description: 'Optional title displayed at the top',
       },
     },
-  };
+  });
+
 </script>
 
 <script>
-  import { Story, Template } from '@storybook/addon-svelte-csf';
-  import Button from '../Button/Button.svelte';
+    import Button from '../Button/Button.svelte';
 
   let showBasic = false;
   let showWithActions = false;
   let showWithTitle = false;
 </script>
 
-<Template let:args>
-  <div>
-    <Button on:click={() => (showBasic = true)}>Open Bottom Sheet</Button>
-    <BottomSheet {...args} show={showBasic} on:close={() => (showBasic = false)}>
-      <p>This is the content of the bottom sheet. It can contain any content you want.</p>
-      <p>On mobile, it slides up from the bottom. On desktop, it appears as a centered modal.</p>
-    </BottomSheet>
-  </div>
-</Template>
 
 <Story
   name="Default"

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

@@ -1,21 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { BottomSheet as component };
-    export let tags: string[];
-    export namespace argTypes {
-        export namespace show {
-            let control: string;
-            let description: string;
-        }
-        export namespace title_1 {
-            let control_1: string;
-            export { control_1 as control };
-            let description_1: string;
-            export { description_1 as description };
-        }
-        export { title_1 as title };
-    }
-}
 export default BottomSheet;
 type BottomSheet = SvelteComponent<{
     [x: string]: never;

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/BottomSheet/BottomSheet.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+FA;;;;mBAAuH;wBA5F7F,sBAAsB;6CAmFH,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/components/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"}

package/dist/components/BottomSheet/BottomSheet.svelte

@@ -1,28 +1,15 @@
 <script>
-  import { onDestroy } from "svelte";
+  import { createEventDispatcher, onDestroy } from "svelte";
   import { fly, fade } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
 
-  /**
-   * @typedef {Object} Props
-   * @property {boolean} [show] - Whether the sheet is visible
-   * @property {string} [title] - Optional title
-   * @property {Function} [onclose] - Close callback
-   * @property {import('svelte').Snippet} [actions] - Actions snippet
-   * @property {import('svelte').Snippet} [children] - Default content
-   */
+  export let show = false;
+  export let title = "";
 
-  /** @type {Props} */
-  let {
-    show = $bindable(false),
-    title = "",
-    onclose,
-    actions,
-    children
-  } = $props();
+  const dispatch = createEventDispatcher();
 
   function close() {
-    onclose?.();
+    dispatch("close");
   }
 
   function handleBackdropClick(e) {
@@ -38,15 +25,13 @@
   }
 
   // Lock body scroll when sheet is open
-  $effect(() => {
-    if (typeof document !== "undefined") {
-      if (show) {
-        document.body.style.overflow = "hidden";
-      } else {
-        document.body.style.overflow = "";
-      }
+  $: if (typeof document !== "undefined") {
+    if (show) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
     }
-  });
+  }
 
   onDestroy(() => {
     if (typeof document !== "undefined") {
@@ -55,134 +40,46 @@
   });
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
+<svelte:window on:keydown={handleKeydown} />
 
 {#if show}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- Backdrop -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    class="bottom-sheet-backdrop"
-    onclick={handleBackdropClick}
+    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}
     transition:fade={{ duration: 200 }}
   >
+    <!-- Bottom Sheet / Modal Container -->
     <div
-      class="bottom-sheet"
-      onclick={(e) => e.stopPropagation()}
+      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
       transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
     >
-      <!-- Handle bar for drag indication -->
-      <div class="bottom-sheet__handle-wrapper">
-        <div class="bottom-sheet__handle"></div>
+      <!-- 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>
 
-      <!-- Optional title -->
+      <!-- Header with title -->
       {#if title}
-        <div class="bottom-sheet__header">
-          <h3 class="bottom-sheet__title">{title}</h3>
+        <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 slot -->
-      <div class="bottom-sheet__content">
-        {#if children}
-          {@render children()}
-        {/if}
+      <!-- Content -->
+      <div class="flex-1 overflow-y-auto overscroll-contain p-4 px-6">
+        <slot />
       </div>
 
       <!-- Actions slot (optional) -->
-      {#if actions}
-        <div class="bottom-sheet__actions">
-          {@render actions()}
+      {#if $$slots.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" />
         </div>
       {/if}
     </div>
   </div>
 {/if}
-
-<style>
-  .bottom-sheet-backdrop {
-    position: fixed;
-    inset: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: var(--z-modal, 50);
-    display: flex;
-    align-items: flex-end;
-    touch-action: none;
-  }
-
-  .bottom-sheet {
-    width: 100%;
-    max-height: 90vh;
-    max-height: 90dvh;
-    background-color: hsl(var(--BG-Primary));
-    border-radius: 1.5rem 1.5rem 0 0;
-    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    padding-bottom: var(--safe-bottom, 0px);
-  }
-
-  .bottom-sheet__handle-wrapper {
-    display: flex;
-    justify-content: center;
-    padding: 0.75rem 0 0.5rem;
-    flex-shrink: 0;
-  }
-
-  .bottom-sheet__handle {
-    width: 2.5rem;
-    height: 0.25rem;
-    background-color: hsl(var(--Stroke-Primary));
-    border-radius: 0.125rem;
-  }
-
-  .bottom-sheet__header {
-    padding: 0 1.5rem 1rem;
-    border-bottom: 1px solid hsl(var(--Stroke-Primary));
-    flex-shrink: 0;
-  }
-
-  .bottom-sheet__title {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: hsl(var(--Text-Primary));
-    margin: 0;
-  }
-
-  .bottom-sheet__content {
-    flex: 1;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    -webkit-overflow-scrolling: touch;
-    padding: 1rem 1.5rem;
-  }
-
-  .bottom-sheet__actions {
-    padding: 1rem 1.5rem;
-    border-top: 1px solid hsl(var(--Stroke-Primary));
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-
-  /* Desktop: show as centered modal instead */
-  @media (min-width: 768px) {
-    .bottom-sheet-backdrop {
-      align-items: center;
-      justify-content: center;
-    }
-
-    .bottom-sheet {
-      max-width: 480px;
-      max-height: 80vh;
-      border-radius: 1rem;
-      margin: 1rem;
-    }
-
-    .bottom-sheet__handle-wrapper {
-      display: none;
-    }
-  }
-</style>

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

@@ -1,50 +1,52 @@
 export default BottomSheet;
-type BottomSheet = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const BottomSheet: import("svelte").Component<{
-    /**
-     * - Whether the sheet is visible
-     */
-    show?: boolean | undefined;
-    /**
-     * - Optional title
-     */
+type BottomSheet = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     title?: string | undefined;
-    /**
-     * - Close callback
-     */
-    onclose?: Function | undefined;
-    /**
-     * - Actions snippet
-     */
-    actions?: import("svelte").Snippet<[]> | undefined;
-    /**
-     * - Default content
-     */
-    children?: import("svelte").Snippet<[]> | undefined;
-}, {}, "show">;
-type Props = {
-    /**
-     * - Whether the sheet is visible
-     */
     show?: boolean | undefined;
-    /**
-     * - Optional title
-     */
-    title?: string | undefined;
-    /**
-     * - Close callback
-     */
-    onclose?: Function | undefined;
-    /**
-     * - Actions snippet
-     */
-    actions?: import("svelte").Snippet<[]> | undefined;
-    /**
-     * - Default content
-     */
-    children?: import("svelte").Snippet<[]> | 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;
+}
 //# sourceMappingURL=BottomSheet.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/BottomSheet/BottomSheet.svelte.js"],"names":[],"mappings":";;;;;AAwGA;;;;;;;;;;;;;;;;;;;;;eAA0D"}
+{"version":3,"file":"BottomSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/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"}

package/dist/components/Breadcrumb/Breadcrumb.spec.js

@@ -89,7 +89,7 @@ describe("Breadcrumb Component Tests", () => {
   test("Last item has tertiary text color", () => {
     setupTest();
     const lastItem = screen.getByText("Settings");
-    expect(lastItem).toHaveClass("text-Text-Tartiary");
+    expect(lastItem).toHaveClass("text-gray-500");
   });
 
   test("Last item has default cursor", () => {

package/dist/components/Breadcrumb/Breadcrumb.stories.svelte

@@ -1,24 +1,23 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import Breadcrumb from "./Breadcrumb.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import Breadcrumb from "./Breadcrumb.svelte";
+
+  const { Story } = defineMeta({
     title: "Components/Breadcrumb",
     component: Breadcrumb,
     argTypes: {
       data: { control: "object" },
     },
-  };
+  });
 
   const sampleData = [
     { name: "Home", href: "/" },
     { name: "Category", href: "/category" },
     { name: "Current Page", href: "/category/current" },
   ];
+
 </script>
 
-<Template let:args>
-  <Breadcrumb {...args} />
-</Template>
 
 <Story name="Default Breadcrumb" args={{ data: sampleData }} />

package/dist/components/Breadcrumb/Breadcrumb.stories.svelte.d.ts

@@ -1,12 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { Breadcrumb as component };
-    export namespace argTypes {
-        namespace data {
-            let control: string;
-        }
-    }
-}
 export default Breadcrumb;
 type Breadcrumb = SvelteComponent<{
     [x: string]: never;

package/dist/components/Breadcrumb/Breadcrumb.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Breadcrumb/Breadcrumb.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsCA;;;;mBAAsH;uBAlC7F,qBAAqB;6CAyBD,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":"Breadcrumb.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Breadcrumb/Breadcrumb.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAqCA;;;;mBAAsH;uBAhC3F,qBAAqB;6CAuBH,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"}

package/dist/components/Breadcrumb/Breadcrumb.svelte

@@ -1,84 +1,72 @@
 <script>
-  import ArrowRight from "../Icons/ArrowRight.svelte";
-  import Home from "../Icons/Home.svelte";
+  import { createEventDispatcher } from "svelte";
+  import { ChevronRightOutline, HomeSolid } from "../Icons";
 
-  /**
-   * @typedef {Object} Props
-   * @property {Array<{name: string, href: string}>} [data] - Breadcrumb items
-   * @property {string} [className] - Additional CSS classes
-   * @property {boolean} [showHomeIcon] - Show built-in home icon for first item
-   * @property {string} [title] - Page title displayed below breadcrumb
-   * @property {string} [subtitle] - Subtitle displayed below title
-   * @property {Function} [onclick] - Click handler for breadcrumb items
-   */
+  /** @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 = "";
 
-  /** @type {Props} */
-  let {
-    data = [],
-    className = "",
-    showHomeIcon = true,
-    title = "",
-    subtitle = "",
-    onclick
-  } = $props();
+  const dispatch = createEventDispatcher();
 
   function handleClick(crumb) {
-    onclick?.(crumb);
+    dispatch("click", crumb);
   }
 </script>
 
 <div class="flex flex-col gap-4">
   {#if data.length > 0}
-    <nav class="inline-flex lg:ml-6 text-sm leading-[14px] font-medium flex-wrap gap-1 {className}">
-      {#each data as crumb, index}
-        <div class="flex items-center gap-2">
-          {#if index > 0}
-            <div class="pl-1 text-text-secondary">
-              <ArrowRight size="12" />
-            </div>
-          {/if}
-          {#if index === 0 && showHomeIcon}
-            <span class="text-text-primary">
-              <Home size="12" />
-            </span>
-          {/if}
-          {#if index === data.length - 1}
-            <span
-              class="text-text-primary cursor-default max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap"
-              title={crumb.name}
-            >
-              {crumb.name}
-            </span>
-          {:else}
-            <!-- svelte-ignore a11y_click_events_have_key_events -->
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <span
-              class="text-text-secondary no-underline cursor-pointer max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap"
-              title={crumb.name}
-            >
+    <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" />
+            {/if}
+            {#if index === 0 && showHomeIcon}
               <a
                 href={crumb.href}
-                onclick={() => handleClick(crumb)}
-                class="hover:no-underline"
+                on:click={() => 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" />
                 {crumb.name}
               </a>
-            </span>
-          {/if}
-        </div>
-      {/each}
+            {: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}>
+                {crumb.name}
+              </span>
+            {:else}
+              <a
+                href={crumb.href}
+                on:click={() => 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}
+              >
+                {crumb.name}
+              </a>
+            {/if}
+          </li>
+        {/each}
+      </ol>
     </nav>
   {/if}
 
   {#if title || subtitle}
-    <div class="pl-1 mb-4 md:pl-6 flex flex-col gap-1">
+    <div class="flex flex-col gap-1">
       {#if title}
-        <h1 class="text-[32px] font-semibold text-text-primary text-start">
+        <h1 class="text-3xl font-semibold text-gray-900 dark:text-white">
           {title}
         </h1>
       {/if}
       {#if subtitle}
-        <p class="text-sm text-text-secondary">{subtitle}</p>
+        <p class="text-sm text-gray-500 dark:text-gray-400">{subtitle}</p>
       {/if}
     </div>
   {/if}