@marianmeres/stuic 3.78.0 → 3.80.0

package/dist/actions/popover/popover.svelte.js

@@ -353,6 +353,8 @@ export function popover(anchorEl, fn) {
 				position: fixed;
 				position-anchor: ${anchorName};
 				position-area: ${POSITION_MAP[currentOptions.position || "bottom"] || "bottom"};
+				max-width: calc(100vw - 1rem);
+				max-height: calc(100vh - 1rem);
 				transition-duration: ${TRANSITION}ms;
 				margin: ${offsetValue};
 			`;

package/dist/actions/spotlight/spotlight.svelte.js

@@ -288,6 +288,7 @@ export function spotlight(targetEl, fn) {
         annotationEl.style.top = "";
         annotationEl.style.right = "";
         annotationEl.style.bottom = "";
+        annotationEl.style.transform = "";
         if (pos.startsWith("top")) {
             annotationEl.style.left = `${x}px`;
             annotationEl.style.bottom = `${window.innerHeight - y + offset}px`;
@@ -304,6 +305,27 @@ export function spotlight(targetEl, fn) {
             annotationEl.style.left = `${x + w + offset}px`;
             annotationEl.style.top = `${y}px`;
         }
+        // Clamp into viewport after layout settles. Using transform keeps the
+        // underlying left/top intent intact so the next call recomputes cleanly.
+        requestAnimationFrame(() => {
+            if (!annotationEl)
+                return;
+            const a = annotationEl.getBoundingClientRect();
+            const m = 8;
+            const vw = window.innerWidth;
+            const vh = window.innerHeight;
+            let dx = 0;
+            let dy = 0;
+            if (a.left < m)
+                dx = m - a.left;
+            else if (a.right > vw - m)
+                dx = vw - m - a.right;
+            if (a.top < m)
+                dy = m - a.top;
+            else if (a.bottom > vh - m)
+                dy = vh - m - a.bottom;
+            annotationEl.style.transform = dx || dy ? `translate(${dx}px, ${dy}px)` : "";
+        });
     }
     function renderContent() {
         if (!annotationEl || !currentOptions.content)
@@ -384,6 +406,10 @@ export function spotlight(targetEl, fn) {
 						position: fixed;
 						position-anchor: ${anchorName};
 						position-area: ${POSITION_MAP[currentOptions.position || "bottom"] || "bottom"};
+						position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+						position-try-order: most-width;
+						max-width: calc(100vw - 1rem);
+						max-height: calc(100vh - 1rem);
 						transition-duration: ${TRANSITION}ms;
 						margin: ${offsetValue};
 						z-index: 50;

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,93 +1,95 @@
 {
-  "name": "@marianmeres/stuic",
-  "version": "3.78.0",
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*",
-    "docs",
-    "AGENTS.md",
-    "CLAUDE.md",
-    "API.md"
-  ],
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    },
-    "./utils": {
-      "types": "./dist/utils/index.d.ts",
-      "default": "./dist/utils/index.js"
-    },
-    "./phone-validation": {
-      "types": "./dist/components/Input/phone-validation.d.ts",
-      "default": "./dist/components/Input/phone-validation.js"
-    }
-  },
-  "peerDependencies": {
-    "svelte": "^5.0.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.39.4",
-    "@marianmeres/random-human-readable": "^1.9.0",
-    "@sveltejs/adapter-auto": "^4.0.0",
-    "@sveltejs/kit": "^2.57.1",
-    "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "@tailwindcss/cli": "^4.2.2",
-    "@tailwindcss/forms": "^0.5.11",
-    "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.2.2",
-    "@types/node": "^25.6.0",
-    "dotenv": "^16.6.1",
-    "eslint": "^9.39.4",
-    "globals": "^16.5.0",
-    "prettier": "^3.8.3",
-    "prettier-plugin-svelte": "^3.5.1",
-    "publint": "^0.3.18",
-    "svelte": "^5.55.4",
-    "svelte-check": "^4.4.6",
-    "tailwindcss": "^4.2.2",
-    "tsx": "^4.21.0",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.58.2",
-    "vite": "^7.3.2",
-    "vitest": "^3.2.4"
-  },
-  "dependencies": {
-    "@marianmeres/clog": "^3.17.1",
-    "@marianmeres/cron": "^2.0.0",
-    "@marianmeres/design-tokens": "^1.4.0",
-    "@marianmeres/icons-fns": "^5.0.0",
-    "@marianmeres/item-collection": "^1.4.2",
-    "@marianmeres/paging-store": "^2.1.1",
-    "@marianmeres/parse-boolean": "^2.1.0",
-    "@marianmeres/ticker": "^1.17.1",
-    "@marianmeres/tree": "^2.3.0",
-    "libphonenumber-js": "^1.12.41",
-    "runed": "^0.23.4",
-    "tailwind-merge": "^3.5.0"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && pnpm run prepack",
-    "preview": "vite preview",
-    "package": "pnpm run prepack",
-    "package:watch": "svelte-kit sync && svelte-package --watch && publint",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "format": "prettier --write .",
-    "lint": "eslint . && prettier --check .",
-    "test": "vitest --dir src/",
-    "svelte-check": "svelte-check",
-    "svelte-package": "svelte-package",
-    "rp": "pnpm run build && ./release.sh patch",
-    "rpm": "pnpm run build && ./release.sh minor"
-  }
-}
+	"name": "@marianmeres/stuic",
+	"version": "3.80.0",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && pnpm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"package": "pnpm run prepack",
+		"package:watch": "svelte-kit sync && svelte-package --watch && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "eslint . && prettier --check .",
+		"test": "vitest --dir src/",
+		"svelte-check": "svelte-check",
+		"svelte-package": "svelte-package",
+		"rp": "pnpm run build && ./release.sh patch",
+		"rpm": "pnpm run build && ./release.sh minor"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*",
+		"docs",
+		"AGENTS.md",
+		"CLAUDE.md",
+		"API.md"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./utils": {
+			"types": "./dist/utils/index.d.ts",
+			"default": "./dist/utils/index.js"
+		},
+		"./phone-validation": {
+			"types": "./dist/components/Input/phone-validation.d.ts",
+			"default": "./dist/components/Input/phone-validation.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.39.4",
+		"@marianmeres/random-human-readable": "^1.9.0",
+		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/kit": "^2.59.1",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/cli": "^4.3.0",
+		"@tailwindcss/forms": "^0.5.11",
+		"@tailwindcss/typography": "^0.5.19",
+		"@tailwindcss/vite": "^4.3.0",
+		"@types/node": "^25.6.2",
+		"dotenv": "^16.6.1",
+		"eslint": "^9.39.4",
+		"globals": "^16.5.0",
+		"prettier": "^3.8.3",
+		"prettier-plugin-svelte": "^3.5.1",
+		"publint": "^0.3.20",
+		"svelte": "^5.55.5",
+		"svelte-check": "^4.4.8",
+		"tailwindcss": "^4.3.0",
+		"tsx": "^4.21.0",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.59.2",
+		"vite": "^7.3.3",
+		"vitest": "^3.2.4"
+	},
+	"dependencies": {
+		"@marianmeres/clog": "^3.18.1",
+		"@marianmeres/cron": "^2.0.0",
+		"@marianmeres/design-tokens": "^1.4.1",
+		"@marianmeres/icons-fns": "^5.0.0",
+		"@marianmeres/item-collection": "^1.4.2",
+		"@marianmeres/paging-store": "^2.1.1",
+		"@marianmeres/parse-boolean": "^2.1.0",
+		"@marianmeres/ticker": "^1.17.1",
+		"@marianmeres/tree": "^2.3.0",
+		"libphonenumber-js": "^1.13.0",
+		"runed": "^0.23.4",
+		"tailwind-merge": "^3.6.0"
+	}
+}