@getmicdrop/svelte-components 5.4.0 → 5.4.1

package/dist/recipes/inputs/PasswordInput.svelte

@@ -1,100 +1,100 @@
-<script>
-  /**
-   * 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';
-
-  let {
-    /** Password value */
-    value = $bindable(''),
-    /** Label text */
-    label = '',
-    /** Placeholder text */
-    placeholder = '',
-    /** Input name attribute */
-    name = '',
-    /** Input id attribute */
-    id = '',
-    /** Whether the field is required */
-    required = false,
-    /** Whether the field is disabled */
-    disabled = false,
-    /** Error message to display */
-    error = '',
-    /** Hint text shown below input */
-    hint = '',
-    /** Show password strength indicator */
-    showStrength = false,
-    /** Size variant */
-    size = 'md',
-    /** Minimum password length */
-    minlength = null,
-    /** Maximum password length */
-    maxlength = null,
-    /** Autocomplete attribute */
-    autocomplete = 'new-password',
-    /** Whether to show the password toggle button */
-    showPasswordToggle = true,
-    /** Additional class for the wrapper div */
-    class: className = '',
-    // Callbacks
-    oninput,
-    onblur,
-    onfocus,
-  } = $props();
-
-  // 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}
-    disableBuiltInValidation
-    bind:value
-    {oninput}
-    {onblur}
-    {onfocus}
-  />
-
-  {#if showStrength && value}
-    <PasswordStrengthIndicator
-      password={value}
-      bind:score={strengthScore}
-      bind:strengthText
-      bind:textColor={strengthColor}
-    >
-      <p class="text-xs {strengthColor}">
-        Password strength: {strengthText}
-      </p>
-    </PasswordStrengthIndicator>
-  {/if}
-</div>
+<script>
+  /**
+   * 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';
+
+  let {
+    /** Password value */
+    value = $bindable(''),
+    /** Label text */
+    label = '',
+    /** Placeholder text */
+    placeholder = '',
+    /** Input name attribute */
+    name = '',
+    /** Input id attribute */
+    id = '',
+    /** Whether the field is required */
+    required = false,
+    /** Whether the field is disabled */
+    disabled = false,
+    /** Error message to display */
+    error = '',
+    /** Hint text shown below input */
+    hint = '',
+    /** Show password strength indicator */
+    showStrength = false,
+    /** Size variant */
+    size = 'md',
+    /** Minimum password length */
+    minlength = null,
+    /** Maximum password length */
+    maxlength = null,
+    /** Autocomplete attribute */
+    autocomplete = 'new-password',
+    /** Whether to show the password toggle button */
+    showPasswordToggle = true,
+    /** Additional class for the wrapper div */
+    class: className = '',
+    // Callbacks
+    oninput,
+    onblur,
+    onfocus,
+  } = $props();
+
+  // 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}
+    disableBuiltInValidation
+    bind:value
+    {oninput}
+    {onblur}
+    {onfocus}
+  />
+
+  {#if showStrength && value}
+    <PasswordStrengthIndicator
+      password={value}
+      bind:score={strengthScore}
+      bind:strengthText
+      bind:textColor={strengthColor}
+    >
+      <p class="text-xs {strengthColor}">
+        Password strength: {strengthText}
+      </p>
+    </PasswordStrengthIndicator>
+  {/if}
+</div>

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

@@ -1,173 +1,173 @@
-import { render, screen, waitFor } from "@testing-library/svelte";
-import { expect, describe, test, vi } from "vitest";
-import PasswordStrengthIndicator from "./PasswordStrengthIndicator.svelte";
-
-// Debounce delay + buffer
-const DEBOUNCE_WAIT = 500;
-
-function setupTest(args = {}) {
-  const { component, container } = render(PasswordStrengthIndicator, {
-    props: {
-      password: "",
-      ...args,
-    },
-  });
-  return { component, container };
-}
-
-describe("PasswordStrengthIndicator Component Tests", () => {
-  test("Does not render when password is empty", () => {
-    const { container } = setupTest({ password: "" });
-    const indicator = container.querySelector(".pt-2");
-    expect(indicator).not.toBeInTheDocument();
-  });
-
-  test("Renders after debounce when password has value", async () => {
-    const { container } = setupTest({ password: "test" });
-    await waitFor(
-      () => {
-        const indicator = container.querySelector(".pt-2");
-        expect(indicator).toBeInTheDocument();
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Has three strength bars", async () => {
-    const { container } = setupTest({ password: "test" });
-    await waitFor(
-      () => {
-        const bars = container.querySelectorAll(".h-1.flex-1.rounded-full");
-        expect(bars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Shows filled bars for weak password", async () => {
-    const { container } = setupTest({ password: "ab" });
-    await waitFor(
-      () => {
-        // At least one bar should be filled with a color
-        const coloredBars = container.querySelectorAll(
-          ".bg-red-600, .bg-green-600"
-        );
-        expect(coloredBars.length).toBeGreaterThan(0);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Shows filled bars for good password", async () => {
-    const { container } = setupTest({ password: "Abc12345" });
-    await waitFor(
-      () => {
-        // All 3 bars should be filled for a good password
-        const successBars = container.querySelectorAll(".bg-green-600");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Exports score prop", () => {
-    const { component } = setupTest({ password: "test123" });
-    // Score should be accessible
-    expect(component).toBeDefined();
-  });
-
-  test("Exports strengthText prop", () => {
-    const { component } = setupTest({ password: "test123" });
-    expect(component).toBeDefined();
-  });
-
-  test("Exports textColor prop", () => {
-    const { component } = setupTest({ password: "test123" });
-    expect(component).toBeDefined();
-  });
-
-  test("Uses danger color for weak passwords", async () => {
-    const { container } = setupTest({ password: "weak" });
-    await waitFor(
-      () => {
-        const dangerBars = container.querySelectorAll(".bg-red-600");
-        expect(dangerBars.length).toBeGreaterThan(0);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Uses success color for good/strong passwords", async () => {
-    const { container } = setupTest({ password: "StrongP@ss123" });
-    await waitFor(
-      () => {
-        const successBars = container.querySelectorAll(".bg-green-600");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Has transition animation classes on bars", async () => {
-    const { container } = setupTest({ password: "test" });
-    await waitFor(
-      () => {
-        const bars = container.querySelectorAll(".h-1.flex-1.rounded-full");
-        expect(bars.length).toBe(3);
-        bars.forEach((bar) => {
-          expect(bar).toHaveClass("transition-colors");
-          expect(bar).toHaveClass("duration-300");
-        });
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Very long password shows strong indicator", async () => {
-    const { container } = setupTest({ password: "1234567890123" }); // 13 chars
-    await waitFor(
-      () => {
-        const successBars = container.querySelectorAll(".bg-green-600");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-});
-
-describe("Password Strength Scoring", () => {
-  test("Score 2+ (Good) shows 3 success bars - 8+ chars with 2 diversity", async () => {
-    const { container } = setupTest({ password: "Abcdefgh" }); // Upper + lower
-    await waitFor(
-      () => {
-        const successBars = container.querySelectorAll(".bg-green-600");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Score 3 (Strong) - 10+ chars, multiple diversity", async () => {
-    const { container } = setupTest({ password: "Abcdefgh1!" }); // Upper, lower, number, symbol
-    await waitFor(
-      () => {
-        const successBars = container.querySelectorAll(".bg-green-600");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Weak password shows danger color bars", async () => {
-    const { container } = setupTest({ password: "abcdef" });
-    await waitFor(
-      () => {
-        const coloredBars = container.querySelectorAll(
-          ".bg-red-600, .bg-green-600"
-        );
-        expect(coloredBars.length).toBeGreaterThan(0);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-});
+import { render, screen, waitFor } from "@testing-library/svelte";
+import { expect, describe, test, vi } from "vitest";
+import PasswordStrengthIndicator from "./PasswordStrengthIndicator.svelte";
+
+// Debounce delay + buffer
+const DEBOUNCE_WAIT = 500;
+
+function setupTest(args = {}) {
+  const { component, container } = render(PasswordStrengthIndicator, {
+    props: {
+      password: "",
+      ...args,
+    },
+  });
+  return { component, container };
+}
+
+describe("PasswordStrengthIndicator Component Tests", () => {
+  test("Does not render when password is empty", () => {
+    const { container } = setupTest({ password: "" });
+    const indicator = container.querySelector(".pt-2");
+    expect(indicator).not.toBeInTheDocument();
+  });
+
+  test("Renders after debounce when password has value", async () => {
+    const { container } = setupTest({ password: "test" });
+    await waitFor(
+      () => {
+        const indicator = container.querySelector(".pt-2");
+        expect(indicator).toBeInTheDocument();
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Has three strength bars", async () => {
+    const { container } = setupTest({ password: "test" });
+    await waitFor(
+      () => {
+        const bars = container.querySelectorAll(".h-1.flex-1.rounded-full");
+        expect(bars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Shows filled bars for weak password", async () => {
+    const { container } = setupTest({ password: "ab" });
+    await waitFor(
+      () => {
+        // At least one bar should be filled with a color
+        const coloredBars = container.querySelectorAll(
+          ".bg-red-600, .bg-green-600"
+        );
+        expect(coloredBars.length).toBeGreaterThan(0);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Shows filled bars for good password", async () => {
+    const { container } = setupTest({ password: "Abc12345" });
+    await waitFor(
+      () => {
+        // All 3 bars should be filled for a good password
+        const successBars = container.querySelectorAll(".bg-green-600");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Exports score prop", () => {
+    const { component } = setupTest({ password: "test123" });
+    // Score should be accessible
+    expect(component).toBeDefined();
+  });
+
+  test("Exports strengthText prop", () => {
+    const { component } = setupTest({ password: "test123" });
+    expect(component).toBeDefined();
+  });
+
+  test("Exports textColor prop", () => {
+    const { component } = setupTest({ password: "test123" });
+    expect(component).toBeDefined();
+  });
+
+  test("Uses danger color for weak passwords", async () => {
+    const { container } = setupTest({ password: "weak" });
+    await waitFor(
+      () => {
+        const dangerBars = container.querySelectorAll(".bg-red-600");
+        expect(dangerBars.length).toBeGreaterThan(0);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Uses success color for good/strong passwords", async () => {
+    const { container } = setupTest({ password: "StrongP@ss123" });
+    await waitFor(
+      () => {
+        const successBars = container.querySelectorAll(".bg-green-600");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Has transition animation classes on bars", async () => {
+    const { container } = setupTest({ password: "test" });
+    await waitFor(
+      () => {
+        const bars = container.querySelectorAll(".h-1.flex-1.rounded-full");
+        expect(bars.length).toBe(3);
+        bars.forEach((bar) => {
+          expect(bar).toHaveClass("transition-colors");
+          expect(bar).toHaveClass("duration-300");
+        });
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Very long password shows strong indicator", async () => {
+    const { container } = setupTest({ password: "1234567890123" }); // 13 chars
+    await waitFor(
+      () => {
+        const successBars = container.querySelectorAll(".bg-green-600");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+});
+
+describe("Password Strength Scoring", () => {
+  test("Score 2+ (Good) shows 3 success bars - 8+ chars with 2 diversity", async () => {
+    const { container } = setupTest({ password: "Abcdefgh" }); // Upper + lower
+    await waitFor(
+      () => {
+        const successBars = container.querySelectorAll(".bg-green-600");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Score 3 (Strong) - 10+ chars, multiple diversity", async () => {
+    const { container } = setupTest({ password: "Abcdefgh1!" }); // Upper, lower, number, symbol
+    await waitFor(
+      () => {
+        const successBars = container.querySelectorAll(".bg-green-600");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Weak password shows danger color bars", async () => {
+    const { container } = setupTest({ password: "abcdef" });
+    await waitFor(
+      () => {
+        const coloredBars = container.querySelectorAll(
+          ".bg-red-600, .bg-green-600"
+        );
+        expect(coloredBars.length).toBeGreaterThan(0);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+});