@getmicdrop/svelte-components 5.17.1 → 5.17.3

package/dist/primitives/Badges/Badge.svelte

@@ -1,99 +1,99 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { classNames } from "./../../utils/utils.js";
-  import { badgeColorVariants, type BadgeColorVariant } from '../../tokens/variants.js';
-  import { badgeSizes, badgeSizeLegacyMap, type BadgeSize, type BadgeSizeLegacy } from '../../tokens/sizing.js';
-
-  type Size = BadgeSize | BadgeSizeLegacy;
-  type Variant = BadgeColorVariant;
-
-  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;
-  }
-
-  let {
-    size = "md",
-    className = '',
-    variant = "neutral",
-    textColor = null,
-    bgColor = null,
-    showDot = false,
-    pill = false,
-    shape = "rounded",
-    large = false,
-    onclick,
-    leftIcon,
-    children
-  }: Props = $props();
-
-let resolvedSize = $derived((): BadgeSize => {
-    if (large) return 'lg';
-    const legacyMapped = badgeSizeLegacyMap[size];
-    if (legacyMapped) return legacyMapped;
-    return (size as BadgeSize) || 'md';
-  });
-
-  let sizeClasses = $derived(badgeSizes[resolvedSize()] || badgeSizes.md);
-
-  let shapeClasses = $derived((() => {
-    if (pill) return "rounded-full min-w-5 h-5 px-1.5 justify-center";
-    return shape === "pill" ? "rounded-full" : "rounded";
-  })());
-
-  let normalizedVariant = $derived(String(variant).toLowerCase());
-
-let variantClasses = $derived(
-    badgeColorVariants[normalizedVariant as BadgeColorVariant] ||
-    badgeColorVariants.neutral
-  );
-
-  let customStyle = $derived((() => {
-    const styles: string[] = [];
-    if (textColor) styles.push(`color: ${textColor}`);
-    if (bgColor) styles.push(`background-color: ${bgColor}`);
-    return styles.length > 0 ? styles.join("; ") : undefined;
-  })());
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  class={classNames(
-    "inline-flex items-center gap-1.5",
-    sizeClasses,
-    variantClasses,
-    shapeClasses,
-    className
-  )}
-  style={customStyle}
-  onclick={(e) => onclick?.(e)}
->
-  {#if showDot}
-    <span class="w-1.5 h-1.5 rounded-full bg-current shrink-0"></span>
-  {/if}
-  {@render leftIcon?.()}
-  {@render children?.()}
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { classNames } from "./../../utils/utils.js";
+  import { badgeColorVariants, type BadgeColorVariant } from '../../tokens/variants.js';
+  import { badgeSizes, badgeSizeLegacyMap, type BadgeSize, type BadgeSizeLegacy } from '../../tokens/sizing.js';
+
+  type Size = BadgeSize | BadgeSizeLegacy;
+  type Variant = BadgeColorVariant;
+
+  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;
+  }
+
+  let {
+    size = "md",
+    className = '',
+    variant = "neutral",
+    textColor = null,
+    bgColor = null,
+    showDot = false,
+    pill = false,
+    shape = "rounded",
+    large = false,
+    onclick,
+    leftIcon,
+    children
+  }: Props = $props();
+
+let resolvedSize = $derived((): BadgeSize => {
+    if (large) return 'lg';
+    const legacyMapped = badgeSizeLegacyMap[size];
+    if (legacyMapped) return legacyMapped;
+    return (size as BadgeSize) || 'md';
+  });
+
+  let sizeClasses = $derived(badgeSizes[resolvedSize()] || badgeSizes.md);
+
+  let shapeClasses = $derived((() => {
+    if (pill) return "rounded-full min-w-5 h-5 px-1.5 justify-center";
+    return shape === "pill" ? "rounded-full" : "rounded";
+  })());
+
+  let normalizedVariant = $derived(String(variant).toLowerCase());
+
+let variantClasses = $derived(
+    badgeColorVariants[normalizedVariant as BadgeColorVariant] ||
+    badgeColorVariants.neutral
+  );
+
+  let customStyle = $derived((() => {
+    const styles: string[] = [];
+    if (textColor) styles.push(`color: ${textColor}`);
+    if (bgColor) styles.push(`background-color: ${bgColor}`);
+    return styles.length > 0 ? styles.join("; ") : undefined;
+  })());
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class={classNames(
+    "inline-flex items-center gap-1.5",
+    sizeClasses,
+    variantClasses,
+    shapeClasses,
+    className
+  )}
+  style={customStyle}
+  onclick={(e) => onclick?.(e)}
+>
+  {#if showDot}
+    <span class="w-1.5 h-1.5 rounded-full bg-current shrink-0"></span>
+  {/if}
+  {@render leftIcon?.()}
+  {@render children?.()}
+</div>

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

@@ -1,136 +1,238 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, fireEvent, cleanup } from '@testing-library/svelte';
-import BottomSheet from './BottomSheet.svelte';
-import BottomSheetWrapper from './BottomSheetWrapper.test.svelte';
-
-describe('BottomSheet Component', () => {
-  beforeEach(() => {
-    // Reset body overflow
-    document.body.style.overflow = '';
-  });
-
-  afterEach(() => {
-    document.body.style.overflow = '';
-    cleanup();
-  });
-
-  it('does not render when open is false', () => {
-    const { container } = render(BottomSheet, { props: { open: false } });
-    const backdrop = container.querySelector('.fixed.inset-0');
-    expect(backdrop).toBeFalsy();
-  });
-
-  it('renders when open is true', () => {
-    const { container } = render(BottomSheet, { props: { open: true } });
-    const backdrop = container.querySelector('.fixed.inset-0');
-    expect(backdrop).toBeTruthy();
-  });
-
-  it('renders title when provided', () => {
-    const { getByText } = render(BottomSheet, {
-      props: { open: true, title: 'Test Title' },
-    });
-    expect(getByText('Test Title')).toBeTruthy();
-  });
-
-  it('does not render title when not provided', () => {
-    const { container } = render(BottomSheet, { props: { open: true } });
-    const title = container.querySelector('h3');
-    expect(title).toBeFalsy();
-  });
-
-  it('locks body scroll when open', async () => {
-    render(BottomSheet, { props: { open: true } });
-    // Wait for reactive update
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    expect(document.body.style.overflow).toBe('hidden');
-  });
-
-  it('unlocks body scroll when closed', async () => {
-    const { rerender } = render(BottomSheetWrapper, { props: { open: true } });
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    expect(document.body.style.overflow).toBe('hidden');
-
-    await rerender({ open: false });
-    await new Promise((resolve) => setTimeout(resolve, 10));
-
-    expect(document.body.style.overflow).toBe('');
-  });
-
-  it('dispatches close event on backdrop click', async () => {
-    let closeCalled = false;
-    const onclose = () => {
-      closeCalled = true;
-    };
-
-    const { container } = render(BottomSheet, {
-      props: { open: 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 () => {
-    let closeCalled = false;
-    const onclose = () => {
-      closeCalled = true;
-    };
-
-    const { container } = render(BottomSheet, {
-      props: { open: 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 () => {
-    let closeCalled = false;
-    const onclose = () => {
-      closeCalled = true;
-    };
-
-    render(BottomSheet, { props: { open: true, onclose } });
-
-    await fireEvent.keyDown(window, { key: 'Escape' });
-    expect(closeCalled).toBe(true);
-  });
-
-  it('does not dispatch close on Escape when not open', async () => {
-    let closeCalled = false;
-    const onclose = () => {
-      closeCalled = true;
-    };
-
-    render(BottomSheet, { props: { open: false, onclose } });
-
-    await fireEvent.keyDown(window, { key: 'Escape' });
-    expect(closeCalled).toBe(false);
-  });
-
-  it('has handle bar element', () => {
-    const { container } = render(BottomSheet, { props: { open: true } });
-    // 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: { open: true } });
-    // 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', () => {
-    document.body.style.overflow = 'hidden';
-    const { unmount } = render(BottomSheet, { props: { open: true } });
-
-    unmount();
-
-    expect(document.body.style.overflow).toBe('');
-  });
-});
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, fireEvent, cleanup } from '@testing-library/svelte';
+import BottomSheet from './BottomSheet.svelte';
+import BottomSheetWrapper from './BottomSheetWrapper.test.svelte';
+import BottomSheetWithActions from './BottomSheetWithActions.test.svelte';
+
+describe('BottomSheet Component', () => {
+  beforeEach(() => {
+    // Reset body overflow
+    document.body.style.overflow = '';
+  });
+
+  afterEach(() => {
+    document.body.style.overflow = '';
+    cleanup();
+  });
+
+  it('does not render when open is false', () => {
+    const { container } = render(BottomSheet, { props: { open: false } });
+    const backdrop = container.querySelector('.fixed.inset-0');
+    expect(backdrop).toBeFalsy();
+  });
+
+  it('renders when open is true', () => {
+    const { container } = render(BottomSheet, { props: { open: true } });
+    const backdrop = container.querySelector('.fixed.inset-0');
+    expect(backdrop).toBeTruthy();
+  });
+
+  it('renders title when provided', () => {
+    const { getByText } = render(BottomSheet, {
+      props: { open: true, title: 'Test Title' },
+    });
+    expect(getByText('Test Title')).toBeTruthy();
+  });
+
+  it('does not render title when not provided', () => {
+    const { container } = render(BottomSheet, { props: { open: true } });
+    const title = container.querySelector('h3');
+    expect(title).toBeFalsy();
+  });
+
+  it('locks body scroll when open', async () => {
+    render(BottomSheet, { props: { open: true } });
+    // Wait for reactive update
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('hidden');
+  });
+
+  it('unlocks body scroll when closed', async () => {
+    const { rerender } = render(BottomSheetWrapper, { props: { open: true } });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('hidden');
+
+    await rerender({ open: false });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('dispatches close event on backdrop click', async () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    const { container } = render(BottomSheet, {
+      props: { open: 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 () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    const { container } = render(BottomSheet, {
+      props: { open: 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 () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    render(BottomSheet, { props: { open: true, onclose } });
+
+    await fireEvent.keyDown(window, { key: 'Escape' });
+    expect(closeCalled).toBe(true);
+  });
+
+  it('does not dispatch close on Escape when not open', async () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    render(BottomSheet, { props: { open: false, onclose } });
+
+    await fireEvent.keyDown(window, { key: 'Escape' });
+    expect(closeCalled).toBe(false);
+  });
+
+  it('has handle bar element', () => {
+    const { container } = render(BottomSheet, { props: { open: true } });
+    // 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: { open: true } });
+    // 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', () => {
+    document.body.style.overflow = 'hidden';
+    const { unmount } = render(BottomSheet, { props: { open: true } });
+
+    unmount();
+
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('renders actions slot when provided', () => {
+    const { container } = render(BottomSheetWithActions, { props: { open: true } });
+    // The actions area should contain our buttons
+    const saveBtn = container.querySelector('button');
+    expect(saveBtn).toBeTruthy();
+    // Check both action buttons are rendered
+    const buttons = container.querySelectorAll('button');
+    const buttonTexts = Array.from(buttons).map(b => b.textContent);
+    expect(buttonTexts).toContain('Save');
+    expect(buttonTexts).toContain('Cancel');
+  });
+
+  it('does not render actions area when no actions snippet is provided', () => {
+    const { container } = render(BottomSheet, { props: { open: true } });
+    // The actions footer area should not exist if no actions snippet
+    const actionsArea = container.querySelector('.border-t.border-gray-200');
+    expect(actionsArea).toBeFalsy();
+  });
+
+  it('applies alwaysSheet class when alwaysSheet is true', () => {
+    const { container } = render(BottomSheet, {
+      props: { open: true, alwaysSheet: true }
+    });
+    const backdrop = container.querySelector('.fixed.inset-0');
+    // When alwaysSheet is true, backdrop should NOT have md:items-center
+    expect(backdrop.classList.contains('md:items-center')).toBe(false);
+  });
+
+  it('applies responsive classes when alwaysSheet is false', () => {
+    const { container } = render(BottomSheet, {
+      props: { open: true, alwaysSheet: false }
+    });
+    const backdrop = container.querySelector('.fixed.inset-0');
+    // When alwaysSheet is false, backdrop should have md:items-center
+    expect(backdrop.classList.contains('md:items-center')).toBe(true);
+  });
+
+  it('does not close on backdrop click when target is not currentTarget', async () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    const { container } = render(BottomSheet, {
+      props: { open: true, onclose }
+    });
+    // Click the inner sheet panel (not the backdrop itself)
+    const sheetPanel = container.querySelector('.bg-white');
+    await fireEvent.click(sheetPanel);
+    expect(closeCalled).toBe(false);
+  });
+
+  it('does not call onclose on Escape when key is not Escape', async () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    render(BottomSheet, { props: { open: true, onclose } });
+
+    await fireEvent.keyDown(window, { key: 'Enter' });
+    expect(closeCalled).toBe(false);
+  });
+
+  it('handles open toggling from true to false via effect', async () => {
+    const { rerender } = render(BottomSheetWithActions, { props: { open: true } });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('hidden');
+
+    await rerender({ open: false });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('does not close when clicking on the handle bar inside the sheet', async () => {
+    let closeCalled = false;
+    const onclose = () => { closeCalled = true; };
+
+    const { container } = render(BottomSheet, {
+      props: { open: true, onclose }
+    });
+    // Click the handle bar (a child of the backdrop)
+    const handleBar = container.querySelector('.w-10.h-1.bg-gray-300');
+    await fireEvent.click(handleBar);
+    expect(closeCalled).toBe(false);
+  });
+
+  it('restores body overflow when initially rendered as closed', async () => {
+    // Render initially closed - the $effect should set overflow to ''
+    render(BottomSheet, { props: { open: false } });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('cleans up overflow on destroy when document is available', () => {
+    document.body.style.overflow = 'hidden';
+    const { unmount } = render(BottomSheetWithActions, { props: { open: true } });
+    unmount();
+    expect(document.body.style.overflow).toBe('');
+  });
+});