@marianmeres/stuic 3.75.0 → 3.76.1

package/dist/components/Button/Button.svelte

@@ -142,6 +142,7 @@
 		data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
 		data-aspect1={!unstyled && _isAspect1 ? "true" : undefined}
 		data-icon-button={!unstyled && _isIconButton ? "true" : undefined}
+		data-x={!unstyled && !!_xProps ? "true" : undefined}
 		use:tooltip={_tooltipConfig}
 		{...rest as HTMLAnchorAttributes}
 	>
@@ -175,6 +176,7 @@
 		data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
 		data-aspect1={!unstyled && _isAspect1 ? "true" : undefined}
 		data-icon-button={!unstyled && _isIconButton ? "true" : undefined}
+		data-x={!unstyled && !!_xProps ? "true" : undefined}
 		use:tooltip={_tooltipConfig}
 		{...rest}
 	>

package/dist/components/Button/index.css

@@ -42,6 +42,14 @@
 	/* Raised (3D push) effect */
 	--stuic-button-raised-offset: 2px;
 	--stuic-button-raised-color: rgb(0 0 0 / 0.8);
+
+	/* Neutral overlay hover for "pure rounded X" (ghost + x + roundedFull).
+	   Intentionally non-themed — sits on top of any background color. */
+	--stuic-button-x-bg-hover: rgb(0 0 0 / 0.1);
+}
+
+:root.dark {
+	--stuic-button-x-bg-hover: rgb(255 255 255 / 0.05);
 }
 
 @layer components {
@@ -416,4 +424,14 @@
 	.stuic-button[data-icon-button] {
 		--stuic-button-radius: 9999px;
 	}
+
+	/* ============================================================================
+	   PURE ROUNDED X
+	   Ghost variant + x icon + fully rounded — replace the intent-tinted ghost
+	   hover with a neutral overlay so the button reads on any background.
+	   ============================================================================ */
+	.stuic-button[data-variant="ghost"][data-x][data-rounded-full] {
+		--_bg-hover: var(--stuic-button-x-bg-hover);
+		--_bg-active: var(--stuic-button-x-bg-hover);
+	}
 }

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/DismissibleMessage/index.css

@@ -8,11 +8,6 @@
 	--stuic-dismissible-message-padding-x: calc(var(--spacing) * 4);
 	--stuic-dismissible-message-padding-y: calc(var(--spacing) * 3);
 	--stuic-dismissible-x-padding: calc(var(--spacing) * 1);
-	--stuic-dismissible-x-bg-hover: rgb(0 0 0 / 0.1);
-}
-
-:root.dark {
-	--stuic-dismissible-x-bg-hover: rgb(255 255 255 / 0.05);
 }
 
 @layer components {
@@ -73,8 +68,6 @@
 	/* Dismiss button inherits message text color */
 	.stuic-dismissible-message > .dismiss .stuic-button {
 		color: var(--_text);
-		--_bg-hover: var(--stuic-dismissible-x-bg-hover);
-		--_bg-active: var(--stuic-dismissible-x-bg-hover);
 	}
 
 	/* =============================================================================

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.75.0",
+  "version": "3.76.1",
   "files": [
     "dist",
     "!dist/**/*.test.*",