@marianmeres/stuic 3.157.0 → 3.158.0

package/dist/components/LoginOrRegisterForm/LoginOrRegisterForm.svelte

@@ -11,6 +11,10 @@
 
 	export type LoginOrRegisterFormMode = "login" | "register" | "verify";
 
+	// The composite owns these — the inner forms never see them, so passing one
+	// through `loginProps` / `registerProps` would type-check and then do nothing.
+	// `socialPosition` is in the list for exactly that reason: the shared social
+	// block is rendered HERE, so the inner RegisterForm's own copy is inert.
 	type InnerPropsCommonOmit =
 		| "formData"
 		| "onSubmit"
@@ -18,6 +22,7 @@
 		| "t"
 		| "notifications"
 		| "socialLogins"
+		| "socialPosition"
 		| "socialDividerLabel"
 		| "footer";
 
@@ -102,6 +107,17 @@
 		 */
 		socialLogins?: Snippet;
 
+		/**
+		 * Where the shared social block sits relative to the active form:
+		 * - `"bottom"` (default) — below the form, divider ABOVE the buttons
+		 * - `"top"` — between the mode switcher and the form, divider BELOW them
+		 *
+		 * `"top"` suits identity-first signup, where the provider button is an
+		 * alternative to the credentials rather than to the whole form.
+		 * Default: "bottom"
+		 */
+		socialPosition?: "top" | "bottom";
+
 		/**
 		 * Override the divider label above social login buttons.
 		 * Default: i18n key "login_or_register_form.social_divider".
@@ -177,6 +193,7 @@
 		loginModeLabel,
 		registerModeLabel,
 		socialLogins,
+		socialPosition = "bottom",
 		socialDividerLabel,
 		footer,
 		notifications,
@@ -243,6 +260,7 @@
 				scrollToFirstError?(
 					opts?: Parameters<typeof scrollToFirstInvalidField>[1]
 				): boolean;
+				focusField?(name: string): boolean;
 		  }
 		| undefined {
 		if (mode === "login") return loginFormRef;
@@ -269,8 +287,55 @@
 	): boolean {
 		return _activeForm()?.scrollToFirstError?.(opts) ?? false;
 	}
+
+	/**
+	 * Focus a field by name on the active inner form (currently only
+	 * `RegisterForm` implements it). Returns false if the active form doesn't
+	 * support it or the field is not rendered.
+	 */
+	export function focusField(name: string): boolean {
+		return _activeForm()?.focusField?.(name) ?? false;
+	}
 </script>
 
