@getmicdrop/svelte-components 5.12.0 → 5.14.0

package/dist/primitives/Button/Button.spec.js

@@ -103,54 +103,56 @@ describe('Button Sizes', () => {
   test('Full width size', () => {
     const { button } = setupTest({ size: 'full' });
     expect(button).toHaveClass('w-full');
+    expect(button).toHaveClass('h-11');
     expect(button).toHaveClass('px-5');
-    expect(button).toHaveClass('py-3');
   });
 
   test('Full width on mobile, auto on desktop', () => {
     const { button } = setupTest({ size: 'full-md-auto' });
     expect(button).toHaveClass('w-full');
+    expect(button).toHaveClass('h-11');
     expect(button).toHaveClass('md:w-auto');
   });
 
   test('XL size', () => {
     const { button } = setupTest({ size: 'xl' });
+    expect(button).toHaveClass('h-12');
     expect(button).toHaveClass('px-6');
-    expect(button).toHaveClass('py-3.5');
     expect(button).toHaveClass('text-sm');
   });
 
   test('Large size', () => {
     const { button } = setupTest({ size: 'lg' });
+    expect(button).toHaveClass('h-11');
     expect(button).toHaveClass('px-5');
-    expect(button).toHaveClass('py-3');
     expect(button).toHaveClass('text-sm');
   });
 
   test('Medium size (default)', () => {
     const { button } = setupTest({ size: 'md' });
+    expect(button).toHaveClass('h-10');
     expect(button).toHaveClass('px-4');
-    expect(button).toHaveClass('py-2.5');
     expect(button).toHaveClass('text-sm');
   });
 
   test('Small size', () => {
     const { button } = setupTest({ size: 'sm' });
+    expect(button).toHaveClass('h-9');
     expect(button).toHaveClass('px-3');
-    expect(button).toHaveClass('py-2');
     expect(button).toHaveClass('text-sm');
   });
 
   test('Extra small size', () => {
     const { button } = setupTest({ size: 'xs' });
+    expect(button).toHaveClass('h-8');
     expect(button).toHaveClass('px-3');
-    expect(button).toHaveClass('py-1.5');
     expect(button).toHaveClass('text-xs');
   });
 
   test('Half width size', () => {
     const { button } = setupTest({ size: 'half' });
     expect(button).toHaveClass('w-1/2');
+    expect(button).toHaveClass('h-10');
   });
 });
 
@@ -175,10 +177,8 @@ describe('Button States', () => {
     expect(button.querySelector('svg')).toBeInTheDocument();
   });
 
