@marianmeres/stuic 3.78.0 → 3.79.0

package/dist/components/Checkout/CheckoutGuestOrLoginForm.svelte

@@ -119,7 +119,7 @@
 	import CheckoutLoginForm from "./CheckoutLoginForm.svelte";
 	import LoginFormModal from "../LoginForm/LoginFormModal.svelte";
 	import LoginOrRegisterFormModal from "../LoginOrRegisterForm/LoginOrRegisterFormModal.svelte";
-	import TabbedMenu from "../TabbedMenu/TabbedMenu.svelte";
+	import ButtonGroupRadio from "../ButtonGroupRadio/ButtonGroupRadio.svelte";
 	import { H, type HLevel } from "../H/index.js";
 	import CheckoutSectionHeader from "./CheckoutSectionHeader.svelte";
 
@@ -254,27 +254,9 @@
 		}
 	});
 
-	let tabItems = $derived([
-		{ id: "guest", label: guestTabLabel ?? t("checkout.guest_or_login.guest_tab") },
-		{
-			id: "login",
-			label: loginTabLabel ?? t("checkout.guest_or_login.login_tab"),
-			...(_useLoginOrRegisterModal
-				? {
-						onSelect: () => {
-							loginOrRegisterModalRef?.open();
-							return false;
-						},
-					}
-				: _useLoginModal
-					? {
-							onSelect: () => {
-								loginModalRef?.open();
-								return false;
-							},
-						}
-					: {}),
-		},
+	let tabOptions = $derived([
+		{ value: "guest", label: guestTabLabel ?? t("checkout.guest_or_login.guest_tab") },
+		{ value: "login", label: loginTabLabel ?? t("checkout.guest_or_login.login_tab") },
 	]);
 
 	let _class = $derived(
@@ -305,23 +287,26 @@
 			<CheckoutLoginForm {...loginForm} {notifications} t={tProp} {unstyled} />
 		{/if}
 	{:else if formMode === "tabbed"}
-		<TabbedMenu
-			items={tabItems}
-			value={activeTab}
-			onSelect={(item) => {
-				activeTab = item.id as "guest" | "login";
-			}}
-			{unstyled}
+		<ButtonGroupRadio
+			options={tabOptions}
+			bind:value={activeTab as string}
 			class={unstyled ? undefined : "stuic-checkout-guest-or-login-tabs"}
+			onButtonClick={(index) => {
+				if (tabOptions[index]?.value !== "login") return;
+				if (_useLoginOrRegisterModal) {
+					loginOrRegisterModalRef?.open();
+					return false;
+				}
+				if (_useLoginModal) {
+					loginModalRef?.open();
+					return false;
+				}
+			}}
 		/>
 		{#if activeTab === "guest" && guestForm}
-			<div role="tabpanel">
-				<CheckoutGuestForm {...guestForm} {notifications} t={tProp} {unstyled} />
-			</div>
-		{:else if activeTab === "login" && loginForm && !_useLoginOrRegisterModal}
-			<div role="tabpanel">
-				<CheckoutLoginForm {...loginForm} {notifications} t={tProp} {unstyled} />
-			</div>
+			<CheckoutGuestForm {...guestForm} {notifications} t={tProp} {unstyled} />
+		{:else if activeTab === "login" && loginForm && !_useLoginOrRegisterModal && !_useLoginModal}
+			<CheckoutLoginForm {...loginForm} {notifications} t={tProp} {unstyled} />
 		{/if}
 	{:else if formMode === "stacked"}
 		{#if loginForm}

package/dist/components/Checkout/README.md

@@ -26,7 +26,7 @@ Each step container renders a `CheckoutProgress` indicator (unless `hideProgress
 | `CheckoutOrderSummary` | Totals (subtotal/tax/shipping/discount/total) |
 | `CheckoutOrderReview` | Read-only order dump (items + addresses + delivery) |
 | `CheckoutOrderConfirmation` | Completed-order summary with order number & next steps |
-| `CheckoutGuestOrLoginForm` | Tabbed guest / login |
+| `CheckoutGuestOrLoginForm` | Guest / login switcher (segmented pill) |
 | `CheckoutGuestForm` | Guest-checkout fields |
 | `CheckoutLoginForm` | Login (adapts the generic `LoginForm` to checkout i18n) |
 | `CheckoutAddressForm` | Structured address input |
@@ -221,7 +221,7 @@ By default `CheckoutGuestOrLoginForm` in tabbed mode renders an inline `<Checkou
 
 - `CheckoutProgress` renders past/current/future steps with `aria-current="step"` on the active step.
 - Form submissions do **not** automatically move focus to the first error field. Consumers wanting this behavior should do it in their `onContinue` handler after receiving validation errors.
-- `CheckoutGuestOrLoginForm` uses the underlying `TabbedMenu` semantics; focus does not auto-move to the tab-panel heading on tab switch.
+- `CheckoutGuestOrLoginForm` uses `ButtonGroupRadio` (`role="radiogroup"`) for the guest/login switch; focus does not auto-move to the panel heading on switch.
 
 ## Address equality (advanced)
 

package/dist/components/Checkout/_guest-or-login-form.css

@@ -3,10 +3,6 @@
 	--stuic-checkout-guest-or-login-gap: 0.25rem;
 	--stuic-checkout-guest-or-login-divider-color: var(--stuic-color-border);
 	--stuic-checkout-guest-or-login-tabs-margin-bottom: 1.5rem;
-	--stuic-checkout-guest-or-login-tabs-background-color: var(--stuic-color-muted);
-	--stuic-checkout-guest-or-login-tabs-active-background-color: var(
-		--stuic-color-muted-foreground
-	);
 }
 
 @layer components {
@@ -16,32 +12,11 @@
 		gap: var(--stuic-checkout-guest-or-login-gap);
 	}
 
-	/* Pill-styled tabs via TabbedMenu CSS variable overrides */
+	/* Spacing below the guest/login switcher (ButtonGroupRadio) */
 	.stuic-checkout-guest-or-login-tabs {
-		--stuic-tabbed-menu-radius: 9999px;
-		--stuic-tabbed-menu-item-max-width: none;
-		background-color: var(--stuic-checkout-guest-or-login-tabs-background-color);
-	}
-
-	.stuic-checkout-guest-or-login-tabs.stuic-tabbed-menu {
-		padding: 3px;
-		border: 1px solid var(--stuic-checkout-guest-or-login-divider-color);
-		border-radius: 9999px;
 		margin-bottom: var(--stuic-checkout-guest-or-login-tabs-margin-bottom);
 	}
 
-	/* Override TabbedMenu's top-only border-radius to full pill shape */
-	.stuic-checkout-guest-or-login-tabs .stuic-tabbed-menu-tab {
-		border-radius: 9999px;
-		background-color: var(--stuic-checkout-guest-or-login-tabs-background-color);
-		border: 0;
-	}
-
-	.stuic-checkout-guest-or-login-tabs .stuic-tabbed-menu-tab[aria-selected="true"] {
-		border-color: var(--stuic-tabbed-menu-border-active);
-		background-color: var(--stuic-checkout-guest-or-login-tabs-active-background-color);
-	}
-
 	/* Divider (stacked mode) */
 	.stuic-checkout-guest-or-login-divider {
 		display: flex;

package/package.json

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