@salesforce/ui-bundle-template-app-react-sample-b2x 12.6.3 → 12.7.0-canary.1016.23.1.g31dc6b7a

package/dist/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [12.7.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.6.3...v12.7.0) (2026-09-22)
+
+
+### Bug Fixes
+
+* **template-sfdx-project:** preserve target network sender addresses @W-24209513@ ([#993](https://github.com/salesforce-experience-platform-emu/webapps/issues/993)) ([fddbfdd](https://github.com/salesforce-experience-platform-emu/webapps/commit/fddbfddcb41270720372b0fd4c486f043d9ba8c5))
+
+
+
 ## [12.6.3](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.6.2...v12.6.3) (2026-09-14)
 
 **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project

package/dist/LICENSE.txt

@@ -0,0 +1,82 @@
+Terms of Use
+
+Copyright 2026 Salesforce, Inc. All rights reserved.
+
+These Terms of Use govern the download, installation, and/or use of this
+software provided by Salesforce, Inc. ("Salesforce") (the "Software"), were
+last updated on April 15, 2025, and constitute a legally binding
+agreement between you and Salesforce. If you do not agree to these Terms of
+Use, do not install or use the Software.
+
+Salesforce grants you a worldwide, non-exclusive, no-charge, royalty-free
+copyright license to reproduce, prepare derivative works of, publicly
+display, publicly perform, sublicense, and distribute the Software and
+derivative works subject to these Terms. These Terms shall be included in
+all copies or substantial portions of the Software.
+
+Subject to the limited rights expressly granted hereunder, Salesforce
+reserves all rights, title, and interest in and to all intellectual
+property subsisting in the Software. No rights are granted to you hereunder
+other than as expressly set forth herein. Users residing in countries on
+the United States Office of Foreign Assets Control sanction list, or which
+are otherwise subject to a US export embargo, may not use the Software.
+
+Implementation of the Software may require development work, for which you
+are responsible. The Software may contain bugs, errors and
+incompatibilities and is made available on an AS IS basis without support,
+updates, or service level commitments.
+
+Salesforce reserves the right at any time to modify, suspend, or
+discontinue, the Software (or any part thereof) with or without notice. You
+agree that Salesforce shall not be liable to you or to any third party for
+any modification, suspension, or discontinuance.
+
+You agree to defend Salesforce against any claim, demand, suit or
+proceeding made or brought against Salesforce by a third party arising out
+of or accruing from (a) your use of the Software, and (b) any application
+you develop with the Software that infringes any copyright, trademark,
+trade secret, trade dress, patent, or other intellectual property right of
+any person or defames any person or violates their rights of publicity or
+privacy (each a "Claim Against Salesforce"), and will indemnify Salesforce
+from any damages, attorney fees, and costs finally awarded against
+Salesforce as a result of, or for any amounts paid by Salesforce under a
+settlement approved by you in writing of, a Claim Against Salesforce,
+provided Salesforce (x) promptly gives you written notice of the Claim
+Against Salesforce, (y) gives you sole control of the defense and
+settlement of the Claim Against Salesforce (except that you may not settle
+any Claim Against Salesforce unless it unconditionally releases Salesforce
+of all liability), and (z) gives you all reasonable assistance, at your
+expense.
+
+WITHOUT LIMITING THE GENERALITY OF THE FOREGOING, THE SOFTWARE IS NOT
+SUPPORTED AND IS PROVIDED "AS IS," WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED. IN NO EVENT SHALL SALESFORCE HAVE ANY LIABILITY FOR ANY DAMAGES,
+INCLUDING, BUT NOT LIMITED TO, DIRECT, INDIRECT, SPECIAL, INCIDENTAL,
+PUNITIVE, OR CONSEQUENTIAL DAMAGES, OR DAMAGES BASED ON LOST PROFITS, DATA,
+OR USE, IN CONNECTION WITH THE SOFTWARE, HOWEVER CAUSED AND WHETHER IN
+CONTRACT, TORT, OR UNDER ANY OTHER THEORY OF LIABILITY, WHETHER OR NOT YOU
+HAVE BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
+
+These Terms of Use shall be governed exclusively by the internal laws of
+the State of California, without regard to its conflicts of laws
+rules. Each party hereby consents to the exclusive jurisdiction of the
+state and federal courts located in San Francisco County, California to
+adjudicate any dispute arising out of or relating to these Terms of Use and
+the download, installation, and/or use of the Software. Except as expressly
+stated herein, these Terms of Use constitute the entire agreement between
+the parties, and supersede all prior and contemporaneous agreements,
+proposals, or representations, written or oral, concerning their subject
+matter. No modification, amendment, or waiver of any provision of these
+Terms of Use shall be effective unless it is by an update to these Terms of
+Use that Salesforce makes available, or is in writing and signed by the
+party against whom the modification, amendment, or waiver is to be
+asserted.
+
+Data Privacy: Salesforce may collect, process, and store device,
+system, and other information related to your use of the Software. This
+information includes, but is not limited to, IP address, user metrics, and
+other data ("Usage Data"). Salesforce may use Usage Data for analytics,
+product development, and marketing purposes. You acknowledge that files
+generated in conjunction with the Software may contain sensitive or
+confidential data, and you are solely responsible for anonymizing and
+protecting such data.

package/dist/force-app/main/default/uiBundles/propertyrentalapp/package.json

@@ -19,8 +19,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/platform-sdk": "^12.6.3",
-    "@salesforce/ui-bundle": "^12.6.3",
+    "@salesforce/platform-sdk": "12.7.0-canary.1016.23.1.g31dc6b7a",
+    "@salesforce/ui-bundle": "12.7.0-canary.1016.23.1.g31dc6b7a",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -51,8 +51,8 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/graphiti": "^12.6.3",
-    "@salesforce/vite-plugin-ui-bundle": "^12.6.3",
+    "@salesforce/graphiti": "12.7.0-canary.1016.23.1.g31dc6b7a",
+    "@salesforce/vite-plugin-ui-bundle": "12.7.0-canary.1016.23.1.g31dc6b7a",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
@@ -60,7 +60,7 @@
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
-    "@vitest/ui": "^4.1.0",
+    "@vitest/ui": "^4.1.11",
     "eslint": "^9.39.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^7.0.1",
@@ -75,7 +75,7 @@
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",
     "vite-plugin-graphql-codegen": "^3.6.3",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.11"
   },
   "overrides": {
     "lodash": "^4.18.1",

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/api/graphql-operations-types.ts

@@ -7,8 +7,7 @@ export type MakeEmpty<T extends { [key: string]: unknown }, K extends keyof T> =
 	[_ in K]?: never;
 };
 export type Incremental<T> =
-	| T
-	| { [P in keyof T]?: P extends " $fragmentName" | "__typename" ? T[P] : never };
+	T | { [P in keyof T]?: P extends " $fragmentName" | "__typename" ? T[P] : never };
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
 	ID: { input: string; output: string };

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/appLayout.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Outlet, useLocation } from "react-router";
 import { TopBar } from "@/components/layout/TopBar";
 import { VerticalNav } from "@/components/layout/VerticalNav";