-  test('Active state for nav items', () => {
-    const { button } = setupTest({ active: true, variant: 'nav' });
-    expect(button).toHaveClass('text-blue-600');
-  });
+  // Note: nav variant has been extracted to NavItem component
+  // This tests that unknown variants fall back to default styling
 
   test('Active state for toggle variant', () => {
     const { button } = setupTest({ active: true, variant: 'toggle' });
@@ -208,16 +208,18 @@ describe('Button as Link', () => {
 });
 
 describe('Button with Trailing Content', () => {
-  test('Button with trailing content uses justify-between', () => {
+  test('Button with trailing content stays centered (extracted variants use justify-between)', () => {
     const trailing = () => '→';
     const { container } = render(Button, {
       props: {
-        variant: 'menu-item',
-        children: () => 'Menu Item',
+        variant: 'default',
+        children: () => 'Click Me',
         trailing,
       }
     });
     const button = container.querySelector('button');
-    expect(button).toHaveClass('justify-between');
+    // Standard Button variants are always centered - left-aligned behavior
+    // has been extracted to dedicated components (MenuItem, NavItem, etc.)
+    expect(button).toHaveClass('justify-center');
   });
 });

package/dist/primitives/Button/Button.svelte

@@ -35,9 +35,6 @@
   import {
     buttonSizes,
     buttonIconSizes,
-    buttonAvatarSizes,
-    buttonMenuItemSizes,
-    buttonCardSizes,
   } from '../../tokens/sizing.js';
   import { triggerHaptic, getHapticForButtonVariant } from '../../utils/haptic.js';
 
@@ -106,6 +103,9 @@
   // Size classes imported from centralized tokens
 
   // Variant classes with all states in Tailwind (no focus rings - design decision)
+  // NOTE: menu-item, avatar, nav, card, search-result, landing, sidebar-toggle, calendar-day, chart-row
+  // have been extracted to dedicated components: MenuItem, AvatarButton, NavItem, CardAction,
+  // SearchResultItem, LandingButton, SidebarToggle. Use those components instead.
   const variantClasses: Record<string, string> = {
     default: "text-white bg-blue-700 border border-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700",
     alternative: "text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700",
@@ -119,35 +119,13 @@
     icon: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700",
     toggle: "text-gray-900 bg-gray-100 border border-gray-200 hover:bg-gray-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600",
     success: "text-white bg-green-600 border border-green-600",
-    // Avatar/image trigger - no background, opacity hover
-    avatar: "bg-transparent border-transparent hover:opacity-80",
-    // Menu items - full width, left-aligned, for dropdowns/sheets and sidebar nav
-    "menu-item": "w-full text-left whitespace-nowrap text-gray-900 bg-transparent border-transparent hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600",
-    // Danger menu item - red text version
-    "menu-item-danger": "w-full text-left whitespace-nowrap text-red-600 bg-transparent border-transparent hover:bg-red-50 dark:text-red-500 dark:hover:bg-gray-600",
-    // Selectable card - bordered card-like button for list selections
-    card: "w-full text-left 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",
-    // Search result item - blue hover for search dropdowns
-    "search-result": "w-full text-left text-gray-900 bg-transparent border-transparent hover:bg-blue-50 focus:bg-blue-50 dark:text-white dark:hover:bg-blue-900/20 dark:focus:bg-blue-900/20",
-    // Sidebar toggle - compact pill for sidebar expand/collapse
-    "sidebar-toggle": "w-6 h-7 text-gray-900 bg-blue-100 border border-blue-200 hover:bg-blue-200 shadow-lg dark:text-white dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700",
-    // Bottom navigation item - vertical layout, transparent, for mobile nav bars
-    nav: "flex-col h-full py-2 text-gray-500 bg-transparent border-transparent hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-500",
-    // Calendar day cell - base styling with hover, colors overridden via className
-    "calendar-day": "border-transparent text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700",
-    // Chart row - for leaderboard/chart list items with progress bars
-    "chart-row": "w-full text-left text-gray-900 bg-transparent border-transparent hover:bg-gray-50 dark:text-white dark:hover:bg-gray-800",
-    // Landing page hero buttons - prominent CTAs with shadow
-    landing: "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 no-underline hover:no-underline shadow hover:shadow-md",
-    "landing-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 no-underline hover:no-underline shadow hover:shadow-md",
   };
 
-  // Active state classes for ghost, toggle, menu-item, and nav
+  // Active state classes for ghost and toggle
+  // NOTE: menu-item and nav active states are now handled by MenuItem and NavItem components
   const activeClasses: Record<string, string> = {
     ghost: "text-blue-700 bg-blue-50 dark:text-white dark:bg-gray-900",
     toggle: "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 dark:text-white dark:bg-blue-600 dark:border-blue-600 dark:hover:bg-blue-700",
-    "menu-item": "bg-blue-50 dark:bg-gray-700",
-    nav: "text-blue-600 dark:text-blue-500",
   };
 
   // Disabled classes
@@ -157,14 +135,7 @@
 
 let sizeClass = $derived((() => {
     if (resolvedVariant === "icon") return buttonIconSizes[size as keyof typeof buttonIconSizes] || buttonIconSizes.sm;
-    if (resolvedVariant === "avatar") return buttonAvatarSizes[size as keyof typeof buttonAvatarSizes] || buttonAvatarSizes.md;
-    if (resolvedVariant === "menu-item" || resolvedVariant === "menu-item-danger" || resolvedVariant === "search-result") {
-      return buttonMenuItemSizes[size as keyof typeof buttonMenuItemSizes] || buttonMenuItemSizes.md;
-    }
-    if (resolvedVariant === "card") return buttonCardSizes[size as keyof typeof buttonCardSizes] || buttonCardSizes.md;
     if (resolvedVariant === "link") return "text-sm";
-    if (resolvedVariant === "sidebar-toggle") return ""; // Fixed dimensions in variant
-    if (resolvedVariant === "nav") return ""; // Nav has sizing in variant class
     return buttonSizes[size as keyof typeof buttonSizes] || buttonSizes.md;
   })());
 
@@ -185,21 +156,14 @@ let sizeClass = $derived((() => {
     return variantClasses[resolvedVariant] || variantClasses.default;
   })());
 
-  // Menu items, cards, search results, and chart rows need left alignment, others are centered
-  let isLeftAligned = $derived(
-    resolvedVariant === "menu-item" ||
-    resolvedVariant === "menu-item-danger" ||
-    resolvedVariant === "card" ||
-    resolvedVariant === "search-result" ||
-    resolvedVariant === "chart-row"
-  );
+  // Button is always centered - left-aligned variants have been extracted to dedicated components
+  let isLeftAligned = $derived(false);
 
   // Use justify-between when there's trailing content (e.g., chevrons in nav items)
   let hasTrailing = $derived(typeof trailing === 'function' || trailing);
 
-  // Landing variants use rounded-xl for more prominent appearance
-  let isLandingVariant = $derived(resolvedVariant === "landing" || resolvedVariant === "landing-secondary");
-  let roundedClass = $derived(isLandingVariant ? "rounded-xl" : "rounded-lg");
+  // Standard buttons use rounded-lg - landing variants have been extracted to LandingButton
+  let roundedClass = $derived("rounded-lg");
 
   // Click handler with optional haptic feedback
   function handleClick(e: MouseEvent) {

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

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.ts"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAWpC,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAqNH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.ts"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQpC,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAoLH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/primitives/CardAction/CardAction.svelte

@@ -0,0 +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>

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/Input/Input.svelte

@@ -342,7 +342,7 @@
     {:else}
       <div class="relative flex items-center w-full">
         {#if leftIcon}
-          <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10 pointer-events-none">
+          <div class="absolute left-3 inset-y-0 flex items-center text-gray-400 z-10 pointer-events-none">
             {@render leftIcon()}
           </div>
         {/if}