@marianmeres/stuic 3.72.1 → 3.73.0

package/dist/components/ButtonGroupRadio/index.css

@@ -7,7 +7,8 @@
 :root {
 	/* Default look is a pill switcher. Override radius/bg to get a square group. */
 	--stuic-button-group-radius: 9999px;
-	--stuic-button-group-padding: 3px;
+	--stuic-button-group-padding-x: 4px;
+	--stuic-button-group-padding-y: 3px;
 	--stuic-button-group-gap: 0.25rem;
 
 	/* Button sizing — overall height = min-height + 2×padding + 2×border = 44px (Apple HIG min) */
@@ -53,7 +54,7 @@
 		width: 100%;
 
 		/* Box model */
-		padding: var(--stuic-button-group-padding);
+		padding: var(--stuic-button-group-padding-y) var(--stuic-button-group-padding-x);
 		border-width: var(--stuic-button-group-border-width, var(--stuic-border-width));
 		border-style: solid;
 		border-radius: var(--stuic-button-group-radius, var(--stuic-radius-button));

package/dist/components/LoginForm/LoginForm.svelte

@@ -73,8 +73,6 @@
 		unstyled?: boolean;
 		class?: string;
 		el?: HTMLFormElement;
-
-		compact?: boolean;
 	}
 </script>
 
@@ -111,7 +109,6 @@
 		unstyled = false,
 		class: classProp,
 		el = $bindable(),
-		compact,
 		...rest
 	}: Props = $props();
 
@@ -158,13 +155,7 @@
 	let _class = $derived(unstyled ? classProp : twMerge("stuic-login-form", classProp));
 </script>
 
-<form
-	bind:this={el}
-	class={_class}
-	use:onSubmitValidityCheck
-	{...rest}
-	data-compact={compact ? "" : undefined}
->
+<form bind:this={el} class={_class} use:onSubmitValidityCheck {...rest}>
 	<!-- General error alert -->
 	<DismissibleMessage message={error} intent="destructive" onDismiss={false} />
 
@@ -184,7 +175,6 @@
 		required
 		name="login-email"
 		labelLeftBreakpoint={0}
