@getmicdrop/svelte-components 5.17.0 → 5.17.3

package/dist/primitives/Button/ButtonVariantShowcase.svelte

@@ -1,129 +1,129 @@
-<script lang="ts">
-  import Button from './Button.svelte';
-
-  const variants = [
-    { name: 'default', label: 'Primary Blue', desc: 'Main action' },
-    { name: 'alternative', label: 'Gray Outline', desc: 'Secondary action' },
-    { name: 'outline', label: 'Blue Outline', desc: 'Tertiary action' },
-    { name: 'ghost', label: 'Ghost', desc: 'Subtle action' },
-    { name: 'link', label: 'Link', desc: 'Inline text action' },
-    { name: 'red', label: 'Red Solid', desc: 'Destructive' },
-    { name: 'red-outline', label: 'Red Outline', desc: 'Less intense destructive' },
-    { name: 'ghost-red', label: 'Ghost Red', desc: 'Subtle destructive' },
-    { name: 'toggle', label: 'Toggle', desc: 'Filter/tab pills' },
-    { name: 'icon', label: 'Icon', desc: 'Square icon buttons' },
-  ];
-
-  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
-
-  let isDark = $state(false);
-
-  function toggleDark() {
-    isDark = !isDark;
-    document.documentElement.classList.toggle('dark', isDark);
-  }
-</script>
-
-<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-gray-900' : 'bg-gray-50'}">
-  <div class="flex items-center justify-between">
-    <div>
-      <h1 class="text-2xl font-bold {isDark ? 'text-white' : 'text-gray-900'}">Button Variants</h1>
-      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">All variants × all sizes</p>
-    </div>
-    <button
-      onclick={toggleDark}
-      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-yellow-500 text-black' : 'bg-gray-800 text-white'}"
-    >
-      {isDark ? '☀️ Light' : '🌙 Dark'}
-    </button>
-  </div>
-
-  {#each variants as v}
-    <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
-      <div class="mb-3">
-        <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">{v.name}</h2>
-        <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">{v.label} — {v.desc}</p>
-      </div>
-
-      {#if v.name === 'icon'}
-        <div class="flex flex-wrap gap-3 items-end">
-          <Button variant="icon" size="xs">×</Button>
-          <Button variant="icon" size="sm">×</Button>
-          <Button variant="icon" size="md">×</Button>
-          <Button variant="icon" size="lg">×</Button>
-        </div>
-      {:else if v.name === 'toggle'}
-        <div class="flex flex-wrap gap-3 items-center">
-          {#each sizes as size}
-            <Button variant="toggle" {size}>{size}</Button>
-          {/each}
-          <Button variant="toggle" active={true}>active</Button>
-        </div>
-      {:else}
-        <div class="flex flex-wrap gap-3 items-end">
-          {#each sizes as size}
-            <Button variant={v.name} {size}>{size}</Button>
-          {/each}
-        </div>
-      {/if}
-    </section>
-  {/each}
-
-  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
-    <div class="mb-3">
-      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">Width Sizes</h2>
-      <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">Full-width and responsive options</p>
-    </div>
-    <div class="max-w-md space-y-3">
-      <Button size="full">full</Button>
-      <Button size="xl-medium">xl-medium</Button>
-      <Button size="full-md-auto">full-md-auto</Button>
-      <div class="flex gap-2">
-        <Button size="half" variant="alternative">half</Button>
-        <Button size="half">half</Button>
-      </div>
-    </div>
-  </section>
-
-  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
-    <div class="mb-3">
-      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">States</h2>
-      <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">Loading, success, disabled</p>
-    </div>
-    <div class="flex flex-wrap gap-4 items-center">
-      <Button disabled>Disabled</Button>
-      <Button loading>Loading</Button>
-      <Button success successText="Saved!">Success</Button>
-    </div>
-  </section>
-
-  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
-    <div class="mb-3">
-      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">Common Patterns</h2>
-    </div>
-    <div class="space-y-4">
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Cancel / Save</p>
-        <div class="flex gap-2">
-          <Button variant="ghost">Cancel</Button>
-          <Button>Save</Button>
-        </div>
-      </div>
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Delete Confirmation</p>
-        <div class="flex gap-2">
-          <Button variant="alternative">Cancel</Button>
-          <Button variant="red">Delete</Button>
-        </div>
-      </div>
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Toggle Group</p>
-        <div class="flex gap-2">
-          <Button variant="toggle" active={true}>Active</Button>
-          <Button variant="toggle">Inactive</Button>
-          <Button variant="toggle">All</Button>
-        </div>
-      </div>
-    </div>
-  </section>
-</div>
+<script lang="ts">
+  import Button from './Button.svelte';
+
+  const variants = [
+    { name: 'default', label: 'Primary Blue', desc: 'Main action' },
+    { name: 'alternative', label: 'Gray Outline', desc: 'Secondary action' },
+    { name: 'outline', label: 'Blue Outline', desc: 'Tertiary action' },
+    { name: 'ghost', label: 'Ghost', desc: 'Subtle action' },
+    { name: 'link', label: 'Link', desc: 'Inline text action' },
+    { name: 'red', label: 'Red Solid', desc: 'Destructive' },
+    { name: 'red-outline', label: 'Red Outline', desc: 'Less intense destructive' },
+    { name: 'ghost-red', label: 'Ghost Red', desc: 'Subtle destructive' },
+    { name: 'toggle', label: 'Toggle', desc: 'Filter/tab pills' },
+    { name: 'icon', label: 'Icon', desc: 'Square icon buttons' },
+  ];
+
+  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+  let isDark = $state(false);
+
+  function toggleDark() {
+    isDark = !isDark;
+    document.documentElement.classList.toggle('dark', isDark);
+  }
+</script>
+
+<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-gray-900' : 'bg-gray-50'}">
+  <div class="flex items-center justify-between">
+    <div>
+      <h1 class="text-2xl font-bold {isDark ? 'text-white' : 'text-gray-900'}">Button Variants</h1>
+      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">All variants × all sizes</p>
+    </div>
+    <button
+      onclick={toggleDark}
+      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-yellow-500 text-black' : 'bg-gray-800 text-white'}"
+    >
+      {isDark ? '☀️ Light' : '🌙 Dark'}
+    </button>
+  </div>
+
+  {#each variants as v}
+    <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
+      <div class="mb-3">
+        <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">{v.name}</h2>
+        <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">{v.label} — {v.desc}</p>
+      </div>
+
+      {#if v.name === 'icon'}
+        <div class="flex flex-wrap gap-3 items-end">
+          <Button variant="icon" size="xs">×</Button>
+          <Button variant="icon" size="sm">×</Button>
+          <Button variant="icon" size="md">×</Button>
+          <Button variant="icon" size="lg">×</Button>
+        </div>
+      {:else if v.name === 'toggle'}
+        <div class="flex flex-wrap gap-3 items-center">
+          {#each sizes as size}
+            <Button variant="toggle" {size}>{size}</Button>
+          {/each}
+          <Button variant="toggle" active={true}>active</Button>
+        </div>
+      {:else}
+        <div class="flex flex-wrap gap-3 items-end">
+          {#each sizes as size}
+            <Button variant={v.name} {size}>{size}</Button>
+          {/each}
+        </div>
+      {/if}
+    </section>
+  {/each}
+
+  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
+    <div class="mb-3">
+      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">Width Sizes</h2>
+      <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">Full-width and responsive options</p>
+    </div>
+    <div class="max-w-md space-y-3">
+      <Button size="full">full</Button>
+      <Button size="xl-medium">xl-medium</Button>
+      <Button size="full-md-auto">full-md-auto</Button>
+      <div class="flex gap-2">
+        <Button size="half" variant="alternative">half</Button>
+        <Button size="half">half</Button>
+      </div>
+    </div>
+  </section>
+
+  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
+    <div class="mb-3">
+      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">States</h2>
+      <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">Loading, success, disabled</p>
+    </div>
+    <div class="flex flex-wrap gap-4 items-center">
+      <Button disabled>Disabled</Button>
+      <Button loading>Loading</Button>
+      <Button success successText="Saved!">Success</Button>
+    </div>
+  </section>
+
+  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
+    <div class="mb-3">
+      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">Common Patterns</h2>
+    </div>
+    <div class="space-y-4">
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Cancel / Save</p>
+        <div class="flex gap-2">
+          <Button variant="ghost">Cancel</Button>
+          <Button>Save</Button>
+        </div>
+      </div>
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Delete Confirmation</p>
+        <div class="flex gap-2">
+          <Button variant="alternative">Cancel</Button>
+          <Button variant="red">Delete</Button>
+        </div>
+      </div>
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Toggle Group</p>
+        <div class="flex gap-2">
+          <Button variant="toggle" active={true}>Active</Button>
+          <Button variant="toggle">Inactive</Button>
+          <Button variant="toggle">All</Button>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>

package/dist/primitives/Card.spec.js

@@ -1,49 +1,49 @@
-import { render, screen } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import Card from "./Card.svelte";
-
-describe("Card Component Tests", () => {
-  test("Renders card div element", () => {
-    const { container } = render(Card, { props: {} });
-    const card = container.querySelector("div");
-    expect(card).toBeInTheDocument();
-  });
-
-  test("Applies base classes", () => {
-    const { container } = render(Card, { props: {} });
-    const card = container.querySelector("div");
-    expect(card).toHaveClass("bg-white");
-    expect(card).toHaveClass("rounded-lg");
-    expect(card).toHaveClass("shadow-md");
-  });
-
-  test("Applies custom className", () => {
-    const { container } = render(Card, { props: { class: "custom-class mt-4" } });
-    const card = container.querySelector("div");
-    expect(card).toHaveClass("custom-class");
-    expect(card).toHaveClass("mt-4");
-  });
-
-  test("Has padding by default", () => {
-    const { container } = render(Card, { props: {} });
-    const card = container.querySelector("div");
-    expect(card).toHaveClass("p-6");
-  });
-
-  test("No padding when padding=false", () => {
-    const { container } = render(Card, { props: { padding: false } });
-    const card = container.querySelector("div");
-    expect(card).not.toHaveClass("p-6");
-  });
-
-  test("Has border when border=true", () => {
-    const { container } = render(Card, { props: { border: true } });
-    const card = container.querySelector("div");
-    expect(card).toHaveClass("border");
-  });
-
-  test("Renders slot content", () => {
-    const { container } = render(Card, { props: {} });
-    expect(container.querySelector("div")).toBeInTheDocument();
-  });
-});
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import Card from "./Card.svelte";
+
+describe("Card Component Tests", () => {
+  test("Renders card div element", () => {
+    const { container } = render(Card, { props: {} });
+    const card = container.querySelector("div");
+    expect(card).toBeInTheDocument();
+  });
+
+  test("Applies base classes", () => {
+    const { container } = render(Card, { props: {} });
+    const card = container.querySelector("div");
+    expect(card).toHaveClass("bg-white");
+    expect(card).toHaveClass("rounded-lg");
+    expect(card).toHaveClass("shadow-md");
+  });
+
+  test("Applies custom className", () => {
+    const { container } = render(Card, { props: { class: "custom-class mt-4" } });
+    const card = container.querySelector("div");
+    expect(card).toHaveClass("custom-class");
+    expect(card).toHaveClass("mt-4");
+  });
+
+  test("Has padding by default", () => {
+    const { container } = render(Card, { props: {} });
+    const card = container.querySelector("div");
+    expect(card).toHaveClass("p-6");
+  });
+
+  test("No padding when padding=false", () => {
+    const { container } = render(Card, { props: { padding: false } });
+    const card = container.querySelector("div");
+    expect(card).not.toHaveClass("p-6");
+  });
+
+  test("Has border when border=true", () => {
+    const { container } = render(Card, { props: { border: true } });
+    const card = container.querySelector("div");
+    expect(card).toHaveClass("border");
+  });
+
+  test("Renders slot content", () => {
+    const { container } = render(Card, { props: {} });
+    expect(container.querySelector("div")).toBeInTheDocument();
+  });
+});

package/dist/primitives/Card.stories.svelte

@@ -1,22 +1,22 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-    import Card from "./Card.svelte";
-
-  const { Story } = defineMeta({
-    title: "Components/Card",
-    component: Card,
-    argTypes: {
-      className: { control: "text" },
-    },
-  });
-
-</script>
-
-
-<Story name="Default Card">
-  <Card>
-    <h3 class="text-lg font-semibold mb-2">Default Card</h3>
-    <p class="text-gray-600">A default card with standard styling. Use className prop to customize.</p>
-  </Card>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+    import Card from "./Card.svelte";
+
+  const { Story } = defineMeta({
+    title: "Components/Card",
+    component: Card,
+    argTypes: {
+      className: { control: "text" },
+    },
+  });
+
+</script>
+
+
+<Story name="Default Card">
+  <Card>
+    <h3 class="text-lg font-semibold mb-2">Default Card</h3>
+    <p class="text-gray-600">A default card with standard styling. Use className prop to customize.</p>
+  </Card>
+</Story>

package/dist/primitives/Card.svelte

@@ -1,28 +1,28 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    padding?: boolean;
-    border?: boolean;
-    horizontal?: boolean;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    padding = true,
-    border = false,
-    horizontal = false,
-    class: className = '',
-    children,
-    ...restProps
-  }: Props = $props();
-</script>
-
-<div
-  class="bg-white dark:bg-gray-900 rounded-lg shadow-md {border ? 'border border-gray-200 dark:border-gray-700' : ''} {padding ? 'p-6' : ''} {horizontal ? 'flex flex-row' : ''} {className}"
-  {...restProps}
->
-  {#if children}{@render children()}{/if}
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    padding?: boolean;
+    border?: boolean;
+    horizontal?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    padding = true,
+    border = false,
+    horizontal = false,
+    class: className = '',
+    children,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<div
+  class="bg-white dark:bg-gray-900 rounded-lg shadow-md {border ? 'border border-gray-200 dark:border-gray-700' : ''} {padding ? 'p-6' : ''} {horizontal ? 'flex flex-row' : ''} {className}"
+  {...restProps}
+>
+  {#if children}{@render children()}{/if}
+</div>

package/dist/primitives/CardAction/CardAction.svelte

@@ -1,68 +1,68 @@
-<script lang="ts">
-  /**
-   * CardAction Component
-   * Selectable card-like button for list selections.
-   *
-   * Replaces: Button variant="card"
-   */
-  import { twMerge } from 'tailwind-merge';
-  import type { Snippet } from 'svelte';
-  import { buttonCardSizes } from '../../tokens/sizing.js';
-
-  interface Props {
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** Disabled state */
-    disabled?: boolean;
-    /** Selected/active state */
-    selected?: boolean;
-    /** Content */
-    children?: Snippet;
-    /** Additional classes */
-    class?: string;
-    /** Click handler */
-    onclick?: (e: MouseEvent) => void;
-    [key: string]: unknown;
-  }
-
-  let {
-    size = 'md',
-    disabled = false,
-    selected = false,
-    children,
-    class: className = '',
-    onclick,
-    ...restProps
-  }: Props = $props();
-
-  const baseClasses = 'w-full text-left rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none flex items-center justify-start';
-  const defaultClasses = 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700';
-  const selectedClasses = 'text-gray-900 bg-blue-50 border border-blue-500 dark:bg-blue-900/20 dark:text-white dark:border-blue-500';
-  const disabledClasses = 'bg-gray-100 border-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500';
-
-  let sizeClass = $derived(buttonCardSizes[size] || buttonCardSizes.md);
-
-  let variantClass = $derived(() => {
-    if (disabled) return disabledClasses;
-    if (selected) return selectedClasses;
-    return defaultClasses;
-  });
-
-  let classes = $derived(twMerge(
-    baseClasses,
-    sizeClass,
-    variantClass(),
-    disabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.99] active:opacity-90',
-    className
-  ));
-</script>
-
-<button
-  type="button"
-  class={classes}
-  {disabled}
-  {onclick}
-  {...restProps}
->
-  {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-</button>
+<script lang="ts">
+  /**
+   * CardAction Component
+   * Selectable card-like button for list selections.
+   *
+   * Replaces: Button variant="card"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+  import { buttonCardSizes } from '../../tokens/sizing.js';
+
+  interface Props {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Selected/active state */
+    selected?: boolean;
+    /** Content */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    disabled = false,
+    selected = false,
+    children,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  const baseClasses = 'w-full text-left rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none flex items-center justify-start';
+  const defaultClasses = 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700';
+  const selectedClasses = 'text-gray-900 bg-blue-50 border border-blue-500 dark:bg-blue-900/20 dark:text-white dark:border-blue-500';
+  const disabledClasses = 'bg-gray-100 border-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500';
+
+  let sizeClass = $derived(buttonCardSizes[size] || buttonCardSizes.md);
+
+  let variantClass = $derived(() => {
+    if (disabled) return disabledClasses;
+    if (selected) return selectedClasses;
+    return defaultClasses;
+  });
+
+  let classes = $derived(twMerge(
+    baseClasses,
+    sizeClass,
+    variantClass(),
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.99] active:opacity-90',
+    className
+  ));
+</script>
+
+<button
+  type="button"
+  class={classes}
+  {disabled}
+  {onclick}
+  {...restProps}
+>
+  {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+</button>

package/dist/primitives/Checkbox/Checkbox.spec.js

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
+import { createRawSnippet } from 'svelte';
 import { expect, describe, test, vi } from 'vitest';
 import Checkbox from './Checkbox.svelte';
 
@@ -235,6 +236,37 @@ describe('Checkbox Event Handling', () => {
   });
 });
 
+describe('Checkbox Color Fallback', () => {
+  test('falls back to blue when an invalid color is provided', () => {
+    const { container } = render(Checkbox, { props: { color: 'invalid-color' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-blue-600');
+  });
+});
+
+describe('Checkbox Children Snippet', () => {
+  test('renders children snippet text inside a span', () => {
+    const { container } = render(Checkbox, {
+      props: {
+        children: createRawSnippet(() => ({
+          render: () => `<span>Accept terms</span>`
+        }))
+      }
+    });
+    const span = container.querySelector('label > span');
+    expect(span).toBeInTheDocument();
+    expect(span).toHaveClass('text-sm');
+    expect(span).toHaveClass('font-medium');
+    expect(span.textContent).toContain('Accept terms');
+  });
+
+  test('does not render label span when no children provided', () => {
+    const { container } = render(Checkbox);
+    const spans = container.querySelectorAll('label > span');
+    expect(spans.length).toBe(0);
+  });
+});
+
 describe('Checkbox Toggle Behavior', () => {
   test('clicking toggles checked state', async () => {
     const user = userEvent.setup();