@getmicdrop/svelte-components 5.20.2 → 5.21.0

package/dist/primitives/Toggle.svelte

@@ -1,141 +1,141 @@
-<script>
-  /**
-   * Toggle Component - Flowbite Native
-   * Migrated to Svelte 5 runes
-   *
-   * Note: Uses CSS style block for pseudo-element styling instead of Tailwind
-   * after: classes, because Tailwind v4 doesn't generate after: classes from
-   * node_modules when this component is consumed by other apps.
-   *
-   * Haptic Feedback:
-   *   - Selection haptic on state change (very light, tactile confirmation)
-   */
-  import { triggerHaptic } from '../utils/haptic.js';
-
-  /** @type {{
-    checked?: boolean,
-    disabled?: boolean,
-    size?: 'sm' | 'md' | 'lg',
-    haptic?: boolean,
-    class?: string,
-    onchange?: (detail: { checked: boolean }) => void,
-    children?: import('svelte').Snippet,
-  }} */
-  let {
-    checked = $bindable(false),
-    disabled = false,
-    size = 'md',
-    haptic = true,
-    class: className = '',
-    onchange,
-    children,
-    ...restProps
-  } = $props();
-
-  function handleChange(event) {
-    checked = event.target.checked;
-    // Haptic feedback on toggle change (QOL Bible)
-    if (haptic && !disabled) {
-      triggerHaptic('selection');
-    }
-    onchange?.({ checked });
-  }
-</script>
-
-<label class="inline-flex items-center {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}" {...restProps}>
-  <input
-    type="checkbox"
-    bind:checked
-    {disabled}
-    onchange={handleChange}
-    class="sr-only peer"
-  />
-  <div
-    class="toggle-track toggle-{size} relative bg-gray-200 peer-focus:outline-hidden peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:bg-blue-600"
-    role="switch"
-    aria-checked={checked}
-  ></div>
-  {#if children}
-    <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
-      {#if typeof children === 'function'}{@render children()}{:else}{children}{/if}
-    </span>
-  {/if}
-</label>
-
-<style>
-  /*
-   * Toggle track sizes (replaces Tailwind w-* h-* classes)
-   * Using CSS instead of Tailwind because these need to work in consuming apps
-   */
-  .toggle-sm {
-    width: 2.25rem; /* w-9 = 36px */
-    height: 1.25rem; /* h-5 = 20px */
-  }
-  .toggle-md {
-    width: 2.75rem; /* w-11 = 44px */
-    height: 1.5rem; /* h-6 = 24px */
-  }
-  .toggle-lg {
-    width: 3.5rem; /* w-14 = 56px */
-    height: 1.75rem; /* h-7 = 28px */
-  }
-
-  /*
-   * Toggle thumb (the white circle) - uses ::after pseudo-element
-   * Tailwind v4 doesn't generate after: classes from node_modules,
-   * so we use explicit CSS here.
-   */
-  .toggle-track::after {
-    content: '';
-    position: absolute;
-    background-color: white;
-    border: 1px solid #d1d5db; /* gray-300 */
-    border-radius: 9999px;
-    transition: all 150ms;
-  }
-
-  /* Thumb sizes for each toggle size */
-  .toggle-sm::after {
-    width: 1rem; /* 16px */
-    height: 1rem;
-    top: 0.125rem; /* 2px */
-    inset-inline-start: 0.125rem;
-  }
-  .toggle-md::after {
-    width: 1.25rem; /* 20px */
-    height: 1.25rem;
-    top: 0.125rem;
-    inset-inline-start: 0.125rem;
-  }
-  .toggle-lg::after {
-    width: 1.5rem; /* 24px */
-    height: 1.5rem;
-    top: 0.125rem;
-    inset-inline-start: 0.125rem;
-  }
-
-  /* Checked state - move thumb to the right */
-  :global(input.peer:checked) + .toggle-sm::after {
-    transform: translateX(1rem); /* 16px */
-    border-color: white;
-  }
-  :global(input.peer:checked) + .toggle-md::after {
-    transform: translateX(1.25rem); /* 20px */
-    border-color: white;
-  }
-  :global(input.peer:checked) + .toggle-lg::after {
-    transform: translateX(1.5rem); /* 24px */
-    border-color: white;
-  }
-
-  /* RTL support - translate in opposite direction */
-  :global([dir="rtl"]) :global(input.peer:checked) + .toggle-sm::after {
-    transform: translateX(-1rem);
-  }
-  :global([dir="rtl"]) :global(input.peer:checked) + .toggle-md::after {
-    transform: translateX(-1.25rem);
-  }
-  :global([dir="rtl"]) :global(input.peer:checked) + .toggle-lg::after {
-    transform: translateX(-1.5rem);
-  }
-</style>
+<script>
+  /**
+   * Toggle Component - Flowbite Native
+   * Migrated to Svelte 5 runes
+   *
+   * Note: Uses CSS style block for pseudo-element styling instead of Tailwind
+   * after: classes, because Tailwind v4 doesn't generate after: classes from
+   * node_modules when this component is consumed by other apps.
+   *
+   * Haptic Feedback:
+   *   - Selection haptic on state change (very light, tactile confirmation)
+   */
+  import { triggerHaptic } from '../utils/haptic.js';
+
+  /** @type {{
+    checked?: boolean,
+    disabled?: boolean,
+    size?: 'sm' | 'md' | 'lg',
+    haptic?: boolean,
+    class?: string,
+    onchange?: (detail: { checked: boolean }) => void,
+    children?: import('svelte').Snippet,
+  }} */
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    size = 'md',
+    haptic = true,
+    class: className = '',
+    onchange,
+    children,
+    ...restProps
+  } = $props();
+
+  function handleChange(event) {
+    checked = event.target.checked;
+    // Haptic feedback on toggle change (QOL Bible)
+    if (haptic && !disabled) {
+      triggerHaptic('selection');
+    }
+    onchange?.({ checked });
+  }
+</script>
+
+<label class="inline-flex items-center {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}" {...restProps}>
+  <input
+    type="checkbox"
+    bind:checked
+    {disabled}
+    onchange={handleChange}
+    class="sr-only peer"
+  />
+  <div
+    class="toggle-track toggle-{size} relative bg-gray-200 peer-focus:outline-hidden peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:bg-blue-600"
+    role="switch"
+    aria-checked={checked}
+  ></div>
+  {#if children}
+    <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+      {#if typeof children === 'function'}{@render children()}{:else}{children}{/if}
+    </span>
+  {/if}
+</label>
+
+<style>
+  /*
+   * Toggle track sizes (replaces Tailwind w-* h-* classes)
+   * Using CSS instead of Tailwind because these need to work in consuming apps
+   */
+  .toggle-sm {
+    width: 2.25rem; /* w-9 = 36px */
+    height: 1.25rem; /* h-5 = 20px */
+  }
+  .toggle-md {
+    width: 2.75rem; /* w-11 = 44px */
+    height: 1.5rem; /* h-6 = 24px */
+  }
+  .toggle-lg {
+    width: 3.5rem; /* w-14 = 56px */
+    height: 1.75rem; /* h-7 = 28px */
+  }
+
+  /*
+   * Toggle thumb (the white circle) - uses ::after pseudo-element
+   * Tailwind v4 doesn't generate after: classes from node_modules,
+   * so we use explicit CSS here.
+   */
+  .toggle-track::after {
+    content: '';
+    position: absolute;
+    background-color: white;
+    border: 1px solid #d1d5db; /* gray-300 */
+    border-radius: 9999px;
+    transition: all 150ms;
+  }
+
+  /* Thumb sizes for each toggle size */
+  .toggle-sm::after {
+    width: 1rem; /* 16px */
+    height: 1rem;
+    top: 0.125rem; /* 2px */
+    inset-inline-start: 0.125rem;
+  }
+  .toggle-md::after {
+    width: 1.25rem; /* 20px */
+    height: 1.25rem;
+    top: 0.125rem;
+    inset-inline-start: 0.125rem;
+  }
+  .toggle-lg::after {
+    width: 1.5rem; /* 24px */
+    height: 1.5rem;
+    top: 0.125rem;
+    inset-inline-start: 0.125rem;
+  }
+
+  /* Checked state - move thumb to the right */
+  :global(input.peer:checked) + .toggle-sm::after {
+    transform: translateX(1rem); /* 16px */
+    border-color: white;
+  }
+  :global(input.peer:checked) + .toggle-md::after {
+    transform: translateX(1.25rem); /* 20px */
+    border-color: white;
+  }
+  :global(input.peer:checked) + .toggle-lg::after {
+    transform: translateX(1.5rem); /* 24px */
+    border-color: white;
+  }
+
+  /* RTL support - translate in opposite direction */
+  :global([dir="rtl"]) :global(input.peer:checked) + .toggle-sm::after {
+    transform: translateX(-1rem);
+  }
+  :global([dir="rtl"]) :global(input.peer:checked) + .toggle-md::after {
+    transform: translateX(-1.25rem);
+  }
+  :global([dir="rtl"]) :global(input.peer:checked) + .toggle-lg::after {
+    transform: translateX(-1.5rem);
+  }
+</style>

package/dist/primitives/ToggleTestWrapper.svelte

@@ -1,30 +1,30 @@
-<script>
-  import Toggle from "./Toggle.svelte";
-
-  /** @type {{
-    checked?: boolean,
-    disabled?: boolean,
-    size?: 'sm' | 'md' | 'lg',
-    haptic?: boolean,
-    class?: string,
-    onchange?: (detail: { checked: boolean }) => void,
-    label?: string,
-    showLabel?: boolean,
-  }} */
-  let {
-    checked = $bindable(false),
-    disabled = false,
-    size = 'md',
-    haptic = true,
-    class: className = '',
-    onchange,
-    label = 'Toggle Label',
-    showLabel = false,
-  } = $props();
-</script>
-
-<Toggle bind:checked {disabled} {size} {haptic} class={className} {onchange}>
-  {#if showLabel}
-    <span>{label}</span>
-  {/if}
-</Toggle>
+<script>
+  import Toggle from "./Toggle.svelte";
+
+  /** @type {{
+    checked?: boolean,
+    disabled?: boolean,
+    size?: 'sm' | 'md' | 'lg',
+    haptic?: boolean,
+    class?: string,
+    onchange?: (detail: { checked: boolean }) => void,
+    label?: string,
+    showLabel?: boolean,
+  }} */
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    size = 'md',
+    haptic = true,
+    class: className = '',
+    onchange,
+    label = 'Toggle Label',
+    showLabel = false,
+  } = $props();
+</script>
+
+<Toggle bind:checked {disabled} {size} {haptic} class={className} {onchange}>
+  {#if showLabel}
+    <span>{label}</span>
+  {/if}
+</Toggle>

package/dist/primitives/Tooltip/Tooltip.spec.js

@@ -1,126 +1,126 @@
-import { render, fireEvent } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { expect, describe, test } from 'vitest';
-import Tooltip from './Tooltip.svelte';
-
-function textSnippet(text) {
-  return createRawSnippet(() => ({
-    render: () => `<span>${text}</span>`
-  }));
-}
-
-describe('Tooltip', () => {
-  test('renders wrapper div with role tooltip', () => {
-    const { container } = render(Tooltip, { props: { content: 'Help text' } });
-    expect(container.querySelector('[role="tooltip"]')).toBeInTheDocument();
-  });
-
-  test('tooltip popup is hidden by default', () => {
-    const { container } = render(Tooltip, { props: { content: 'Help text' } });
-    expect(container.querySelector('.z-50')).not.toBeInTheDocument();
-  });
-
-  test('shows tooltip on mouseenter', async () => {
-    const { container } = render(Tooltip, { props: { content: 'Help text' } });
-    const wrapper = container.querySelector('[role="tooltip"]');
-    await fireEvent.mouseEnter(wrapper);
-    expect(container.textContent).toContain('Help text');
-  });
-
-  test('mouseenter then mouseleave fires handlers', async () => {
-    const { container } = render(Tooltip, { props: { content: 'Help text' } });
-    const wrapper = container.querySelector('[role="tooltip"]');
-    await fireEvent.mouseEnter(wrapper);
-    expect(container.querySelector('.z-50')).toBeInTheDocument();
-    // mouseleave triggers hide; transition may keep element but handler fires
-    await fireEvent.mouseLeave(wrapper);
-    expect(wrapper).toBeInTheDocument();
-  });
-
-  test('shows tooltip on focus', async () => {
-    const { container } = render(Tooltip, { props: { content: 'Focus text' } });
-    const wrapper = container.querySelector('[role="tooltip"]');
-    await fireEvent.focus(wrapper);
-    expect(container.textContent).toContain('Focus text');
-  });
-
-  test('blur fires hide handler', async () => {
-    const { container } = render(Tooltip, { props: { content: 'Blur text' } });
-    const wrapper = container.querySelector('[role="tooltip"]');
-    await fireEvent.focus(wrapper);
-    expect(container.querySelector('.z-50')).toBeInTheDocument();
-    await fireEvent.blur(wrapper);
-    // Handler is invoked, wrapper still in DOM
-    expect(wrapper).toBeInTheDocument();
-  });
-
-  test('does not show tooltip when content is empty', async () => {
-    const { container } = render(Tooltip, { props: { content: '' } });
-    const wrapper = container.querySelector('[role="tooltip"]');
-    await fireEvent.mouseEnter(wrapper);
-    expect(container.querySelector('.z-50')).not.toBeInTheDocument();
-  });
-
-  test('applies custom className to tooltip popup', async () => {
-    const { container } = render(Tooltip, { props: { content: 'Test', class: 'my-tip' } });
-    const wrapper = container.querySelector('[role="tooltip"]');
-    await fireEvent.mouseEnter(wrapper);
-    expect(container.querySelector('.my-tip')).toBeInTheDocument();
-  });
-
-  test('has relative inline-block wrapper', () => {
-    const { container } = render(Tooltip, { props: { content: 'Text' } });
-    expect(container.querySelector('.relative.inline-block')).toBeInTheDocument();
-  });
-
-  test('tooltip has arrow element', async () => {
-    const { container } = render(Tooltip, { props: { content: 'Arrow test' } });
-    await fireEvent.mouseEnter(container.querySelector('[role="tooltip"]'));
-    expect(container.querySelector('.border-4')).toBeInTheDocument();
-  });
-
-  test('renders children trigger content when provided', () => {
-    const { container } = render(Tooltip, {
-      props: { content: 'Tip text', children: textSnippet('Hover me') }
-    });
-    const wrapper = container.querySelector('[role="tooltip"]');
-    expect(wrapper.textContent).toContain('Hover me');
-  });
-
-  test('renders empty trigger area when no children provided', () => {
-    const { container } = render(Tooltip, { props: { content: 'Tip text' } });
-    const wrapper = container.querySelector('[role="tooltip"]');
-    // Whitespace may be present from template formatting
-    expect(wrapper.textContent.trim()).toBe('');
-  });
-
-  test('placement bottom applies correct positioning', async () => {
-    const { container } = render(Tooltip, {
-      props: { content: 'Bottom tip', placement: 'bottom' }
-    });
-    const wrapper = container.querySelector('[role="tooltip"]');
-    await fireEvent.mouseEnter(wrapper);
-    const popup = container.querySelector('.z-50');
-    expect(popup.className).toContain('top-full');
-  });
-
-  test('placement left applies correct positioning', async () => {
-    const { container } = render(Tooltip, {
-      props: { content: 'Left tip', placement: 'left' }
-    });
-    const wrapper = container.querySelector('[role="tooltip"]');
-    await fireEvent.mouseEnter(wrapper);
-    const popup = container.querySelector('.z-50');
-    expect(popup.className).toContain('right-full');
-  });
-
-  test('placement right applies correct positioning', async () => {
-    const { container } = render(Tooltip, {
-      props: { content: 'Right tip', placement: 'right' }
-    });
-    const wrapper = container.querySelector('[role="tooltip"]');
-    await fireEvent.mouseEnter(wrapper);
-    const popup = container.querySelector('.z-50');
-    expect(popup.className).toContain('left-full');
-  });
-});
+import { render, fireEvent } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { expect, describe, test } from 'vitest';
+import Tooltip from './Tooltip.svelte';
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
+
+describe('Tooltip', () => {
+  test('renders wrapper div with role tooltip', () => {
+    const { container } = render(Tooltip, { props: { content: 'Help text' } });
+    expect(container.querySelector('[role="tooltip"]')).toBeInTheDocument();
+  });
+
+  test('tooltip popup is hidden by default', () => {
+    const { container } = render(Tooltip, { props: { content: 'Help text' } });
+    expect(container.querySelector('.z-50')).not.toBeInTheDocument();
+  });
+
+  test('shows tooltip on mouseenter', async () => {
+    const { container } = render(Tooltip, { props: { content: 'Help text' } });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.mouseEnter(wrapper);
+    expect(container.textContent).toContain('Help text');
+  });
+
+  test('mouseenter then mouseleave fires handlers', async () => {
+    const { container } = render(Tooltip, { props: { content: 'Help text' } });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.mouseEnter(wrapper);
+    expect(container.querySelector('.z-50')).toBeInTheDocument();
+    // mouseleave triggers hide; transition may keep element but handler fires
+    await fireEvent.mouseLeave(wrapper);
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  test('shows tooltip on focus', async () => {
+    const { container } = render(Tooltip, { props: { content: 'Focus text' } });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.focus(wrapper);
+    expect(container.textContent).toContain('Focus text');
+  });
+
+  test('blur fires hide handler', async () => {
+    const { container } = render(Tooltip, { props: { content: 'Blur text' } });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.focus(wrapper);
+    expect(container.querySelector('.z-50')).toBeInTheDocument();
+    await fireEvent.blur(wrapper);
+    // Handler is invoked, wrapper still in DOM
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  test('does not show tooltip when content is empty', async () => {
+    const { container } = render(Tooltip, { props: { content: '' } });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.mouseEnter(wrapper);
+    expect(container.querySelector('.z-50')).not.toBeInTheDocument();
+  });
+
+  test('applies custom className to tooltip popup', async () => {
+    const { container } = render(Tooltip, { props: { content: 'Test', class: 'my-tip' } });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.mouseEnter(wrapper);
+    expect(container.querySelector('.my-tip')).toBeInTheDocument();
+  });
+
+  test('has relative inline-block wrapper', () => {
+    const { container } = render(Tooltip, { props: { content: 'Text' } });
+    expect(container.querySelector('.relative.inline-block')).toBeInTheDocument();
+  });
+
+  test('tooltip has arrow element', async () => {
+    const { container } = render(Tooltip, { props: { content: 'Arrow test' } });
+    await fireEvent.mouseEnter(container.querySelector('[role="tooltip"]'));
+    expect(container.querySelector('.border-4')).toBeInTheDocument();
+  });
+
+  test('renders children trigger content when provided', () => {
+    const { container } = render(Tooltip, {
+      props: { content: 'Tip text', children: textSnippet('Hover me') }
+    });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    expect(wrapper.textContent).toContain('Hover me');
+  });
+
+  test('renders empty trigger area when no children provided', () => {
+    const { container } = render(Tooltip, { props: { content: 'Tip text' } });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    // Whitespace may be present from template formatting
+    expect(wrapper.textContent.trim()).toBe('');
+  });
+
+  test('placement bottom applies correct positioning', async () => {
+    const { container } = render(Tooltip, {
+      props: { content: 'Bottom tip', placement: 'bottom' }
+    });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.mouseEnter(wrapper);
+    const popup = container.querySelector('.z-50');
+    expect(popup.className).toContain('top-full');
+  });
+
+  test('placement left applies correct positioning', async () => {
+    const { container } = render(Tooltip, {
+      props: { content: 'Left tip', placement: 'left' }
+    });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.mouseEnter(wrapper);
+    const popup = container.querySelector('.z-50');
+    expect(popup.className).toContain('right-full');
+  });
+
+  test('placement right applies correct positioning', async () => {
+    const { container } = render(Tooltip, {
+      props: { content: 'Right tip', placement: 'right' }
+    });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.mouseEnter(wrapper);
+    const popup = container.querySelector('.z-50');
+    expect(popup.className).toContain('left-full');
+  });
+});