+{#snippet socialDivider(position: "top" | "bottom")}
+	<div class={unstyled ? undefined : "stuic-login-or-register-form-social-divider"}>
+		<span>
+			{typeof socialDividerLabel === "string"
+				? socialDividerLabel
+				: t(
+						position === "top"
+							? "login_or_register_form.social_divider_alt"
+							: "login_or_register_form.social_divider"
+					)}
+		</span>
+	</div>
+{/snippet}
+
+<!--
+	Shared social logins — hidden in verify mode (OAuth doesn't apply
+	mid-verification). Same markup from either position; only the divider flips
+	sides so it always faces the form.
+-->
+{#snippet socialBlock(position: "top" | "bottom")}
+	{#if socialLogins && mode !== "verify"}
+		<div
+			class={unstyled ? undefined : "stuic-login-or-register-form-social"}
+			data-position={unstyled ? undefined : position}
+		>
+			{#if socialDividerLabel !== false && position === "bottom"}
+				{@render socialDivider(position)}
+			{/if}
+			<div class={unstyled ? undefined : "stuic-login-or-register-form-social-buttons"}>
+				{@render socialLogins()}
+			</div>
+			{#if socialDividerLabel !== false && position === "top"}
+				{@render socialDivider(position)}
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+
 {#snippet formContent()}
 	<!-- Mode switcher (verify mode is never rendered as a tab — it's an outcome state) -->
 	{#if mode !== "verify"}
@@ -290,6 +355,11 @@
 		</div>
 	{/if}
 
+	<!-- Shared social logins above the active form -->
+	{#if socialPosition === "top"}
+		{@render socialBlock("top")}
+	{/if}
+
 	<!-- Active form -->
 	<div class={unstyled ? undefined : "stuic-login-or-register-form-body"}>
 		{#if mode === "login"}
@@ -329,22 +399,9 @@
 		{/if}
 	</div>
 
-	<!-- Shared social logins (hidden in verify mode — OAuth doesn't apply mid-verification) -->
-	{#if socialLogins && mode !== "verify"}
-		<div class={unstyled ? undefined : "stuic-login-or-register-form-social"}>
-			{#if socialDividerLabel !== false}
-				<div class={unstyled ? undefined : "stuic-login-or-register-form-social-divider"}>
-					<span>
-						{typeof socialDividerLabel === "string"
-							? socialDividerLabel
-							: t("login_or_register_form.social_divider")}
-					</span>
-				</div>
-			{/if}
-			<div class={unstyled ? undefined : "stuic-login-or-register-form-social-buttons"}>
-				{@render socialLogins()}
-			</div>
-		</div>
+	<!-- Shared social logins below the active form (default) -->
+	{#if socialPosition !== "top"}
+		{@render socialBlock("bottom")}
 	{/if}
 
 	<!-- Footer -->

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

@@ -8,7 +8,7 @@ import type { RegisterFormData } from "../RegisterForm/_internal/register-form-t
 import type { Props as EmailVerifyFormProps } from "../EmailVerifyForm/EmailVerifyForm.svelte";
 import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 export type LoginOrRegisterFormMode = "login" | "register" | "verify";
-type InnerPropsCommonOmit = "formData" | "onSubmit" | "isSubmitting" | "t" | "notifications" | "socialLogins" | "socialDividerLabel" | "footer";
+type InnerPropsCommonOmit = "formData" | "onSubmit" | "isSubmitting" | "t" | "notifications" | "socialLogins" | "socialPosition" | "socialDividerLabel" | "footer";
 export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** Bindable active mode. Default: "login" */
     mode?: LoginOrRegisterFormMode;
@@ -61,6 +61,16 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
      * Shared between both modes (OAuth works for either flow).
      */
     socialLogins?: Snippet;
+    /**
+     * Where the shared social block sits relative to the active form:
+     * - `"bottom"` (default) — below the form, divider ABOVE the buttons
+     * - `"top"` — between the mode switcher and the form, divider BELOW them
+     *
+     * `"top"` suits identity-first signup, where the provider button is an
+     * alternative to the credentials rather than to the whole form.
+     * Default: "bottom"
+     */
+    socialPosition?: "top" | "bottom";
     /**
      * Override the divider label above social login buttons.
      * Default: i18n key "login_or_register_form.social_divider".
@@ -100,6 +110,7 @@ import type { scrollToFirstInvalidField } from "../../utils/validate-fields.js";
 declare const LoginOrRegisterForm: import("svelte").Component<Props, {
     validate: () => boolean;
     scrollToFirstError: (opts?: Parameters<typeof scrollToFirstInvalidField>[1]) => boolean;
+    focusField: (name: string) => boolean;
 }, "mode" | "loginData" | "registerData" | "verifyEmail">;
 type LoginOrRegisterForm = ReturnType<typeof LoginOrRegisterForm>;
 export default LoginOrRegisterForm;

package/dist/components/LoginOrRegisterForm/LoginOrRegisterFormModal.svelte

@@ -49,8 +49,10 @@
 		registerModeLabel?: string;
 		verifyModeLabel?: string;
 
-		/** Shared social logins (rendered below the active form). */
+		/** Shared social logins (rendered below the active form by default). */
 		socialLogins?: Snippet;
+		/** Place the shared social block above the form instead. Default: "bottom" */
+		socialPosition?: InnerProps["socialPosition"];
 		socialDividerLabel?: string | false;
 
 		/** Footer snippet. Receives mode + setter. */
@@ -114,6 +116,7 @@
 	import { createEmptyRegisterFormData } from "../RegisterForm/_internal/register-form-utils.js";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import H from "../H/H.svelte";
+	import type { scrollToFirstInvalidField } from "../../utils/validate-fields.js";
 
 	let {
 		mode = $bindable("login"),
@@ -134,6 +137,7 @@
 		registerModeLabel,
 		verifyModeLabel,
 		socialLogins,
+		socialPosition,
 		socialDividerLabel,
 		footer,
 		notifications,
@@ -164,6 +168,7 @@
 	);
 
 	let modal: Modal = $state()!;
+	let form = $state<LoginOrRegisterForm>();
 
 	export function open(openerOrEvent?: null | HTMLElement | MouseEvent) {
 		modal.open(openerOrEvent);
@@ -173,6 +178,30 @@
 		modal.close();
 	}
 
+	// Same imperative API the inner composite exposes, forwarded. The form only
+	// exists while the modal is open, so all three are no-ops when it is closed.
+
+	/**
+	 * Run the active inner form's validators. Returns true if valid — including
+	 * when the modal is closed and there is no form to ask, so check `visible`
+	 * first if that distinction matters.
+	 */
+	export function validate(): boolean {
+		return form?.validate() ?? true;
+	}
+
+	/** Scroll + focus the active form's first invalid field. Call after `validate()`. */
+	export function scrollToFirstError(
+		opts?: Parameters<typeof scrollToFirstInvalidField>[1]
+	): boolean {
+		return form?.scrollToFirstError(opts) ?? false;
+	}
+
+	/** Focus a field by name on the active form (register mode only). */
+	export function focusField(name: string): boolean {
+		return form?.focusField(name) ?? false;
+	}
+
 	// Reset terminal `verify` state when the modal *closes* — otherwise a
 	// register → OTP → logout → re-open cycle resumes on the stale 6-digit-code
 	// screen. Keyed on the visible: true → false transition (not a static
@@ -222,6 +251,7 @@
 
 	<div class="p-6 pt-3">
 		<LoginOrRegisterForm
+			bind:this={form}
 			bind:mode
 			bind:loginData
 			bind:registerData
@@ -240,6 +270,7 @@
 			{registerModeLabel}
 			{verifyModeLabel}
 			{socialLogins}
+			{socialPosition}
 			{socialDividerLabel}
 			{footer}
 			{notifications}

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

@@ -32,8 +32,10 @@ export interface Props {
     loginModeLabel?: string;
     registerModeLabel?: string;
     verifyModeLabel?: string;
-    /** Shared social logins (rendered below the active form). */
+    /** Shared social logins (rendered below the active form by default). */
     socialLogins?: Snippet;
+    /** Place the shared social block above the form instead. Default: "bottom" */
+    socialPosition?: InnerProps["socialPosition"];
     socialDividerLabel?: string | false;
     /** Footer snippet. Receives mode + setter. */
     footer?: InnerProps["footer"];
@@ -75,9 +77,13 @@ export interface Props {
     /** Forwarded to `LoginOrRegisterForm`. Animate content height on mode change. Default: true. */
     animateHeight?: boolean;
 }
+import type { scrollToFirstInvalidField } from "../../utils/validate-fields.js";
 declare const LoginOrRegisterFormModal: import("svelte").Component<Props, {
     open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;
     close: () => void;
+    validate: () => boolean;
+    scrollToFirstError: (opts?: Parameters<typeof scrollToFirstInvalidField>[1]) => boolean;
+    focusField: (name: string) => boolean;
 }, "visible" | "mode" | "loginData" | "registerData" | "verifyEmail">;
 type LoginOrRegisterFormModal = ReturnType<typeof LoginOrRegisterFormModal>;
 export default LoginOrRegisterFormModal;

package/dist/components/LoginOrRegisterForm/README.md

@@ -24,32 +24,45 @@ When the active mode changes, the relevant email is **one-shot copied** to the d
 
 ## LoginOrRegisterForm — Props
 
-| Prop                 | Type                               | Default   | Description                                                                                                           |
-| -------------------- | ---------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------- |
-| `mode`               | `LoginOrRegisterFormMode`          | `"login"` | Bindable active mode.                                                                                                 |
-| `loginData`          | `LoginFormData`                    | empty     | Bindable login form data (forwarded to `LoginForm`).                                                                  |
-| `registerData`       | `RegisterFormData`                 | empty     | Bindable register form data (forwarded to `RegisterForm`).                                                            |
-| `verifyEmail`        | `string`                           | `""`      | Bindable email used by `EmailVerifyForm` (auto-seeded on transitions).                                                |
-| `onLogin`            | `(data: LoginFormData) => void`    | required  | Login submit callback.                                                                                                |
-| `onRegister`         | `(data: RegisterFormData) => void` | required  | Register submit callback.                                                                                             |
-| `onVerify`           | `(code: string) => void`           | -         | Verify submit callback (required only when using verify mode).                                                        |
-| `onResendCode`       | `() => Promise<void> \| void`      | -         | Resend handler — when set, `EmailVerifyForm` renders the resend control.                                              |
-| `isSubmitting`       | `boolean`                          | `false`   | Forwarded to all three forms.                                                                                         |
-| `onForgotPassword`   | `() => void`                       | -         | Forgot-password handler for login mode.                                                                               |
-| `loginProps`         | `Partial<LoginFormProps>`          | -         | Pass-through to the inner `LoginForm`.                                                                                |
-| `registerProps`      | `Partial<RegisterFormProps>`       | -         | Pass-through to the inner `RegisterForm`.                                                                             |
-| `verifyProps`        | `Partial<EmailVerifyFormProps>`    | -         | Pass-through to the inner `EmailVerifyForm` (e.g., `error`, `attemptsRemaining`).                                     |
-| `modeSwitcher`       | `Snippet<[{ mode, setMode, t }]>`  | -         | Override the built-in `ButtonGroupRadio` switcher.                                                                    |
-| `loginModeLabel`     | `string`                           | i18n      | Override the "Log in" tab label.                                                                                      |
-| `registerModeLabel`  | `string`                           | i18n      | Override the "Sign up" tab label.                                                                                     |
-| `socialLogins`       | `Snippet`                          | -         | Shared OAuth buttons rendered once below the active form (hidden in verify mode).                                     |
-| `socialDividerLabel` | `string \| false`                  | i18n      | Override (or hide with `false`) the divider above social buttons.                                                     |
-| `footer`             | `Snippet<[{ mode, setMode }]>`     | -         | Mode-aware footer.                                                                                                    |
-| `notifications`      | `NotificationsStack`               | -         | Forwarded to inner forms.                                                                                             |
-| `onModeChange`       | `(next, prev) => void`             | -         | Called when the active mode changes. Use to clear parent-owned mode-specific state.                                   |
-| `animateHeight`      | `boolean`                          | `true`    | Smoothly animate content height on mode/content change. Respects `prefers-reduced-motion`; no effect when `unstyled`. |
-| `t`                  | `TranslateFn`                      | English   | i18n function.                                                                                                        |
-| `unstyled` / `class` | -                                  | -         | Standard styling escape hatches.                                                                                      |
+| Prop                 | Type                               | Default    | Description                                                                                                                                           |
+| -------------------- | ---------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `mode`               | `LoginOrRegisterFormMode`          | `"login"`  | Bindable active mode.                                                                                                                                 |
+| `loginData`          | `LoginFormData`                    | empty      | Bindable login form data (forwarded to `LoginForm`).                                                                                                  |
+| `registerData`       | `RegisterFormData`                 | empty      | Bindable register form data (forwarded to `RegisterForm`).                                                                                            |
+| `verifyEmail`        | `string`                           | `""`       | Bindable email used by `EmailVerifyForm` (auto-seeded on transitions).                                                                                |
+| `onLogin`            | `(data: LoginFormData) => void`    | required   | Login submit callback.                                                                                                                                |
+| `onRegister`         | `(data: RegisterFormData) => void` | required   | Register submit callback.                                                                                                                             |
+| `onVerify`           | `(code: string) => void`           | -          | Verify submit callback (required only when using verify mode).                                                                                        |
+| `onResendCode`       | `() => Promise<void> \| void`      | -          | Resend handler — when set, `EmailVerifyForm` renders the resend control.                                                                              |
+| `isSubmitting`       | `boolean`                          | `false`    | Forwarded to all three forms.                                                                                                                         |
+| `onForgotPassword`   | `() => void`                       | -          | Forgot-password handler for login mode.                                                                                                               |
+| `loginProps`         | `Partial<LoginFormProps>`          | -          | Pass-through to the inner `LoginForm`.                                                                                                                |
+| `registerProps`      | `Partial<RegisterFormProps>`       | -          | Pass-through to the inner `RegisterForm`.                                                                                                             |
+| `verifyProps`        | `Partial<EmailVerifyFormProps>`    | -          | Pass-through to the inner `EmailVerifyForm` (e.g., `error`, `attemptsRemaining`).                                                                     |
+| `modeSwitcher`       | `Snippet<[{ mode, setMode, t }]>`  | -          | Override the built-in `ButtonGroupRadio` switcher.                                                                                                    |
+| `loginModeLabel`     | `string`                           | i18n       | Override the "Log in" tab label.                                                                                                                      |
+| `registerModeLabel`  | `string`                           | i18n       | Override the "Sign up" tab label.                                                                                                                     |
+| `socialLogins`       | `Snippet`                          | -          | Shared OAuth buttons rendered once below the active form (hidden in verify mode).                                                                     |
+| `socialPosition`     | `"top" \| "bottom"`                | `"bottom"` | `"top"` renders the shared social block between the mode switcher and the form, divider **below** the buttons.                                        |
+| `socialDividerLabel` | `string \| false`                  | i18n       | Override (or hide with `false`) the divider. Defaults to `social_divider` ("or continue with") at the bottom, `social_divider_alt` ("or") at the top. |
+| `footer`             | `Snippet<[{ mode, setMode }]>`     | -          | Mode-aware footer.                                                                                                                                    |
+| `notifications`      | `NotificationsStack`               | -          | Forwarded to inner forms.                                                                                                                             |
+| `onModeChange`       | `(next, prev) => void`             | -          | Called when the active mode changes. Use to clear parent-owned mode-specific state.                                                                   |
+| `animateHeight`      | `boolean`                          | `true`     | Smoothly animate content height on mode/content change. Respects `prefers-reduced-motion`; no effect when `unstyled`.                                 |
+| `t`                  | `TranslateFn`                      | English    | i18n function.                                                                                                                                        |
+| `unstyled` / `class` | -                                  | -          | Standard styling escape hatches.                                                                                                                      |
+
+> The composite owns the shared social block, so `socialLogins`, `socialPosition`, `socialDividerLabel` (and `formData` / `onSubmit` / `isSubmitting` / `t` / `notifications` / `footer`) are **excluded** from `loginProps` / `registerProps` — passing one there would type-check and then do nothing.
+
+### Imperative methods (via `bind:this`)
+
+All three delegate to whichever inner form is currently mounted.
+
+| Method                      | Returns   | Purpose                                                                         |
+| --------------------------- | --------- | ------------------------------------------------------------------------------- |
+| `validate()`                | `boolean` | Runs the active form's validators. `true` if valid (or nothing is mounted yet). |
+| `scrollToFirstError(opts?)` | `boolean` | Scrolls + focuses the active form's first invalid field.                        |
+| `focusField(name)`          | `boolean` | Focuses a field by name (implemented by `RegisterForm`; `false` elsewhere).     |
 
 ## LoginOrRegisterFormModal — extra props
 
@@ -67,7 +80,7 @@ Inherits all `LoginOrRegisterForm` props, plus:
 | `onClose`             | `() => false \| void` | -                                                              | Pre-close hook. Return `false` to prevent close.                        |
 | `noClickOutsideClose` | `boolean`             | `true`                                                         | Disable backdrop-click close (default-on to protect typed credentials). |
 
-**Methods:** `open(openerOrEvent?)`, `close()` — exposed via `bind:this`.
+**Methods:** `open(openerOrEvent?)`, `close()`, plus the inner form's `validate()`, `scrollToFirstError(opts?)` and `focusField(name)` — all exposed via `bind:this`. The three forwarded ones are no-ops (`true` / `false` / `false`) while the modal is closed, since no form is mounted then.
 
 ## Usage
 
@@ -141,12 +154,14 @@ Prefix: `--stuic-login-or-register-form-*`
 | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `--stuic-login-or-register-form-gap`                          | Vertical gap                                                                                                                                                                                                                |
 | `--stuic-login-or-register-form-switcher-margin-bottom`       | Spacing below the mode switcher                                                                                                                                                                                             |
-| `--stuic-login-or-register-form-social-margin-top`            | Margin above social block                                                                                                                                                                                                   |
+| `--stuic-login-or-register-form-social-margin-top`            | Margin above social block (default position)                                                                                                                                                                                |
+| `--stuic-login-or-register-form-social-margin-bottom`         | Margin below social block (`socialPosition="top"`)                                                                                                                                                                          |
 | `--stuic-login-or-register-form-social-gap`                   | Gap between social buttons                                                                                                                                                                                                  |
 | `--stuic-login-or-register-form-social-divider-color`         | Divider text color                                                                                                                                                                                                          |
 | `--stuic-login-or-register-form-social-divider-line-color`    | Divider line color                                                                                                                                                                                                          |
 | `--stuic-login-or-register-form-social-divider-font-size`     | Divider text size                                                                                                                                                                                                           |
-| `--stuic-login-or-register-form-social-divider-margin-bottom` | Divider bottom margin                                                                                                                                                                                                       |
+| `--stuic-login-or-register-form-social-divider-margin-bottom` | Divider bottom margin (default position)                                                                                                                                                                                    |
+| `--stuic-login-or-register-form-social-divider-margin-top`    | Divider top margin (`socialPosition="top"`)                                                                                                                                                                                 |
 | `--stuic-login-or-register-form-height-transition-duration`   | Height animation duration (`animateHeight`)                                                                                                                                                                                 |
 | `--stuic-login-or-register-form-height-transition-easing`     | Height animation easing (`animateHeight`)                                                                                                                                                                                   |
 | `--stuic-login-or-register-form-height-clip-margin`           | `overflow-clip-margin` while the height animates — how far focus rings / borders may paint past the clip edge so they aren't sliced mid-transition. Default `0.5rem`; raise it if inner controls have larger rings/shadows. |
@@ -162,6 +177,7 @@ Prefix: `--stuic-login-or-register-form-*`
 | `login_or_register_form.modal_title_register` | `Create account`    |
 | `login_or_register_form.modal_title_verify`   | `Verify your email` |
 | `login_or_register_form.social_divider`       | `or continue with`  |
+| `login_or_register_form.social_divider_alt`   | `or`                |
 
 ## See also
 

package/dist/components/LoginOrRegisterForm/_internal/login-or-register-form-i18n-defaults.js

@@ -5,6 +5,7 @@ const DEFAULTS = {
     "login_or_register_form.mode_register": "Sign up",
     "login_or_register_form.mode_verify": "Verify",
     "login_or_register_form.social_divider": "or continue with",
+    "login_or_register_form.social_divider_alt": "or",
     "login_or_register_form.modal_title_login": "Log In",
     "login_or_register_form.modal_title_register": "Create account",
     "login_or_register_form.modal_title_verify": "Verify your email",

package/dist/components/LoginOrRegisterForm/index.css

@@ -16,6 +16,10 @@
 	--stuic-login-or-register-form-social-divider-line-color: var(--stuic-color-border);
 	--stuic-login-or-register-form-social-divider-font-size: var(--text-sm);
 	--stuic-login-or-register-form-social-divider-margin-bottom: 0.75rem;
+
+	/* Social login section when placed above the form (socialPosition="top") */
+	--stuic-login-or-register-form-social-margin-bottom: 1.5rem;
+	--stuic-login-or-register-form-social-divider-margin-top: 0.75rem;
 }
 
 @layer components {
@@ -90,4 +94,18 @@
 		flex-direction: column;
 		gap: var(--stuic-login-or-register-form-social-gap);
 	}
+
+	/* socialPosition="top" — the block sits above the form, so the margin and the
+	   divider both mirror. `[data-position="bottom"]` is intentionally unstyled:
+	   the default render stays byte-for-byte what it always was. */
+	.stuic-login-or-register-form-social[data-position="top"] {
+		margin-top: 0;
+		margin-bottom: var(--stuic-login-or-register-form-social-margin-bottom);
+	}
+
+	.stuic-login-or-register-form-social[data-position="top"]
+		.stuic-login-or-register-form-social-divider {
+		margin-top: var(--stuic-login-or-register-form-social-divider-margin-top);
+		margin-bottom: 0;
+	}
 }