@getmicdrop/svelte-components 5.19.0 → 5.20.0

package/dist/primitives/Breadcrumb/Breadcrumb.svelte

@@ -1,107 +1,107 @@
-<script lang="ts">
-  import { ChevronRightOutline, HomeSolid } from "../Icons";
-  import { typography } from "../../tokens/typography";
-
-  const defaultLabels = {
-    breadcrumb: 'Breadcrumb',
-  };
-
-  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;
-    labels?: Partial<typeof defaultLabels>;
-  }
-
-  let {
-    data = [],
-    className = '',
-    showHomeIcon = true,
-    title = '',
-    subtitle = '',
-    onclick,
-    labels: userLabels = {},
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  function handleClick(crumb: BreadcrumbItem) {
-    onclick?.(crumb);
-  }
-</script>
-
-<div class="flex flex-col items-start gap-2 min-w-0">
-  {#if data.length > 0}
-    <nav class={`flex items-center ${typography.smMuted} font-medium ${className}`} aria-label={labels.breadcrumb}>
-      <ol class="inline-flex items-center rtl:space-x-reverse flex-wrap">
-        {#each data as crumb, index}
-          <li class="inline-flex items-center">
-            {#if index > 0}
-              <span class="text-gray-400" style="margin: 0 6px;">›</span>
-            {/if}
-            {#if index === 0 && showHomeIcon && data.length === 1}
-              <!-- Single item with home icon - show as non-clickable label -->
-              <span class="{typography.smMuted} inline-flex items-center font-medium" style="gap: 6px;">
-                <HomeSolid class="w-3 h-3" />
-                {crumb.name}
-              </span>
-            {:else if index === 0 && showHomeIcon}
-              <!-- First item with home icon - clickable link -->
-              <a
-                href={crumb.href}
-                onclick={() => handleClick(crumb)}
-                class="{typography.smMuted} inline-flex items-center font-medium hover:text-blue-600 dark:hover:text-white"
-                style="gap: 6px;"
-              >
-                <HomeSolid class="w-3 h-3" />
-                {crumb.name}
-              </a>
-            {:else if index === data.length - 1}
-              <!-- Last item - non-clickable -->
-              <span class={`${typography.smMuted} font-medium max-w-48 truncate`} title={crumb.name}>
-                {crumb.name}
-              </span>
-            {:else}
-              <!-- Middle items - clickable links -->
-              <a
-                href={crumb.href}
-                onclick={() => handleClick(crumb)}
-                class="{typography.smMuted} font-medium hover:text-blue-600 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="flex flex-col gap-1">
-      {#if title}
-        <h1 class="text-3xl font-semibold text-gray-900 dark:text-white truncate" title={title}>
-          {title}
-        </h1>
-      {/if}
-      {#if subtitle}
-        <p class={typography.smMuted}>{subtitle}</p>
-      {/if}
-    </div>
-  {/if}
-</div>
+<script lang="ts">
+  import { ChevronRightOutline, HomeSolid } from "../Icons";
+  import { typography } from "../../tokens/typography";
+
+  const defaultLabels = {
+    breadcrumb: 'Breadcrumb',
+  };
+
+  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;
+    labels?: Partial<typeof defaultLabels>;
+  }
+
+  let {
+    data = [],
+    className = '',
+    showHomeIcon = true,
+    title = '',
+    subtitle = '',
+    onclick,
+    labels: userLabels = {},
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  function handleClick(crumb: BreadcrumbItem) {
+    onclick?.(crumb);
+  }
+</script>
+
+<div class="flex flex-col items-start gap-2 min-w-0">
+  {#if data.length > 0}
+    <nav class={`flex items-center ${typography.smMuted} font-medium ${className}`} aria-label={labels.breadcrumb}>
+      <ol class="inline-flex items-center rtl:space-x-reverse flex-wrap">
+        {#each data as crumb, index}
+          <li class="inline-flex items-center">
+            {#if index > 0}
+              <span class="text-gray-400" style="margin: 0 6px;">›</span>
+            {/if}
+            {#if index === 0 && showHomeIcon && data.length === 1}
+              <!-- Single item with home icon - show as non-clickable label -->
+              <span class="{typography.smMuted} inline-flex items-center font-medium" style="gap: 6px;">
+                <HomeSolid class="w-3 h-3" />
+                {crumb.name}
+              </span>
+            {:else if index === 0 && showHomeIcon}
+              <!-- First item with home icon - clickable link -->
+              <a
+                href={crumb.href}
+                onclick={() => handleClick(crumb)}
+                class="{typography.smMuted} inline-flex items-center font-medium hover:text-blue-600 dark:hover:text-white"
+                style="gap: 6px;"
+              >
+                <HomeSolid class="w-3 h-3" />
+                {crumb.name}
+              </a>
+            {:else if index === data.length - 1}
+              <!-- Last item - non-clickable -->
+              <span class={`${typography.smMuted} font-medium max-w-48 truncate`} title={crumb.name}>
+                {crumb.name}
+              </span>
+            {:else}
+              <!-- Middle items - clickable links -->
+              <a
+                href={crumb.href}
+                onclick={() => handleClick(crumb)}
+                class="{typography.smMuted} font-medium hover:text-blue-600 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="flex flex-col gap-1">
+      {#if title}
+        <h1 class="text-3xl font-semibold text-gray-900 dark:text-white truncate" title={title}>
+          {title}
+        </h1>
+      {/if}
+      {#if subtitle}
+        <p class={typography.smMuted}>{subtitle}</p>
+      {/if}
+    </div>
+  {/if}
+</div>

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

@@ -1,225 +1,225 @@
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { expect, describe, test, vi } from 'vitest';
-import Button from './Button.svelte';
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const onClick = vi.fn();
-  const { component } = render(Button, {
-    props: {
-      ...args,
-      onclick: onClick
-    }
-  });
-  const button = screen.getByRole('button');
-  return {
-    user,
-    component,
-    onClick,
-    button,
-  };
-}
-
-describe('Button Component Tests', () => {
-  test('Renders Button with default props', () => {
-    const { button } = setupTest();
-    expect(button).toBeInTheDocument();
-  });
-
-  test('Handles click event', async () => {
-    const { user, button, onClick } = setupTest();
-    await user.click(button);
-    expect(onClick).toHaveBeenCalledOnce();
-  });
-
-  test('Disables button when disabled prop is true', async () => {
-    const { button, onClick } = setupTest({ disabled: true });
-    expect(button).toBeDisabled();
-    await userEvent.click(button);
-    expect(onClick).not.toHaveBeenCalled();
-  });
-
-  test('Renders with text content', () => {
-    const { container } = render(Button);
-    const button = container.querySelector('button');
-    expect(button).toBeInTheDocument();
-  });
-
-  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 has blue background', () => {
-    const { button } = setupTest();
-    expect(button).toHaveClass('bg-blue-700');
-  });
-
-  test('Blue outline variant', () => {
-    const { button } = setupTest({ variant: 'outline' });
-    expect(button).toHaveClass('text-blue-700');
-    expect(button).toHaveClass('border-blue-700');
-  });
-
-  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' });
-    expect(button).toHaveClass('bg-red-700');
-  });
-
-  test('Red outline variant', () => {
-    const { button } = setupTest({ variant: '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('Gray text variant (ghost)', () => {
-    const { button } = setupTest({ variant: 'ghost' });
-    expect(button).toHaveClass('text-gray-500');
-    expect(button).toHaveClass('bg-transparent');
-  });
-
-  test('Legacy variant names still work', () => {
-    const { button } = setupTest({ variant: 'blue-solid' });
-    expect(button).toHaveClass('bg-blue-700');
-  });
-});
-
-describe('Button Sizes', () => {
-  test('Full width size', () => {
-    const { button } = setupTest({ size: 'full' });
-    expect(button).toHaveClass('w-full');
-    expect(button).toHaveClass('h-11');
-    expect(button).toHaveClass('px-5');
-  });
-
-  test('Full width on mobile, auto on desktop', () => {
-    const { button } = setupTest({ size: 'full-md-auto' });
-    expect(button).toHaveClass('w-full');
-    expect(button).toHaveClass('h-11');
-    expect(button).toHaveClass('md:w-auto');
-  });
-
-  test('XL size', () => {
-    const { button } = setupTest({ size: 'xl' });
-    expect(button).toHaveClass('h-12');
-    expect(button).toHaveClass('px-6');
-    expect(button).toHaveClass('text-sm');
-  });
-
-  test('Large size', () => {
-    const { button } = setupTest({ size: 'lg' });
-    expect(button).toHaveClass('h-11');
-    expect(button).toHaveClass('px-5');
-    expect(button).toHaveClass('text-sm');
-  });
-
-  test('Medium size (default)', () => {
-    const { button } = setupTest({ size: 'md' });
-    expect(button).toHaveClass('h-10');
-    expect(button).toHaveClass('px-4');
-    expect(button).toHaveClass('text-sm');
-  });
-
-  test('Small size', () => {
-    const { button } = setupTest({ size: 'sm' });
-    expect(button).toHaveClass('h-9');
-    expect(button).toHaveClass('px-3');
-    expect(button).toHaveClass('text-sm');
-  });
-
-  test('Extra small size', () => {
-    const { button } = setupTest({ size: 'xs' });
-    expect(button).toHaveClass('h-8');
-    expect(button).toHaveClass('px-3');
-    expect(button).toHaveClass('text-xs');
-  });
-
-  test('Half width size', () => {
-    const { button } = setupTest({ size: 'half' });
-    expect(button).toHaveClass('w-1/2');
-    expect(button).toHaveClass('h-10');
-  });
-});
-
-describe('Button States', () => {
-  test('Loading state disables button', async () => {
-    const { button, onClick } = setupTest({ loading: true });
-
-    expect(button).toBeDisabled();
-    await userEvent.click(button);
-    expect(onClick).not.toHaveBeenCalled();
-  });
-
-  test('Success state shows checkmark and disables button', async () => {
-    const { button, onClick } = setupTest({ success: true });
-
-    expect(button).toBeDisabled();
-    expect(button).toHaveClass('bg-green-600');
-    await userEvent.click(button);
-    expect(onClick).not.toHaveBeenCalled();
-
-    // Should have checkmark SVG
-    expect(button.querySelector('svg')).toBeInTheDocument();
-  });
-
-  // Note: nav variant has been extracted to NavItem component
-  // This tests that unknown variants fall back to default styling
-
-  test('Active state for toggle variant', () => {
-    const { button } = setupTest({ active: true, variant: 'toggle' });
-    expect(button).toHaveClass('bg-blue-600');
-  });
-
-  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');
-  });
-});
-
-describe('Button as Link', () => {
-  test('Renders as anchor when href is provided', () => {
-    render(Button, { props: { href: '/test-link' } });
-    const link = screen.getByRole('link');
-    expect(link).toBeInTheDocument();
-    expect(link).toHaveAttribute('href', '/test-link');
-  });
-
-  test('Does not render as anchor when href is not provided', () => {
-    setupTest();
-    expect(screen.queryByRole('link')).not.toBeInTheDocument();
-    expect(screen.getByRole('button')).toBeInTheDocument();
-  });
-});
-
-describe('Button with Trailing Content', () => {
-  test('Button with trailing content stays centered (extracted variants use justify-between)', () => {
-    const trailing = () => '→';
-    const { container } = render(Button, {
-      props: {
-        variant: 'default',
-        children: () => 'Click Me',
-        trailing,
-      }
-    });
-    const button = container.querySelector('button');
-    // Standard Button variants are always centered - left-aligned behavior
-    // has been extracted to dedicated components (MenuItem, NavItem, etc.)
-    expect(button).toHaveClass('justify-center');
-  });
-});
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import Button from './Button.svelte';
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const onClick = vi.fn();
+  const { component } = render(Button, {
+    props: {
+      ...args,
+      onclick: onClick
+    }
+  });
+  const button = screen.getByRole('button');
+  return {
+    user,
+    component,
+    onClick,
+    button,
+  };
+}
+
+describe('Button Component Tests', () => {
+  test('Renders Button with default props', () => {
+    const { button } = setupTest();
+    expect(button).toBeInTheDocument();
+  });
+
+  test('Handles click event', async () => {
+    const { user, button, onClick } = setupTest();
+    await user.click(button);
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  test('Disables button when disabled prop is true', async () => {
+    const { button, onClick } = setupTest({ disabled: true });
+    expect(button).toBeDisabled();
+    await userEvent.click(button);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test('Renders with text content', () => {
+    const { container } = render(Button);
+    const button = container.querySelector('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  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 has blue background', () => {
+    const { button } = setupTest();
+    expect(button).toHaveClass('bg-blue-700');
+  });
+
+  test('Blue outline variant', () => {
+    const { button } = setupTest({ variant: 'outline' });
+    expect(button).toHaveClass('text-blue-700');
+    expect(button).toHaveClass('border-blue-700');
+  });
+
+  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' });
+    expect(button).toHaveClass('bg-red-700');
+  });
+
+  test('Red outline variant', () => {
+    const { button } = setupTest({ variant: '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('Gray text variant (ghost)', () => {
+    const { button } = setupTest({ variant: 'ghost' });
+    expect(button).toHaveClass('text-gray-500');
+    expect(button).toHaveClass('bg-transparent');
+  });
+
+  test('Legacy variant names still work', () => {
+    const { button } = setupTest({ variant: 'blue-solid' });
+    expect(button).toHaveClass('bg-blue-700');
+  });
+});
+
+describe('Button Sizes', () => {
+  test('Full width size', () => {
+    const { button } = setupTest({ size: 'full' });
+    expect(button).toHaveClass('w-full');
+    expect(button).toHaveClass('h-11');
+    expect(button).toHaveClass('px-5');
+  });
+
+  test('Full width on mobile, auto on desktop', () => {
+    const { button } = setupTest({ size: 'full-md-auto' });
+    expect(button).toHaveClass('w-full');
+    expect(button).toHaveClass('h-11');
+    expect(button).toHaveClass('md:w-auto');
+  });
+
+  test('XL size', () => {
+    const { button } = setupTest({ size: 'xl' });
+    expect(button).toHaveClass('h-12');
+    expect(button).toHaveClass('px-6');
+    expect(button).toHaveClass('text-sm');
+  });
+
+  test('Large size', () => {
+    const { button } = setupTest({ size: 'lg' });
+    expect(button).toHaveClass('h-11');
+    expect(button).toHaveClass('px-5');
+    expect(button).toHaveClass('text-sm');
+  });
+
+  test('Medium size (default)', () => {
+    const { button } = setupTest({ size: 'md' });
+    expect(button).toHaveClass('h-10');
+    expect(button).toHaveClass('px-4');
+    expect(button).toHaveClass('text-sm');
+  });
+
+  test('Small size', () => {
+    const { button } = setupTest({ size: 'sm' });
+    expect(button).toHaveClass('h-9');
+    expect(button).toHaveClass('px-3');
+    expect(button).toHaveClass('text-sm');
+  });
+
+  test('Extra small size', () => {
+    const { button } = setupTest({ size: 'xs' });
+    expect(button).toHaveClass('h-8');
+    expect(button).toHaveClass('px-3');
+    expect(button).toHaveClass('text-xs');
+  });
+
+  test('Half width size', () => {
+    const { button } = setupTest({ size: 'half' });
+    expect(button).toHaveClass('w-1/2');
+    expect(button).toHaveClass('h-10');
+  });
+});
+
+describe('Button States', () => {
+  test('Loading state disables button', async () => {
+    const { button, onClick } = setupTest({ loading: true });
+
+    expect(button).toBeDisabled();
+    await userEvent.click(button);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test('Success state shows checkmark and disables button', async () => {
+    const { button, onClick } = setupTest({ success: true });
+
+    expect(button).toBeDisabled();
+    expect(button).toHaveClass('bg-green-600');
+    await userEvent.click(button);
+    expect(onClick).not.toHaveBeenCalled();
+
+    // Should have checkmark SVG
+    expect(button.querySelector('svg')).toBeInTheDocument();
+  });
+
+  // Note: nav variant has been extracted to NavItem component
+  // This tests that unknown variants fall back to default styling
+
+  test('Active state for toggle variant', () => {
+    const { button } = setupTest({ active: true, variant: 'toggle' });
+    expect(button).toHaveClass('bg-blue-600');
+  });
+
+  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');
+  });
+});
+
+describe('Button as Link', () => {
+  test('Renders as anchor when href is provided', () => {
+    render(Button, { props: { href: '/test-link' } });
+    const link = screen.getByRole('link');
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/test-link');
+  });
+
+  test('Does not render as anchor when href is not provided', () => {
+    setupTest();
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+});
+
+describe('Button with Trailing Content', () => {
+  test('Button with trailing content stays centered (extracted variants use justify-between)', () => {
+    const trailing = () => '→';
+    const { container } = render(Button, {
+      props: {
+        variant: 'default',
+        children: () => 'Click Me',
+        trailing,
+      }
+    });
+    const button = container.querySelector('button');
+    // Standard Button variants are always centered - left-aligned behavior
+    // has been extracted to dedicated components (MenuItem, NavItem, etc.)
+    expect(button).toHaveClass('justify-center');
+  });
+});