@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/recipes/inputs/PasswordInput.svelte

@@ -1,130 +1,130 @@
-<script lang="ts">
-  /**
-   * PasswordInput - Password field with show/hide toggle and strength indicator
-   *
-   * Combines Input (password type) with PasswordStrengthIndicator for
-   * a complete password entry experience.
-   *
-   * @example
-   * <PasswordInput
-   *   label="New Password"
-   *   bind:value={password}
-   *   showStrength
-   *   error={$errors.password}
-   *   required
-   * />
-   */
-  import Input from '../../primitives/Input/Input.svelte';
-  import PasswordStrengthIndicator from './PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
-
-  const defaultLabels = {
-    passwordStrength: 'Password strength:',
-  };
-
-  interface Props {
-    /** Password value */
-    value?: string;
-    /** Label text */
-    label?: string;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Input name attribute */
-    name?: string;
-    /** Input id attribute */
-    id?: string;
-    /** Whether the field is required */
-    required?: boolean;
-    /** Whether the field is disabled */
-    disabled?: boolean;
-    /** Error message to display */
-    error?: string;
-    /** Hint text shown below input */
-    hint?: string;
-    /** Show password strength indicator */
-    showStrength?: boolean;
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** Minimum password length */
-    minlength?: number | null;
-    /** Maximum password length */
-    maxlength?: number | null;
-    /** Autocomplete attribute */
-    autocomplete?: string;
-    /** Whether to show the password toggle button */
-    showPasswordToggle?: boolean;
-    /** Additional class for the wrapper div */
-    class?: string;
-    // Optional callbacks (matching Input component signatures)
-    oninput?: (value: string) => void;
-    onblur?: () => void;
-    onfocus?: () => void;
-    /** Override user-visible strings */
-    labels?: Partial<typeof defaultLabels>;
-  }
-
-  let {
-    value = $bindable(''),
-    label = '',
-    placeholder = '',
-    name = '',
-    id = '',
-    required = false,
-    disabled = false,
-    error = '',
-    hint = '',
-    showStrength = false,
-    size = 'md',
-    minlength = null,
-    maxlength = null,
-    autocomplete = 'new-password',
-    showPasswordToggle = true,
-    class: className = '',
-    oninput,
-    onblur,
-    onfocus,
-    labels: userLabels = {},
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  // Password strength tracking
-  let strengthScore = $state(-1);
-  let strengthText = $state('');
-  let strengthColor = $state('');
-</script>
-
-<div class={className}>
-  <Input
-    type="password"
-    {id}
-    {name}
-    {placeholder}
-    {label}
-    {required}
-    {disabled}
-    {size}
-    {minlength}
-    {maxlength}
-    {autocomplete}
-    {showPasswordToggle}
-    errorText={error}
-    hintText={hint}
-    bind:value
-    oninputchange={oninput}
-    {onblur}
-    {onfocus}
-  />
-
-  {#if showStrength && value}
-    <PasswordStrengthIndicator
-      password={value}
-      bind:score={strengthScore}
-      bind:strengthText
-      bind:textColor={strengthColor}
-    >
-      <p class="text-xs {strengthColor}">
-        {labels.passwordStrength} {strengthText}
-      </p>
-    </PasswordStrengthIndicator>
-  {/if}
-</div>
+<script lang="ts">
+  /**
+   * PasswordInput - Password field with show/hide toggle and strength indicator
+   *
+   * Combines Input (password type) with PasswordStrengthIndicator for
+   * a complete password entry experience.
+   *
+   * @example
+   * <PasswordInput
+   *   label="New Password"
+   *   bind:value={password}
+   *   showStrength
+   *   error={$errors.password}
+   *   required
+   * />
+   */
+  import Input from '../../primitives/Input/Input.svelte';
+  import PasswordStrengthIndicator from './PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
+
+  const defaultLabels = {
+    passwordStrength: 'Password strength:',
+  };
+
+  interface Props {
+    /** Password value */
+    value?: string;
+    /** Label text */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Input name attribute */
+    name?: string;
+    /** Input id attribute */
+    id?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Hint text shown below input */
+    hint?: string;
+    /** Show password strength indicator */
+    showStrength?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Minimum password length */
+    minlength?: number | null;
+    /** Maximum password length */
+    maxlength?: number | null;
+    /** Autocomplete attribute */
+    autocomplete?: string;
+    /** Whether to show the password toggle button */
+    showPasswordToggle?: boolean;
+    /** Additional class for the wrapper div */
+    class?: string;
+    // Optional callbacks (matching Input component signatures)
+    oninput?: (value: string) => void;
+    onblur?: () => void;
+    onfocus?: () => void;
+    /** Override user-visible strings */
+    labels?: Partial<typeof defaultLabels>;
+  }
+
+  let {
+    value = $bindable(''),
+    label = '',
+    placeholder = '',
+    name = '',
+    id = '',
+    required = false,
+    disabled = false,
+    error = '',
+    hint = '',
+    showStrength = false,
+    size = 'md',
+    minlength = null,
+    maxlength = null,
+    autocomplete = 'new-password',
+    showPasswordToggle = true,
+    class: className = '',
+    oninput,
+    onblur,
+    onfocus,
+    labels: userLabels = {},
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  // Password strength tracking
+  let strengthScore = $state(-1);
+  let strengthText = $state('');
+  let strengthColor = $state('');
+</script>
+
+<div class={className}>
+  <Input
+    type="password"
+    {id}
+    {name}
+    {placeholder}
+    {label}
+    {required}
+    {disabled}
+    {size}
+    {minlength}
+    {maxlength}
+    {autocomplete}
+    {showPasswordToggle}
+    errorText={error}
+    hintText={hint}
+    bind:value
+    oninputchange={oninput}
+    {onblur}
+    {onfocus}
+  />
+
+  {#if showStrength && value}
+    <PasswordStrengthIndicator
+      password={value}
+      bind:score={strengthScore}
+      bind:strengthText
+      bind:textColor={strengthColor}
+    >
+      <p class="text-xs {strengthColor}">
+        {labels.passwordStrength} {strengthText}
+      </p>
+    </PasswordStrengthIndicator>
+  {/if}
+</div>

package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.spec.js

@@ -55,7 +55,7 @@ describe('PasswordStrengthIndicator Component - Strength Calculation', () => {
       props: { password: 'VeryStrongPass123!' }
     });
     expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
-    const greenBars = container.querySelectorAll('.bg-green-600');
+    const greenBars = container.querySelectorAll('.bg-accent-success');
     expect(greenBars.length).toBeGreaterThan(0);
   });
 
@@ -72,7 +72,7 @@ describe('PasswordStrengthIndicator Component - Visual Indicators', () => {
     const { container } = render(TestWrapper, {
       props: { password: 'ab' }
     });
-    const filledBars = container.querySelectorAll('.bg-red-600');
+    const filledBars = container.querySelectorAll('.bg-accent-danger');
     expect(filledBars.length).toBeGreaterThanOrEqual(1);
   });
 
@@ -98,7 +98,7 @@ describe('PasswordStrengthIndicator Component - Visual Indicators', () => {
     });
     const indicator = container.querySelector('.pt-2.space-y-2');
     expect(indicator).toBeInTheDocument();
-    const greenBars = container.querySelectorAll('.bg-green-600');
+    const greenBars = container.querySelectorAll('.bg-accent-success');
     expect(greenBars.length).toBe(3);
   });
 
