@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/primitives/Toggle.spec.js

@@ -1,221 +1,219 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import Toggle from './Toggle.svelte';
-import ToggleTestWrapper from './ToggleTestWrapper.svelte';
-
-// Mock the haptic module so we can verify it's called
-vi.mock('$lib/utils/haptic.js', () => ({
-  triggerHaptic: vi.fn(),
-}));
-
-describe('Toggle Component', () => {
-  it('renders a toggle with label element', () => {
-    const { container } = render(Toggle);
-    const label = container.querySelector('label');
-    expect(label).toBeTruthy();
-    expect(label).toHaveClass('inline-flex');
-    expect(label).toHaveClass('items-center');
-  });
-
-  it('renders a hidden checkbox input', () => {
-    const { container } = render(Toggle);
-    const input = container.querySelector('input[type="checkbox"]');
-    expect(input).toBeTruthy();
-    expect(input).toHaveClass('sr-only');
-    expect(input).toHaveClass('peer');
-  });
-
-  it('renders switch element with role switch', () => {
-    const { container } = render(Toggle);
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toBeTruthy();
-  });
-
-  it('has aria-checked false by default', () => {
-    const { container } = render(Toggle);
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl.getAttribute('aria-checked')).toBe('false');
-  });
-
-  it('has aria-checked true when checked', () => {
-    const { container } = render(Toggle, { checked: true });
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl.getAttribute('aria-checked')).toBe('true');
-  });
-
-  it('checkbox reflects checked state', () => {
-    const { container } = render(Toggle, { checked: true });
-    const input = container.querySelector('input[type="checkbox"]');
-    expect(input.checked).toBe(true);
-  });
-
-  it('checkbox reflects unchecked state', () => {
-    const { container } = render(Toggle, { checked: false });
-    const input = container.querySelector('input[type="checkbox"]');
-    expect(input.checked).toBe(false);
-  });
-
-  it('toggles checked state on change', async () => {
-    const onchange = vi.fn();
-    const { container } = render(Toggle, { onchange });
-    const input = container.querySelector('input[type="checkbox"]');
-
-    await fireEvent.click(input);
-
-    expect(onchange).toHaveBeenCalledWith({ checked: true });
-  });
-
-  it('toggles from checked to unchecked', async () => {
-    const onchange = vi.fn();
-    const { container } = render(Toggle, { checked: true, onchange });
-    const input = container.querySelector('input[type="checkbox"]');
-
-    await fireEvent.click(input);
-
-    expect(onchange).toHaveBeenCalledWith({ checked: false });
-  });
-
-  it('has disabled attribute when disabled', () => {
-    const { container } = render(Toggle, { disabled: true });
-    const input = container.querySelector('input[type="checkbox"]');
-    expect(input.disabled).toBe(true);
-  });
-
-  it('has disabled styling on label when disabled', () => {
-    const { container } = render(Toggle, { disabled: true });
-    const label = container.querySelector('label');
-    expect(label).toHaveClass('cursor-not-allowed');
-    expect(label).toHaveClass('opacity-50');
-  });
-
-  it('has pointer cursor when not disabled', () => {
-    const { container } = render(Toggle, { disabled: false });
-    const label = container.querySelector('label');
-    expect(label).toHaveClass('cursor-pointer');
-  });
-
-  it('has switch element with rounded-full class', () => {
-    const { container } = render(Toggle);
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toHaveClass('rounded-full');
-  });
-
-  it('has default md size track dimensions', () => {
-    const { container } = render(Toggle, { size: 'md' });
-    const switchEl = container.querySelector('[role="switch"]');
-    // Uses CSS classes instead of Tailwind for Tailwind v4 compatibility
-    expect(switchEl).toHaveClass('toggle-track');
-    expect(switchEl).toHaveClass('toggle-md');
-  });
-
-  it('has sm size track dimensions', () => {
-    const { container } = render(Toggle, { size: 'sm' });
-    const switchEl = container.querySelector('[role="switch"]');
-    // Uses CSS classes instead of Tailwind for Tailwind v4 compatibility
-    expect(switchEl).toHaveClass('toggle-track');
-    expect(switchEl).toHaveClass('toggle-sm');
-  });
-
-  it('has lg size track dimensions', () => {
-    const { container } = render(Toggle, { size: 'lg' });
-    const switchEl = container.querySelector('[role="switch"]');
-    // Uses CSS classes instead of Tailwind for Tailwind v4 compatibility
-    expect(switchEl).toHaveClass('toggle-track');
-    expect(switchEl).toHaveClass('toggle-lg');
-  });
-
-  it('has dark mode classes', () => {
-    const { container } = render(Toggle);
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toHaveClass('dark:bg-gray-700');
-    expect(switchEl).toHaveClass('dark:peer-focus:ring-blue-800');
-  });
-
-  it('accepts custom class', () => {
-    const { container } = render(Toggle, { class: 'custom-class' });
-    const label = container.querySelector('label');
-    expect(label).toHaveClass('custom-class');
-  });
-
-  it('has peer focus ring classes', () => {
-    const { container } = render(Toggle);
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toHaveClass('peer-focus:ring-4');
-    expect(switchEl).toHaveClass('peer-focus:ring-blue-300');
-  });
-
-  it('has blue background when checked', () => {
-    const { container } = render(Toggle);
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toHaveClass('peer-checked:bg-blue-600');
-  });
-});
-
-describe('Toggle Haptic Feedback (line 40)', () => {
-  it('calls triggerHaptic when haptic=true and not disabled', async () => {
-    const { triggerHaptic } = await import('../utils/haptic.js');
-    triggerHaptic.mockClear();
-
-    const { container } = render(Toggle, { haptic: true, disabled: false });
-    const input = container.querySelector('input[type="checkbox"]');
-
-    await fireEvent.click(input);
-
-    expect(triggerHaptic).toHaveBeenCalledWith('selection');
-  });
-
-  it('does not call triggerHaptic when haptic=false', async () => {
-    const { triggerHaptic } = await import('../utils/haptic.js');
-    triggerHaptic.mockClear();
-
-    const { container } = render(Toggle, { haptic: false });
-    const input = container.querySelector('input[type="checkbox"]');
-
-    await fireEvent.click(input);
-
-    expect(triggerHaptic).not.toHaveBeenCalled();
-  });
-
-  it('does not call triggerHaptic when disabled', async () => {
-    const { triggerHaptic } = await import('../utils/haptic.js');
-    triggerHaptic.mockClear();
-
-    const { container } = render(Toggle, { haptic: true, disabled: true });
-    const input = container.querySelector('input[type="checkbox"]');
-
-    // Force-fire change on disabled input
-    await fireEvent.change(input, { target: { checked: true } });
-
-    expect(triggerHaptic).not.toHaveBeenCalled();
-  });
-});
-
-describe('Toggle Children Rendering (line 60)', () => {
-  it('renders children snippet with label text', () => {
-    const { container } = render(ToggleTestWrapper, {
-      showLabel: true,
-      label: 'My Toggle'
-    });
-
-    const span = container.querySelector('span.ms-3');
-    expect(span).toBeInTheDocument();
-    expect(span.textContent).toContain('My Toggle');
-  });
-
-  it('does not render label span when no children provided', () => {
-    const { container } = render(Toggle);
-    const span = container.querySelector('span.ms-3');
-    expect(span).not.toBeInTheDocument();
-  });
-
-  it('renders label span with correct styling', () => {
-    const { container } = render(ToggleTestWrapper, {
-      showLabel: true,
-      label: 'Styled Label'
-    });
-
-    const span = container.querySelector('span.ms-3');
-    expect(span).toHaveClass('text-sm');
-    expect(span).toHaveClass('font-medium');
-  });
-});
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Toggle from './Toggle.svelte';
+import ToggleTestWrapper from './ToggleTestWrapper.svelte';
+
+// Mock the haptic module so we can verify it's called
+vi.mock('$lib/utils/haptic.js', () => ({
+  triggerHaptic: vi.fn(),
+}));
+
+describe('Toggle Component', () => {
+  it('renders a toggle with label element', () => {
+    const { container } = render(Toggle);
+    const label = container.querySelector('label');
+    expect(label).toBeTruthy();
+    expect(label).toHaveClass('inline-flex');
+    expect(label).toHaveClass('items-center');
+  });
+
+  it('renders a hidden checkbox input', () => {
+    const { container } = render(Toggle);
+    const input = container.querySelector('input[type="checkbox"]');
+    expect(input).toBeTruthy();
+    expect(input).toHaveClass('sr-only');
+    expect(input).toHaveClass('peer');
+  });
+
+  it('renders switch element with role switch', () => {
+    const { container } = render(Toggle);
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl).toBeTruthy();
+  });
+
+  it('has aria-checked false by default', () => {
+    const { container } = render(Toggle);
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl.getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('has aria-checked true when checked', () => {
+    const { container } = render(Toggle, { checked: true });
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl.getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('checkbox reflects checked state', () => {
+    const { container } = render(Toggle, { checked: true });
+    const input = container.querySelector('input[type="checkbox"]');
+    expect(input.checked).toBe(true);
+  });
+
+  it('checkbox reflects unchecked state', () => {
+    const { container } = render(Toggle, { checked: false });
+    const input = container.querySelector('input[type="checkbox"]');
+    expect(input.checked).toBe(false);
+  });
+
+  it('toggles checked state on change', async () => {
+    const onchange = vi.fn();
+    const { container } = render(Toggle, { onchange });
+    const input = container.querySelector('input[type="checkbox"]');
+
+    await fireEvent.click(input);
+
+    expect(onchange).toHaveBeenCalledWith({ checked: true });
+  });
+
+  it('toggles from checked to unchecked', async () => {
+    const onchange = vi.fn();
+    const { container } = render(Toggle, { checked: true, onchange });
+    const input = container.querySelector('input[type="checkbox"]');
+
+    await fireEvent.click(input);
+
+    expect(onchange).toHaveBeenCalledWith({ checked: false });
+  });
+
+  it('has disabled attribute when disabled', () => {
+    const { container } = render(Toggle, { disabled: true });
+    const input = container.querySelector('input[type="checkbox"]');
+    expect(input.disabled).toBe(true);
+  });
+
+  it('has disabled styling on label when disabled', () => {
+    const { container } = render(Toggle, { disabled: true });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('cursor-not-allowed');
+    expect(label).toHaveClass('opacity-50');
+  });
+
+  it('has pointer cursor when not disabled', () => {
+    const { container } = render(Toggle, { disabled: false });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('cursor-pointer');
+  });
+
+  it('has switch element with rounded-full class', () => {
+    const { container } = render(Toggle);
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl).toHaveClass('rounded-full');
+  });
+
+  it('has default md size track dimensions', () => {
+    const { container } = render(Toggle, { size: 'md' });
+    const switchEl = container.querySelector('[role="switch"]');
+    // Uses CSS classes instead of Tailwind for Tailwind v4 compatibility
+    expect(switchEl).toHaveClass('toggle-track');
+    expect(switchEl).toHaveClass('toggle-md');
+  });
+
+  it('has sm size track dimensions', () => {
+    const { container } = render(Toggle, { size: 'sm' });
+    const switchEl = container.querySelector('[role="switch"]');
+    // Uses CSS classes instead of Tailwind for Tailwind v4 compatibility
+    expect(switchEl).toHaveClass('toggle-track');
+    expect(switchEl).toHaveClass('toggle-sm');
+  });
+
+  it('has lg size track dimensions', () => {
+    const { container } = render(Toggle, { size: 'lg' });
+    const switchEl = container.querySelector('[role="switch"]');
+    // Uses CSS classes instead of Tailwind for Tailwind v4 compatibility
+    expect(switchEl).toHaveClass('toggle-track');
+    expect(switchEl).toHaveClass('toggle-lg');
+  });
+
+  it('has bg-bg-tertiary class for track', () => {
+    const { container } = render(Toggle);
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl).toHaveClass('bg-bg-tertiary');
+  });
+
+  it('accepts custom class', () => {
+    const { container } = render(Toggle, { class: 'custom-class' });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('custom-class');
+  });
+
+  it('has peer focus ring classes', () => {
+    const { container } = render(Toggle);
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl).toHaveClass('peer-focus:ring-4');
+  });
+
+  it('has blue background when checked', () => {
+    const { container } = render(Toggle);
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl).toHaveClass('peer-checked:bg-brand-primary');
+  });
+});
+
+describe('Toggle Haptic Feedback (line 40)', () => {
+  it('calls triggerHaptic when haptic=true and not disabled', async () => {
+    const { triggerHaptic } = await import('../utils/haptic.js');
+    triggerHaptic.mockClear();
+
+    const { container } = render(Toggle, { haptic: true, disabled: false });
+    const input = container.querySelector('input[type="checkbox"]');
+
+    await fireEvent.click(input);
+
+    expect(triggerHaptic).toHaveBeenCalledWith('selection');
+  });
+
+  it('does not call triggerHaptic when haptic=false', async () => {
+    const { triggerHaptic } = await import('../utils/haptic.js');
+    triggerHaptic.mockClear();
+
+    const { container } = render(Toggle, { haptic: false });
+    const input = container.querySelector('input[type="checkbox"]');
+
+    await fireEvent.click(input);
+
+    expect(triggerHaptic).not.toHaveBeenCalled();
+  });
+
+  it('does not call triggerHaptic when disabled', async () => {
+    const { triggerHaptic } = await import('../utils/haptic.js');
+    triggerHaptic.mockClear();
+
+    const { container } = render(Toggle, { haptic: true, disabled: true });
+    const input = container.querySelector('input[type="checkbox"]');
+
+    // Force-fire change on disabled input
+    await fireEvent.change(input, { target: { checked: true } });
+
+    expect(triggerHaptic).not.toHaveBeenCalled();
+  });
+});
+
+describe('Toggle Children Rendering (line 60)', () => {
+  it('renders children snippet with label text', () => {
+    const { container } = render(ToggleTestWrapper, {
+      showLabel: true,
+      label: 'My Toggle'
+    });
+
+    const span = container.querySelector('span.ms-3');
+    expect(span).toBeInTheDocument();
+    expect(span.textContent).toContain('My Toggle');
+  });
+
+  it('does not render label span when no children provided', () => {
+    const { container } = render(Toggle);
+    const span = container.querySelector('span.ms-3');
+    expect(span).not.toBeInTheDocument();
+  });
+
+  it('renders label span with correct styling', () => {
+    const { container } = render(ToggleTestWrapper, {
+      showLabel: true,
+      label: 'Styled Label'
+    });
+
+    const span = container.querySelector('span.ms-3');
+    expect(span).toHaveClass('text-sm');
+    expect(span).toHaveClass('font-medium');
+  });
+});

