@getmicdrop/svelte-components 5.12.0 → 5.13.0

package/dist/primitives/CardAction/CardAction.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+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;
+}
+declare const CardAction: import("svelte").Component<Props, {}, "">;
+type CardAction = ReturnType<typeof CardAction>;
+export default CardAction;
+//# sourceMappingURL=CardAction.svelte.d.ts.map

package/dist/primitives/CardAction/CardAction.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardAction.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/CardAction/CardAction.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA8CH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/primitives/Drawer/Drawer.spec.js

@@ -14,52 +14,52 @@ describe('Drawer Component', () => {
     document.body.style.overflow = '';
   });
 
-  test('does not render when show is false and hidden is true', () => {
-    const { container } = render(Drawer, { props: { show: false, hidden: true } });
+  test('does not render when open is false', () => {
+    const { container } = render(Drawer, { props: { open: false } });
     expect(container.querySelector('[role="dialog"]')).not.toBeInTheDocument();
   });
 
-  test('renders when show is true', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+  test('renders when open is true', () => {
+    const { container } = render(Drawer, { props: { open: true } });
     expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
   });
 
-  test('renders when hidden is false', () => {
-    const { container } = render(Drawer, { props: { hidden: false } });
+  test('renders when open is true (explicit)', () => {
+    const { container } = render(Drawer, { props: { open: true } });
     expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
   });
 
   test('has role="dialog" and aria-modal="true"', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveAttribute('aria-modal', 'true');
   });
 
   test('renders title when provided', () => {
-    render(Drawer, { props: { show: true, title: 'Test Drawer', id: 'test-drawer' } });
+    render(Drawer, { props: { open: true, title: 'Test Drawer', id: 'test-drawer' } });
     expect(screen.getByText('Test Drawer')).toBeInTheDocument();
   });
 
   test('applies custom className', () => {
-    const { container } = render(Drawer, { props: { show: true, class: 'custom-drawer' } });
+    const { container } = render(Drawer, { props: { open: true, class: 'custom-drawer' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('custom-drawer');
   });
 
   test('renders backdrop by default when visible', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const backdrop = container.querySelector('[role="presentation"]');
     expect(backdrop).toBeInTheDocument();
   });
 
   test('does not render backdrop when backdrop is false', () => {
-    const { container } = render(Drawer, { props: { show: true, backdrop: false } });
+    const { container } = render(Drawer, { props: { open: true, backdrop: false } });
     const backdrop = container.querySelector('[role="presentation"]');
     expect(backdrop).not.toBeInTheDocument();
   });
 
   test('passes through id prop', () => {
-    const { container } = render(Drawer, { props: { show: true, id: 'my-drawer' } });
+    const { container } = render(Drawer, { props: { open: true, id: 'my-drawer' } });
     const dialog = container.querySelector('#my-drawer');
     expect(dialog).toBeInTheDocument();
   });
@@ -67,25 +67,25 @@ describe('Drawer Component', () => {
 
 describe('Drawer Placements', () => {
   test('left placement has left-0 class', () => {
-    const { container } = render(Drawer, { props: { show: true, placement: 'left' } });
+    const { container } = render(Drawer, { props: { open: true, placement: 'left' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('left-0');
   });
 
   test('right placement has right-0 class', () => {
-    const { container } = render(Drawer, { props: { show: true, placement: 'right' } });
+    const { container } = render(Drawer, { props: { open: true, placement: 'right' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('right-0');
   });
 
   test('top placement has top-0 class', () => {
-    const { container } = render(Drawer, { props: { show: true, placement: 'top' } });
+    const { container } = render(Drawer, { props: { open: true, placement: 'top' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('top-0');
   });
 
   test('bottom placement has bottom-0 class', () => {
-    const { container } = render(Drawer, { props: { show: true, placement: 'bottom' } });
+    const { container } = render(Drawer, { props: { open: true, placement: 'bottom' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('bottom-0');
   });
@@ -93,25 +93,25 @@ describe('Drawer Placements', () => {
 
 describe('Drawer Widths', () => {
   test('sm width applies w-64', () => {
-    const { container } = render(Drawer, { props: { show: true, width: 'sm' } });
+    const { container } = render(Drawer, { props: { open: true, width: 'sm' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('w-64');
   });
 
   test('md width applies w-80 (default)', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('w-80');
   });
 
   test('lg width applies w-96', () => {
-    const { container } = render(Drawer, { props: { show: true, width: 'lg' } });
+    const { container } = render(Drawer, { props: { open: true, width: 'lg' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('w-96');
   });
 
   test('full width applies w-full', () => {
-    const { container } = render(Drawer, { props: { show: true, width: 'full' } });
+    const { container } = render(Drawer, { props: { open: true, width: 'full' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('w-full');
   });
@@ -119,13 +119,13 @@ describe('Drawer Widths', () => {
 
 describe('Drawer Accessibility', () => {
   test('has tabindex="-1" for focus management', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveAttribute('tabindex', '-1');
   });
 
   test('has aria-labelledby when title and id are provided', () => {
-    const { container } = render(Drawer, { props: { show: true, title: 'Test', id: 'test-drawer' } });
+    const { container } = render(Drawer, { props: { open: true, title: 'Test', id: 'test-drawer' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveAttribute('aria-labelledby', 'test-drawer-label');
   });
@@ -133,32 +133,32 @@ describe('Drawer Accessibility', () => {
 
 describe('Drawer Styling', () => {
   test('has fixed positioning', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('fixed');
   });
 
   test('has z-40 for stacking', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('z-40');
   });
 
   test('has flex flex-col layout', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('flex');
     expect(dialog).toHaveClass('flex-col');
   });
 
   test('has bg-white background', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('bg-white');
   });
 
   test('has dark mode background', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('dark:bg-gray-800');
   });
@@ -166,13 +166,13 @@ describe('Drawer Styling', () => {
 
 describe('Drawer Edge Mode', () => {
   test('shows edge trigger when edge=true, placement=bottom, and not visible', () => {
-    const { container } = render(Drawer, { props: { edge: true, placement: 'bottom', show: false, hidden: true } });
+    const { container } = render(Drawer, { props: { edge: true, placement: 'bottom', open: false } });
     const edgeTrigger = container.querySelector('.cursor-pointer');
     expect(edgeTrigger).toBeInTheDocument();
   });
 
   test('hides edge trigger when drawer is visible', () => {
-    const { container } = render(Drawer, { props: { edge: true, placement: 'bottom', show: true } });
+    const { container } = render(Drawer, { props: { edge: true, placement: 'bottom', open: true } });
     // Edge trigger should not be visible when drawer is open
     const edgeTriggers = container.querySelectorAll('.cursor-pointer.fixed');
     // The drawer itself might have cursor classes, so check for the specific edge trigger pattern
@@ -184,20 +184,20 @@ describe('Drawer Callbacks', () => {
   test('onclose prop is accepted', () => {
     const onclose = vi.fn();
     const { container } = render(Drawer, {
-      props: { show: true, closeOnBackdropClick: true, onclose }
+      props: { open: true, closeOnBackdropClick: true, onclose }
     });
     // Verify drawer renders with onclose callback
     expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
   });
 
   test('closeOnBackdropClick prop defaults to true', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     // Drawer renders with default closeOnBackdropClick behavior
     expect(container.querySelector('[role="presentation"]')).toBeInTheDocument();
   });
 
   test('closeOnEscape prop defaults to true', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     // Drawer accepts closeOnEscape prop
     expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
   });
@@ -205,7 +205,7 @@ describe('Drawer Callbacks', () => {
   test('onopen prop is accepted', () => {
     const onopen = vi.fn();
     const { container } = render(Drawer, {
-      props: { show: true, onopen }
+      props: { open: true, onopen }
     });
     expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
   });

package/dist/primitives/Drawer/Drawer.svelte

@@ -5,8 +5,7 @@
   import type { Snippet } from "svelte";
 
   interface Props {
-    show?: boolean;
-    hidden?: boolean;
+    open?: boolean;
     title?: string;
     placement?: string;
     width?: string;
@@ -26,8 +25,7 @@
   }
 
   let {
-    show = $bindable(false),
-    hidden = $bindable(true),
+    open = $bindable(false),
     title = "",
     placement = "left",
     width = "md",
@@ -46,7 +44,7 @@
     ...restProps
   }: Props = $props();
 
-  let isVisible = $derived(show || !hidden);
+  let isVisible = $derived(open);
   let drawerElement: HTMLElement | null = $state(null);
   let previouslyFocusedElement: Element | null = $state(null);
 
@@ -89,8 +87,7 @@
   });
 
   function close() {
-    hidden = true;
-    show = false;
+    open = false;
     onclose?.();
   }
 
@@ -128,8 +125,7 @@
 
   function handleEdgeClick() {
     if (edge && placement === "bottom") {
-      hidden = false;
-      show = true;
+      open = true;
       onopen?.();
     }
   }

package/dist/primitives/Drawer/Drawer.svelte.d.ts

@@ -1,7 +1,6 @@
 import type { Snippet } from "svelte";
 interface Props {
-    show?: boolean;
-    hidden?: boolean;
+    open?: boolean;
     title?: string;
     placement?: string;
     width?: string;
@@ -19,7 +18,7 @@ interface Props {
     class?: string;
     [key: string]: unknown;
 }
-declare const Drawer: import("svelte").Component<Props, {}, "show" | "hidden">;
+declare const Drawer: import("svelte").Component<Props, {}, "open">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;
 //# sourceMappingURL=Drawer.svelte.d.ts.map

package/dist/primitives/Drawer/Drawer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAsMH,QAAA,MAAM,MAAM,0DAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAmMH,QAAA,MAAM,MAAM,+CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/primitives/LandingButton/LandingButton.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  /**
+   * LandingButton Component
+   * Hero/landing page CTA buttons with shadow and prominent styling.
+   *
+   * Replaces: Button variant="landing" and variant="landing-secondary"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+  import { buttonSizes } from '../../tokens/sizing.js';
+
+  interface Props {
+    /** Visual style: primary (blue) or secondary (outline) */
+    variant?: 'primary' | 'secondary';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Link href (renders as <a> if provided) */
+    href?: string | null;
+    /** Content */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    variant = 'primary',
+    disabled = false,
+    loading = false,
+    href = null,
+    children,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  let effectiveDisabled = $derived(disabled || loading);
+
+  const baseClasses = 'inline-flex items-center justify-center rounded-xl font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none no-underline hover:no-underline shadow hover:shadow-md';
+
+  const variantClasses = {
+    primary: 'text-white bg-blue-600 border border-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:border-blue-600 dark:hover:bg-blue-700',
+    secondary: 'text-gray-700 bg-white border border-gray-200 hover:border-gray-400 hover:text-gray-900 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:text-gray-100',
+  };
+
+  const disabledClasses = 'bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed shadow-none dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500';
+
+  // Landing size from tokens
+  let sizeClass = $derived(buttonSizes.landing);
+
+  let variantClass = $derived(() => {
+    if (effectiveDisabled) return disabledClasses;
+    return variantClasses[variant] || variantClasses.primary;
+  });
+
+  let classes = $derived(twMerge(
+    baseClasses,
+    sizeClass,
+    variantClass(),
+    effectiveDisabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.97] active:opacity-90',
+    className
+  ));
+</script>
+
+{#if href}
+  <a
+    {href}
+    class={classes}
+    {onclick}
+    {...restProps}
+  >
+    <span class="inline-flex items-center gap-1.5" class:invisible={loading}>
+      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+    </span>
+  </a>
+{:else}
+  <button
+    type="button"
+    class={classes}
+    disabled={effectiveDisabled}
+    {onclick}
+    {...restProps}
+  >
+    <span class="inline-flex items-center gap-1.5" class:invisible={loading}>
+      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+    </span>
+  </button>
+{/if}

package/dist/primitives/LandingButton/LandingButton.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Visual style: primary (blue) or secondary (outline) */
+    variant?: 'primary' | 'secondary';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Link href (renders as <a> if provided) */
+    href?: string | null;
+    /** Content */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+}
+declare const LandingButton: import("svelte").Component<Props, {}, "">;
+type LandingButton = ReturnType<typeof LandingButton>;
+export default LandingButton;
+//# sourceMappingURL=LandingButton.svelte.d.ts.map

package/dist/primitives/LandingButton/LandingButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LandingButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/LandingButton/LandingButton.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,0DAA0D;IAC1D,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA+DH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/primitives/MenuItem/MenuItem.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  /**
+   * MenuItem Component
+   * For dropdown menus, action sheets, and sidebar navigation items.
+   *
+   * Replaces: Button variant="menu-item" and variant="menu-item-danger"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+  import { buttonMenuItemSizes } from '../../tokens/sizing.js';
+
+  interface Props {
+    /** Destructive/danger styling (red text) */
+    danger?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg' | 'nav';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Active/selected state */
+    active?: boolean;
+    /** Content */
+    children?: Snippet;
+    /** Trailing content (icons, badges) */
+    trailing?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    danger = false,
+    size = 'md',
+    disabled = false,
+    active = false,
+    children,
+    trailing,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  const baseClasses = 'w-full text-left whitespace-nowrap bg-transparent border-transparent rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
+
+  const variantClasses = {
+    default: 'text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600',
+    danger: 'text-red-600 hover:bg-red-50 dark:text-red-500 dark:hover:bg-gray-600',
+  };
+
+  const activeClasses = 'bg-blue-50 dark:bg-gray-700';
+  const disabledClasses = 'text-gray-400 cursor-not-allowed dark:text-gray-500';
+
+  let sizeClass = $derived(buttonMenuItemSizes[size] || buttonMenuItemSizes.md);
+
+  let variantClass = $derived(() => {
+    if (disabled) return disabledClasses;
+    if (active) return `${variantClasses[danger ? 'danger' : 'default']} ${activeClasses}`;
+    return variantClasses[danger ? 'danger' : 'default'];
+  });
+
+  let hasTrailing = $derived(typeof trailing === 'function' || trailing);
+
+  let classes = $derived(twMerge(
+    baseClasses,
+    hasTrailing ? 'flex items-center justify-between' : 'flex items-center justify-start',
+    sizeClass,
+    variantClass(),
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.97] active:opacity-90',
+    className
+  ));
+</script>
+
+<button
+  type="button"
+  class={classes}
+  {disabled}
+  {onclick}
+  {...restProps}
+>
+  <span class="inline-flex items-center gap-1.5">
+    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+  </span>
+  {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
+</button>

package/dist/primitives/MenuItem/MenuItem.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Destructive/danger styling (red text) */
+    danger?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg' | 'nav';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Active/selected state */
+    active?: boolean;
+    /** Content */
+    children?: Snippet;
+    /** Trailing content (icons, badges) */
+    trailing?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+}
+declare const MenuItem: import("svelte").Component<Props, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;
+//# sourceMappingURL=MenuItem.svelte.d.ts.map

package/dist/primitives/MenuItem/MenuItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/MenuItem/MenuItem.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAClC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA2DH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/primitives/Modal/Modal.spec.js

@@ -14,9 +14,9 @@ describe('Modal Component Tests', () => {
   // CSS hides one based on viewport, but in tests both are in DOM
   // Use getAllByText and check that at least one exists
 
-  test('Renders Modal when show is true', () => {
+  test('Renders Modal when open is true', () => {
     setupTest({
-      show: true,
+      open: true,
       title: 'Test Title',
       description: 'Test Description',
       warningText: 'Test Warning'
@@ -29,9 +29,9 @@ describe('Modal Component Tests', () => {
     expect(screen.getAllByRole('button', { name: /Confirm/i }).length).toBeGreaterThan(0);
   });
 
-  test('Does not render Modal when show is false', () => {
+  test('Does not render Modal when open is false', () => {
     setupTest({
-      show: false,
+      open: false,
       title: 'Test Title',
       description: 'Test Description',
       warningText: 'Test Warning'
@@ -46,7 +46,7 @@ describe('Modal Component Tests', () => {
     const description = 'Correct Description';
     const warningText = 'Correct Warning';
     setupTest({
-      show: true,
+      open: true,
       title,
       description,
       warningText,
@@ -62,7 +62,7 @@ describe('Modal Component Tests', () => {
     const oncancel = vi.fn();
 
     const { user } = setupTest({
-      show: true,
+      open: true,
       title: 'Test Title',
       oncancel
     });
@@ -79,7 +79,7 @@ describe('Modal Component Tests', () => {
 
   test('Prevents propagation of click events within modal', async () => {
     const { user } = setupTest({
-      show: true,
+      open: true,
       title: 'Test Title'
     });
 

package/dist/primitives/Modal/Modal.stories.svelte

@@ -22,7 +22,7 @@
   >
     Open Basic Modal
   </button>
-  <ModalProgress bind:show={show1}>
+  <ModalProgress bind:open={show1}>
     {#snippet header()}
       <h2 class="text-xl font-semibold mb-2">Modal Title</h2>
     {/snippet}
@@ -47,7 +47,7 @@
   >
     Open Processing Modal
   </button>
-  <ModalProgress bind:show={show2} isProcessing={true}>
+  <ModalProgress bind:open={show2} isProcessing={true}>
     {#snippet body()}
       <div class="flex flex-col items-center gap-4">
         <div
@@ -66,7 +66,7 @@
   >
     Open Success Modal
   </button>
-  <ModalProgress bind:show={show3} isSuccess={true}>
+  <ModalProgress bind:open={show3} isSuccess={true}>
     {#snippet body()}
       <div class="flex flex-col items-center gap-4 text-center">
         <div class="text-green-600 dark:text-green-400 text-5xl">✓</div>