@@ -106,7 +106,7 @@ describe('PasswordStrengthIndicator Component - Visual Indicators', () => {
     const { container } = render(TestWrapper, {
       props: { password: 'ab' }
     });
-    const grayBars = container.querySelectorAll('.bg-gray-200');
+    const grayBars = container.querySelectorAll('.bg-bg-tertiary');
     expect(grayBars.length).toBeGreaterThan(0);
   });
 
@@ -132,7 +132,7 @@ describe('PasswordStrengthIndicator Component - Color Coding', () => {
     const { container } = render(TestWrapper, {
       props: { password: 'ab' }
     });
-    const redBars = container.querySelectorAll('.bg-red-600');
+    const redBars = container.querySelectorAll('.bg-accent-danger');
     expect(redBars.length).toBeGreaterThan(0);
   });
 
@@ -141,7 +141,7 @@ describe('PasswordStrengthIndicator Component - Color Coding', () => {
       props: { password: 'test12' }
     });
     expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
-    const redBars = container.querySelectorAll('.bg-red-600');
+    const redBars = container.querySelectorAll('.bg-accent-danger');
     expect(redBars.length).toBeGreaterThan(0);
   });
 
@@ -150,7 +150,7 @@ describe('PasswordStrengthIndicator Component - Color Coding', () => {
       props: { password: 'Test1234' }
     });
     expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
