@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/primitives/BottomSheet/BottomSheet.spec.js

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
+import { render, fireEvent, cleanup } from '@testing-library/svelte';
 import BottomSheet from './BottomSheet.svelte';
+import BottomSheetWrapper from './BottomSheetWrapper.test.svelte';
 
 describe('BottomSheet Component', () => {
   beforeEach(() => {
@@ -10,17 +11,18 @@ describe('BottomSheet Component', () => {
 
   afterEach(() => {
     document.body.style.overflow = '';
+    cleanup();
   });
 
   it('does not render when show is false', () => {
     const { container } = render(BottomSheet, { props: { show: false } });
-    const backdrop = container.querySelector('.bottom-sheet-backdrop');
+    const backdrop = container.querySelector('.fixed.inset-0');
     expect(backdrop).toBeFalsy();
   });
 
   it('renders when show is true', () => {
     const { container } = render(BottomSheet, { props: { show: true } });
-    const backdrop = container.querySelector('.bottom-sheet-backdrop');
+    const backdrop = container.querySelector('.fixed.inset-0');
     expect(backdrop).toBeTruthy();
   });
 
@@ -33,8 +35,8 @@ describe('BottomSheet Component', () => {
 
   it('does not render title when not provided', () => {
     const { container } = render(BottomSheet, { props: { show: true } });
-    const header = container.querySelector('.bottom-sheet__header');
-    expect(header).toBeFalsy();
+    const title = container.querySelector('h3');
+    expect(title).toBeFalsy();
   });
 
   it('locks body scroll when shown', async () => {
@@ -45,60 +47,65 @@ describe('BottomSheet Component', () => {
   });
 
   it('unlocks body scroll when hidden', async () => {
-    const { component } = render(BottomSheet, { props: { show: true } });
+    const { rerender } = render(BottomSheetWrapper, { props: { show: true } });
     await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('hidden');
 
-    component.$set({ show: false });
+    await rerender({ show: false });
     await new Promise((resolve) => setTimeout(resolve, 10));
 
     expect(document.body.style.overflow).toBe('');
   });
 
   it('dispatches close event on backdrop click', async () => {
-    const { container, component } = render(BottomSheet, { props: { show: true } });
-    const backdrop = container.querySelector('.bottom-sheet-backdrop');
-
     let closeCalled = false;
-    component.$on('close', () => {
+    const onclose = () => {
       closeCalled = true;
+    };
+
+    const { container } = render(BottomSheet, {
+      props: { show: true, onclose }
     });
+    const backdrop = container.querySelector('.fixed.inset-0');
 
     await fireEvent.click(backdrop);
     expect(closeCalled).toBe(true);
   });
 
   it('does not dispatch close when clicking sheet content', async () => {
-    const { container, component } = render(BottomSheet, { props: { show: true } });
-    const sheet = container.querySelector('.bottom-sheet');
-
     let closeCalled = false;
-    component.$on('close', () => {
+    const onclose = () => {
       closeCalled = true;
+    };
+
+    const { container } = render(BottomSheet, {
+      props: { show: true, onclose }
     });
+    const sheet = container.querySelector('.bg-white, .dark\\:bg-gray-800');
 
     await fireEvent.click(sheet);
     expect(closeCalled).toBe(false);
   });
 
   it('dispatches close event on Escape key', async () => {
-    const { component } = render(BottomSheet, { props: { show: true } });
-
     let closeCalled = false;
-    component.$on('close', () => {
+    const onclose = () => {
       closeCalled = true;
-    });
+    };
+
+    render(BottomSheet, { props: { show: true, onclose } });
 
     await fireEvent.keyDown(window, { key: 'Escape' });
     expect(closeCalled).toBe(true);
   });
 
   it('does not dispatch close on Escape when not shown', async () => {
-    const { component } = render(BottomSheet, { props: { show: false } });
-
     let closeCalled = false;
-    component.$on('close', () => {
+    const onclose = () => {
       closeCalled = true;
-    });
+    };
+
+    render(BottomSheet, { props: { show: false, onclose } });
 
     await fireEvent.keyDown(window, { key: 'Escape' });
     expect(closeCalled).toBe(false);
@@ -106,21 +113,23 @@ describe('BottomSheet Component', () => {
 
   it('has handle bar element', () => {
     const { container } = render(BottomSheet, { props: { show: true } });
-    const handle = container.querySelector('.bottom-sheet__handle');
+    // The handle is the gray bar with rounded corners
+    const handle = container.querySelector('.w-10.h-1.bg-gray-300');
     expect(handle).toBeTruthy();
   });
 
   it('has content area for slot content', () => {
     const { container } = render(BottomSheet, { props: { show: true } });
-    const content = container.querySelector('.bottom-sheet__content');
+    // The content area has overflow-y-auto class
+    const content = container.querySelector('.overflow-y-auto');
     expect(content).toBeTruthy();
   });
 
   it('cleans up body overflow on destroy', () => {
-    const { component } = render(BottomSheet, { props: { show: true } });
     document.body.style.overflow = 'hidden';
+    const { unmount } = render(BottomSheet, { props: { show: true } });
 
-    component.$destroy();
+    unmount();
 
     expect(document.body.style.overflow).toBe('');
   });

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import BottomSheet from './BottomSheet.svelte';
+
+  interface Props {
+    show?: boolean;
+  }
+
+  let { show = false }: Props = $props();
+</script>
+
+<BottomSheet {show}>
+  <div>Test content</div>
+</BottomSheet>

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

@@ -0,0 +1,7 @@
+interface Props {
+    show?: boolean;
+}
+declare const BottomSheetWrapper: import("svelte").Component<Props, {}, "">;
+type BottomSheetWrapper = ReturnType<typeof BottomSheetWrapper>;
+export default BottomSheetWrapper;
+//# sourceMappingURL=BottomSheetWrapper.test.svelte.d.ts.map

package/dist/primitives/BottomSheet/BottomSheetWrapper.test.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetWrapper.test.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/BottomSheet/BottomSheetWrapper.test.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAcH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

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

@@ -42,8 +42,8 @@ describe("Breadcrumb Component Tests", () => {
 
   test("First item shows icon", () => {
     setupTest();
-    // First item has an icon
-    const icons = document.querySelectorAll("img");
+    // 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);
   });
@@ -51,9 +51,9 @@ describe("Breadcrumb Component Tests", () => {
   test("Shows separator arrows between items", () => {
     setupTest();
     // Arrows appear between items (n-1 arrows for n items)
-    const imgs = document.querySelectorAll("img");
-    // 1 home icon + 2 arrows = 3 images minimum
-    expect(imgs.length).toBeGreaterThanOrEqual(2);
+    const svgs = document.querySelectorAll("svg");
+    // 1 home icon + 2 chevron arrows = 3 SVGs minimum
+    expect(svgs.length).toBeGreaterThanOrEqual(3);
   });
 
   test("Last item is not a link", () => {
@@ -75,15 +75,14 @@ describe("Breadcrumb Component Tests", () => {
   });
 
   test("Dispatches click event when clicking breadcrumb", async () => {
-    const { user, component } = setupTest();
     const clickSpy = vi.fn();
-    component.$on("click", clickSpy);
+    const { user } = setupTest({ onclick: clickSpy });
 
     const homeLink = screen.getByText("Home").closest("a");
     await user.click(homeLink);
 
     expect(clickSpy).toHaveBeenCalled();
-    expect(clickSpy.mock.calls[0][0].detail).toEqual(sampleData[0]);
+    expect(clickSpy).toHaveBeenCalledWith(sampleData[0]);
   });
 
   test("Last item has tertiary text color", () => {
@@ -95,13 +94,16 @@ describe("Breadcrumb Component Tests", () => {
   test("Last item has default cursor", () => {
     setupTest();
     const lastItem = screen.getByText("Settings");
-    expect(lastItem).toHaveClass("cursor-default");
+    // 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 homeSpan = screen.getByText("Home").closest("span");
-    expect(homeSpan).toHaveClass("cursor-pointer");
+    const homeLink = screen.getByText("Home").closest("a");
+    // Links are clickable elements
+    expect(homeLink).toBeInTheDocument();
+    expect(homeLink.tagName).toBe("A");
   });
 
   test("Has responsive text sizing", () => {
@@ -113,8 +115,8 @@ describe("Breadcrumb Component Tests", () => {
   test("Renders with single item", () => {
     render(Breadcrumb, { props: { data: [{ name: "Single", href: "/" }] } });
     expect(screen.getByText("Single")).toBeInTheDocument();
-    // Single item should be the "last" item, so not a link
+    // Single item is both first and last, component renders it as span (last item)
     const item = screen.getByText("Single");
-    expect(item.closest("a")).toBeNull();
+    expect(item.tagName).toBe("SPAN");
   });
 });

package/dist/primitives/Breadcrumb/Breadcrumb.svelte

@@ -45,7 +45,11 @@
             {#if index > 0}
               <ChevronRightOutline class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" />
             {/if}
-            {#if index === 0 && showHomeIcon}
+            {#if index === data.length - 1}
+              <span class={`ms-1 ${typography.smMuted} font-medium md:ms-2 max-w-48 truncate`} title={crumb.name}>
+                {crumb.name}
+              </span>
+            {:else if index === 0 && showHomeIcon}
               <a
                 href={crumb.href}
                 onclick={() => handleClick(crumb)}
@@ -54,10 +58,6 @@
                 <HomeSolid class="w-3 h-3 me-2.5" />
                 {crumb.name}
               </a>
-            {:else if index === data.length - 1}
-              <span class={`ms-1 ${typography.smMuted} font-medium md:ms-2 max-w-48 truncate`} title={crumb.name}>
-                {crumb.name}
-              </span>
             {:else}
               <a
                 href={crumb.href}

package/dist/primitives/Button/Button.spec.js

@@ -6,8 +6,12 @@ import Button from './Button.svelte';
 function setupTest(args = {}) {
   const user = userEvent.setup();
   const onClick = vi.fn();
-  const { component } = render(Button, { props: { ...args } });
-  component.$on('click', onClick);
+  const { component } = render(Button, {
+    props: {
+      ...args,
+      onclick: onClick
+    }
+  });
   const button = screen.getByRole('button');
   return {
     user,
@@ -36,59 +40,62 @@ describe('Button Component Tests', () => {
     expect(onClick).not.toHaveBeenCalled();
   });
 
-  test('Renders with before and after icons', () => {
-    const { button } = setupTest({ beforeIcon: 'icon-before.png', afterIcon: 'icon-after.png' });
-
-    const beforeIcon = button.querySelector('img.mr-2');
-    const afterIcon = button.querySelector('img.ml-2');
-
-    expect(beforeIcon).toBeInTheDocument();
-    expect(beforeIcon).toHaveAttribute('src', 'icon-before.png');
-
-    expect(afterIcon).toBeInTheDocument();
-    expect(afterIcon).toHaveAttribute('src', 'icon-after.png');
+  test('Renders with text content', () => {
+    const { container } = render(Button);
+    const button = container.querySelector('button');
+    expect(button).toBeInTheDocument();
   });
 
-  test('Handles custom classes passed via className prop', () => {
-    const { button } = setupTest({ className: 'custom-class' });
+  test('Handles custom classes passed via class prop', () => {
+    const { button } = setupTest({ class: 'custom-class' });
     expect(button).toHaveClass('custom-class');
   });
 });
 
 describe('Button Variants', () => {
-  test('Default variant is blue-solid', () => {
+  test('Default variant has blue background', () => {
     const { button } = setupTest();
-    expect(button).toHaveClass('btn-blue-solid');
+    expect(button).toHaveClass('bg-blue-700');
   });
 
   test('Blue outline variant', () => {
-    const { button } = setupTest({ variant: 'blue-outline' });
-    expect(button).toHaveClass('btn-blue-outline');
+    const { button } = setupTest({ variant: 'outline' });
+    expect(button).toHaveClass('text-blue-700');
+    expect(button).toHaveClass('border-blue-700');
   });
 
-  test('Gray outline variant', () => {
-    const { button } = setupTest({ variant: 'gray-outline' });
-    expect(button).toHaveClass('btn-gray-outline');
+  test('Gray outline variant (alternative)', () => {
+    const { button } = setupTest({ variant: 'alternative' });
+    expect(button).toHaveClass('text-gray-900');
+    expect(button).toHaveClass('border-gray-200');
   });
 
   test('Red solid variant', () => {
-    const { button } = setupTest({ variant: 'red-solid' });
-    expect(button).toHaveClass('btn-red-solid');
+    const { button } = setupTest({ variant: 'red' });
+    expect(button).toHaveClass('bg-red-700');
   });
 
   test('Red outline variant', () => {
     const { button } = setupTest({ variant: 'red-outline' });
-    expect(button).toHaveClass('btn-red-outline');
+    expect(button).toHaveClass('text-red-700');
+    expect(button).toHaveClass('border-red-700');
+  });
+
+  test('Red text variant (ghost-red)', () => {
+    const { button } = setupTest({ variant: 'ghost-red' });
+    expect(button).toHaveClass('text-red-700');
+    expect(button).toHaveClass('bg-transparent');
   });
 
-  test('Red text variant', () => {
-    const { button } = setupTest({ variant: 'red-text' });
-    expect(button).toHaveClass('btn-red-text');
+  test('Gray text variant (ghost)', () => {
+    const { button } = setupTest({ variant: 'ghost' });
+    expect(button).toHaveClass('text-gray-500');
+    expect(button).toHaveClass('bg-transparent');
   });
 
-  test('Gray text variant', () => {
-    const { button } = setupTest({ variant: 'gray-text' });
-    expect(button).toHaveClass('btn-gray-text');
+  test('Legacy variant names still work', () => {
+    const { button } = setupTest({ variant: 'blue-solid' });
+    expect(button).toHaveClass('bg-blue-700');
   });
 });
 
@@ -96,6 +103,8 @@ describe('Button Sizes', () => {
   test('Full width size', () => {
     const { button } = setupTest({ size: 'full' });
     expect(button).toHaveClass('w-full');
+    expect(button).toHaveClass('px-5');
+    expect(button).toHaveClass('py-3');
   });
 
   test('Full width on mobile, auto on desktop', () => {
@@ -104,54 +113,44 @@ describe('Button Sizes', () => {
     expect(button).toHaveClass('md:w-auto');
   });
 
+  test('XL size', () => {
+    const { button } = setupTest({ size: 'xl' });
+    expect(button).toHaveClass('px-6');
+    expect(button).toHaveClass('py-3.5');
+    expect(button).toHaveClass('text-sm');
+  });
+
   test('Large size', () => {
     const { button } = setupTest({ size: 'lg' });
-    expect(button).toHaveClass('px-6');
+    expect(button).toHaveClass('px-5');
     expect(button).toHaveClass('py-3');
+    expect(button).toHaveClass('text-sm');
   });
 
-  test('Medium size', () => {
+  test('Medium size (default)', () => {
     const { button } = setupTest({ size: 'md' });
-    expect(button).toHaveClass('px-3');
-    expect(button).toHaveClass('py-3');
+    expect(button).toHaveClass('px-4');
+    expect(button).toHaveClass('py-2.5');
+    expect(button).toHaveClass('text-sm');
   });
 
   test('Small size', () => {
     const { button } = setupTest({ size: 'sm' });
-    expect(button).toHaveClass('text-xs');
-    expect(button).toHaveClass('rounded-md');
+    expect(button).toHaveClass('px-3');
+    expect(button).toHaveClass('py-2');
+    expect(button).toHaveClass('text-sm');
   });
 
   test('Extra small size', () => {
     const { button } = setupTest({ size: 'xs' });
+    expect(button).toHaveClass('px-3');
+    expect(button).toHaveClass('py-1.5');
     expect(button).toHaveClass('text-xs');
   });
 
-  test('Nav size', () => {
-    const { button } = setupTest({ size: 'nav' });
-    expect(button).toHaveClass('w-full');
-  });
-
   test('Half width size', () => {
     const { button } = setupTest({ size: 'half' });
-    expect(button.className).toMatch(/w-\[48%\]/);
-  });
-});
-
-describe('Button Min Width', () => {
-  test('Small min width', () => {
-    const { button } = setupTest({ minWidth: 'sm' });
-    expect(button.className).toMatch(/min-w-\[100px\]/);
-  });
-
-  test('Action min width', () => {
-    const { button } = setupTest({ minWidth: 'action' });
-    expect(button.className).toMatch(/min-w-\[150px\]/);
-  });
-
-  test('Modal min width', () => {
-    const { button } = setupTest({ minWidth: 'modal' });
-    expect(button.className).toMatch(/min-w-\[130px\]/);
+    expect(button).toHaveClass('w-1/2');
   });
 });
 
@@ -168,7 +167,7 @@ describe('Button States', () => {
     const { button, onClick } = setupTest({ success: true });
 
     expect(button).toBeDisabled();
-    expect(button).toHaveClass('btn-success');
+    expect(button).toHaveClass('bg-green-600');
     await userEvent.click(button);
     expect(onClick).not.toHaveBeenCalled();
 
@@ -177,13 +176,19 @@ describe('Button States', () => {
   });
 
   test('Active state for nav items', () => {
-    const { button } = setupTest({ active: true, size: 'nav' });
-    expect(button).toHaveClass('btn-active');
+    const { button } = setupTest({ active: true, variant: 'nav' });
+    expect(button).toHaveClass('text-blue-600');
+  });
+
+  test('Active state for toggle variant', () => {
+    const { button } = setupTest({ active: true, variant: 'toggle' });
+    expect(button).toHaveClass('bg-blue-600');
   });
 
-  test('Responsive class adds microinteraction', () => {
-    const { button } = setupTest({ responsive: true });
-    expect(button).toHaveClass('btn-responsive');
+  test('Active state for ghost variant', () => {
+    const { button } = setupTest({ active: true, variant: 'ghost' });
+    expect(button).toHaveClass('text-blue-700');
+    expect(button).toHaveClass('bg-blue-50');
   });
 });
 
@@ -202,10 +207,17 @@ describe('Button as Link', () => {
   });
 });
 
-describe('Button Justify', () => {
-  test('Between justify for list-item style', () => {
-    const { button } = setupTest({ justify: 'between' });
-    // justify-between class is prefixed with ! to override default
-    expect(button.className).toMatch(/justify-between/);
+describe('Button with Trailing Content', () => {
+  test('Button with trailing content uses justify-between', () => {
+    const trailing = () => '→';
+    const { container } = render(Button, {
+      props: {
+        variant: 'menu-item',
+        children: () => 'Menu Item',
+        trailing,
+      }
+    });
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('justify-between');
   });
 });

package/dist/primitives/Button/ButtonSaveDemo.spec.js

@@ -1,8 +1,18 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/svelte';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/svelte';
 import ButtonSaveDemo from './ButtonSaveDemo.svelte';
 
 describe('ButtonSaveDemo', () => {
+  // Clean up after each test
+  beforeEach(() => {
+    cleanup();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   // Helper to get the Save button specifically (not the Reset button)
   const getSaveButton = () => screen.getByRole('button', { name: /save|saving|saved/i });
 
@@ -45,4 +55,92 @@ describe('ButtonSaveDemo', () => {
       expect(button).toHaveAttribute('disabled');
     });
   });
+
+  describe('success state', () => {
+    it('shows success state after timeout', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      await fireEvent.click(button);
+
+      // Advance timers past the 1000ms setTimeout
+      await vi.advanceTimersByTimeAsync(1100);
+
+      // Button should now be in success state (still disabled)
+      expect(button).toHaveAttribute('disabled');
+    });
+
+    it('stays in success state after completion', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      await fireEvent.click(button);
+      await vi.advanceTimersByTimeAsync(1100);
+
+      // Button should remain disabled in success state
+      expect(button).toHaveAttribute('disabled');
+    });
+
+    it('does not retrigger if already loading', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      // First click
+      await fireEvent.click(button);
+
+      // Second click while loading - should be ignored
+      await fireEvent.click(button);
+
+      // Should still be in loading state
+      expect(button).toHaveAttribute('disabled');
+    });
+
+    it('does not retrigger if already in success state', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      await fireEvent.click(button);
+      await vi.advanceTimersByTimeAsync(1100);
+
+      // Click while in success state - should be ignored
+      await fireEvent.click(button);
+
+      expect(button).toHaveAttribute('disabled');
+    });
+  });
+
+  describe('reset functionality', () => {
+    it('reset button clears success state', async () => {
+      render(ButtonSaveDemo);
+      const saveButton = getSaveButton();
+      const resetButton = screen.getByText(/Reset/);
+
+      // Trigger save and complete
+      await fireEvent.click(saveButton);
+      await vi.advanceTimersByTimeAsync(1100);
+
+      // Click reset
+      await fireEvent.click(resetButton);
+
+      // Save button should be enabled again
+      expect(saveButton).not.toHaveAttribute('disabled');
+    });
+
+    it('allows re-save after reset', async () => {
+      render(ButtonSaveDemo);
+      const saveButton = getSaveButton();
+      const resetButton = screen.getByText(/Reset/);
+
+      // First save cycle
+      await fireEvent.click(saveButton);
+      await vi.advanceTimersByTimeAsync(1100);
+
+      // Reset
+      await fireEvent.click(resetButton);
+
+      // Second save should work
+      await fireEvent.click(saveButton);
+      expect(saveButton).toHaveAttribute('disabled');
+    });
+  });
 });

package/dist/primitives/Button/ButtonVariantShowcase.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ButtonVariantShowcase.spec.d.ts.map

package/dist/primitives/Button/ButtonVariantShowcase.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonVariantShowcase.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/ButtonVariantShowcase.spec.js"],"names":[],"mappings":""}