@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/primitives/BottomSheet/BottomSheet.svelte

@@ -1,115 +1,115 @@
-<script lang="ts">
-  import { onDestroy } from "svelte";
-  import { fly, fade } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-  import type { Snippet } from 'svelte';
-  import { typography } from "../../tokens/typography";
-
-  interface Props {
-    /** Whether the bottom sheet is visible */
-    open?: boolean;
-    /** Title displayed in the header */
-    title?: string;
-    /** Keep as bottom sheet at all screen sizes (never convert to centered modal) */
-    alwaysSheet?: boolean;
-    /** Callback when the sheet should close */
-    onclose?: () => void;
-    /** Main content */
-    children?: Snippet;
-    /** Actions slot (footer buttons) */
-    actions?: Snippet;
-  }
-
-  let {
-    open = $bindable(false),
-    title = '',
-    alwaysSheet = false,
-    onclose,
-    children,
-    actions
-  }: Props = $props();
-
-  function close() {
-    onclose?.();
-  }
-
-  function handleBackdropClick(e: MouseEvent) {
-    if (e.target === e.currentTarget) {
-      close();
-    }
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === "Escape" && open) {
-      close();
-    }
-  }
-
-  $effect(() => {
-    if (typeof document !== "undefined") {
-      if (open) {
-        document.body.style.overflow = "hidden";
-      } else {
-        document.body.style.overflow = "";
-      }
-    }
-  });
-
-  onDestroy(() => {
-    if (typeof document !== "undefined") {
-      document.body.style.overflow = "";
-    }
-  });
-
-  let backdropClass = $derived(
-    alwaysSheet
-      ? "fixed inset-0 z-50 flex items-end bg-gray-900/50 dark:bg-gray-900/80"
-      : "fixed inset-0 z-50 flex items-end md:items-center md:justify-center bg-gray-900/50 dark:bg-gray-900/80"
-  );
-
-  let sheetClass = $derived(
-    alwaysSheet
-      ? "w-full max-h-[90dvh] bg-white dark:bg-gray-800 rounded-t-xl shadow-xl flex flex-col overflow-hidden"
-      : "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"
-  );
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-{#if open}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    class={backdropClass}
-    onclick={handleBackdropClick}
-    transition:fade={{ duration: 200 }}
-  >
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class={sheetClass}
-      onclick={(e) => e.stopPropagation()}
-      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
-    >
-      <div class="flex justify-center pt-3 pb-2 shrink-0 {alwaysSheet ? '' : 'md:hidden'}"  >
-        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
-      </div>
-
-      {#if title}
-        <div class="px-6 pb-4 border-b border-gray-200 dark:border-gray-700 shrink-0">
-          <h3 class={typography.h3}>{title}</h3>
-        </div>
-      {/if}
-
-      <div class="flex-1 overflow-y-auto overscroll-contain p-4 px-6">
-        {@render children?.()}
-      </div>
-
-      {#if actions}
-        <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 shrink-0 flex flex-col gap-3">
-          {@render actions?.()}
-        </div>
-      {/if}
-    </div>
-  </div>
-{/if}
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import { fly, fade } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import type { Snippet } from 'svelte';
+  import { typography } from "../../tokens/typography";
+
+  interface Props {
+    /** Whether the bottom sheet is visible */
+    open?: boolean;
+    /** Title displayed in the header */
+    title?: string;
+    /** Keep as bottom sheet at all screen sizes (never convert to centered modal) */
+    alwaysSheet?: boolean;
+    /** Callback when the sheet should close */
+    onclose?: () => void;
+    /** Main content */
+    children?: Snippet;
+    /** Actions slot (footer buttons) */
+    actions?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    title = '',
+    alwaysSheet = false,
+    onclose,
+    children,
+    actions
+  }: Props = $props();
+
+  function close() {
+    onclose?.();
+  }
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (e.target === e.currentTarget) {
+      close();
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape" && open) {
+      close();
+    }
+  }
+
+  $effect(() => {
+    if (typeof document !== "undefined") {
+      if (open) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
+    }
+  });
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.body.style.overflow = "";
+    }
+  });
+
+  let backdropClass = $derived(
+    alwaysSheet
+      ? "fixed inset-0 z-50 flex items-end bg-bg-primary/50"
+      : "fixed inset-0 z-50 flex items-end md:items-center md:justify-center bg-bg-primary/50"
+  );
+
+  let sheetClass = $derived(
+    alwaysSheet
+      ? "w-full max-h-[90dvh] bg-card rounded-t-xl shadow-xl flex flex-col overflow-hidden"
+      : "w-full max-h-[90dvh] md:max-w-lg md:max-h-[80vh] md:m-4 bg-card rounded-t-xl md:rounded-lg shadow-xl flex flex-col overflow-hidden"
+  );
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class={backdropClass}
+    onclick={handleBackdropClick}
+    transition:fade={{ duration: 200 }}
+  >
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class={sheetClass}
+      onclick={(e) => e.stopPropagation()}
+      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
+    >
+      <div class="flex justify-center pt-3 pb-2 shrink-0 {alwaysSheet ? '' : 'md:hidden'}"  >
+        <div class="w-10 h-1 bg-bg-quaternary rounded-full"></div>
+      </div>
+
+      {#if title}
+        <div class="px-6 pb-4 border-b border-border shrink-0">
+          <h3 class={typography.h3}>{title}</h3>
+        </div>
+      {/if}
+
+      <div class="flex-1 overflow-y-auto overscroll-contain p-4 px-6">
+        {@render children?.()}
+      </div>
+
+      {#if actions}
+        <div class="px-6 py-4 border-t border-border shrink-0 flex flex-col gap-3">
+          {@render actions?.()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/primitives/BottomSheet/BottomSheetWithActions.test.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-  import BottomSheet from './BottomSheet.svelte';
-
-  interface Props {
-    open?: boolean;
-    title?: string;
-    alwaysSheet?: boolean;
-    onclose?: () => void;
-  }
-
-  let { open = false, title = '', alwaysSheet = false, onclose }: Props = $props();
-</script>
-
-<BottomSheet bind:open {title} {alwaysSheet} {onclose}>
-  <div>Test content</div>
-  {#snippet actions()}
-    <button>Save</button>
-    <button>Cancel</button>
-  {/snippet}
-</BottomSheet>
+<script lang="ts">
+  import BottomSheet from './BottomSheet.svelte';
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    alwaysSheet?: boolean;
+    onclose?: () => void;
+  }
+
+  let { open = false, title = '', alwaysSheet = false, onclose }: Props = $props();
+</script>
+
+<BottomSheet bind:open {title} {alwaysSheet} {onclose}>
+  <div>Test content</div>
+  {#snippet actions()}
+    <button>Save</button>
+    <button>Cancel</button>
+  {/snippet}
+</BottomSheet>

package/dist/primitives/Breadcrumb/Breadcrumb.spec.js

@@ -1,123 +1,125 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import Breadcrumb from "./Breadcrumb.svelte";
-
-const sampleData = [
-  { name: "Home", href: "/", icon: "/icon-home.svg" },
-  { name: "Profile", href: "/profile" },
-  { name: "Settings", href: "/settings" },
-];
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component } = render(Breadcrumb, {
-    props: {
-      data: sampleData,
-      ...args,
-    },
-  });
-  return { user, component };
-}
-
-describe("Breadcrumb Component Tests", () => {
-  test("Renders nothing when data is empty", () => {
-    render(Breadcrumb, { props: { data: [] } });
-    const nav = document.querySelector("nav");
-    expect(nav).not.toBeInTheDocument();
-  });
-
-  test("Renders nav element when data is provided", () => {
-    setupTest();
-    const nav = document.querySelector("nav");
-    expect(nav).toBeInTheDocument();
-  });
-
-  test("Renders all breadcrumb items", () => {
-    setupTest();
-    expect(screen.getByText("Home")).toBeInTheDocument();
-    expect(screen.getByText("Profile")).toBeInTheDocument();
-    expect(screen.getByText("Settings")).toBeInTheDocument();
-  });
-
-  test("First item shows icon", () => {
-    setupTest();
-    // First item has an icon (HomeSolid SVG)
-    const icons = document.querySelectorAll("svg");
-    // Should have at least the home icon plus separator arrows
-    expect(icons.length).toBeGreaterThan(0);
-  });
-
-  test("Shows separator characters between items", () => {
-    setupTest();
-    // Separators appear between items (n-1 separators for n items)
-    // We use text character "›" instead of SVG arrows for consistent spacing
-    const separators = document.querySelectorAll("span.text-gray-400");
-    // 3 items means 2 separators
-    expect(separators.length).toBe(2);
-  });
-
-  test("Last item is not a link", () => {
-    setupTest();
-    const lastItem = screen.getByText("Settings");
-    // Last item should be a span, not inside an anchor
-    expect(lastItem.closest("a")).toBeNull();
-  });
-
-  test("Non-last items are clickable links", () => {
-    setupTest();
-    const homeLink = screen.getByText("Home").closest("a");
-    const profileLink = screen.getByText("Profile").closest("a");
-
-    expect(homeLink).toBeInTheDocument();
-    expect(homeLink).toHaveAttribute("href", "/");
-    expect(profileLink).toBeInTheDocument();
-    expect(profileLink).toHaveAttribute("href", "/profile");
-  });
-
-  test("Dispatches click event when clicking breadcrumb", async () => {
-    const clickSpy = vi.fn();
-    const { user } = setupTest({ onclick: clickSpy });
-
-    const homeLink = screen.getByText("Home").closest("a");
-    await user.click(homeLink);
-
-    expect(clickSpy).toHaveBeenCalled();
-    expect(clickSpy).toHaveBeenCalledWith(sampleData[0]);
-  });
-
-  test("Last item has tertiary text color", () => {
-    setupTest();
-    const lastItem = screen.getByText("Settings");
-    expect(lastItem).toHaveClass("text-gray-500");
-  });
-
-  test("Last item has default cursor", () => {
-    setupTest();
-    const lastItem = screen.getByText("Settings");
-    // Last item is a span, not a link, so it should not be clickable
-    expect(lastItem.tagName).toBe("SPAN");
-  });
-
-  test("Clickable items have pointer cursor", () => {
-    setupTest();
-    const homeLink = screen.getByText("Home").closest("a");
-    // Links are clickable elements
-    expect(homeLink).toBeInTheDocument();
-    expect(homeLink.tagName).toBe("A");
-  });
-
-  test("Has responsive text sizing", () => {
-    setupTest();
-    const nav = document.querySelector("nav");
-    expect(nav).toHaveClass("text-sm");
-  });
-
-  test("Renders with single item", () => {
-    render(Breadcrumb, { props: { data: [{ name: "Single", href: "/" }] } });
-    expect(screen.getByText("Single")).toBeInTheDocument();
-    // Single item is both first and last, component renders it as span (last item)
-    const item = screen.getByText("Single");
-    expect(item.tagName).toBe("SPAN");
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import Breadcrumb from "./Breadcrumb.svelte";
+
+const sampleData = [
+  { name: "Home", href: "/", icon: "/icon-home.svg" },
+  { name: "Profile", href: "/profile" },
+  { name: "Settings", href: "/settings" },
+];
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(Breadcrumb, {
+    props: {
+      data: sampleData,
+      ...args,
+    },
+  });
+  return { user, component };
+}
+
+describe("Breadcrumb Component Tests", () => {
+  test("Renders nothing when data is empty", () => {
+    render(Breadcrumb, { props: { data: [] } });
+    const nav = document.querySelector("nav");
+    expect(nav).not.toBeInTheDocument();
+  });
+
+  test("Renders nav element when data is provided", () => {
+    setupTest();
+    const nav = document.querySelector("nav");
+    expect(nav).toBeInTheDocument();
+  });
+
+  test("Renders all breadcrumb items", () => {
+    setupTest();
+    expect(screen.getByText("Home")).toBeInTheDocument();
+    expect(screen.getByText("Profile")).toBeInTheDocument();
+    expect(screen.getByText("Settings")).toBeInTheDocument();
+  });
+
+  test("First item shows icon", () => {
+    setupTest();
+    // First item has an icon (HomeSolid SVG)
+    const icons = document.querySelectorAll("svg");
+    // Should have at least the home icon plus separator arrows
+    expect(icons.length).toBeGreaterThan(0);
+  });
+
+  test("Shows separator characters between items", () => {
+    setupTest();
+    // Separators appear between items (n-1 separators for n items)
+    // We use text character "›" instead of SVG arrows for consistent spacing
+    // Separators contain the "›" character
+    const allSpans = document.querySelectorAll("span");
+    const separators = Array.from(allSpans).filter(s => s.textContent?.trim() === '›');
+    // 3 items means 2 separators
+    expect(separators.length).toBe(2);
+  });
+
+  test("Last item is not a link", () => {
+    setupTest();
+    const lastItem = screen.getByText("Settings");
+    // Last item should be a span, not inside an anchor
+    expect(lastItem.closest("a")).toBeNull();
+  });
+
+  test("Non-last items are clickable links", () => {
+    setupTest();
+    const homeLink = screen.getByText("Home").closest("a");
+    const profileLink = screen.getByText("Profile").closest("a");
+
+    expect(homeLink).toBeInTheDocument();
+    expect(homeLink).toHaveAttribute("href", "/");
+    expect(profileLink).toBeInTheDocument();
+    expect(profileLink).toHaveAttribute("href", "/profile");
+  });
+
+  test("Dispatches click event when clicking breadcrumb", async () => {
+    const clickSpy = vi.fn();
+    const { user } = setupTest({ onclick: clickSpy });
+
+    const homeLink = screen.getByText("Home").closest("a");
+    await user.click(homeLink);
+
+    expect(clickSpy).toHaveBeenCalled();
+    expect(clickSpy).toHaveBeenCalledWith(sampleData[0]);
+  });
+
+  test("Last item has tertiary text color", () => {
+    setupTest();
+    const lastItem = screen.getByText("Settings");
+    expect(lastItem).toHaveClass("text-muted-foreground");
+  });
+
+  test("Last item has default cursor", () => {
+    setupTest();
+    const lastItem = screen.getByText("Settings");
+    // Last item is a span, not a link, so it should not be clickable
+    expect(lastItem.tagName).toBe("SPAN");
+  });
+
+  test("Clickable items have pointer cursor", () => {
+    setupTest();
+    const homeLink = screen.getByText("Home").closest("a");
+    // Links are clickable elements
+    expect(homeLink).toBeInTheDocument();
+    expect(homeLink.tagName).toBe("A");
+  });
+
+  test("Has responsive text sizing", () => {
+    setupTest();
+    const nav = document.querySelector("nav");
+    expect(nav).toHaveClass("text-sm");
+  });
+
+  test("Renders with single item", () => {
+    render(Breadcrumb, { props: { data: [{ name: "Single", href: "/" }] } });
+    expect(screen.getByText("Single")).toBeInTheDocument();
+    // Single item is both first and last, component renders it as span (last item)
+    const item = screen.getByText("Single");
+    expect(item.tagName).toBe("SPAN");
+  });
+});

package/dist/primitives/Breadcrumb/Breadcrumb.stories.svelte

@@ -1,23 +1,23 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-    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>
-
-
-<Story name="Default Breadcrumb" args={{ data: sampleData }} />
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+    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>
+
+
+<Story name="Default Breadcrumb" args={{ data: sampleData }} />