-    const greenBars = container.querySelectorAll('.bg-green-600');
+    const greenBars = container.querySelectorAll('.bg-accent-success');
     expect(greenBars.length).toBeGreaterThan(0);
   });
 
@@ -158,7 +158,7 @@ describe('PasswordStrengthIndicator Component - Color Coding', () => {
     const { container } = render(TestWrapper, {
       props: { password: 'VeryStrongPass123!' }
     });
-    const greenBars = container.querySelectorAll('.bg-green-600');
+    const greenBars = container.querySelectorAll('.bg-accent-success');
     expect(greenBars.length).toBeGreaterThan(0);
   });
 });
@@ -179,7 +179,7 @@ describe('PasswordStrengthIndicator Component - Edge Cases', () => {
       props: { password: longPassword }
     });
     expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
-    const greenBars = container.querySelectorAll('.bg-green-600');
+    const greenBars = container.querySelectorAll('.bg-accent-success');
     expect(greenBars.length).toBe(3);
   });
 
@@ -195,7 +195,7 @@ describe('PasswordStrengthIndicator Component - Edge Cases', () => {
       props: { password: 'TestPass12345' }
     });
     expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
-    const greenBars = container.querySelectorAll('.bg-green-600');
+    const greenBars = container.querySelectorAll('.bg-accent-success');
     expect(greenBars.length).toBe(3);
   });
 
@@ -214,12 +214,12 @@ describe('PasswordStrengthIndicator Component - Edge Cases', () => {
   });
 });
 
