@spaethtech/svelte-ui 0.21.1-dev.110.48d2aba → 0.21.1-dev.111.c0572e9

package/dist/components/PasswordInput.svelte

@@ -2,6 +2,7 @@
   import Input from "./Input.svelte";
   import Eye from "~icons/mdi/eye";
   import EyeOff from "~icons/mdi/eye-off";
+  import Loading from "~icons/mdi/loading";
   import type { HTMLInputAttributes } from "svelte/elements";
   import type { Size } from "../types/sizes.js";
   import type { Responsive } from "../types/responsive.js";
@@ -20,6 +21,17 @@
     /** Shared axes — forwarded to the underlying Input. */
     variant?: Variant;
     borderless?: boolean;
+    /** Whether the value is shown as plain text (eye toggled on). Bindable; defaults `false`.
+     *  Drive it to open the field already-visible, or re-hide it after a save. */
+    visible?: boolean;
+    /**
+     * Called when the user clicks the eye, with the state being moved TO (`!visible`).
+     * Return `false` (or a `Promise` resolving to `false`) to CANCEL the toggle; a returned
+     * `Promise` DEFERS the flip until it settles — the eye shows a busy spinner and ignores
+     * further clicks meanwhile, so an audited async reveal can populate `value` before it
+     * becomes visible (the field never shows plain text over an empty value).
+     */
+    onVisibilityChange?: (next: boolean) => void | boolean | Promise<void | boolean>;
   }
 
   let {
@@ -27,28 +39,49 @@
     valid = $bindable(true),
     touched = $bindable(false),
     element = $bindable(),
+    visible = $bindable(false),
+    onVisibilityChange,
     ...restProps
   }: Props = $props();
 
-  let showPassword = $state(false);
+  // True while a deferred (async) `onVisibilityChange` is in flight — disables the icon so double
+  // clicks are ignored and shows a spinner instead of the eye.
+  let pending = $state(false);
 
-  function toggleVisibility() {
-    showPassword = !showPassword;
+  async function toggleVisibility() {
+    if (pending) return;
+    const next = !visible;
+    const result = onVisibilityChange?.(next);
+    if (result instanceof Promise) {
+      pending = true;
+      try {
+        if ((await result) === false) return; // cancelled
+      } finally {
+        pending = false;
+      }
+    } else if (result === false) {
+      return; // cancelled synchronously
+    }
+    visible = next;
   }
 </script>
 
+<!-- restProps is spread FIRST so the eye wiring below always wins (a consumer `onIconClick`/
+     `iconClickable` can't silently replace the toggle). `autocomplete` is then re-applied AFTER the
+     spread but folds in the consumer's value, so a login field's `autocomplete="current-password"`
+     still overrides the `"new-password"` default (per docs/components.md). -->
 <Input
+  {...restProps}
   bind:value
   bind:valid
   bind:touched
   bind:element
-  type={showPassword ? "text" : "password"}
-  autocomplete="new-password"
-  iconClickable={true}
+  type={visible ? "text" : "password"}
+  autocomplete={restProps.autocomplete ?? "new-password"}
+  iconClickable={!pending}
   onIconClick={toggleVisibility}
-  {...restProps}
 >
   {#snippet icon()}
-    {#if showPassword}<EyeOff />{:else}<Eye />{/if}
+    {#if pending}<Loading class="animate-spin" />{:else if visible}<EyeOff />{:else}<Eye />{/if}
   {/snippet}
 </Input>

package/dist/components/PasswordInput.svelte.d.ts

@@ -15,7 +15,18 @@ interface Props extends Omit<HTMLInputAttributes, "type" | "size">, FieldChromeP
     /** Shared axes — forwarded to the underlying Input. */
     variant?: Variant;
     borderless?: boolean;
+    /** Whether the value is shown as plain text (eye toggled on). Bindable; defaults `false`.
+     *  Drive it to open the field already-visible, or re-hide it after a save. */
+    visible?: boolean;
+    /**
+     * Called when the user clicks the eye, with the state being moved TO (`!visible`).
+     * Return `false` (or a `Promise` resolving to `false`) to CANCEL the toggle; a returned
+     * `Promise` DEFERS the flip until it settles — the eye shows a busy spinner and ignores
+     * further clicks meanwhile, so an audited async reveal can populate `value` before it
+     * becomes visible (the field never shows plain text over an empty value).
+     */
+    onVisibilityChange?: (next: boolean) => void | boolean | Promise<void | boolean>;
 }
-declare const PasswordInput: import("svelte").Component<Props, {}, "element" | "value" | "valid" | "touched">;
+declare const PasswordInput: import("svelte").Component<Props, {}, "element" | "value" | "valid" | "touched" | "visible">;
 type PasswordInput = ReturnType<typeof PasswordInput>;
 export default PasswordInput;

package/docs/components.md

@@ -307,9 +307,35 @@ Thin wrappers over `Input`, each preconfigured with an MDI icon (rendered into I
 
 - **Location**: `src/lib/components/PasswordInput.svelte`
 - **Features**: built-in visibility toggle (eye / eye-off MDI icons)
+- **`visible`** (bindable, default `false`): whether the value shows as plain text. Read it, or drive
+  it — open the field already-visible, or re-hide it after a save (`visible = false`). Previously this
+  was private; a consumer had to watch the input's `type` attribute via a `MutationObserver`.
+- **`onVisibilityChange?: (next: boolean) => void | boolean | Promise<void | boolean>`**: fired on each
+  eye click with the state being moved **to**. Return `false` (or a `Promise<false>`) to **cancel** the
+  toggle; return a `Promise` to **defer** the flip until it settles — the eye shows a **busy spinner**
+  and ignores clicks meanwhile, so an async reveal can populate `value` before it becomes visible (the
+  field never shows plain text over an empty value).
+- **Icon wiring**: a consumer `onIconClick`/`iconClickable` no longer overrides the toggle — the eye
+  wiring is applied after the prop spread, so the toggle always wins.
 - **`autocomplete`**: defaults to `"new-password"` (clears Chrome's "should have autocomplete"
   advisory and stops unrelated saved-credential autofill). Overridable per usage — a login field
-  passes `autocomplete="current-password"` and it wins (spread after the default).
+  passes `autocomplete="current-password"` and it wins.
+
+```svelte
+<!-- On-demand reveal: read the stored secret from an audited backend the FIRST time the eye opens,
+     BEFORE the field flips to plain text. Re-hide after save with `pwVisible = false`. -->
+<script>
+  import { PasswordInput } from "@spaethtech/svelte-ui";
+  let value = $state("");
+  let pwVisible = $state(false);
+  let loaded = $state(false);
+  async function beforeShow(next) {
+    if (next && !loaded) { value = await fetchSecret(); loaded = true; } // Promise defers the flip
+  }
+</script>
+
+<PasswordInput label="Password" bind:value bind:visible={pwVisible} onVisibilityChange={beforeShow} />
+```
 
 ### EmailInput
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.21.1-dev.110.48d2aba",
+  "version": "0.21.1-dev.111.c0572e9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"