@@ -30,7 +30,8 @@ const PAGE_TITLES: { match: (path: string) => boolean; title: string }[] = [
 ];
 
 function pageTitleFor(pathname: string): string {
-	const page = PAGE_TITLES.find((entry) => entry.match(pathname))?.title ?? "Page Not Found";
+	const path = pathname.replace(/\/+$/, "").toLowerCase() || "/";
+	const page = PAGE_TITLES.find((entry) => entry.match(path))?.title ?? "Page Not Found";
 	return `${page} · ${APP_NAME}`;
 }
 
@@ -49,10 +50,10 @@ export default function AppLayout() {
 		}
 	}, [pathname]);
 
-	const closeNav = () => {
+	const closeNav = useCallback(() => {
 		setIsNavOpen(false);
 		menuButtonRef.current?.focus();
-	};
+	}, []);
 
 	return (
 		<TenantAccessProvider>

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/layout/VerticalNav.tsx

@@ -1,8 +1,9 @@
+import { Dialog } from "radix-ui";
 import { Link, useLocation } from "react-router";
-import { Home, Search, BarChart3, Wrench, Phone, type LucideIcon } from "lucide-react";
+import { Home, Search, BarChart3, Wrench, Phone, X, type LucideIcon } from "lucide-react";
 import { useAuth } from "@/features/authentication/context/AuthContext";
 import { useTenantAccess } from "@/context/TenantAccessContext";
-import { useEffect, useMemo } from "react";
+import { useMemo, useRef } from "react";
 
 interface VerticalNavItem {
 	path: string;
@@ -28,15 +29,10 @@ export function VerticalNav({ isOpen = false, onClose }: VerticalNavProps) {
 	const location = useLocation();
 	const { isAuthenticated } = useAuth();
 	const { hasTenantRecord } = useTenantAccess();
+	const mobileNavRef = useRef<HTMLElement>(null);
 
-	useEffect(() => {
-		if (!isOpen) return;
-		const onKey = (e: KeyboardEvent) => {
-			if (e.key === "Escape") onClose?.();
-		};
-		document.addEventListener("keydown", onKey);
-		return () => document.removeEventListener("keydown", onKey);
-	}, [isOpen, onClose]);
+	const triggerRef = useRef<HTMLElement | null>(null);
+	const navigatingRef = useRef(false);
 
 	const visibleItems = useMemo(
 		() =>
@@ -64,7 +60,19 @@ export function VerticalNav({ isOpen = false, onClose }: VerticalNavProps) {
 				<Link
 					key={item.path}
 					to={item.path}
-					onClick={handleClick}
+					onClick={
+						handleClick
+							? (event) => {
+									navigatingRef.current =
+										item.path !== location.pathname &&
+										!event.metaKey &&
+										!event.ctrlKey &&
+										!event.shiftKey &&
+										!event.altKey;
+									handleClick();
+								}
+							: undefined
+					}
 					className={`flex flex-col items-center justify-center gap-2 px-2 py-4 transition-colors ${
 						active
 							? "border-l-4 border-teal-700 bg-teal-100 text-teal-700"
@@ -90,23 +98,48 @@ export function VerticalNav({ isOpen = false, onClose }: VerticalNavProps) {
 				{navContent()}
 			</nav>
 
-			{/* Mobile overlay */}
-			{isOpen && (
-				<>
-					<div className="fixed inset-0 z-40 bg-black/50" onClick={onClose} aria-hidden />
-					{/*
-					 * Distinct label from the desktop sidebar: both navs are in the DOM at the
-					 * same time, and two navigation landmarks sharing one name is ambiguous.
-					 */}
-					<nav
-						id="mobile-nav"
-						className="fixed left-0 top-0 bottom-0 z-50 flex w-24 flex-col border-r border-gray-200 bg-white py-8"
-						aria-label="Mobile navigation"
+			<Dialog.Root
+				open={isOpen}
+				onOpenChange={(open) => {
+					if (!open) onClose?.();
+				}}
+			>
+				<Dialog.Portal>
+					<Dialog.Overlay className="fixed inset-0 z-40 bg-black/50" />
+					<Dialog.Content
+						aria-describedby={undefined}
+						className="fixed inset-y-0 left-0 z-50 w-24 overflow-y-auto border-r border-gray-200 bg-white py-4"
+						onOpenAutoFocus={(event) => {
+							event.preventDefault();
+							triggerRef.current =
+								document.activeElement instanceof HTMLElement ? document.activeElement : null;
+							navigatingRef.current = false;
+							mobileNavRef.current?.focus();
+						}}
+						onCloseAutoFocus={(event) => {
+							event.preventDefault();
+							if (!navigatingRef.current) triggerRef.current?.focus();
+						}}
 					>
-						{navContent(onClose)}
-					</nav>
-				</>
-			)}
+						<Dialog.Title className="sr-only">Navigation menu</Dialog.Title>
+						<Dialog.Close
+							className="mx-auto mb-2 flex size-11 items-center justify-center rounded-md text-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2"
+							aria-label="Close navigation"
+						>
+							<X className="size-5" aria-hidden />
+						</Dialog.Close>
+						<nav
+							id="mobile-nav"
+							ref={mobileNavRef}
+							tabIndex={-1}
+							aria-label="Mobile navigation"
+							className="flex flex-col gap-0 outline-none"
+						>
+							{navContent(onClose)}
+						</nav>
+					</Dialog.Content>
+				</Dialog.Portal>
+			</Dialog.Root>
 		</>
 	);
 }

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/maintenanceRequests/MaintenanceRequestList.tsx

@@ -29,31 +29,32 @@ export default function MaintenanceRequestList({
 					onClose={() => setSelectedRequest(null)}
 				/>
 			)}
-			{loading && (
-				<div role="status" aria-live="polite" aria-atomic="true">
-					<SkeletonListRows count={skeletonCount} />
-					<span className="sr-only">Loading maintenance requests…</span>
-				</div>
-			)}
 			{error && (
 				<p className="py-4 text-sm text-destructive" role="alert">
 					{error}
 				</p>
 			)}
-			{!loading && !error && requests.length === 0 && (
+			{/* Keep loaded rows mounted to preserve the reading cursor during reloads. */}
+			{requests.length > 0 ? (
+				<div className="space-y-4" role="group" aria-busy={loading || undefined}>
+					{requests.map((request) => (
+						<MaintenanceRequestListItem
+							key={request.Id}
+							request={request}
+							onClick={setSelectedRequest}
+						/>
+					))}
+				</div>
+			) : !error && loading ? (
+				<div role="status" aria-live="polite" aria-atomic="true">
+					<SkeletonListRows count={skeletonCount} />
+					<span className="sr-only">Loading maintenance requests…</span>
+				</div>
+			) : !error ? (
 				<div role="status" className="py-8 text-center text-gray-500">
 					{emptyMessage}
 				</div>
-			)}
-			{!loading &&
-				!error &&
-				requests.map((request) => (
-					<MaintenanceRequestListItem
-						key={request.Id}
-						request={request}
-						onClick={setSelectedRequest}
-					/>
-				))}
+			) : null}
 		</>
 	);
 }

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/properties/PropertyListingCard.tsx

@@ -151,7 +151,7 @@ export default function PropertyListingCard({
 							{amenityLabels.map((label) => (
 								<span
 									key={label}
-									className="rounded-full border border-border bg-muted/60 px-2.5 py-0.5 text-xs font-medium text-muted-foreground"
+									className="rounded-full border border-border bg-muted/60 px-2.5 py-0.5 text-xs font-medium text-neutral-600 dark:text-neutral-300"
 								>
 									{label}
 								</span>
@@ -163,7 +163,7 @@ export default function PropertyListingCard({
 				{/* Apply button */}
 				<Button
 					size="sm"
-					className="mt-4 w-full cursor-pointer rounded-xl bg-primary px-5 py-5 text-lg font-medium transition-colors duration-200 hover:bg-primary/90"
+					className="mt-4 w-full cursor-pointer rounded-xl bg-primary px-5 py-5 text-lg font-medium transition-colors duration-200 hover:bg-primary/95"
 					onClick={(e: MouseEvent<HTMLButtonElement>) => {
 						e.stopPropagation();
 						navigate(`/application?propertyId=${encodeURIComponent(node.Id)}`);

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/properties/PropertyMap.tsx

@@ -107,12 +107,20 @@ function MapBoundsReporter({
 
 /** Wraps popup content with an in-card close button and shadow; removes need for Leaflet's default chrome */
 function PopupContentWrapper({ children }: { children: ReactNode }) {
-	const map = useMap() as { closePopup?: () => void };
+	const map = useMap() as { closePopup?: () => void; getContainer?: () => HTMLElement };
+	const handleClose = () => {
+		const container = map.getContainer?.();
+		map.closePopup?.();
+		if (container) {
+			if (!container.hasAttribute("tabindex")) container.setAttribute("tabindex", "-1");
+			container.focus();
+		}
+	};
 	return (
 		<div className="relative min-w-0">
 			<button
 				type="button"
-				onClick={() => map.closePopup?.()}
+				onClick={handleClose}
 				className="absolute right-2 top-2 z-10 flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white transition-colors hover:bg-black/80"
 				aria-label="Close"
 			>

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/properties/PropertySearchFilters.tsx

@@ -11,7 +11,7 @@ const FILTER_PILL_CLASS =
 	"inline-flex h-10 items-center gap-1.5 rounded-full border-2 border-primary bg-background px-4 text-sm font-medium text-foreground outline-none transition-colors hover:bg-primary/10 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
 
 const SAVE_BUTTON_CLASS =
-	"mt-3 w-full rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
+	"mt-3 w-full rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
 
 const DEFAULT_PRICE_MIN = 0;
 const DEFAULT_PRICE_MAX = 100_000;

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { Slot } from 'radix-ui';
 import { cn } from '../../lib/utils';
 
 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
   {
     variants: {
       variant: {
@@ -17,7 +17,7 @@ const buttonVariants = cva(
         ghost:
           'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
         destructive:
-          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-red-700 dark:text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+          'bg-destructive/10 hover:bg-destructive/20 dark:bg-destructive/20 text-red-700 dark:text-destructive dark:hover:bg-destructive/30',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/checkbox.tsx

@@ -14,7 +14,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        'border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot="input"
       className={cn(
-        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground/70 placeholder:italic w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground placeholder:italic w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/select.tsx

@@ -42,7 +42,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/context/TenantAccessContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from "react";
 import { useAuth } from "@/features/authentication/context/AuthContext";
 import { getTenantProperties, type TenantProperty } from "@/api/tenants/tenantApi";
 
@@ -6,26 +6,38 @@ interface TenantAccessContextType {
 	hasTenantRecord: boolean;
 	tenantProperties: TenantProperty[];
 	loading: boolean;
+	error: string | null;
+	retry: () => void;
 }
 
 const TenantAccessContext = createContext<TenantAccessContextType>({
 	hasTenantRecord: false,
 	tenantProperties: [],
 	loading: true,
+	error: null,
+	retry: () => {},
 });
 
 export function TenantAccessProvider({ children }: { children: ReactNode }) {
 	const { user } = useAuth();
 	const [tenantProperties, setTenantProperties] = useState<TenantProperty[]>([]);
-	const [loading, setLoading] = useState(true);
+	const [loading, setLoading] = useState(Boolean(user?.id?.trim()));
+	const [error, setError] = useState<string | null>(null);
+	const [attempt, setAttempt] = useState(0);
+	const retry = useCallback(() => {
+		setLoading(true);
+		setError(null);
+		setAttempt((value) => value + 1);
+	}, []);
 
 	// Reset state synchronously during render when user changes
 	const [prevUserId, setPrevUserId] = useState(user?.id);
 	if (prevUserId !== user?.id) {
 		setPrevUserId(user?.id);
+		if (error) setError(null);
+		if (tenantProperties.length > 0) setTenantProperties([]);
 		const id = user?.id?.trim() ?? "";
 		if (!id) {
-			if (tenantProperties.length > 0) setTenantProperties([]);
 			if (loading) setLoading(false);
 		} else {
 			if (!loading) setLoading(true);
@@ -42,7 +54,10 @@ export function TenantAccessProvider({ children }: { children: ReactNode }) {
 				if (!cancelled) setTenantProperties(props);
 			})
 			.catch(() => {
-				if (!cancelled) setTenantProperties([]);
+				if (!cancelled) {
+					setTenantProperties([]);
+					setError("Unable to check tenant access. Please try again.");
+				}
 			})
 			.finally(() => {
 				if (!cancelled) setLoading(false);
@@ -51,12 +66,14 @@ export function TenantAccessProvider({ children }: { children: ReactNode }) {
 		return () => {
 			cancelled = true;
 		};
-	}, [user?.id]);
+	}, [user?.id, attempt]);
 
 	const hasTenantRecord = tenantProperties.length > 0;
 
 	return (
-		<TenantAccessContext.Provider value={{ hasTenantRecord, tenantProperties, loading }}>
+		<TenantAccessContext.Provider
+			value={{ hasTenantRecord, tenantProperties, loading, error, retry }}
+		>
 			{children}
 		</TenantAccessContext.Provider>
 	);

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/forms/auth-form.tsx

@@ -72,10 +72,21 @@ export function AuthForm({
 
 				<form
 					id={id}
-					onSubmit={(e) => {
+					onSubmit={async (e) => {
 						e.preventDefault();
 						e.stopPropagation();
-						form.handleSubmit();
+						const formElement = e.currentTarget;
+						const previousFocus = document.activeElement;
+						await form.handleSubmit();
+						if (!form.state.isValid) {
+							requestAnimationFrame(() => {
+								if (formElement.isConnected && document.activeElement === previousFocus) {
+									formElement
+										.querySelector<HTMLElement>('[aria-invalid="true"]:not(:disabled)')
+										?.focus();
+								}
+							});
+						}
 					}}
 					{...props}
 				>

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/hooks/form.tsx

@@ -1,5 +1,5 @@
 import { useId } from "react";
-import { createFormHookContexts, createFormHook } from "@tanstack/react-form";
+import { createFormHookContexts, createFormHook, useStore } from "@tanstack/react-form";
 import {
 	Field,
 	FieldDescription,
@@ -40,7 +40,10 @@ function TextField({
 	const id = providedId ?? generatedId;
 	const descriptionId = `${id}-description`;
 	const errorId = `${id}-error`;
-	const isInvalid = field.state.meta.isBlurred && field.state.meta.errors.length > 0;
+	// Submitted fields can be invalid before their first blur.
+	const submissionAttempts = useStore(field.form.store, (state) => state.submissionAttempts);
+	const isInvalid =
+		(field.state.meta.isBlurred || submissionAttempts > 0) && field.state.meta.errors.length > 0;
 
 	// Deduplicate errors by message
 	const errors = field.state.meta.errors;
@@ -64,7 +67,13 @@ function TextField({
 				aria-describedby={cn(description && descriptionId, isInvalid && errorId)}
 				{...props}
 			/>
-			{isInvalid && uniqueErrors.length > 0 && <FieldError id={errorId} errors={uniqueErrors} />}
+			{isInvalid && uniqueErrors.length > 0 && (
+				<FieldError
+					id={errorId}
+					errors={uniqueErrors}
+					role={submissionAttempts > 0 ? undefined : "alert"}
+				/>
+			)}
 		</Field>
 	);
 }