@prosopo/procaptcha-common 2.11.21 → 2.11.23

package/dist/reactComponents/Reload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Reload.d.ts","sourceRoot":"","sources":["../../src/reactComponents/Reload.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAE9E,UAAU,iBAAkB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACrB;AAaD,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAiE9C,CAAC"}
+{"version":3,"file":"Reload.d.ts","sourceRoot":"","sources":["../../src/reactComponents/Reload.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAE9E,UAAU,iBAAkB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACrB;AAaD,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAoE9C,CAAC"}

package/dist/reactComponents/Reload.js

@@ -4,17 +4,17 @@ import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/reactComponents/Reload.tsx
 var buttonStyleBase = {
 	border: "none",
-	paddingTop: "6px",
-	paddingBottom: "6px",
+	padding: "8px",
 	cursor: "pointer",
-	height: "39px",
-	width: "39px",
+	height: "40px",
+	width: "40px",
 	borderRadius: "50%",
 	display: "flex"
 };
 var ReloadButton = ({ themeColor, onReload }) => {
 	const theme = useMemo(() => themeColor === "light" ? lightTheme : darkTheme, [themeColor]);
 	const [hover, setHover] = useState(false);
+	const [focusVisible, setFocusVisible] = useState(false);
 	return /* @__PURE__ */ jsx("button", {
 		className: "reload-button",
 		"aria-label": "Reload",
@@ -22,27 +22,33 @@ var ReloadButton = ({ themeColor, onReload }) => {
 		style: useMemo(() => {
 			return {
 				...buttonStyleBase,
-				backgroundColor: theme.palette.background.default,
-				color: hover ? theme.palette.primary.contrastText : theme.palette.background.contrastText,
-				border: `1px solid ${theme.palette.grey[500]}`,
-				borderRadius: "50%",
-				transition: "background-color 0.3s",
-				boxShadow: `0px 1px 3px 0px ${theme.palette.grey[500]}`,
+				...focusVisible ? {
+					outline: `3px solid ${theme.palette.primary.main}`,
+					outlineOffset: "2px"
+				} : {},
+				backgroundColor: hover ? theme.palette.primaryContainer.hover : theme.palette.primaryContainer.main,
+				color: theme.palette.primaryContainer.contrastText,
+				transition: "background-color 0.25s",
 				justifyContent: "center",
 				alignItems: "center",
-				margin: "0 auto",
-				backgroundColor: hover ? theme.palette.grey[700] : theme.palette.background.default
+				margin: "0 auto"
 			};
-		}, [hover, theme]),
+		}, [
+			hover,
+			theme,
+			focusVisible
+		]),
 		onMouseEnter: () => setHover(true),
 		onMouseLeave: () => setHover(false),
+		onFocus: (e) => setFocusVisible(e.target.matches(":focus-visible")),
+		onBlur: () => setFocusVisible(false),
 		onClick: (e) => {
 			e.preventDefault();
 			onReload();
 		},
 		children: /* @__PURE__ */ jsxs("svg", {
-			width: "16px",
-			height: "16px",
+			width: "24px",
+			height: "24px",
 			viewBox: "0 0 16 16",
 			version: "1.1",
 			xmlns: "http://www.w3.org/2000/svg",
@@ -50,7 +56,7 @@ var ReloadButton = ({ themeColor, onReload }) => {
 			style: { display: "flex" },
 			children: [/* @__PURE__ */ jsx("title", { children: "reload" }), /* @__PURE__ */ jsx("path", {
 				shapeRendering: "optimizeQuality",
-				fill: hover ? theme.palette.primary.contrastText : theme.palette.grey[700],
+				fill: theme.palette.primaryContainer.contrastText,
 				transform: "scale(0.0416)",
 				d: "M234.666667,149.333333 L234.666667,106.666667 L314.564847,106.664112 C287.579138,67.9778918 242.745446,42.6666667 192,42.6666667 C109.525477,42.6666667 42.6666667,109.525477 42.6666667,192 C42.6666667,274.474523 109.525477,341.333333 192,341.333333 C268.201293,341.333333 331.072074,284.258623 340.195444,210.526102 L382.537159,215.817985 C370.807686,310.617565 289.973536,384 192,384 C85.961328,384 1.42108547e-14,298.038672 1.42108547e-14,192 C1.42108547e-14,85.961328 85.961328,1.42108547e-14 192,1.42108547e-14 C252.316171,1.42108547e-14 306.136355,27.8126321 341.335366,71.3127128 L341.333333,1.42108547e-14 L384,1.42108547e-14 L384,149.333333 L234.666667,149.333333 Z"
 			})]

package/dist/reactComponents/Reload.js.map

@@ -1 +1 @@
-{"version":3,"file":"Reload.js","sourceRoot":"","sources":["../../src/reactComponents/Reload.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Reload.js","sourceRoot":"","sources":["../../src/reactComponents/Reload.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAsC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQ9E,MAAM,eAAe,GAAG;IACvB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,MAAM;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EACnD,UAAU,EACV,QAAQ,GACW,EAAE,EAAE;IACvB,MAAM,KAAK,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,EACvD,CAAC,UAAU,CAAC,CACZ,CAAC;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAG1C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,OAAO;YACN,GAAG,eAAe;YAClB,GAAG,CAAC,YAAY;gBACf,CAAC,CAAC;oBAEA,OAAO,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE;oBAClD,aAAa,EAAE,KAAK;iBACpB;gBACF,CAAC,CAAC,EAAE,CAAC;YAGN,eAAe,EAAE,KAAK;gBACrB,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK;gBACtC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI;YACtC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,YAAY;YAClD,UAAU,EAAE,wBAAwB;YACpC,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,QAAQ;SAChB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IACjC,OAAO,CACN,iBACC,SAAS,EAAC,eAAe,gBACd,QAAQ,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,WAAW,EAClB,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAClC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EACnC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,EACnE,MAAM,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,EACpC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,QAAQ,EAAE,CAAC;QACZ,CAAC,YAED,eACC,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,OAAO,EAAC,KAAK,EACb,KAAK,EAAC,4BAA4B,EAClC,UAAU,EAAC,8BAA8B,EACzC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAE1B,qCAAqB,EACrB,eACC,cAAc,EAAC,iBAAiB,EAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,YAAY,EACjD,SAAS,EAAE,eAAe,EAC1B,CAAC,EAAC,mqBAAmqB,GACpqB,IACG,GACE,CACT,CAAC;AACH,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prosopo/procaptcha-common",
-	"version": "2.11.21",
+	"version": "2.11.23",
 	"author": "PROSOPO LIMITED <info@prosopo.io>",
 	"license": "Apache-2.0",
 	"main": "dist/index.js",
@@ -34,10 +34,10 @@
 	"dependencies": {
 		"@emotion/react": "11.11.1",
 		"@emotion/styled": "11.11.0",
-		"@prosopo/account": "2.8.67",
-		"@prosopo/load-balancer": "2.10.18",
-		"@prosopo/types": "5.0.1",
-		"@prosopo/widget-skeleton": "2.8.5",
+		"@prosopo/account": "2.8.69",
+		"@prosopo/load-balancer": "2.10.20",
+		"@prosopo/types": "5.0.3",
+		"@prosopo/widget-skeleton": "2.8.6",
 		"react": "18.3.1",
 		"react-dom": "18.3.1"
 	},

package/src/events/trust.ts

@@ -0,0 +1,46 @@
+// Copyright 2021-2026 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// Replaced at bundle time by vite's `define` — see the `define` block in
+// packages/procaptcha-bundle/vite.config.ts. Typed as possibly undefined
+// because a build that doesn't define it leaves the identifier undeclared,
+// which is why the read below is guarded by `typeof`.
+declare const __PROSOPO_ALLOW_UNTRUSTED_EVENTS__: boolean | undefined;
+
+export interface TrustableEvent {
+	readonly isTrusted: boolean;
+}
+
+/**
+ * Whether an event came from a real user rather than a script.
+ *
+ * The widget acts only on trusted input: a synthetic event is precisely how a
+ * bot drives a page, so honouring one would hand over the captcha for free.
+ *
+ * The single exception is the firefox cypress leg. cypress can only dispatch
+ * trusted input through the chrome devtools protocol, which it exposes for
+ * chromium browsers only, so on firefox every spec clicks synthetically.
+ * Building with PROSOPO_ALLOW_UNTRUSTED_EVENTS=1 opens the gate for that leg.
+ * Production builds pin the constant to false and the branch folds away, so
+ * the allowance cannot reach a shipped bundle.
+ */
+export function isEventTrusted(event: TrustableEvent): boolean {
+	if (event.isTrusted) {
+		return true;
+	}
+	return (
+		typeof __PROSOPO_ALLOW_UNTRUSTED_EVENTS__ !== "undefined" &&
+		__PROSOPO_ALLOW_UNTRUSTED_EVENTS__
+	);
+}

package/src/index.ts

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 export * from "./providers.js";
+export * from "./events/trust.js";
 export * from "./state/builder.js";
 export * from "./callbacks/defaultCallbacks.js";
 export * from "./callbacks/defaultEvents.js";

package/src/reactComponents/Checkbox.tsx

@@ -17,6 +17,7 @@ import styled from "@emotion/styled";
 import {
 	type Theme,
 	WIDGET_CHECKBOX_SPINNER_CSS_CLASS,
+	withAlpha,
 } from "@prosopo/widget-skeleton";
 import {
 	type ButtonHTMLAttributes,
@@ -25,6 +26,7 @@ import {
 	useMemo,
 	useState,
 } from "react";
+import { isEventTrusted } from "../events/trust.js";
 
 interface CheckboxProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	theme: Theme;
@@ -45,20 +47,34 @@ const checkboxBefore = css`{
     }
 }`;
 
+// In forced-colors mode (Windows High Contrast) backgrounds are overridden, so
+// the custom-painted tick can disappear — fall back to the native control,
+// which the OS draws in system colors. !important beats the inline styles.
+const checkboxForcedColors = css`
+	@media (forced-colors: active) {
+		appearance: auto !important;
+		background-image: none !important;
+	}
+`;
+
+// 28px container with a 2dp stroke, centred in a 58px touch target. Larger
+// than the 18dp M3 checkbox spec — kept at the original size deliberately, as
+// the widget needs a more prominent target than a form checkbox.
+const CHECKBOX_SIZE = "28px";
+
 const baseStyle: CSSProperties = {
-	width: "28px",
-	height: "28px",
-	minWidth: "14px",
-	minHeight: "14px",
+	width: CHECKBOX_SIZE,
+	height: CHECKBOX_SIZE,
+	minWidth: CHECKBOX_SIZE,
+	minHeight: CHECKBOX_SIZE,
 	top: "auto",
 	left: "auto",
 	opacity: "1",
-	borderRadius: "12.5%",
 	appearance: "none",
 	cursor: "pointer",
 	margin: "0",
 	borderStyle: "solid",
-	borderWidth: "1px",
+	borderWidth: "2px",
 };
 
 const ID_LETTERS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
@@ -86,14 +102,24 @@ export const Checkbox: FC<CheckboxProps> = ({
 	error,
 	loading,
 }: CheckboxProps) => {
-	const checkboxStyleBase: CSSProperties = {
-		...baseStyle,
-		border: `1px solid ${theme.palette.background.contrastText}`,
-	};
 	const [hover, setHover] = useState(false);
 
+	// M3 focus indicator: a 3dp outline offset by 2dp, drawn only for keyboard
+	// focus. The control previously had no focus affordance at all.
+	const checkboxFocus = useMemo(
+		() => css`
+			&:focus-visible {
+				outline: 3px solid ${theme.palette.primary.main};
+				outline-offset: 2px;
+			}
+		`,
+		[theme],
+	);
+
 	const ResponsiveLabel = styled.label<ResponsiveLabelProps>`
-		color: ${theme.palette.background.contrastText};
+		/* The label sits on the widget surface, so it takes onSurface — not the
+		   dialog container's on-colour. */
+		color: ${theme.palette.onSurface};
 		position: relative;
 		display: flex !important;
 		cursor: pointer;
@@ -117,18 +143,37 @@ export const Checkbox: FC<CheckboxProps> = ({
 		}
 	`;
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO fix
 	const checkboxStyle: CSSProperties = useMemo(() => {
+		// White (token) tick painted directly onto the box so the checked state is
+		// identical in light and dark mode — the native control can't be themed.
+		const tickColor = encodeURIComponent(theme.palette.checkbox.tick);
+		const checkImage = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='${tickColor}' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E")`;
+		// M3 hover feedback is a state layer — the on-colour at 8% expressed as a
+		// spread ring around the container — not a change of stroke colour.
+		const stateLayerColor = checked
+			? theme.palette.checkbox.fill
+			: theme.palette.onSurface;
 		return {
-			...checkboxStyleBase,
-			borderColor: hover
-				? theme.palette.background.contrastText
-				: theme.palette.border,
-			appearance: checked ? "auto" : "none",
-			flex: 1,
+			...baseStyle,
+			// 15px each side around a 28px box gives a 58px touch target.
 			margin: "15px",
-			minWidth: "28px",
-			minHeight: "28px",
+			borderRadius: theme.shape.checkbox,
+			borderColor: checked
+				? theme.palette.checkbox.fill
+				: theme.palette.checkbox.border,
+			backgroundColor: checked
+				? theme.palette.checkbox.fill
+				: theme.palette.surface,
+			backgroundImage: checked ? checkImage : "none",
+			backgroundRepeat: "no-repeat",
+			backgroundPosition: "center",
+			// Tick inset within the 28px container.
+			backgroundSize: "20px 20px",
+			boxShadow: hover
+				? `0 0 0 10px ${withAlpha(stateLayerColor, theme.stateLayer.hover)}`
+				: "none",
+			transition:
+				"background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease",
 		};
 	}, [hover, theme, checked]);
 	const id = generateRandomId();
@@ -152,12 +197,12 @@ export const Checkbox: FC<CheckboxProps> = ({
 					id={id}
 					onMouseEnter={() => setHover(true)}
 					onMouseLeave={() => setHover(false)}
-					css={checkboxBefore}
+					css={[checkboxBefore, checkboxForcedColors, checkboxFocus]}
 					type={"checkbox"}
 					aria-live={"assertive"}
 					aria-label={labelText}
 					onKeyDown={(e) => {
-						if (!e.isTrusted) {
+						if (!isEventTrusted(e)) {
 							return;
 						}
 						if (e.key === "Enter") {
@@ -168,7 +213,7 @@ export const Checkbox: FC<CheckboxProps> = ({
 						}
 					}}
 					onChange={(e) => {
-						if (!e.isTrusted) {
+						if (!isEventTrusted(e)) {
 							return;
 						}
 						e.preventDefault();

package/src/reactComponents/Reload.tsx

@@ -20,13 +20,13 @@ interface ReloadButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	onReload: () => void;
 }
 
+// M3 icon button: a 40dp circular container holding a 24dp icon.
 const buttonStyleBase = {
 	border: "none",
-	paddingTop: "6px",
-	paddingBottom: "6px",
+	padding: "8px",
 	cursor: "pointer",
-	height: "39px",
-	width: "39px",
+	height: "40px",
+	width: "40px",
 	borderRadius: "50%",
 	display: "flex",
 };
@@ -40,28 +40,31 @@ export const ReloadButton: FC<ReloadButtonProps> = ({
 		[themeColor],
 	);
 	const [hover, setHover] = useState(false);
+	// M3 requires a visible focus indicator; matched imperatively so the ring is
+	// keyboard-only.
+	const [focusVisible, setFocusVisible] = useState(false);
 	const buttonStyle = useMemo(() => {
-		const baseStyle = {
+		return {
 			...buttonStyleBase,
-			backgroundColor: theme.palette.background.default,
-			color: hover
-				? theme.palette.primary.contrastText
-				: theme.palette.background.contrastText,
-			border: `1px solid ${theme.palette.grey[500]}`,
-			borderRadius: "50%",
-			transition: "background-color 0.3s",
-			boxShadow: `0px 1px 3px 0px ${theme.palette.grey[500]}`,
+			...(focusVisible
+				? {
+						// M3 focus indicator: 3dp outline, 2dp offset.
+						outline: `3px solid ${theme.palette.primary.main}`,
+						outlineOffset: "2px",
+					}
+				: {}),
+			// Material 3 tonal icon button; hover swaps to the state-layer fill so
+			// the feedback is visible in dark mode too (a brightness filter is not).
+			backgroundColor: hover
+				? theme.palette.primaryContainer.hover
+				: theme.palette.primaryContainer.main,
+			color: theme.palette.primaryContainer.contrastText,
+			transition: "background-color 0.25s",
 			justifyContent: "center",
 			alignItems: "center",
 			margin: "0 auto",
 		};
-		return {
-			...baseStyle,
-			backgroundColor: hover
-				? theme.palette.grey[700]
-				: theme.palette.background.default,
-		};
-	}, [hover, theme]);
+	}, [hover, theme, focusVisible]);
 	return (
 		<button
 			className="reload-button"
@@ -70,14 +73,16 @@ export const ReloadButton: FC<ReloadButtonProps> = ({
 			style={buttonStyle}
 			onMouseEnter={() => setHover(true)}
 			onMouseLeave={() => setHover(false)}
+			onFocus={(e) => setFocusVisible(e.target.matches(":focus-visible"))}
+			onBlur={() => setFocusVisible(false)}
 			onClick={(e) => {
 				e.preventDefault();
 				onReload();
 			}}
 		>
 			<svg
-				width="16px"
-				height="16px"
+				width="24px"
+				height="24px"
 				viewBox="0 0 16 16"
 				version="1.1"
 				xmlns="http://www.w3.org/2000/svg"
@@ -87,9 +92,7 @@ export const ReloadButton: FC<ReloadButtonProps> = ({
 				<title>reload</title>
 				<path
 					shapeRendering="optimizeQuality"
-					fill={
-						hover ? theme.palette.primary.contrastText : theme.palette.grey[700]
-					}
+					fill={theme.palette.primaryContainer.contrastText}
 					transform={"scale(0.0416)"}
 					d="M234.666667,149.333333 L234.666667,106.666667 L314.564847,106.664112 C287.579138,67.9778918 242.745446,42.6666667 192,42.6666667 C109.525477,42.6666667 42.6666667,109.525477 42.6666667,192 C42.6666667,274.474523 109.525477,341.333333 192,341.333333 C268.201293,341.333333 331.072074,284.258623 340.195444,210.526102 L382.537159,215.817985 C370.807686,310.617565 289.973536,384 192,384 C85.961328,384 1.42108547e-14,298.038672 1.42108547e-14,192 C1.42108547e-14,85.961328 85.961328,1.42108547e-14 192,1.42108547e-14 C252.316171,1.42108547e-14 306.136355,27.8126321 341.335366,71.3127128 L341.333333,1.42108547e-14 L384,1.42108547e-14 L384,149.333333 L234.666667,149.333333 Z"
 				/>