@marianmeres/stuic 3.76.0 → 3.76.2

package/dist/actions/on-submit-validity-check.svelte.js

@@ -55,6 +55,18 @@ export function onSubmitValidityCheck(node) {
                 // input (last radio input), which is not desired
                 if (el.type === "radio")
                     continue;
+                // Clear any stale `customError` flag from a prior submit attempt before
+                // re-dispatching the validate listeners. Without this, if the field's
+                // per-field validate $effect was torn down/re-mounted in a way that
+                // skipped re-running its `customValidator` (e.g., the parent re-rendered
+                // for an unrelated reason between submits), the previous submit's
+                // customValidity message lingers on the DOM element. Then `el.validity.valid`
+                // would return false here even though the customValidator now reports no
+                // error, silently routing the form to `submit_invalid` and never calling
+                // the consumer's onSubmit. The dispatched change event below re-runs the
+                // per-field validator which re-applies a real customValidity if needed.
+                if (typeof el.setCustomValidity === "function")
+                    el.setCustomValidity("");
                 el.dispatchEvent(new Event("input", { bubbles: true }));
                 el.dispatchEvent(new Event("change", { bubbles: true }));
                 // typeof el.checkValidity === "function" && !el.checkValidity();

package/dist/actions/validate.svelte.js

@@ -165,8 +165,13 @@ export function validate(el, fn) {
             let customValidatorMessage = "";
             if (typeof customValidator === "function") {
                 customValidatorMessage = customValidator(el.value, context, el) || "";
-                el.setCustomValidity(customValidatorMessage);
             }
+            // Always write — including the no-validator case (which writes "" and
+            // thus clears any stale `customError` flag the element may be carrying
+            // from a prior listener generation). Without this, a `customValidator`
+            // being removed across re-renders would leave the previous message
+            // stuck on the element forever.
+            el.setCustomValidity(customValidatorMessage);
             // this triggers the bubble, which is not what we want
             // el.reportValidity();
             const validityState = el.validity;

package/dist/components/DismissibleMessage/DismissibleMessage.svelte

@@ -18,6 +18,7 @@
 </script>
 
 <script lang="ts">
+	import { untrack } from "svelte";
 	import { slide } from "svelte/transition";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import Thc, { isTHCNotEmpty } from "../Thc/Thc.svelte";
@@ -44,13 +45,36 @@
 		intent,
 		forceAsHtml = true,
 		duration = 150,
-		onDismiss = () => (message = ""),
+		onDismiss,
 		withIcon,
 		iconFn,
 	}: Props = $props();
 
+	// Track dismissal in local state instead of mutating the (non-bindable) `message`
+	// prop. Mutating a destructured prop var creates a local shadow that Svelte 5
+	// won't always overwrite when the parent re-passes the same value — so a user
+	// who dismissed an error would never see the SAME error message again, even
+	// after the parent re-set it. Keeping `_dismissed` separate sidesteps that and
+	// makes the dismiss state reset cleanly whenever the message changes.
 	let _message = $derived(message ? String(message) : "");
-	let _show = $derived(isTHCNotEmpty(_message));
+	let _dismissed = $state(false);
+	let _show = $derived(isTHCNotEmpty(_message) && !_dismissed);
+
+	// Reset the dismissed flag whenever the message changes — a new (or re-set)
+	// message from the parent should re-show, even if the user previously dismissed.
+	$effect(() => {
+		void _message;
+		untrack(() => {
+			if (_dismissed) _dismissed = false;
+		});
+	});
+
+	// Default dismiss handler hides the message locally. Parent state is left alone
+	// (this prop isn't bindable). Consumers wanting parent-side cleanup pass their own.
+	// `null`/`false` mean "no dismiss button" and are handled at the render site.
+	let _onDismiss = $derived(
+		typeof onDismiss === "function" ? onDismiss : () => (_dismissed = true)
+	);
 
 	let _iconHtml = $derived.by(() => {
 		if (iconFn === false) return "";
@@ -77,7 +101,7 @@
 			<Thc thc={_message} {forceAsHtml} />
 		</div>
 
-		{#if typeof onDismiss === "function"}
+		{#if onDismiss !== false && onDismiss !== null}
 			<div class="dismiss">
 				<Button
 					x
@@ -86,7 +110,7 @@
 					roundedFull
 					size="sm"
 					type="button"
-					onclick={() => onDismiss()}
+					onclick={() => _onDismiss()}
 				/>
 			</div>
 		{/if}

package/dist/components/LoginForm/LoginForm.svelte

@@ -77,6 +77,7 @@
 </script>
 
 <script lang="ts">
+	import { untrack } from "svelte";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import { t_default } from "./_internal/login-form-i18n-defaults.js";
 	import {
@@ -130,6 +131,19 @@
 	}
 
 	function handleSubmitValid() {
+		// Defensively clear any stale customValidity left on form fields by a prior
+		// validation pass. The `validate` action already clears it when the field's
+		// customValidator returns an empty string, but a field can skip that path
+		// (e.g., it was disabled, or its $effect torn down between submits) and the
+		// stale flag would then make `el.validity.valid` return false on the next
+		// submit, silently routing the form to `submit_invalid` and never calling
+		// `onSubmit`. Resetting here gives every retry a clean slate.
+		if (el) {
+			for (const node of Array.from(el.elements) as HTMLInputElement[]) {
+				if (typeof node.setCustomValidity === "function") node.setCustomValidity("");
+			}
+		}
+
 		const validationErrors = validateLoginForm(formData, t);
 		internalErrors = validationErrors;
 
@@ -138,6 +152,20 @@
 		}
 	}
 
+	// Clear internal field errors as soon as the user edits the form, so a previous
+	// failed-submit's errors don't linger after the user has fixed them. Re-validation
+	// on the next submit will repopulate `internalErrors` if anything is still wrong.
+	// `untrack` for the read+write so this effect only re-runs on formData changes —
+	// otherwise `handleSubmitValid` setting `internalErrors` would immediately re-fire
+	// this effect and wipe the errors back out.
+	$effect(() => {
+		void formData.email;
+		void formData.password;
+		untrack(() => {
+			if (internalErrors.length) internalErrors = [];
+		});
+	});
+
 	$effect(() => {
 		if (error && notifications) notifications.error(error);
 	});

package/dist/components/LoginForm/LoginFormModal.svelte

@@ -88,6 +88,13 @@
 
 		noXClose?: boolean;
 		onClose?: () => false | void;
+
+		/**
+		 * Disable close on backdrop / outside click. Defaults to `true` because
+		 * accidentally losing typed credentials due to a stray backdrop click is a
+		 * worse UX than requiring an explicit close. Set to `false` to opt back in.
+		 */
+		noClickOutsideClose?: boolean;
 	}
 </script>
 
@@ -126,6 +133,7 @@
 		unstyled = false,
 		noXClose = false,
 		onClose,
+		noClickOutsideClose = true,
 	}: Props = $props();
 
 	let t = $derived(tProp ?? t_default);
@@ -152,6 +160,7 @@
 	class={classModal}
 	classInner={twMerge("max-w-sm md:max-w-sm", "h-auto md:h-auto m-auto", classInner)}
 	classDialog="flex items-center justify-center"
+	{noClickOutsideClose}
 >
 	{#snippet header()}
 		<div class="flex items-center justify-between p-4">

package/dist/components/LoginForm/LoginFormModal.svelte.d.ts

@@ -67,6 +67,12 @@ export interface Props {
     unstyled?: boolean;
     noXClose?: boolean;
     onClose?: () => false | void;
+    /**
+     * Disable close on backdrop / outside click. Defaults to `true` because
+     * accidentally losing typed credentials due to a stray backdrop click is a
+     * worse UX than requiring an explicit close. Set to `false` to opt back in.
+     */
+    noClickOutsideClose?: boolean;
 }
 declare const LoginFormModal: import("svelte").Component<Props, {
     open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;

package/dist/components/LoginOrRegisterForm/LoginOrRegisterForm.svelte

@@ -117,6 +117,15 @@
 		>;
 
 		notifications?: NotificationsStack;
+
+		/**
+		 * Called when the active mode changes (login/register/verify). Receives
+		 * `(next, prev)`. Use this to clear parent-owned, mode-specific state — e.g.,
+		 * a general `error` string that shouldn't survive a transition between Login
+		 * and Sign up.
+		 */
+		onModeChange?: (next: LoginOrRegisterFormMode, prev: LoginOrRegisterFormMode) => void;
+
 		t?: TranslateFn;
 		unstyled?: boolean;
 		class?: string;
@@ -155,6 +164,7 @@
 		socialDividerLabel,
 		footer,
 		notifications,
+		onModeChange,
 		t: tProp,
 		unstyled = false,
 		class: classProp,
@@ -173,6 +183,7 @@
 	// effect (which would be prone to loops).
 	function setMode(next: LoginOrRegisterFormMode) {
 		if (next === mode) return;
+		const prev = mode;
 		const sourceEmail =
 			mode === "verify"
 				? verifyEmail
@@ -187,6 +198,9 @@
 			// next === "verify"
 			verifyEmail = sourceEmail;
 		}
+		// Notify before mutating so consumers can clear parent-owned, mode-specific
+		// state (e.g., a stale `error`) before the new view renders with it.
+		onModeChange?.(next, prev);
 		mode = next;
 	}
 

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

@@ -78,6 +78,13 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
         }
     ]>;
     notifications?: NotificationsStack;
+    /**
+     * Called when the active mode changes (login/register/verify). Receives
+     * `(next, prev)`. Use this to clear parent-owned, mode-specific state — e.g.,
+     * a general `error` string that shouldn't survive a transition between Login
+     * and Sign up.
+     */
+    onModeChange?: (next: LoginOrRegisterFormMode, prev: LoginOrRegisterFormMode) => void;
     t?: TranslateFn;
     unstyled?: boolean;
     class?: string;

package/dist/components/LoginOrRegisterForm/LoginOrRegisterFormModal.svelte

@@ -84,6 +84,21 @@
 
 		noXClose?: boolean;
 		onClose?: () => false | void;
+
+		/**
+		 * Disable close on backdrop / outside click. Defaults to `true` because
+		 * accidentally losing typed credentials due to a stray backdrop click is a
+		 * worse UX than requiring an explicit close. Set to `false` to opt back in.
+		 */
+		noClickOutsideClose?: boolean;
+
+		/**
+		 * Called when the active form mode changes (login/register/verify). Receives
+		 * `(next, prev)`. Use this to clear parent-owned, mode-specific state — e.g.,
+		 * a general `error` string that shouldn't survive a transition between Login
+		 * and Sign up.
+		 */
+		onModeChange?: (next: LoginOrRegisterFormMode, prev: LoginOrRegisterFormMode) => void;
 	}
 </script>
 
