@getmicdrop/svelte-components 5.10.3 → 5.12.0

package/dist/primitives/Button/Button.svelte

@@ -1,283 +1,314 @@
-<script lang="ts">
-  /**
-   * Button Component - Flowbite Native (Pure Tailwind)
-   * Migrated to Svelte 5 runes
-   *
-   * Variants (Flowbite naming):
-   *   - default: Primary blue button
-   *   - alternative: Gray outline button
-   *   - outline: Blue outline button
-   *   - red: Destructive solid button
-   *   - red-outline: Destructive outline button
-   *   - ghost: Text-only button
-   *   - ghost-red: Destructive text button
-   *   - icon: Icon-only button
-   *   - toggle: Toggle/pill button
-   *   - avatar: Avatar/image trigger button (no padding, opacity hover)
-   *   - menu-item: Dropdown/sheet menu item (full width, left-aligned)
-   *   - menu-item-danger: Destructive menu item (red text)
-   *   - card: Selectable card button (bordered, for list selections)
-   *   - sidebar-toggle: Compact pill for sidebar expand/collapse
-   *   - chart-row: Leaderboard/chart list row with progress bar
-   *   - landing: Primary hero CTA (blue, shadow, rounded-xl)
-   *   - landing-secondary: Secondary hero CTA (outline, shadow, rounded-xl)
-   *
-   * Sizes (Flowbite native): xs, sm, md, lg, xl, landing
-   */
-  import { CheckOutline } from '../Icons';
-  import { twMerge } from 'tailwind-merge';
-  import type { Snippet } from 'svelte';
-  import {
-    buttonSizes,
-    buttonIconSizes,
-    buttonAvatarSizes,
-    buttonMenuItemSizes,
-    buttonCardSizes,
-  } from '../../tokens/sizing.js';
-
-  interface Props {
-    variant?: string;
-    size?: string;
-    disabled?: boolean;
-    loading?: boolean;
-    success?: boolean;
-    successText?: string;
-    active?: boolean;
-    href?: string | null;
-    type?: 'button' | 'submit' | 'reset';
-    children?: Snippet;
-    trailing?: Snippet;
-    class?: string;
-    onclick?: (e: MouseEvent) => void;
-    [key: string]: unknown;
-  }
-
-  let {
-    variant = "default",
-    size = "md",
-    disabled = false,
-    loading = false,
-    success = false,
-    successText = "",
-    active = false,
-    href = null,
-    type = "button",
-    children,
-    trailing,
-    class: className = "",
-    onclick,
-    ...restProps
-  }: Props = $props();
-
-  // Legacy variant name mapping
-  const variantMap: Record<string, string> = {
-    "blue-solid": "default",
-    "gray-outline": "alternative",
-    "blue-outline": "outline",
-    "red-solid": "red",
-    "red-text": "ghost-red",
-    "gray-text": "ghost",
-  };
-
-  // Resolve legacy names
-  let resolvedVariant = $derived(variantMap[variant] || variant);
-  let effectiveDisabled = $derived(disabled || loading || success);
-
-  // Size classes imported from centralized tokens
-
-  // Variant classes with all states in Tailwind (no focus rings - design decision)
-  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",
-    outline: "text-blue-700 bg-transparent border border-blue-700 hover:text-white hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500",
-    red: "text-white bg-red-700 border border-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700",
-    "red-outline": "text-red-700 bg-transparent border border-red-700 hover:text-white hover:bg-red-800 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600",
-    "green-outline": "text-green-700 bg-transparent border border-green-700 hover:text-white hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600",
-    ghost: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
-    "ghost-red": "text-red-700 bg-transparent border-transparent hover:bg-red-100 hover:text-red-900 dark:text-red-500 dark:hover:bg-red-900/50 dark:hover:text-red-400",
-    link: "text-blue-700 bg-transparent border-transparent hover:underline dark:text-blue-500",
-    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
-  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
-  const disabledClasses = "bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500";
-  // Disabled classes for transparent variants (link, ghost) - no background
-  const disabledTransparentClasses = "text-gray-400 cursor-not-allowed dark:text-gray-500";
-
-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;
-  })());
-
-  // Variants that should stay transparent when disabled
-  const transparentVariants = ["link", "ghost", "ghost-red", "icon"];
-
-  let variantClass = $derived((() => {
-    if (success) return variantClasses.success;
-    if (disabled && !loading && !success) {
-      return transparentVariants.includes(resolvedVariant)
-        ? disabledTransparentClasses
-        : disabledClasses;
-    }
-    if (active && activeClasses[resolvedVariant]) {
-      // When active, use ONLY active classes (they include all necessary styling)
-      return activeClasses[resolvedVariant];
-    }
-    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"
-  );
-
-  // 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");
-
-  let buttonClasses = $derived(twMerge(
-    "relative",
-    isLeftAligned
-      ? (hasTrailing ? "flex items-center justify-between" : "flex items-center justify-start")
-      : "inline-flex items-center justify-center",
-    roundedClass,
-    "font-medium leading-none",
-    "focus:outline-hidden",
-    // Apple-style micro-interactions (only when not disabled)
-    "transition-all duration-150 ease-out",
-    effectiveDisabled ? "" : "active:scale-[0.97] active:opacity-90",
-    "select-none",
-    sizeClass,
-    variantClass,
-    effectiveDisabled ? "cursor-not-allowed" : "cursor-pointer",
-    className
-  ));
-</script>
-
-{#if href}
-  <a
-    {href}
-    class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
-    {onclick}
-    {...restProps}
-  >
-    {#if loading}
-      <span class="shimmer-overlay"></span>
-    {/if}
-    <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
-      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-    </span>
-    {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
-  </a>
-{:else}
-  <button
-    {type}
-    class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
-    disabled={effectiveDisabled}
-    {onclick}
-    {...restProps}
-  >
-    {#if loading}
-      <span class="shimmer-overlay"></span>
-    {/if}
-    <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
-      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-    </span>
-    {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
-    {#if success}
-      <span class="absolute inset-0 flex items-center justify-center gap-2">
-        <CheckOutline class="w-5 h-5" />
-        {#if successText}<span class="font-medium">{successText}</span>{/if}
-      </span>
-    {/if}
-  </button>
-{/if}
-
-<style>
-  .loading-pulse {
-    animation: pulse-bg 2s ease-in-out infinite;
-  }
-
-  @keyframes pulse-bg {
-    0%, 100% { filter: brightness(1); }
-    50% { filter: brightness(1.15); }
-  }
-
-  .shimmer-overlay {
-    position: absolute;
-    inset: 0;
-    overflow: hidden;
-    border-radius: inherit;
-  }
-
-  .shimmer-overlay::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      rgba(255, 255, 255, 0.2) 50%,
-      transparent 100%
-    );
-    animation: shimmer 1s ease-in-out infinite;
-  }
-
-  @keyframes shimmer {
-    0% {
-      left: -100%;
-    }
-    100% {
-      left: 100%;
-    }
-  }
-</style>
+<script lang="ts">
+  /**
+   * Button Component - Flowbite Native (Pure Tailwind)
+   * Migrated to Svelte 5 runes
+   *
+   * Variants (Flowbite naming):
+   *   - default: Primary blue button
+   *   - alternative: Gray outline button
+   *   - outline: Blue outline button
+   *   - red: Destructive solid button
+   *   - red-outline: Destructive outline button
+   *   - ghost: Text-only button
+   *   - ghost-red: Destructive text button
+   *   - icon: Icon-only button
+   *   - toggle: Toggle/pill button
+   *   - avatar: Avatar/image trigger button (no padding, opacity hover)
+   *   - menu-item: Dropdown/sheet menu item (full width, left-aligned)
+   *   - menu-item-danger: Destructive menu item (red text)
+   *   - card: Selectable card button (bordered, for list selections)
+   *   - sidebar-toggle: Compact pill for sidebar expand/collapse
+   *   - chart-row: Leaderboard/chart list row with progress bar
+   *   - landing: Primary hero CTA (blue, shadow, rounded-xl)
+   *   - landing-secondary: Secondary hero CTA (outline, shadow, rounded-xl)
+   *
+   * Sizes (Flowbite native): xs, sm, md, lg, xl, landing
+   *
+   * Haptic Feedback:
+   *   - Automatic haptic on success state transition
+   *   - Optional haptic on click via `haptic` prop
+   *   - Variant-aware feedback intensity
+   */
+  import { CheckOutline } from '../Icons';
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+  import {
+    buttonSizes,
+    buttonIconSizes,
+    buttonAvatarSizes,
+    buttonMenuItemSizes,
+    buttonCardSizes,
+  } from '../../tokens/sizing.js';
+  import { triggerHaptic, getHapticForButtonVariant } from '../../utils/haptic.js';
+
+  interface Props {
+    variant?: string;
+    size?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    success?: boolean;
+    successText?: string;
+    active?: boolean;
+    href?: string | null;
+    type?: 'button' | 'submit' | 'reset';
+    /** Enable haptic feedback on click. When true, uses variant-aware haptic style. */
+    haptic?: boolean;
+    children?: Snippet;
+    trailing?: Snippet;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    variant = "default",
+    size = "md",
+    disabled = false,
+    loading = false,
+    success = false,
+    successText = "",
+    active = false,
+    href = null,
+    type = "button",
+    haptic = false,
+    children,
+    trailing,
+    class: className = "",
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  // Track previous success state to detect transitions
+  let prevSuccess = $state(false);
+
+  // Trigger haptic on success state transition (QOL Bible)
+  $effect(() => {
+    if (success && !prevSuccess) {
+      triggerHaptic('success');
+    }
+    prevSuccess = success;
+  });
+
+  // Legacy variant name mapping
+  const variantMap: Record<string, string> = {
+    "blue-solid": "default",
+    "gray-outline": "alternative",
+    "blue-outline": "outline",
+    "red-solid": "red",
+    "red-text": "ghost-red",
+    "gray-text": "ghost",
+  };
+
+  // Resolve legacy names
+  let resolvedVariant = $derived(variantMap[variant] || variant);
+  let effectiveDisabled = $derived(disabled || loading || success);
+
+  // Size classes imported from centralized tokens
+
+  // Variant classes with all states in Tailwind (no focus rings - design decision)
+  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",
+    outline: "text-blue-700 bg-transparent border border-blue-700 hover:text-white hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500",
+    red: "text-white bg-red-700 border border-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700",
+    "red-outline": "text-red-700 bg-transparent border border-red-700 hover:text-white hover:bg-red-800 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600",
+    "green-outline": "text-green-700 bg-transparent border border-green-700 hover:text-white hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600",
+    ghost: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
+    "ghost-red": "text-red-700 bg-transparent border-transparent hover:bg-red-100 hover:text-red-900 dark:text-red-500 dark:hover:bg-red-900/50 dark:hover:text-red-400",
+    link: "text-blue-700 bg-transparent border-transparent hover:underline dark:text-blue-500",
+    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
+  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
+  const disabledClasses = "bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500";
+  // Disabled classes for transparent variants (link, ghost) - no background
+  const disabledTransparentClasses = "text-gray-400 cursor-not-allowed dark:text-gray-500";
+
+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;
+  })());
+
+  // Variants that should stay transparent when disabled
+  const transparentVariants = ["link", "ghost", "ghost-red", "icon"];
+
+  let variantClass = $derived((() => {
+    if (success) return variantClasses.success;
+    if (disabled && !loading && !success) {
+      return transparentVariants.includes(resolvedVariant)
+        ? disabledTransparentClasses
+        : disabledClasses;
+    }
+    if (active && activeClasses[resolvedVariant]) {
+      // When active, use ONLY active classes (they include all necessary styling)
+      return activeClasses[resolvedVariant];
+    }
+    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"
+  );
+
+  // 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");
+
+  // Click handler with optional haptic feedback
+  function handleClick(e: MouseEvent) {
+    if (haptic && !effectiveDisabled) {
+      const hapticStyle = getHapticForButtonVariant(resolvedVariant);
+      if (hapticStyle) {
+        triggerHaptic(hapticStyle);
+      }
+    }
+    onclick?.(e);
+  }
+
+  let buttonClasses = $derived(twMerge(
+    "relative",
+    isLeftAligned
+      ? (hasTrailing ? "flex items-center justify-between" : "flex items-center justify-start")
+      : "inline-flex items-center justify-center",
+    roundedClass,
+    "font-medium leading-none",
+    "focus:outline-hidden",
+    // Apple-style micro-interactions (only when not disabled)
+    "transition-all duration-150 ease-out",
+    effectiveDisabled ? "" : "active:scale-[0.97] active:opacity-90",
+    "select-none",
+    sizeClass,
+    variantClass,
+    effectiveDisabled ? "cursor-not-allowed" : "cursor-pointer",
+    className
+  ));
+</script>
+
+{#if href}
+  <a
+    {href}
+    class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
+    onclick={handleClick}
+    {...restProps}
+  >
+    {#if loading}
+      <span class="shimmer-overlay"></span>
+    {/if}
+    <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
+      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+    </span>
+    {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
+  </a>
+{:else}
+  <button
+    {type}
+    class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
+    disabled={effectiveDisabled}
+    onclick={handleClick}
+    {...restProps}
+  >
+    {#if loading}
+      <span class="shimmer-overlay"></span>
+    {/if}
+    <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
+      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+    </span>
+    {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
+    {#if success}
+      <span class="absolute inset-0 flex items-center justify-center gap-2">
+        <CheckOutline class="w-5 h-5" />
+        {#if successText}<span class="font-medium">{successText}</span>{/if}
+      </span>
+    {/if}
+  </button>
+{/if}
+
+<style>
+  .loading-pulse {
+    animation: pulse-bg 2s ease-in-out infinite;
+  }
+
+  @keyframes pulse-bg {
+    0%, 100% { filter: brightness(1); }
+    50% { filter: brightness(1.15); }
+  }
+
+  .shimmer-overlay {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    border-radius: inherit;
+  }
+
+  .shimmer-overlay::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.2) 50%,
+      transparent 100%
+    );
+    animation: shimmer 1s ease-in-out infinite;
+  }
+
+  @keyframes shimmer {
+    0% {
+      left: -100%;
+    }
+    100% {
+      left: 100%;
+    }
+  }
+</style>

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

@@ -9,6 +9,8 @@ interface Props {
     active?: boolean;
     href?: string | null;
     type?: 'button' | 'submit' | 'reset';
+    /** Enable haptic feedback on click. When true, uses variant-aware haptic style. */
+    haptic?: boolean;
     children?: Snippet;
     trailing?: Snippet;
     class?: string;