@getmicdrop/svelte-components 5.12.0 → 5.13.0

package/dist/index.spec.js

@@ -112,7 +112,6 @@ describe('Recipes Layer - Intermediate Index Files', () => {
       expect(exports).toContain('PasswordStrengthIndicator');
       expect(exports).toContain('PlaceAutocomplete');
       expect(exports).toContain('Search');
-      expect(exports).toContain('SelectDropdown');
     });
   });
 

package/dist/patterns/navigation/Header.svelte

@@ -8,6 +8,8 @@
   import Icon from "../../primitives/Icons/Icon.svelte";
   import ChevronLeft from "../../primitives/Icons/ChevronLeft.svelte";
   import Button from "../../primitives/Button/Button.svelte";
+  import MenuItem from "../../primitives/MenuItem/MenuItem.svelte";
+  import AvatarButton from "../../primitives/AvatarButton/AvatarButton.svelte";
   import { fade, fly } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import { portal } from "../../utils/portal.js";
@@ -89,13 +91,12 @@
     <div class="flex items-center gap-3">
       <DarkModeToggle />
       <div class="relative ml-1">
-        <Button
-          variant="avatar"
+        <AvatarButton
           size="md"
           onclick={() => showDesktopDropdown = !showDesktopDropdown}
         >
           <Avatar src={avatar} rounded size="md" />