@@ -129,6 +144,8 @@
 		unstyled = false,
 		noXClose = false,
 		onClose,
+		noClickOutsideClose = true,
+		onModeChange,
 	}: Props = $props();
 
 	let t = $derived(tProp ?? t_default);
@@ -163,6 +180,7 @@
 	class={classModal}
 	classInner={twMerge("max-w-sm md:max-w-sm", "h-auto md:h-auto m-auto", classInner)}
 	classDialog="flex items-center justify-center"
+	{noClickOutsideClose}
 >
 	{#snippet header()}
 		<div class="flex items-center justify-between p-4">
@@ -207,6 +225,7 @@
 			{socialDividerLabel}
 			{footer}
 			{notifications}
+			{onModeChange}
 			t={tProp}
 			{unstyled}
 			class={classForm}

package/dist/components/LoginOrRegisterForm/LoginOrRegisterFormModal.svelte.d.ts

@@ -59,6 +59,19 @@ export interface Props {
     unstyled?: boolean;
     noXClose?: boolean;
     onClose?: () => false | void;
+    /**
+     * Disable close on backdrop / outside click. Defaults to `true` because
+     * accidentally losing typed credentials due to a stray backdrop click is a
+     * worse UX than requiring an explicit close. Set to `false` to opt back in.
+     */
+    noClickOutsideClose?: boolean;
+    /**
+     * Called when the active form mode changes (login/register/verify). Receives
+     * `(next, prev)`. Use this to clear parent-owned, mode-specific state — e.g.,
+     * a general `error` string that shouldn't survive a transition between Login
+     * and Sign up.
+     */
+    onModeChange?: (next: LoginOrRegisterFormMode, prev: LoginOrRegisterFormMode) => void;
 }
 declare const LoginOrRegisterFormModal: import("svelte").Component<Props, {
     open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;

package/dist/components/Modal/Modal.svelte

@@ -22,6 +22,8 @@
 		onEscape?: () => void;
 		/** Disable body scroll lock when modal is open */
 		noScrollLock?: boolean;
+		/** Disable close on backdrop / outside click */
+		noClickOutsideClose?: boolean;
 	}
 </script>
 
@@ -45,6 +47,7 @@
 		el = $bindable(),
 		onEscape,
 		noScrollLock = false,
+		noClickOutsideClose = false,
 	}: Props = $props();
 
 	let modalDialog: ModalDialog = $state()!;
@@ -89,6 +92,7 @@
 	ariaLabelledby={labelledby}
 	ariaDescribedby={describedby}
 	{noScrollLock}
+	{noClickOutsideClose}
 	preEscapeClose={handlePreEscapeClose}
 	preClose={handlePreClose}
 	class={twMerge(

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

@@ -20,6 +20,8 @@ export interface Props {
     onEscape?: () => void;
     /** Disable body scroll lock when modal is open */
     noScrollLock?: boolean;
+    /** Disable close on backdrop / outside click */
+    noClickOutsideClose?: boolean;
 }
 declare const Modal: import("svelte").Component<Props, {
     close: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.76.0",
+  "version": "3.76.2",
   "files": [
     "dist",
     "!dist/**/*.test.*",