package/dist/primitives/Toggle.stories.svelte

@@ -1,92 +1,92 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import Toggle from './Toggle.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/Toggle',
-    component: Toggle,
-    tags: ['autodocs'],
-    argTypes: {
-      checked: { control: 'boolean' },
-      disabled: { control: 'boolean' },
-    },
-  });
-
-</script>
-
-<script>
-  
-  let toggleState = false;
-  let disabledToggle = true;
-</script>
-
-
-<Story
-  name="Default (Unchecked)"
-  args={{
-    checked: false,
-    disabled: false,
-  }}
-/>
-
-<Story
-  name="Checked"
-  args={{
-    checked: true,
-    disabled: false,
-  }}
-/>
-
-<Story
-  name="Disabled Unchecked"
-  args={{
-    checked: false,
-    disabled: true,
-  }}
-/>
-
-<Story
-  name="Disabled Checked"
-  args={{
-    checked: true,
-    disabled: true,
-  }}
-/>
-
-<Story name="Interactive">
-  <div class="space-y-4">
-    <div class="flex items-center gap-3">
-      <Toggle bind:checked={toggleState} />
-      <span class="text-sm">State: {toggleState ? 'On' : 'Off'}</span>
-    </div>
-  </div>
-</Story>
-
-<Story name="Settings List">
-  <div class="max-w-md space-y-4">
-    <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-900 rounded-lg border">
-      <div>
-        <div class="font-medium">Email Notifications</div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Receive updates via email</div>
-      </div>
-      <Toggle bind:checked={toggleState} />
-    </div>
-
-    <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-900 rounded-lg border">
-      <div>
-        <div class="font-medium">Dark Mode</div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Use dark color scheme</div>
-      </div>
-      <Toggle checked={false} />
-    </div>
-
-    <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border">
-      <div>
-        <div class="font-medium text-gray-500 dark:text-gray-400">Premium Feature</div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Requires subscription</div>
-      </div>
-      <Toggle disabled={true} checked={false} />
-    </div>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import Toggle from './Toggle.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Toggle',
+    component: Toggle,
+    tags: ['autodocs'],
+    argTypes: {
+      checked: { control: 'boolean' },
+      disabled: { control: 'boolean' },
+    },
+  });
+
+</script>
+
+<script>
+  
+  let toggleState = false;
+  let disabledToggle = true;
+</script>
+
+
+<Story
+  name="Default (Unchecked)"
+  args={{
+    checked: false,
+    disabled: false,
+  }}
+/>
+
+<Story
+  name="Checked"
+  args={{
+    checked: true,
+    disabled: false,
+  }}
+/>
+
+<Story
+  name="Disabled Unchecked"
+  args={{
+    checked: false,
+    disabled: true,
+  }}
+/>
+
+<Story
+  name="Disabled Checked"
+  args={{
+    checked: true,
+    disabled: true,
+  }}
+/>
+
+<Story name="Interactive">
+  <div class="space-y-4">
+    <div class="flex items-center gap-3">
+      <Toggle bind:checked={toggleState} />
+      <span class="text-sm">State: {toggleState ? 'On' : 'Off'}</span>
+    </div>
+  </div>
+</Story>
+
+<Story name="Settings List">
+  <div class="max-w-md space-y-4">
+    <div class="flex items-center justify-between p-4 bg-card rounded-lg border">
+      <div>
+        <div class="font-medium">Email Notifications</div>
+        <div class="text-sm text-muted-foreground">Receive updates via email</div>
+      </div>
+      <Toggle bind:checked={toggleState} />
+    </div>
+
+    <div class="flex items-center justify-between p-4 bg-card rounded-lg border">
+      <div>
+        <div class="font-medium">Dark Mode</div>
+        <div class="text-sm text-muted-foreground">Use dark color scheme</div>
+      </div>
+      <Toggle checked={false} />
+    </div>
+
+    <div class="flex items-center justify-between p-4 bg-bg-secondary rounded-lg border">
+      <div>
+        <div class="font-medium text-muted-foreground">Premium Feature</div>
+        <div class="text-sm text-muted-foreground">Requires subscription</div>
+      </div>
+      <Toggle disabled={true} checked={false} />
+    </div>
+  </div>
+</Story>