@getmicdrop/svelte-components 5.10.1 → 5.12.0

package/dist/components/Layout/Stack.spec.js

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/svelte';
+import { render } from '@testing-library/svelte';
 import { expect, describe, test } from 'vitest';
 import Stack from './Stack.svelte';
 describe('Stack Component', () => {

package/dist/datetime/__tests__/format.test.js

@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { formatCleanTimeRange, formatDateRange, formatDayOfWeek, formatEventDate, formatEventDateTime, formatEventTime, formatHour, formatMonth, formatNotificationTime, formatRelativeTime, formatTimeRange, getDateInTimezone, getDateParts, getHourInTimezone, isToday, } from '../format';
-import { DateTimeError, DateTimeErrorCode } from '../types';
+import { DateTimeError } from '../types';
 describe('format utilities', () => {
     describe('formatEventTime', () => {
         it('formats time in specified timezone', () => {

package/dist/datetime/__tests__/parse.test.js

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import { combineDateAndTime, formatDateTimeForAPI, isNextDayTime, minutesToTimeString, parseDateTimeFromAPI, parseEndOfDay, parseLocalToUTC, parseStartOfDay, parseTimeToMinutes, parseUTCToLocal, stripNextDayPrefix, } from '../parse';
-import { DateTimeError, DateTimeErrorCode } from '../types';
+import { DateTimeError } from '../types';
 describe('parse utilities', () => {
     describe('parseLocalToUTC', () => {
         it('converts local datetime to UTC', () => {

package/dist/datetime/__tests__/timezone.test.js

@@ -1,4 +1,4 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { getTimezoneDisplayName, getTimezoneOffset, getUserTimezone, getVenueTimezone, isDST, isValidTimezone, normalizeTimezone, getIANATimezone, isValidIANATimezone, getAllTimezones, formatTimezoneForDisplay, getTimezoneOptions, getCommonUSTimezoneOptions, } from '../timezone';
 import { DateTimeError, DateTimeErrorCode } from '../types';
 describe('timezone utilities', () => {

package/dist/datetime/parse.js

@@ -6,7 +6,7 @@
  *
  * @module datetime/parse
  */
-import { format, parse } from 'date-fns';
+import { format } from 'date-fns';
 import { fromZonedTime, toZonedTime } from 'date-fns-tz';
 import { DATE_FORMATS } from './constants';
 import { isValidTimezone } from './timezone';

package/dist/forms/createFormStore.svelte.js

@@ -7,7 +7,6 @@
  * - UI states (loading, saving, saved)
  * - Section-level validation for progressive forms
  */
-import { z } from 'zod';
 // ============================================================================
 // Implementation
 // ============================================================================

package/dist/index.d.ts

@@ -8,6 +8,8 @@ export * from "./constants/validation.js";
 export * from "./presets/index.js";
 export { portal } from "./utils/portal.js";
 export { typography } from "./tokens/typography.js";
+export type HapticStyle = import("./utils/haptic.js").HapticStyle;
 export { safeSlide, bloom } from "./utils/transitions.js";
 export { optimizeImage, supportsWebP, createImage } from "./utils/imageOptimizer.js";
+export { triggerHaptic, isHapticAvailable, getHapticForButtonVariant } from "./utils/haptic.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.js"],"names":[],"mappings":";;;;;;;;;;0BAqDc,OAAO,mBAAmB,EAAE,WAAW"}

package/dist/index.js

@@ -46,6 +46,12 @@ export * from './presets/index.js';
 export { portal } from './utils/portal.js';
 export { safeSlide, bloom } from './utils/transitions.js';
 export { optimizeImage, supportsWebP, createImage } from './utils/imageOptimizer.js';
+export {
+  triggerHaptic,
+  isHapticAvailable,
+  getHapticForButtonVariant,
+} from './utils/haptic.js';
+/** @typedef {import('./utils/haptic.js').HapticStyle} HapticStyle */
 
 // Design Tokens
 export { typography } from './tokens/typography.js';

package/dist/primitives/Breadcrumb/Breadcrumb.spec.js

@@ -48,12 +48,13 @@ describe("Breadcrumb Component Tests", () => {
     expect(icons.length).toBeGreaterThan(0);
   });
 
-  test("Shows separator arrows between items", () => {
+  test("Shows separator characters between items", () => {
     setupTest();
-    // Arrows appear between items (n-1 arrows for n items)
-    const svgs = document.querySelectorAll("svg");
-    // 1 home icon + 2 chevron arrows = 3 SVGs minimum
-    expect(svgs.length).toBeGreaterThanOrEqual(3);
+    // Separators appear between items (n-1 separators for n items)
+    // We use text character "›" instead of SVG arrows for consistent spacing
+    const separators = document.querySelectorAll("span.text-gray-400");
+    // 3 items means 2 separators
+    expect(separators.length).toBe(2);
   });
 
   test("Last item is not a link", () => {

package/dist/primitives/Breadcrumb/Breadcrumb.svelte

@@ -28,7 +28,7 @@
     showHomeIcon = true,
     title = '',
     subtitle = '',
-    onclick
+    onclick,
   }: Props = $props();
 
   function handleClick(crumb: BreadcrumbItem) {
@@ -39,16 +39,16 @@
 <div class="flex flex-col items-start gap-2 min-w-0">
   {#if data.length > 0}
     <nav class={`flex items-center ${typography.smMuted} font-medium ${className}`} aria-label="Breadcrumb">
-      <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-wrap">
+      <ol class="inline-flex items-center rtl:space-x-reverse flex-wrap">
         {#each data as crumb, index}
           <li class="inline-flex items-center">
             {#if index > 0}
-              <ChevronRightOutline class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" />
+              <span class="text-gray-400" style="margin: 0 6px;">›</span>
             {/if}
             {#if index === 0 && showHomeIcon && data.length === 1}
               <!-- Single item with home icon - show as non-clickable label -->
-              <span class="{typography.smMuted} inline-flex items-center font-medium">
-                <HomeSolid class="w-3 h-3 me-2.5" />
+              <span class="{typography.smMuted} inline-flex items-center font-medium" style="gap: 6px;">
+                <HomeSolid class="w-3 h-3" />
                 {crumb.name}
               </span>
             {:else if index === 0 && showHomeIcon}
@@ -57,13 +57,14 @@
                 href={crumb.href}
                 onclick={() => handleClick(crumb)}
                 class="{typography.smMuted} inline-flex items-center font-medium hover:text-blue-600 dark:hover:text-white"
+                style="gap: 6px;"
               >
-                <HomeSolid class="w-3 h-3 me-2.5" />
+                <HomeSolid class="w-3 h-3" />
                 {crumb.name}
               </a>
             {:else if index === data.length - 1}
               <!-- Last item - non-clickable -->
-              <span class={`ms-1 ${typography.smMuted} font-medium md:ms-2 max-w-48 truncate`} title={crumb.name}>
+              <span class={`${typography.smMuted} font-medium max-w-48 truncate`} title={crumb.name}>
                 {crumb.name}
               </span>
             {:else}
@@ -71,7 +72,7 @@
               <a
                 href={crumb.href}
                 onclick={() => handleClick(crumb)}
-                class="{typography.smMuted} ms-1 font-medium hover:text-blue-600 md:ms-2 dark:hover:text-white max-w-48 truncate"
+                class="{typography.smMuted} font-medium hover:text-blue-600 dark:hover:text-white max-w-48 truncate"
                 title={crumb.name}
               >
                 {crumb.name}

package/dist/primitives/Button/Button.svelte

@@ -23,6 +23,11 @@
    *   - 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';
@@ -34,6 +39,7 @@
     buttonMenuItemSizes,
     buttonCardSizes,
   } from '../../tokens/sizing.js';
+  import { triggerHaptic, getHapticForButtonVariant } from '../../utils/haptic.js';
 
   interface Props {
     variant?: string;
@@ -45,6 +51,8 @@
     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;
@@ -62,6 +70,7 @@
     active = false,
     href = null,
     type = "button",
+    haptic = false,
     children,
     trailing,
     class: className = "",
@@ -69,6 +78,17 @@
     ...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",
@@ -181,6 +201,17 @@ let sizeClass = $derived((() => {
   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
@@ -204,7 +235,7 @@ let sizeClass = $derived((() => {
   <a
     {href}
     class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
-    {onclick}
+    onclick={handleClick}
     {...restProps}
   >
     {#if loading}
@@ -220,7 +251,7 @@ let sizeClass = $derived((() => {
     {type}
     class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
     disabled={effectiveDisabled}
-    {onclick}
+    onclick={handleClick}
     {...restProps}
   >
     {#if loading}

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;

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":"AA8BA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAUpC,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,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;AA6LH,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;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"}

package/dist/primitives/Modal/Modal.svelte

@@ -2,11 +2,15 @@
   /**
    * Modal Component - Flowbite Native
    * Migrated to Svelte 5 runes
+   *
+   * Haptic Feedback:
+   *   - Light haptic on modal open (subtle attention cue)
    */
   import { onDestroy } from "svelte";
   import { fade, fly } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import { portal } from "../../utils/portal.js";
+  import { triggerHaptic } from "../../utils/haptic.js";
 
   /** @type {{
     show?: boolean,
@@ -14,6 +18,7 @@
     isSuccess?: boolean,
     size?: 'default' | 'small' | 'large' | 'xlarge',
     persistent?: boolean,
+    haptic?: boolean,
     oncancel?: () => void,
     header?: import('svelte').Snippet,
     body?: import('svelte').Snippet,
@@ -26,6 +31,7 @@
     isSuccess = false,
     size = "default",
     persistent = false,
+    haptic = true,
     oncancel,
     header,
     body,
@@ -37,6 +43,17 @@
   // Store scroll position for iOS scroll lock
   let scrollY = $state(0);
 
+  // Track previous show state to detect open transitions
+  let prevShow = $state(false);
+
+  // Trigger haptic on modal open (QOL Bible)
+  $effect(() => {
+    if (show && !prevShow && haptic) {
+      triggerHaptic('light');
+    }
+    prevShow = show;
+  });
+
   // Handle escape key
   function handleKeydown(event) {
     if (event.key === "Escape" && show && !persistent) {

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

@@ -7,6 +7,7 @@ type Modal = {
         isSuccess?: boolean | undefined;
         size?: "small" | "large" | "default" | "xlarge" | undefined;
         persistent?: boolean | undefined;
+        haptic?: boolean | undefined;
         oncancel?: (() => void) | undefined;
         header?: Snippet<[]> | undefined;
         body?: Snippet<[]> | undefined;
@@ -20,6 +21,7 @@ declare const Modal: import("svelte").Component<{
     isSuccess?: boolean;
     size?: "default" | "small" | "large" | "xlarge";
     persistent?: boolean;
+    haptic?: boolean;
     oncancel?: () => void;
     header?: import("svelte").Snippet;
     body?: import("svelte").Snippet;

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmKA;WAXW,OAAO;mBACC,OAAO;gBACV,OAAO;WACZ,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ;iBAClC,OAAO;eACT,MAAM,IAAI;aACZ,OAAO,QAAQ,EAAE,OAAO;WAC1B,OAAO,QAAQ,EAAE,OAAO;aACtB,OAAO,QAAQ,EAAE,OAAO;YACzB,MAAM;eAEkC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsLA;WAZW,OAAO;mBACC,OAAO;gBACV,OAAO;WACZ,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ;iBAClC,OAAO;aACX,OAAO;eACL,MAAM,IAAI;aACZ,OAAO,QAAQ,EAAE,OAAO;WAC1B,OAAO,QAAQ,EAAE,OAAO;aACtB,OAAO,QAAQ,EAAE,OAAO;YACzB,MAAM;eAEkC"}

package/dist/primitives/Toggle.svelte

@@ -6,12 +6,17 @@
    * Note: Uses CSS style block for pseudo-element styling instead of Tailwind
    * after: classes, because Tailwind v4 doesn't generate after: classes from
    * node_modules when this component is consumed by other apps.
+   *
+   * Haptic Feedback:
+   *   - Selection haptic on state change (very light, tactile confirmation)
    */
+  import { triggerHaptic } from '../utils/haptic.js';
 
   /** @type {{
     checked?: boolean,
     disabled?: boolean,
     size?: 'sm' | 'md' | 'lg',
+    haptic?: boolean,
     class?: string,
     onchange?: (detail: { checked: boolean }) => void,
     children?: import('svelte').Snippet,
@@ -20,6 +25,7 @@
     checked = $bindable(false),
     disabled = false,
     size = 'md',
+    haptic = true,
     class: className = '',
     onchange,
     children,
@@ -28,6 +34,10 @@
 
   function handleChange(event) {
     checked = event.target.checked;
+    // Haptic feedback on toggle change (QOL Bible)
+    if (haptic && !disabled) {
+      triggerHaptic('selection');
+    }
     onchange?.({ checked });
   }
 </script>

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

@@ -5,6 +5,7 @@ type Toggle = {
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
         size?: "sm" | "md" | "lg" | undefined;
+        haptic?: boolean | undefined;
         class?: string | undefined;
         onchange?: ((detail: {
             checked: boolean;
@@ -16,6 +17,7 @@ declare const Toggle: import("svelte").Component<{
     checked?: boolean;
     disabled?: boolean;
     size?: "sm" | "md" | "lg";
+    haptic?: boolean;
     class?: string;
     onchange?: (detail: {
         checked: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/Toggle.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AA0DA;cAPc,OAAO;eACN,OAAO;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;YACjB,MAAM;eACH,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;eACtC,OAAO,QAAQ,EAAE,OAAO;kBAEc"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/Toggle.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwEA;cARc,OAAO;eACN,OAAO;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;aAChB,OAAO;YACR,MAAM;eACH,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;eACtC,OAAO,QAAQ,EAAE,OAAO;kBAEc"}

package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte

@@ -3,6 +3,7 @@
     import { passwordStrength } from "check-password-strength";
     import { safeSlide } from "../../../utils/transitions.js";
     import { cubicOut } from "svelte/easing";
+    import { untrack } from "svelte";
 
     interface Props {
       password?: string;
@@ -21,7 +22,8 @@
     }: Props = $props();
 
     let debouncedPassword = $state("");
-    let timer = $state<ReturnType<typeof setTimeout> | undefined>();
+    // Use a plain variable for timer to avoid reactive dependency
+    let timer: ReturnType<typeof setTimeout> | undefined;
 
     const customOptions = [
         {
@@ -50,7 +52,7 @@
         },
     ] as const;
 
-    // Debounce password updates
+    // Debounce password updates - timer is not reactive to avoid dependency cycle
     $effect(() => {
         clearTimeout(timer);
         if (password.length === 0) {
@@ -67,33 +69,45 @@
         ? passwordStrength(debouncedPassword, customOptions as any)
         : null);
 
-    // Compute score based on password length and strength
+    // Derive score based on password length and strength
+    let computedScore = $derived(debouncedPassword.length > 12 ? 3 : (strength?.id ?? -1));
+
+    // Sync computed values to bindable props using effects with untrack
     $effect(() => {
-        score = debouncedPassword.length > 12 ? 3 : (strength?.id ?? -1);
+        const newScore = computedScore;
+        if (untrack(() => score) !== newScore) {
+            score = newScore;
+        }
     });
 
-    // Map score to display text and color
+    // Derive text and color from computedScore (not from bindable score)
+    let computedStrengthText = $derived(
+        computedScore === 0 ? "Too weak" :
+        computedScore === 1 ? "Weak" :
+        computedScore === 2 ? "Good" :
+        computedScore === 3 ? "Strong" : ""
+    );
+
+    let computedTextColor = $derived(computedScore <= 1 ? "text-red-600" : "text-green-600");
+
     $effect(() => {
-        strengthText =
-            score === 0
-                ? "Too weak"
-                : score === 1
-                  ? "Weak"
-                  : score === 2
-                    ? "Good"
-                    : score === 3
-                      ? "Strong"
-                      : "";
+        const newText = computedStrengthText;
+        if (untrack(() => strengthText) !== newText) {
+            strengthText = newText;
+        }
     });
 
-    let strengthColor = $derived(score <= 1 ? "bg-red-600" : "bg-green-600");
+    let strengthColor = $derived(computedScore <= 1 ? "bg-red-600" : "bg-green-600");
 
     $effect(() => {
-        textColor = score <= 1 ? "text-red-600" : "text-green-600";
+        const newColor = computedTextColor;
+        if (untrack(() => textColor) !== newColor) {
+            textColor = newColor;
+        }
     });
 
     // Calculate how many bars to fill (1-3)
-    let filledBars = $derived(score === 0 ? 1 : score === 1 ? 2 : score >= 2 ? 3 : 0);
+    let filledBars = $derived(computedScore === 0 ? 1 : computedScore === 1 ? 2 : computedScore >= 2 ? 3 : 0);
 </script>
 
 {#if debouncedPassword.length > 0}

package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordStrengthIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMlC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6GL,QAAA,MAAM,yBAAyB,+EAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"PasswordStrengthIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOlC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2HL,QAAA,MAAM,yBAAyB,+EAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

package/dist/recipes/modals/ConfirmationModal.svelte

@@ -3,6 +3,7 @@
   import Cancel from "../../assets/svg/cancel.svg";
   import Modal from "../../primitives/Modal/Modal.svelte";
   import { typography } from '../../tokens/typography';
+  import { triggerHaptic } from '../../utils/haptic.js';
 
   let {
     show = $bindable(false),
@@ -19,6 +20,8 @@
     variant = "default",
     loading = false,
     disabled = false,
+    /** Enable haptic feedback on action clicks (default: true) */
+    haptic = true,
     onconfirm,
     oncancel,
     onclose,
@@ -54,6 +57,14 @@
 
   const handleAction = (action) => {
     if (disabled || loading) return;
+
+    // Trigger haptic feedback based on action type (QOL Bible)
+    if (haptic) {
+      const actionVariant = getVariant(action);
+      const isDanger = actionVariant === 'red' || actionVariant === 'red-outline' || actionVariant === 'ghost-red';
+      triggerHaptic(isDanger ? 'heavy' : 'medium');
+    }
+
     action.onClick?.();
     show = false;
   };
@@ -98,7 +109,7 @@
 
 <Modal bind:show {size} oncancel={handleClose} {...restProps}>
   {#snippet header()}
-    <div class="text-center">
+    <div>
       {#if closeBtn}
         <div class="flex justify-end -mt-2 -mr-2 mb-2">
           <Button variant="icon" size="xs" onclick={handleClose} {disabled}>
@@ -118,7 +129,7 @@
   {/snippet}
 
   {#snippet body()}
-    <div class="text-center mt-4">
+    <div class="mt-4">
       {#if description}
         <p class={`${typography.smMuted} leading-relaxed`}>
           {description}
@@ -133,11 +144,10 @@
   {/snippet}
 
   {#snippet footer()}
-    <div class="flex gap-3">
+    <div class="flex justify-end gap-3">
       {#each resolvedActions as action}
         <Button
           size="md"
-          class="flex-1"
           variant={getVariant(action)}
           {...cleanActionProps(action)}
           disabled={disabled || action.disabled}

package/dist/recipes/modals/ConfirmationModal.svelte.d.ts

@@ -18,6 +18,7 @@ declare const ConfirmationModal: import("svelte").Component<{
     variant?: string;
     loading?: boolean;
     disabled?: boolean;
+    haptic?: boolean;
     onconfirm: any;
     oncancel: any;
     onclose: any;
@@ -37,6 +38,7 @@ type $$ComponentProps = {
     variant?: string;
     loading?: boolean;
     disabled?: boolean;
+    haptic?: boolean;
     onconfirm: any;
     oncancel: any;
     onclose: any;

package/dist/recipes/modals/ConfirmationModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/ConfirmationModal.svelte.js"],"names":[],"mappings":";;;;;AA2JA;WA7I4B,OAAO;WAAS,MAAM;YAAU,MAAM;kBAAgB,MAAM;kBAAgB,MAAM;cAAY,GAAG,EAAE;WAAS,GAAG;iBAAe,GAAG;eAAa,OAAO;wBAAsB,MAAM;0BAAwB,MAAM;cAAY,MAAM;cAAY,OAAO;eAAa,OAAO;eAAa,GAAG;cAAY,GAAG;aAAW,GAAG;qCA6IjR;wBA7I7C;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}
+{"version":3,"file":"ConfirmationModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/ConfirmationModal.svelte.js"],"names":[],"mappings":";;;;;AAuKA;WAvJ4B,OAAO;WAAS,MAAM;YAAU,MAAM;kBAAgB,MAAM;kBAAgB,MAAM;cAAY,GAAG,EAAE;WAAS,GAAG;iBAAe,GAAG;eAAa,OAAO;wBAAsB,MAAM;0BAAwB,MAAM;cAAY,MAAM;cAAY,OAAO;eAAa,OAAO;aAAW,OAAO;eAAa,GAAG;cAAY,GAAG;aAAW,GAAG;qCAuJnS;wBAvJ7C;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}

package/dist/utils/haptic.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Haptic Feedback Utility
+ *
+ * Provides tactile feedback for user actions across iOS, Android, and web.
+ * Part of QOL Bible - "Instant Response to Every Touch"
+ *
+ * Supports:
+ * - iOS WebKit (native app wrapper)
+ * - iOS TapticEngine (older API)
+ * - Android/Web Vibration API (fallback)
+ *
+ * Usage:
+ *   import { triggerHaptic } from './haptic';
+ *   triggerHaptic('success'); // On form submission success
+ *   triggerHaptic('light');   // On toggle/selection
+ *   triggerHaptic('heavy');   // On destructive action confirmation
+ */
+export type HapticStyle = 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error' | 'selection';
+/**
+ * Trigger haptic feedback
+ *
+ * @param style - The haptic intensity/pattern
+ *   - light: Subtle confirmation (toggles, selections)
+ *   - medium: Standard confirmation (form saves, status changes)
+ *   - heavy: Strong confirmation (destructive actions, transfers)
+ *   - success: Double-tap pattern for achievements
+ *   - warning: Alert pattern
+ *   - error: Triple-pulse for errors
+ *   - selection: Very light for toggle/checkbox state changes
+ */
+export declare function triggerHaptic(style?: HapticStyle): void;
+/**
+ * Check if haptic feedback is available on this device
+ */
+export declare function isHapticAvailable(): boolean;
+/**
+ * Map button variants to appropriate haptic styles
+ * Used by Button component to provide context-aware feedback
+ */
+export declare function getHapticForButtonVariant(variant: string, isSuccess?: boolean): HapticStyle | null;
+//# sourceMappingURL=haptic.d.ts.map

package/dist/utils/haptic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"haptic.d.ts","sourceRoot":"","sources":["../../src/lib/utils/haptic.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,MAAM,WAAW,GACnB,OAAO,GACP,QAAQ,GACR,OAAO,GACP,SAAS,GACT,SAAS,GACT,OAAO,GACP,WAAW,CAAC;AAahB;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,KAAK,GAAE,WAAqB,GAAG,IAAI,CAgChE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,OAAO,CAU3C;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,MAAM,EACf,SAAS,CAAC,EAAE,OAAO,GAClB,WAAW,GAAG,IAAI,CA4BpB"}

package/dist/utils/haptic.js

@@ -0,0 +1,115 @@
+/**
+ * Haptic Feedback Utility
+ *
+ * Provides tactile feedback for user actions across iOS, Android, and web.
+ * Part of QOL Bible - "Instant Response to Every Touch"
+ *
+ * Supports:
+ * - iOS WebKit (native app wrapper)
+ * - iOS TapticEngine (older API)
+ * - Android/Web Vibration API (fallback)
+ *
+ * Usage:
+ *   import { triggerHaptic } from './haptic';
+ *   triggerHaptic('success'); // On form submission success
+ *   triggerHaptic('light');   // On toggle/selection
+ *   triggerHaptic('heavy');   // On destructive action confirmation
+ */
+// Vibration durations in ms for each style
+const VIBRATION_PATTERNS = {
+    light: 10,
+    medium: 20,
+    heavy: 30,
+    success: [10, 50, 20], // double tap feel
+    warning: [20, 40, 20],
+    error: [30, 50, 30, 50, 30], // triple pulse
+    selection: 8, // very light for toggles/checkboxes
+};
+/**
+ * Trigger haptic feedback
+ *
+ * @param style - The haptic intensity/pattern
+ *   - light: Subtle confirmation (toggles, selections)
+ *   - medium: Standard confirmation (form saves, status changes)
+ *   - heavy: Strong confirmation (destructive actions, transfers)
+ *   - success: Double-tap pattern for achievements
+ *   - warning: Alert pattern
+ *   - error: Triple-pulse for errors
+ *   - selection: Very light for toggle/checkbox state changes
+ */
+export function triggerHaptic(style = 'light') {
+    if (typeof window === 'undefined')
+        return;
+    // iOS WebKit bridge (native app wrapper)
+    // @ts-expect-error - iOS WebKit
+    if (window.webkit?.messageHandlers?.haptic) {
+        // @ts-expect-error - iOS WebKit
+        window.webkit.messageHandlers.haptic.postMessage(style);
+        return;
+    }
+    // iOS TapticEngine (older native API)
+    // @ts-expect-error - Taptic Engine
+    if (window.TapticEngine) {
+        // Map our styles to TapticEngine styles
+        const tapticStyle = style === 'success' ||
+            style === 'warning' ||
+            style === 'error' ||
+            style === 'selection'
+            ? 'medium'
+            : style;
+        // @ts-expect-error - Taptic Engine
+        window.TapticEngine.impact({ style: tapticStyle });
+        return;
+    }
+    // Android/Web Vibration API fallback
+    if (navigator.vibrate) {
+        const pattern = VIBRATION_PATTERNS[style];
+        navigator.vibrate(pattern);
+    }
+}
+/**
+ * Check if haptic feedback is available on this device
+ */
+export function isHapticAvailable() {
+    if (typeof window === 'undefined')
+        return false;
+    return !!(
+    // @ts-expect-error - iOS WebKit
+    window.webkit?.messageHandlers?.haptic ||
+        // @ts-expect-error - Taptic Engine
+        window.TapticEngine ||
+        navigator.vibrate);
+}
+/**
+ * Map button variants to appropriate haptic styles
+ * Used by Button component to provide context-aware feedback
+ */
+export function getHapticForButtonVariant(variant, isSuccess) {
+    if (isSuccess)
+        return 'success';
+    switch (variant) {
+        case 'red':
+        case 'red-outline':
+        case 'ghost-red':
+        case 'menu-item-danger':
+            return 'heavy'; // Destructive actions get strong feedback
+        case 'default':
+        case 'outline':
+        case 'landing':
+            return 'medium'; // Primary actions get standard feedback
+        case 'alternative':
+        case 'ghost':
+        case 'landing-secondary':
+            return 'light'; // Secondary actions get subtle feedback
+        case 'toggle':
+        case 'nav':
+            return 'selection'; // Selection changes get very light feedback
+        case 'icon':
+        case 'menu-item':
+        case 'search-result':
+        case 'link':
+            return null; // These don't need haptic (too frequent or navigation)
+        default:
+            return 'light';
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "5.10.1",
+  "version": "5.12.0",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",