-        </Button>
+        </AvatarButton>
 
         {#if showDesktopDropdown}
           <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -107,22 +108,21 @@
               <span class={`block ${typography.xsMuted} mt-0.5`}>{email || ""}</span>
             </div>
             {#each dropdownLinks as { label, href }}
-              <Button
-                variant="menu-item"
+              <MenuItem
                 size="md"
                 onclick={() => handleDropdownItemClick(href)}
               >
                 {label}
-              </Button>
+              </MenuItem>
             {/each}
             <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
-            <Button
-              variant="menu-item-danger"
+            <MenuItem
+              danger
               size="md"
               onclick={() => { showDesktopDropdown = false; signoutHandler(); }}
             >
               Sign out
-            </Button>
+            </MenuItem>
           </div>
         {/if}
       </div>
@@ -150,23 +150,21 @@
     <DarkModeToggle />
 
     <div class="relative ml-1">
-      <Button
-        variant="avatar"
+      <AvatarButton
         size="md"
         class="block md:hidden"
         onclick={() => showMobileSheet = true}
       >
         <Avatar src={avatar} rounded size="md" />
-      </Button>
+      </AvatarButton>
 
-      <Button
-        variant="avatar"
+      <AvatarButton
         size="md"
         class="hidden md:block"
         onclick={() => showDesktopDropdown = !showDesktopDropdown}
       >
         <Avatar src={avatar} rounded size="md" />
-      </Button>
+      </AvatarButton>
 
       {#if showDesktopDropdown}
         <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -178,22 +176,21 @@
             <span class={`block ${typography.xsMuted} mt-0.5`}>{email || ""}</span>
           </div>
           {#each dropdownLinks as { label, href }}
-            <Button
-              variant="menu-item"
+            <MenuItem
               size="md"
               onclick={() => handleDropdownItemClick(href)}
             >
               {label}
-            </Button>
+            </MenuItem>
           {/each}
           <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
-          <Button
-            variant="menu-item-danger"
+          <MenuItem
+            danger
             size="md"
             onclick={() => { showDesktopDropdown = false; signoutHandler(); }}
           >
             Sign out
-          </Button>
+          </MenuItem>
         </div>
       {/if}
     </div>
@@ -227,22 +224,21 @@
 
       <div class="py-2">
         {#each dropdownLinks as { label, href }}
-          <Button
-            variant="menu-item"
+          <MenuItem
             size="lg"
             onclick={() => handleMobileSheetItemClick(href)}
           >
             {label}
-          </Button>
+          </MenuItem>
         {/each}
 
-        <Button
-          variant="menu-item-danger"
+        <MenuItem
+          danger
           size="lg"
           onclick={() => { showMobileSheet = false; signoutHandler(); }}
         >
           Sign Out
-        </Button>
+        </MenuItem>
       </div>
 
       <div class="border-t-8 border-gray-100 dark:border-gray-700">

package/dist/patterns/navigation/Header.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.svelte.ts"],"names":[],"mappings":"AAkBE,UAAU,OAAO;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAiMH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.svelte.ts"],"names":[],"mappings":"AAoBE,UAAU,OAAO;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAmMH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/primitives/AvatarButton/AvatarButton.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  /**
+   * AvatarButton Component
+   * Clickable avatar/image trigger with opacity hover effect.
+   *
+   * Replaces: Button variant="avatar"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+  import { buttonAvatarSizes } from '../../tokens/sizing.js';
+
+  interface Props {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Content (typically an Avatar component or image) */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    disabled = false,
+    children,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  const baseClasses = 'bg-transparent border-transparent rounded-lg focus:outline-hidden transition-all duration-150 ease-out select-none inline-flex items-center justify-center';
+  const hoverClasses = 'hover:opacity-80';
+  const disabledClasses = 'opacity-50 cursor-not-allowed';
+
+  let sizeClass = $derived(buttonAvatarSizes[size] || buttonAvatarSizes.md);
+
+  let classes = $derived(twMerge(
+    baseClasses,
+    sizeClass,
+    disabled ? disabledClasses : `${hoverClasses} cursor-pointer active:scale-[0.97] 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/AvatarButton/AvatarButton.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Content (typically an Avatar component or image) */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+}
+declare const AvatarButton: import("svelte").Component<Props, {}, "">;
+type AvatarButton = ReturnType<typeof AvatarButton>;
+export default AvatarButton;
+//# sourceMappingURL=AvatarButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/AvatarButton/AvatarButton.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,uDAAuD;IACvD,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;AAqCH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/primitives/BottomSheet/BottomSheet.spec.js

@@ -14,44 +14,44 @@ describe('BottomSheet Component', () => {
     cleanup();
   });
 
-  it('does not render when show is false', () => {
-    const { container } = render(BottomSheet, { props: { show: false } });
+  it('does not render when open is false', () => {
+    const { container } = render(BottomSheet, { props: { open: false } });
     const backdrop = container.querySelector('.fixed.inset-0');
     expect(backdrop).toBeFalsy();
   });
 
-  it('renders when show is true', () => {
-    const { container } = render(BottomSheet, { props: { show: true } });
+  it('renders when open is true', () => {
+    const { container } = render(BottomSheet, { props: { open: true } });
     const backdrop = container.querySelector('.fixed.inset-0');
     expect(backdrop).toBeTruthy();
   });
 
   it('renders title when provided', () => {
     const { getByText } = render(BottomSheet, {
-      props: { show: true, title: 'Test Title' },
+      props: { open: true, title: 'Test Title' },
     });
     expect(getByText('Test Title')).toBeTruthy();
   });
 
   it('does not render title when not provided', () => {
-    const { container } = render(BottomSheet, { props: { show: true } });
+    const { container } = render(BottomSheet, { props: { open: true } });
     const title = container.querySelector('h3');
     expect(title).toBeFalsy();
   });
 
-  it('locks body scroll when shown', async () => {
-    render(BottomSheet, { props: { show: true } });
+  it('locks body scroll when open', async () => {
+    render(BottomSheet, { props: { open: true } });
     // Wait for reactive update
     await new Promise((resolve) => setTimeout(resolve, 10));
     expect(document.body.style.overflow).toBe('hidden');
   });
 
-  it('unlocks body scroll when hidden', async () => {
-    const { rerender } = render(BottomSheetWrapper, { props: { show: true } });
+  it('unlocks body scroll when closed', async () => {
+    const { rerender } = render(BottomSheetWrapper, { props: { open: true } });
     await new Promise((resolve) => setTimeout(resolve, 10));
     expect(document.body.style.overflow).toBe('hidden');
 
-    await rerender({ show: false });
+    await rerender({ open: false });
     await new Promise((resolve) => setTimeout(resolve, 10));
 
     expect(document.body.style.overflow).toBe('');
@@ -64,7 +64,7 @@ describe('BottomSheet Component', () => {
     };
 
     const { container } = render(BottomSheet, {
-      props: { show: true, onclose }
+      props: { open: true, onclose }
     });
     const backdrop = container.querySelector('.fixed.inset-0');
 
@@ -79,7 +79,7 @@ describe('BottomSheet Component', () => {
     };
 
     const { container } = render(BottomSheet, {
-      props: { show: true, onclose }
+      props: { open: true, onclose }
     });
     const sheet = container.querySelector('.bg-white, .dark\\:bg-gray-800');
 
@@ -93,33 +93,33 @@ describe('BottomSheet Component', () => {
       closeCalled = true;
     };
 
-    render(BottomSheet, { props: { show: true, onclose } });
+    render(BottomSheet, { props: { open: true, onclose } });
 
     await fireEvent.keyDown(window, { key: 'Escape' });
     expect(closeCalled).toBe(true);
   });
 
-  it('does not dispatch close on Escape when not shown', async () => {
+  it('does not dispatch close on Escape when not open', async () => {
     let closeCalled = false;
     const onclose = () => {
       closeCalled = true;
     };
 
-    render(BottomSheet, { props: { show: false, onclose } });
+    render(BottomSheet, { props: { open: false, onclose } });
 
     await fireEvent.keyDown(window, { key: 'Escape' });
     expect(closeCalled).toBe(false);
   });
 
   it('has handle bar element', () => {
-    const { container } = render(BottomSheet, { props: { show: true } });
+    const { container } = render(BottomSheet, { props: { open: true } });
     // The handle is the gray bar with rounded corners
     const handle = container.querySelector('.w-10.h-1.bg-gray-300');
     expect(handle).toBeTruthy();
   });
 
   it('has content area for slot content', () => {
-    const { container } = render(BottomSheet, { props: { show: true } });
+    const { container } = render(BottomSheet, { props: { open: true } });
     // The content area has overflow-y-auto class
     const content = container.querySelector('.overflow-y-auto');
     expect(content).toBeTruthy();
@@ -127,7 +127,7 @@ describe('BottomSheet Component', () => {
 
   it('cleans up body overflow on destroy', () => {
     document.body.style.overflow = 'hidden';
-    const { unmount } = render(BottomSheet, { props: { show: true } });
+    const { unmount } = render(BottomSheet, { props: { open: true } });
 
     unmount();
 

package/dist/primitives/BottomSheet/BottomSheet.svelte

@@ -7,7 +7,7 @@
 
   interface Props {
     /** Whether the bottom sheet is visible */
-    show?: boolean;
+    open?: boolean;
     /** Title displayed in the header */
     title?: string;
     /** Callback when the sheet should close */
@@ -19,7 +19,7 @@
   }
 
   let {
-    show = false,
+    open = $bindable(false),
     title = '',
     onclose,
     children,
@@ -37,14 +37,14 @@
   }
 
   function handleKeydown(e: KeyboardEvent) {
-    if (e.key === "Escape" && show) {
+    if (e.key === "Escape" && open) {
       close();
     }
   }
 
   $effect(() => {
     if (typeof document !== "undefined") {
-      if (show) {
+      if (open) {
         document.body.style.overflow = "hidden";
       } else {
         document.body.style.overflow = "";
@@ -61,7 +61,7 @@
 
 <svelte:window onkeydown={handleKeydown} />
 
-{#if show}
+{#if open}
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     /** Whether the bottom sheet is visible */
-    show?: boolean;
+    open?: boolean;
     /** Title displayed in the header */
     title?: string;
     /** Callback when the sheet should close */
@@ -11,7 +11,7 @@ interface Props {
     /** Actions slot (footer buttons) */
     actions?: Snippet;
 }
-declare const BottomSheet: import("svelte").Component<Props, {}, "">;
+declare const BottomSheet: import("svelte").Component<Props, {}, "open">;
 type BottomSheet = ReturnType<typeof BottomSheet>;
 export default BottomSheet;
 //# sourceMappingURL=BottomSheet.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/BottomSheet/BottomSheet.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAoFH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"BottomSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/BottomSheet/BottomSheet.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAoFH,QAAA,MAAM,WAAW,+CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/primitives/BottomSheet/BottomSheetWrapper.test.svelte

@@ -2,12 +2,12 @@
   import BottomSheet from './BottomSheet.svelte';
 
   interface Props {
-    show?: boolean;
+    open?: boolean;
   }
 
-  let { show = false }: Props = $props();
+  let { open = false }: Props = $props();
 </script>
 
-<BottomSheet {show}>
+<BottomSheet {open}>
   <div>Test content</div>
 </BottomSheet>

package/dist/primitives/BottomSheet/BottomSheetWrapper.test.svelte.d.ts

@@ -1,5 +1,5 @@
 interface Props {
-    show?: boolean;
+    open?: boolean;
 }
 declare const BottomSheetWrapper: import("svelte").Component<Props, {}, "">;
 type BottomSheetWrapper = ReturnType<typeof BottomSheetWrapper>;

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

@@ -175,10 +175,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 +206,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>