-		class={compact ? "mb-4" : ""}
 		validate={{
 			customValidator(val) {
 				return fieldError("email") || "";
@@ -203,7 +193,6 @@
 		required
 		name="login-password"
 		labelLeftBreakpoint={0}
-		class={compact ? "mb-4" : ""}
 		validate={{
 			customValidator(val) {
 				return fieldError("password") || "";
@@ -211,9 +200,22 @@
 		}}
 	/>
 
-	{#if compact}
-		<!-- Compact: remember me + submit in one row -->
-		<div class={unstyled ? undefined : "stuic-login-form-compact-cta"}>
+	<!-- CTA -->
+	{#if submitButton}
+		{@render submitButton({ isSubmitting, disabled: isSubmitting })}
+	{:else}
+		<div class={unstyled ? undefined : "stuic-login-form-submit"}>
+			<Button intent="primary" type="submit" disabled={isSubmitting} class="w-full">
+				{isSubmitting
+					? (submittingLabel ?? t("login_form.submitting"))
+					: (submitLabel ?? t("login_form.submit"))}
+			</Button>
+		</div>
+	{/if}
+
+	<!-- Remember me + Forgot password -->
+	{#if showRememberMe || onForgotPassword}
+		<div class={unstyled ? undefined : "stuic-login-form-options"}>
 			{#if showRememberMe}
 				<!-- svelte-ignore binding_property_non_reactive -->
 				<span use:tooltip aria-label={t("login_form.remember_me_tooltip")}>
@@ -225,58 +227,18 @@
 					/>
 				</span>
 			{/if}
-			{#if submitButton}
-				{@render submitButton({ isSubmitting, disabled: isSubmitting })}
-			{:else}
-				<Button intent="primary" type="submit" disabled={isSubmitting} class="block">
-					{isSubmitting
-						? (submittingLabel ?? t("login_form.submitting"))
-						: (submitLabel ?? t("login_form.submit"))}
+			{#if onForgotPassword}
+				<Button
+					variant="link"
+					type="button"
+					class={unstyled ? undefined : "text-muted-foreground ml-auto"}
+					size="sm"
+					onclick={onForgotPassword}
+				>
+					{t("login_form.forgot_password")}
 				</Button>
 			{/if}
 		</div>
-	{:else}
-		<!-- Normal: remember me above submit -->
-		{#if showRememberMe}
-			<!-- svelte-ignore binding_property_non_reactive -->
-			<div class={unstyled ? undefined : "stuic-login-form-remember"}>
-				<span use:tooltip aria-label={t("login_form.remember_me_tooltip")}>
-					<FieldCheckbox
-						bind:checked={formData.rememberMe}
-						label={t("login_form.remember_me")}
-						name="login-remember-me"
-					/>
-				</span>
-			</div>
-		{/if}
-
-		<!-- CTA -->
-		{#if submitButton}
-			{@render submitButton({ isSubmitting, disabled: isSubmitting })}
-		{:else}
-			<div class={unstyled ? undefined : "stuic-login-form-submit"}>
-				<Button intent="primary" type="submit" disabled={isSubmitting} class="w-full">
-					{isSubmitting
-						? (submittingLabel ?? t("login_form.submitting"))
-						: (submitLabel ?? t("login_form.submit"))}
-				</Button>
-			</div>
-		{/if}
-	{/if}
-
-	<!-- Forgot password -->
-	{#if onForgotPassword}
-		<div class={unstyled ? undefined : "stuic-login-form-forgot"}>
-			<Button
-				variant="link"
-				type="button"
-				class="text-muted-foreground"
-				size="sm"
-				onclick={onForgotPassword}
-			>
-				{t("login_form.forgot_password")}
-			</Button>
-		</div>
 	{/if}
 
 	<!-- Social logins -->

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

@@ -57,7 +57,6 @@ export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children">
     unstyled?: boolean;
     class?: string;
     el?: HTMLFormElement;
-    compact?: boolean;
 }
 declare const LoginForm: import("svelte").Component<Props, {}, "el" | "formData">;
 type LoginForm = ReturnType<typeof LoginForm>;

package/dist/components/LoginForm/LoginFormModal.svelte

@@ -154,7 +154,7 @@
 	classDialog="flex items-center justify-center"
 >
 	{#snippet header()}
-		<div class="flex items-center justify-between p-4 pb-0">
+		<div class="flex items-center justify-between p-4">
 			<H level={1} renderLevel={3} class="pl-2">
 				{title ?? t("login_form.modal_title")}
 			</H>
@@ -193,7 +193,6 @@
 			t={tProp}
 			{unstyled}
 			class={classForm}
-			compact
 		/>
 	</div>
 </Modal>

package/dist/components/LoginForm/index.css

@@ -2,11 +2,9 @@
 	/* LoginForm */
 	--stuic-login-form-gap: 0rem;
 	--stuic-login-form-gap-row: 1rem;
-	--stuic-login-form-forgot-margin-y: 0.5rem;
-	--stuic-login-form-forgot-margin-x: 0.5rem;
 
 	/* Social login section */
-	--stuic-login-form-social-margin-top: 1rem;
+	--stuic-login-form-social-margin-top: 1.5rem;
 	--stuic-login-form-social-gap: 0.75rem;
 	--stuic-login-form-social-divider-color: var(--stuic-color-muted-foreground);
 	--stuic-login-form-social-divider-line-color: var(--stuic-color-border);
@@ -21,18 +19,15 @@
 		gap: var(--stuic-login-form-gap);
 	}
 
-	.stuic-login-form-forgot {
-		margin: var(--stuic-login-form-forgot-margin-y)
-			var(--stuic-login-form-forgot-margin-x) var(--stuic-login-form-forgot-margin-y)
-			var(--stuic-login-form-forgot-margin-x);
-	}
-
-	.stuic-login-form-remember {
-		margin-top: 0.25rem;
+	.stuic-login-form-submit {
+		margin-top: 1.5rem;
+		margin-bottom: 1.5rem;
 	}
 
-	.stuic-login-form-submit {
-		margin-top: 1rem;
+	.stuic-login-form-options {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
 	}
 
 	/* Social login container */
@@ -63,21 +58,9 @@
 		flex-direction: column;
 		gap: var(--stuic-login-form-social-gap);
 	}
+}
 
-	.stuic-login-form-compact-cta {
-		display: flex;
-		align-items: center;
-		/* justify-content: space-between; */
-		margin-top: 0.5rem;
-		gap: 2rem;
-	}
-
-	.stuic-login-form[data-compact] {
-		.stuic-login-form-submit {
-			margin-top: 0.5rem;
-		}
-		.stuic-button {
-			flex: 1;
-		}
-	}
+/* Tighten default FieldInput bottom margin (mb-8 → 1rem) inside the form */
+.stuic-login-form .stuic-input {
+	margin-bottom: 1rem;
 }

package/dist/components/LoginOrRegisterForm/LoginOrRegisterForm.svelte

@@ -40,8 +40,14 @@
 		/** Applied to both inner forms' submit buttons. */
 		isSubmitting?: boolean;
 
+		/**
+		 * Called when "Forgot password?" is clicked in login mode.
+		 * If undefined, the link is not rendered.
+		 */
+		onForgotPassword?: () => void;
+
 		/** Pass-through props for the inner LoginForm (spread). */
-		loginProps?: Omit<LoginFormProps, InnerPropsCommonOmit>;
+		loginProps?: Omit<LoginFormProps, InnerPropsCommonOmit | "onForgotPassword">;
 
 		/** Pass-through props for the inner RegisterForm (spread). */
 		registerProps?: Omit<RegisterFormProps, InnerPropsCommonOmit>;
@@ -137,6 +143,7 @@
 		onVerify,
 		onResendCode,
 		isSubmitting = false,
+		onForgotPassword,
 		loginProps,
 		registerProps,
 		verifyProps,
@@ -221,6 +228,7 @@
 				onSubmit={onLogin}
 				{isSubmitting}
 				{notifications}
+				{onForgotPassword}
 				t={tProp}
 				{...loginProps}
 			/>

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

@@ -22,8 +22,13 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
     onRegister: (data: RegisterFormData) => void;
     /** Applied to both inner forms' submit buttons. */
     isSubmitting?: boolean;
+    /**
+     * Called when "Forgot password?" is clicked in login mode.
+     * If undefined, the link is not rendered.
+     */
+    onForgotPassword?: () => void;
     /** Pass-through props for the inner LoginForm (spread). */
-    loginProps?: Omit<LoginFormProps, InnerPropsCommonOmit>;
+    loginProps?: Omit<LoginFormProps, InnerPropsCommonOmit | "onForgotPassword">;
     /** Pass-through props for the inner RegisterForm (spread). */
     registerProps?: Omit<RegisterFormProps, InnerPropsCommonOmit>;
     /**

package/dist/components/LoginOrRegisterForm/LoginOrRegisterFormModal.svelte

@@ -33,6 +33,12 @@
 
 		isSubmitting?: boolean;
 
+		/**
+		 * Called when "Forgot password?" is clicked in login mode.
+		 * If undefined, the link is not rendered.
+		 */
+		onForgotPassword?: () => void;
+
 		loginProps?: InnerProps["loginProps"];
 		registerProps?: InnerProps["registerProps"];
 		verifyProps?: InnerProps["verifyProps"];
@@ -101,6 +107,7 @@
 		onVerify,
 		onResendCode,
 		isSubmitting = false,
+		onForgotPassword,
 		loginProps,
 		registerProps,
 		verifyProps,
@@ -158,7 +165,7 @@
 	classDialog="flex items-center justify-center"
 >
 	{#snippet header()}
-		<div class="flex items-center justify-between p-4 pb-0">
+		<div class="flex items-center justify-between p-4">
 			<H level={1} renderLevel={3} class="pl-2">
 				{resolvedTitle}
 			</H>
@@ -188,6 +195,7 @@
 			{onVerify}
 			{onResendCode}
 			{isSubmitting}
+			{onForgotPassword}
 			{loginProps}
 			{registerProps}
 			{verifyProps}

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

@@ -20,6 +20,11 @@ export interface Props {
     /** Called when the user clicks "Resend code" in the verify view. */
     onResendCode?: () => Promise<void> | void;
     isSubmitting?: boolean;
+    /**
+     * Called when "Forgot password?" is clicked in login mode.
+     * If undefined, the link is not rendered.
+     */
+    onForgotPassword?: () => void;
     loginProps?: InnerProps["loginProps"];
     registerProps?: InnerProps["registerProps"];
     verifyProps?: InnerProps["verifyProps"];

package/dist/components/LoginOrRegisterForm/index.css

@@ -1,10 +1,10 @@
 :root {
 	/* LoginOrRegisterForm */
-	--stuic-login-or-register-form-gap: 1rem;
-	--stuic-login-or-register-form-switcher-margin-bottom: 1rem;
+	--stuic-login-or-register-form-gap: 0rem;
+	--stuic-login-or-register-form-switcher-margin-bottom: 2rem;
 
 	/* Social login section (shared, rendered at composite level) */
-	--stuic-login-or-register-form-social-margin-top: 1rem;
+	--stuic-login-or-register-form-social-margin-top: 1.5rem;
 	--stuic-login-or-register-form-social-gap: 0.75rem;
 	--stuic-login-or-register-form-social-divider-color: var(
 		--stuic-color-muted-foreground

package/dist/components/RegisterForm/RegisterForm.svelte

@@ -91,8 +91,6 @@
 		unstyled?: boolean;
 		class?: string;
 		el?: HTMLFormElement;
-
-		compact?: boolean;
 	}
 </script>
 
@@ -129,7 +127,6 @@
 		unstyled = false,
 		class: classProp,
 		el = $bindable(),
-		compact,
 		...rest
 	}: Props = $props();
 
@@ -194,13 +191,7 @@
 	let _class = $derived(unstyled ? classProp : twMerge("stuic-register-form", classProp));
 </script>
 
-<form
-	bind:this={el}
-	class={_class}
-	use:onSubmitValidityCheck
-	{...rest}
-	data-compact={compact ? "" : undefined}
->
+<form bind:this={el} class={_class} use:onSubmitValidityCheck {...rest}>
 	<!-- General error alert -->
 	<DismissibleMessage message={error} intent="destructive" onDismiss={false} />
 
@@ -217,7 +208,6 @@
 			required={cfg.required}
 			name={`register-extra-${cfg.name}`}
 			labelLeftBreakpoint={0}
-			class={compact ? "mb-4" : ""}
 			validate={{
 				customValidator() {
 					return fieldError(cfg.name) || "";
@@ -243,7 +233,6 @@
 		required
 		name="register-email"
 		labelLeftBreakpoint={0}
-		class={compact ? "mb-4" : ""}
 		validate={{
 			customValidator() {
 				return fieldError("email") || "";
@@ -263,7 +252,6 @@
 		minlength={passwordMinLength}
 		name="register-password"
 		labelLeftBreakpoint={0}
-		class={compact ? "mb-4" : ""}
 		validate={{
 			customValidator() {
 				return fieldError("password") || "";
@@ -284,7 +272,6 @@
 			minlength={passwordMinLength}
 			name="register-password-confirm"
 			labelLeftBreakpoint={0}
-			class={compact ? "mb-4" : ""}
 			validate={{
 				customValidator() {
 					return fieldError("passwordConfirm") || "";
@@ -306,7 +293,6 @@
 			required={cfg.required}
 			name={`register-extra-${cfg.name}`}
 			labelLeftBreakpoint={0}
-			class={compact ? "mb-4" : ""}
 			validate={{
 				customValidator() {
 					return fieldError(cfg.name) || "";
@@ -324,14 +310,6 @@
 	<!-- CTA -->
 	{#if submitButton}
 		{@render submitButton({ isSubmitting, disabled: isSubmitting })}
-	{:else if compact}
-		<div class={unstyled ? undefined : "stuic-register-form-compact-cta"}>
-			<Button intent="primary" type="submit" disabled={isSubmitting} class="block">
-				{isSubmitting
-					? (submittingLabel ?? t("register_form.submitting"))
-					: (submitLabel ?? t("register_form.submit"))}
-			</Button>
-		</div>
 	{:else}
 		<div class={unstyled ? undefined : "stuic-register-form-submit"}>
 			<Button intent="primary" type="submit" disabled={isSubmitting} class="w-full">

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

@@ -70,7 +70,6 @@ export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children">
     unstyled?: boolean;
     class?: string;
     el?: HTMLFormElement;
-    compact?: boolean;
 }
 declare const RegisterForm: import("svelte").Component<Props, {}, "el" | "formData">;
 type RegisterForm = ReturnType<typeof RegisterForm>;

package/dist/components/RegisterForm/RegisterFormModal.svelte

@@ -165,7 +165,7 @@
 	classDialog="flex items-center justify-center"
 >
 	{#snippet header()}
-		<div class="flex items-center justify-between p-4 pb-0">
+		<div class="flex items-center justify-between p-4">
 			<H level={1} renderLevel={3} class="pl-2">
 				{title ?? t("register_form.modal_title")}
 			</H>
@@ -206,7 +206,6 @@
 			t={tProp}
 			{unstyled}
 			class={classForm}
-			compact
 		/>
 	</div>
 </Modal>

package/dist/components/RegisterForm/index.css

@@ -20,7 +20,8 @@
 	}
 
 	.stuic-register-form-submit {
-		margin-top: 1rem;
+		margin-top: 1.5rem;
+		margin-bottom: 1.5rem;
 	}
 
 	/* Social login container */
@@ -51,20 +52,9 @@
 		flex-direction: column;
 		gap: var(--stuic-register-form-social-gap);
 	}
+}
 
-	.stuic-register-form-compact-cta {
-		display: flex;
-		align-items: center;
-		margin-top: 0.5rem;
-		gap: 2rem;
-	}
-
-	.stuic-register-form[data-compact] {
-		.stuic-register-form-submit {
-			margin-top: 0.5rem;
-		}
-		.stuic-button {
-			flex: 1;
-		}
-	}
+/* Tighten default FieldInput bottom margin (mb-8 → 1rem) inside the form */
+.stuic-register-form .stuic-input {
+	margin-bottom: 1rem;
 }

package/package.json

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