-describe('PasswordStrengthIndicator Component - Dark Mode Support', () => {
-  test('unfilled bars have dark mode class', () => {
+describe('PasswordStrengthIndicator Component - Token-Based Styling', () => {
+  test('unfilled bars have token-based background class', () => {
     const { container } = render(TestWrapper, {
       props: { password: 'abc' }
     });
-    const bars = container.querySelectorAll('.dark\\:bg-gray-700');
+    const bars = container.querySelectorAll('.bg-bg-tertiary');
     expect(bars.length).toBeGreaterThan(0);
   });
 });
@@ -232,7 +232,7 @@ describe('PasswordStrengthIndicator Component - Bar Filling', () => {
     const allBars = container.querySelectorAll('.h-1.flex-1.rounded-full');
     expect(allBars).toHaveLength(3);
 
-    const filledBars = container.querySelectorAll('.bg-red-600, .bg-green-600');
+    const filledBars = container.querySelectorAll('.bg-accent-danger, .bg-accent-success');
     expect(filledBars.length).toBeGreaterThan(0);
   });
 

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

@@ -1,142 +1,142 @@
-<script lang="ts">
-    import type { Snippet } from 'svelte';
-    import { passwordStrength } from "check-password-strength";
-    import { safeSlide } from "../../../utils/transitions.js";
-    import { cubicOut } from "svelte/easing";
-    import { untrack } from "svelte";
-
-    const defaultLabels = {
-      tooWeak: 'Too weak',
-      weak: 'Weak',
-      good: 'Good',
-      strong: 'Strong',
-    };
-
-    interface Props {
-      password?: string;
-      strengthText?: string;
-      score?: number;
-      textColor?: string;
-      children?: Snippet;
-      labels?: Partial<typeof defaultLabels>;
-    }
-
-    let {
-      password = "",
-      strengthText = $bindable(""),
-      score = $bindable(-1),
-      textColor = $bindable(""),
-      children,
-      labels: userLabels = {},
-    }: Props = $props();
-
-    let labels = $derived({ ...defaultLabels, ...userLabels });
-
-    let debouncedPassword = $state("");
-    // Use a plain variable for timer to avoid reactive dependency
-    let timer: ReturnType<typeof setTimeout> | undefined;
-
-    let customOptions = $derived([
-        {
-            id: 0,
-            value: labels.tooWeak,
-            minDiversity: 0,
-            minLength: 0,
-        },
-        {
-            id: 1,
-            value: labels.weak,
-            minDiversity: 1,
-            minLength: 6,
-        },
-        {
-            id: 2,
-            value: labels.good,
-            minDiversity: 2,
-            minLength: 8,
-        },
-        {
-            id: 3,
-            value: labels.strong,
-            minDiversity: 3,
-            minLength: 10,
-        },
-    ] as const);
-
-    // Debounce password updates - timer is not reactive to avoid dependency cycle
-    $effect(() => {
-        clearTimeout(timer);
-        if (password.length === 0) {
-            debouncedPassword = "";
-        } else {
-            timer = setTimeout(() => {
-                debouncedPassword = password;
-            }, 400); // 400ms delay as requested
-        }
-        return () => clearTimeout(timer);
-    });
-
-    let strength = $derived(debouncedPassword
-        ? passwordStrength(debouncedPassword, customOptions as any)
-        : null);
-
-    // 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(() => {
-        const newScore = computedScore;
-        if (untrack(() => score) !== newScore) {
-            score = newScore;
-        }
-    });
-
-    // Derive text and color from computedScore (not from bindable score)
-    let computedStrengthText = $derived(
-        computedScore === 0 ? labels.tooWeak :
-        computedScore === 1 ? labels.weak :
-        computedScore === 2 ? labels.good :
-        computedScore === 3 ? labels.strong : ""
-    );
-
-    let computedTextColor = $derived(computedScore <= 1 ? "text-red-600" : "text-green-600");
-
-    $effect(() => {
-        const newText = computedStrengthText;
-        if (untrack(() => strengthText) !== newText) {
-            strengthText = newText;
-        }
-    });
-
-    let strengthColor = $derived(computedScore <= 1 ? "bg-red-600" : "bg-green-600");
-
-    $effect(() => {
-        const newColor = computedTextColor;
-        if (untrack(() => textColor) !== newColor) {
-            textColor = newColor;
-        }
-    });
-
-    // Calculate how many bars to fill (1-3)
-    let filledBars = $derived(computedScore === 0 ? 1 : computedScore === 1 ? 2 : computedScore >= 2 ? 3 : 0);
-</script>
-
-{#if debouncedPassword.length > 0}
-    <div
-        transition:safeSlide={{ duration: 600, easing: cubicOut }}
-        class="pt-2 space-y-2"
-    >
-        <!-- 3 segment bars -->
-        <div class="flex gap-1.5">
-            {#each [0, 1, 2] as barIndex}
-                <div
-                    class="h-1 flex-1 rounded-full transition-colors duration-300 {barIndex <
-                    filledBars
-                        ? strengthColor
-                        : 'bg-gray-200 dark:bg-gray-700'}"
-                ></div>
-            {/each}
-        </div>
-        {@render children?.()}
-    </div>
-{/if}
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { passwordStrength } from "check-password-strength";
+    import { safeSlide } from "../../../utils/transitions.js";
+    import { cubicOut } from "svelte/easing";
+    import { untrack } from "svelte";
+
+    const defaultLabels = {
+      tooWeak: 'Too weak',
+      weak: 'Weak',
+      good: 'Good',
+      strong: 'Strong',
+    };
+
+    interface Props {
+      password?: string;
+      strengthText?: string;
+      score?: number;
+      textColor?: string;
+      children?: Snippet;
+      labels?: Partial<typeof defaultLabels>;
+    }
+
+    let {
+      password = "",
+      strengthText = $bindable(""),
+      score = $bindable(-1),
+      textColor = $bindable(""),
+      children,
+      labels: userLabels = {},
+    }: Props = $props();
+
+    let labels = $derived({ ...defaultLabels, ...userLabels });
+
+    let debouncedPassword = $state("");
+    // Use a plain variable for timer to avoid reactive dependency
+    let timer: ReturnType<typeof setTimeout> | undefined;
+
+    let customOptions = $derived([
+        {
+            id: 0,
+            value: labels.tooWeak,
+            minDiversity: 0,
+            minLength: 0,
+        },
+        {
+            id: 1,
+            value: labels.weak,
+            minDiversity: 1,
+            minLength: 6,
+        },
+        {
+            id: 2,
+            value: labels.good,
+            minDiversity: 2,
+            minLength: 8,
+        },
+        {
+            id: 3,
+            value: labels.strong,
+            minDiversity: 3,
+            minLength: 10,
+        },
+    ] as const);
+
+    // Debounce password updates - timer is not reactive to avoid dependency cycle
+    $effect(() => {
+        clearTimeout(timer);
+        if (password.length === 0) {
+            debouncedPassword = "";
+        } else {
+            timer = setTimeout(() => {
+                debouncedPassword = password;
+            }, 400); // 400ms delay as requested
+        }
+        return () => clearTimeout(timer);
+    });
+
+    let strength = $derived(debouncedPassword
+        ? passwordStrength(debouncedPassword, customOptions as any)
+        : null);
+
+    // 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(() => {
+        const newScore = computedScore;
+        if (untrack(() => score) !== newScore) {
+            score = newScore;
+        }
+    });
+
+    // Derive text and color from computedScore (not from bindable score)
+    let computedStrengthText = $derived(
+        computedScore === 0 ? labels.tooWeak :
+        computedScore === 1 ? labels.weak :
+        computedScore === 2 ? labels.good :
+        computedScore === 3 ? labels.strong : ""
+    );
+
+    let computedTextColor = $derived(computedScore <= 1 ? "text-accent-danger" : "text-accent-success");
+
+    $effect(() => {
+        const newText = computedStrengthText;
+        if (untrack(() => strengthText) !== newText) {
+            strengthText = newText;
+        }
+    });
+
+    let strengthColor = $derived(computedScore <= 1 ? "bg-accent-danger" : "bg-accent-success");
+
+    $effect(() => {
+        const newColor = computedTextColor;
+        if (untrack(() => textColor) !== newColor) {
+            textColor = newColor;
+        }
+    });
+
+    // Calculate how many bars to fill (1-3)
+    let filledBars = $derived(computedScore === 0 ? 1 : computedScore === 1 ? 2 : computedScore >= 2 ? 3 : 0);
+</script>
+
+{#if debouncedPassword.length > 0}
+    <div
+        transition:safeSlide={{ duration: 600, easing: cubicOut }}
+        class="pt-2 space-y-2"
+    >
+        <!-- 3 segment bars -->
+        <div class="flex gap-1.5">
+            {#each [0, 1, 2] as barIndex}
+                <div
+                    class="h-1 flex-1 rounded-full transition-colors duration-300 {barIndex <
+                    filledBars
+                        ? strengthColor
+                        : 'bg-bg-tertiary'}"
+                ></div>
+            {/each}
+        </div>
+        {@render children?.()}
+    </div>
+{/if}

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

@@ -47,7 +47,7 @@
     // Compute score based on password length and strength
     let score = $derived(password.length > 12 ? 3 : (strength?.id ?? -1));
 
-    let strengthColor = $derived(score <= 1 ? "bg-red-600" : "bg-green-600");
+    let strengthColor = $derived(score <= 1 ? "bg-accent-danger" : "bg-accent-success");
 
     // Calculate how many bars to fill (1-3)
     let filledBars = $derived(score === 0 ? 1 : score === 1 ? 2 : score >= 2 ? 3 : 0);
@@ -62,7 +62,7 @@
                     class="h-1 flex-1 rounded-full transition-colors duration-300 {barIndex <
                     filledBars
                         ? strengthColor
-                        : 'bg-gray-200 dark:bg-gray-700'}"
+                        : 'bg-bg-tertiary'}"
                 ></div>
             {/each}
         </div>