From c66995179a109d58b8bf0ea5c1c4b30739f02dcc Mon Sep 17 00:00:00 2001
From: spwoodcock <sam.woodcock@protonmail.com>
Date: Mon, 10 Mar 2025 09:55:44 +0000
Subject: [PATCH 1/8] feat(FormGroup): make underlying FormPanel toggleable
 prop user configurable

---
 .../web-forms/src/components/FormGroup.vue    |  6 +++--
 .../web-forms/src/components/FormPanel.vue    | 26 +++++++++++++++----
 .../web-forms/src/components/QuestionList.vue |  2 +-
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/web-forms/src/components/FormGroup.vue b/packages/web-forms/src/components/FormGroup.vue
index 968ae5592..3537c1885 100644
--- a/packages/web-forms/src/components/FormGroup.vue
+++ b/packages/web-forms/src/components/FormGroup.vue
@@ -4,7 +4,9 @@ import { computed } from 'vue';
 import FormPanel from './FormPanel.vue';
 import QuestionList from './QuestionList.vue';
 
-const props = defineProps<{ node: GroupNode }>();
+const props = withDefaults(defineProps<{ node: GroupNode, toggleable?: boolean }>(), {
+	toggleable: false,
+});
 
 const classes = ['group'];
 
@@ -18,7 +20,7 @@ const tableLayout = computed(() => {
 </script>
 
 <template>
-	<FormPanel :title="node.currentState.label?.asString" :no-ui="!node.currentState.label" :class="classes">
+	<FormPanel :title="node.currentState.label?.asString" :no-ui="!node.currentState.label" :toggleable="props.toggleable" :class="classes">
 		<div :class="{ 'table-layout': tableLayout, 'gap-2': !tableLayout, 'flex': true, 'flex-column': true }">
 			<QuestionList :nodes="node.currentState.children" />
 		</div>
diff --git a/packages/web-forms/src/components/FormPanel.vue b/packages/web-forms/src/components/FormPanel.vue
index f673a5e04..5396b5639 100644
--- a/packages/web-forms/src/components/FormPanel.vue
+++ b/packages/web-forms/src/components/FormPanel.vue
@@ -12,6 +12,7 @@ export interface PanelProps {
 	class?: string[] | string;
 	labelIcon?: string;
 	labelNumber?: number;
+    toggleable?: boolean;
 }
 
 const props = withDefaults(defineProps<PanelProps>(), {
@@ -21,6 +22,7 @@ const props = withDefaults(defineProps<PanelProps>(), {
 	class: undefined,
 	labelIcon: undefined,
 	labelNumber: undefined,
+    toggleable: false,
 });
 
 const panelClass = computed(() => [
@@ -31,7 +33,9 @@ const panelClass = computed(() => [
 const panelState = ref(false);
 
 const toggle = () => {
-	panelState.value = !panelState.value;
+    if (props.toggleable) {
+		panelState.value = !panelState.value;
+    }
 };
 
 const menu = ref<Menu & MenuState>();
@@ -40,10 +44,11 @@ const toggleMenu = (event: Event) => {
 	menu.value?.toggle(event);
 };
 </script>
+
 <template>
-	<Panel v-if="!noUi" :class="panelClass" :toggleable="true" :collapsed="panelState">
+    <Panel v-if="!noUi" :class="[panelClass, { 'toggleable-enabled': toggleable }]" :toggleable="toggleable" :collapsed="toggleable ? panelState : false">
 		<template #header>
-			<div class="panel-title" role="button" @click="toggle">
+            <div v-if="toggleable" class="panel-title" role="button" @click="toggle">
 				<h2>
 					<span class="chevron" :class="panelState ? 'icon-keyboard_arrow_down' : 'icon-keyboard_arrow_up'" />
 					<span v-if="labelNumber" class="label-number">{{ labelNumber }}</span>
@@ -51,6 +56,13 @@ const toggleMenu = (event: Event) => {
 					<span v-if="labelIcon" class="ml-2" :class="labelIcon" />
 				</h2>
 			</div>
+            <div v-else>
+                <h2>
+                    <span v-if="labelNumber" class="label-number">{{ labelNumber }}</span>
+                    <span>{{ title }}</span>
+                    <span v-if="labelIcon" class="ml-2" :class="labelIcon" />
+                </h2>
+            </div>
 		</template>
 		<template v-if="menuItems && menuItems.length > 0" #icons>
 			<Button severity="secondary" rounded class="btn-context" :class="{ 'p-focus': menu?.overlayVisible }" icon="icon-more_vert" aria-label="More" @click="toggleMenu" />
@@ -129,9 +141,8 @@ h2 {
 	}
 
 	:deep(.p-panel-content) {
-		border-left: 2px solid var(--gray-200);
+		box-shadow: none;
 		margin-left: 10px;
-		border-radius: 0;
 		padding: 0 0 0 1.5rem;
 	}
 
@@ -140,6 +151,11 @@ h2 {
 	}
 }
 
+.toggleable-enabled :deep(.p-panel-content) {
+	border-left: 2px solid var(--gray-200);
+	border-radius: 0;
+}
+
 .content-wrapper {
 	display: flex;
 	flex-direction: column;
diff --git a/packages/web-forms/src/components/QuestionList.vue b/packages/web-forms/src/components/QuestionList.vue
index f1f686aee..053313da5 100644
--- a/packages/web-forms/src/components/QuestionList.vue
+++ b/packages/web-forms/src/components/QuestionList.vue
@@ -45,7 +45,7 @@ const isControlNode = (node: NonStructuralNode): node is ControlNode => {
 	<template v-for="node in nodes" :key="node.nodeId">
 		<template v-if="node.currentState.relevant">
 			<!-- Render group nodes -->
-			<FormGroup v-if="isGroupNode(node)" :node="node" />
+			<FormGroup v-if="isGroupNode(node)" :node="node" toggleable />
 
 			<!-- Render repeat nodes -->
 			<RepeatRange v-else-if="isRepeatRangeNode(node)" :node="node" />

From 5d68959b36b3917aa65523bf03c9d802856430f9 Mon Sep 17 00:00:00 2001
From: spwoodcock <sam.woodcock@protonmail.com>
Date: Mon, 10 Mar 2025 09:56:41 +0000
Subject: [PATCH 2/8] feat(QuestionStepper): add stepper component enabled by
 OdkWebForm stepperLayout prop

---
 .../web-forms/src/components/OdkWebForm.vue   |  16 +-
 .../src/components/QuestionStepper.vue        | 155 ++++++++++++++++++
 2 files changed, 169 insertions(+), 2 deletions(-)
 create mode 100644 packages/web-forms/src/components/QuestionStepper.vue

diff --git a/packages/web-forms/src/components/OdkWebForm.vue b/packages/web-forms/src/components/OdkWebForm.vue
index fa2b23a09..5d75b589b 100644
--- a/packages/web-forms/src/components/OdkWebForm.vue
+++ b/packages/web-forms/src/components/OdkWebForm.vue
@@ -22,6 +22,7 @@ import { computed, getCurrentInstance, provide, ref, watchEffect } from 'vue';
 import FormLoadFailureDialog from './Form/FormLoadFailureDialog.vue';
 import FormHeader from './FormHeader.vue';
 import QuestionList from './QuestionList.vue';
+import QuestionStepper from './QuestionStepper.vue';
 
 const webFormsVersion = __WEB_FORMS_VERSION__;
 
@@ -30,6 +31,13 @@ export interface OdkWebFormsProps {
 	readonly fetchFormAttachment: FetchFormAttachment;
 	readonly missingResourceBehavior?: MissingResourceBehavior;
 
+	/**
+	 * Note: by default all questions will be displayed in a single list,
+	 * with collapsable groups. This param changes to a stepper layout
+	 * closer to Collect.
+	 */
+	stepperLayout?: boolean;
+
 	/**
 	 * Note: this parameter must be set when subscribing to the
 	 * {@link OdkWebFormEmits.submitChunked | submitChunked} event.
@@ -43,7 +51,9 @@ export interface OdkWebFormsProps {
 	readonly editInstance?: EditInstanceOptions;
 }
 
-const props = defineProps<OdkWebFormsProps>();
+const props = withDefaults(defineProps<OdkWebFormsProps>(), {
+	stepperLayout: false,
+});
 
 const hostSubmissionResultCallbackFactory = (
 	currentState: FormStateSuccessResult
@@ -140,6 +150,7 @@ const emit = defineEmits<OdkWebFormEmits>();
 
 const state = initializeFormState();
 const submitPressed = ref(false);
+const showSendButton = ref(props.stepperLayout ? false : true);
 
 const init = async () => {
 	state.value = await loadFormState(props.formXml, {
@@ -230,12 +241,13 @@ watchEffect(() => {
 					<div class="form-questions">
 						<div class="flex flex-column gap-2">
 							<QuestionList :nodes="state.root.currentState.children" />
+							<QuestionStepper v-if="stepperLayout" :nodes="state.root.currentState.children" @endOfForm="showSendButton=true" />
 						</div>
 					</div>
 				</template>
 			</Card>
 
-			<div class="footer flex justify-content-end flex-wrap gap-3">
+			<div v-if="showSendButton" class="footer flex justify-content-end flex-wrap gap-3">
 				<Button label="Send" rounded @click="handleSubmit(state)" />
 			</div>
 		</div>
diff --git a/packages/web-forms/src/components/QuestionStepper.vue b/packages/web-forms/src/components/QuestionStepper.vue
new file mode 100644
index 000000000..03a0bab55
--- /dev/null
+++ b/packages/web-forms/src/components/QuestionStepper.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref, computed, watch, provide } from 'vue';
+import type { ComponentPublicInstance } from 'vue';
+import type {
+	AnyControlNode,
+	AnyUnsupportedControlNode,
+	GeneralChildNode,
+	GroupNode,
+	RepeatRangeNode,
+} from '@getodk/xforms-engine';
+import FormGroup from './FormGroup.vue';
+import FormQuestion from './FormQuestion.vue';
+import RepeatRange from './RepeatRange.vue';
+import ExpectModelNode from './dev-only/ExpectModelNode.vue';
+import Steps from 'primevue/steps';
+import ProgressBar from 'primevue/progressbar';
+import Button from 'primevue/button';
+
+const props = defineProps<{ nodes: readonly GeneralChildNode[] }>();
+const emit = defineEmits(['endOfForm']);
+
+const isGroupNode = (node: GeneralChildNode): node is GroupNode => {
+	return node.nodeType === 'group';
+};
+
+type NonGroupNode = Exclude<GeneralChildNode, GroupNode>;
+
+const isRepeatRangeNode = (node: NonGroupNode): node is RepeatRangeNode => {
+	return (
+		node.nodeType === 'repeat-range:controlled' || node.nodeType === 'repeat-range:uncontrolled'
+	);
+};
+
+type NonStructuralNode = Exclude<NonGroupNode, RepeatRangeNode>;
+
+type ControlNode = AnyControlNode | AnyUnsupportedControlNode;
+
+const isControlNode = (node: NonStructuralNode): node is ControlNode => {
+	const { nodeType } = node;
+
+	return (
+		nodeType === 'input' ||
+		nodeType === 'note' ||
+		nodeType === 'select' ||
+		nodeType === 'trigger' ||
+		nodeType === 'range' ||
+		nodeType === 'rank' ||
+		nodeType === 'upload'
+	);
+};
+
+// Compute step items (only groups, repeat ranges, and control nodes should be steps)
+const relevantNodes = computed(() =>
+	props.nodes.filter(node => node.currentState.relevant)
+);
+const steps = computed(() =>
+	relevantNodes.value
+		.filter(node => isGroupNode(node) || isRepeatRangeNode(node) || isControlNode(node))
+);
+
+// Handle stepper state
+const currentStep = ref(0);
+const isCurrentStepValidated = ref(true);
+const submitPressed = ref(false);
+provide('submitPressed', submitPressed);
+
+const validateStep = () => {
+    // Manually trigger submitPressed to display error messages
+	submitPressed.value = true;
+
+    const currentNode = steps.value[currentStep.value];
+    if (isGroupNode(currentNode) && currentNode.validationState.violations.length > 0) {
+        isCurrentStepValidated.value = false;
+    } else if (currentNode.validationState.violation) {
+        isCurrentStepValidated.value = false;
+    } else {
+        isCurrentStepValidated.value = true;
+    }
+}
+const nextStep = () => {
+    validateStep();
+
+	if (isCurrentStepValidated.value && currentStep.value < steps.value.length - 1) {
+        // Reset validation triggered later in the form
+	    submitPressed.value = false;
+        // Also reset validation state of current node
+        isCurrentStepValidated.value = true;
+		currentStep.value++;
+	}
+};
+const prevStep = () => {
+	if (currentStep.value > 0) {
+		currentStep.value--;
+	}
+};
+const isLastStep = computed(() => currentStep.value === steps.value.length - 1);
+watch(isLastStep, (newValue) => {
+    emit('endOfForm', newValue);
+});
+
+// // Calculate stepper progress
+// const totalNodes = computed(() => 
+// 	Math.max(relevantNodes.value.length - 1, 1) // Ensure at least 1 to avoid division by zero
+// );
+// 
+// const currentNodeIndex = computed(() => {
+//    const activeNode = steps.value[currentStep.value];
+//    if (!activeNode) return 0;
+//
+//    // Find the current node's position among relevant nodes
+//    const index = relevantNodes.value.findIndex(node => node.nodeId === activeNode.nodeId);
+//    return Math.max(index, 0); // Ensure it starts at 0
+// });
+//
+// const progress = computed(() => {
+// 	if (totalNodes.value === 1) return 100; // If there's only one relevant node, treat it as complete
+// 	return (currentNodeIndex.value / totalNodes.value) * 100;
+// });
+</script>
+
+<template>
+    <!-- TODO -->
+    <!-- <ProgressBar :value="progress"></ProgressBar> -->
+
+	<div class="stepper-container">
+		<div v-for="(step, index) in steps" :key="step.nodeId">
+			<template v-if="index === currentStep">
+				<!-- Render group nodes -->
+				<FormGroup v-if="isGroupNode(step)" :node="step" />
+
+				<!-- Render repeat nodes -->
+				<RepeatRange v-else-if="isRepeatRangeNode(step)" :node="step" />
+
+				<!-- Render individual questions -->
+				<FormQuestion v-else-if="isControlNode(step)" :question="step" />
+
+				<ExpectModelNode v-else :node="step" />
+			</template>
+		</div>
+
+		<div class="navigation-buttons">
+			<Button label="Previous" @click="prevStep" :disabled="currentStep === 0" />
+			<Button label="Next" @click="nextStep" :disabled="isCurrentStepValidated && currentStep === steps.length - 1" />
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.navigation-buttons {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	margin-top: 1rem;
+}
+</style>

From 10e05224d3f34bd45f3012a856eabefffc970191 Mon Sep 17 00:00:00 2001
From: spwoodcock <sam.woodcock@protonmail.com>
Date: Mon, 10 Mar 2025 13:29:44 +0000
Subject: [PATCH 3/8] feat(QuestionStepper): update stepper layout to be closer
 to ODK Collect

---
 .../web-forms/src/components/OdkWebForm.vue   |  7 +-
 .../src/components/QuestionStepper.vue        | 91 +++++++++++++------
 2 files changed, 69 insertions(+), 29 deletions(-)

diff --git a/packages/web-forms/src/components/OdkWebForm.vue b/packages/web-forms/src/components/OdkWebForm.vue
index 5d75b589b..575ad32b0 100644
--- a/packages/web-forms/src/components/OdkWebForm.vue
+++ b/packages/web-forms/src/components/OdkWebForm.vue
@@ -240,8 +240,9 @@ watchEffect(() => {
 				<template #content>
 					<div class="form-questions">
 						<div class="flex flex-column gap-2">
-							<QuestionList :nodes="state.root.currentState.children" />
-							<QuestionStepper v-if="stepperLayout" :nodes="state.root.currentState.children" @endOfForm="showSendButton=true" />
+							<QuestionList v-if="!stepperLayout" :nodes="state.root.currentState.children" />
+							<!-- Note that QuestionStepper has the 'Send' button integrated instead of using the button below -->
+							<QuestionStepper v-if="stepperLayout" :nodes="state.root.currentState.children" @sendFormFromStepper="handleSubmit()" />
 						</div>
 					</div>
 				</template>
@@ -252,7 +253,7 @@ watchEffect(() => {
 			</div>
 		</div>
 
-		<div class="powered-by-wrapper">
+		<div v-if="showSendButton" class="powered-by-wrapper">
 			<a class="anchor" href="https://getodk.org" target="_blank">
 				<span class="caption">Powered by</span>
 				<img
diff --git a/packages/web-forms/src/components/QuestionStepper.vue b/packages/web-forms/src/components/QuestionStepper.vue
index 03a0bab55..061f7ddbb 100644
--- a/packages/web-forms/src/components/QuestionStepper.vue
+++ b/packages/web-forms/src/components/QuestionStepper.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, provide } from 'vue';
+import { ref, computed, provide } from 'vue';
 import type { ComponentPublicInstance } from 'vue';
 import type {
 	AnyControlNode,
@@ -17,7 +17,7 @@ import ProgressBar from 'primevue/progressbar';
 import Button from 'primevue/button';
 
 const props = defineProps<{ nodes: readonly GeneralChildNode[] }>();
-const emit = defineEmits(['endOfForm']);
+const emit = defineEmits(['sendFormFromStepper']);
 
 const isGroupNode = (node: GeneralChildNode): node is GroupNode => {
 	return node.nodeType === 'group';
@@ -59,44 +59,47 @@ const steps = computed(() =>
 );
 
 // Handle stepper state
-const currentStep = ref(0);
-const isCurrentStepValidated = ref(true);
+const firstStep = 0;
+const finalStep = steps.value.length;
+const currentStep = ref(firstStep);
 const submitPressed = ref(false);
 provide('submitPressed', submitPressed);
 
-const validateStep = () => {
+const allFieldsValid = () => {
     // Manually trigger submitPressed to display error messages
 	submitPressed.value = true;
 
     const currentNode = steps.value[currentStep.value];
+
+    // Check group error array
     if (isGroupNode(currentNode) && currentNode.validationState.violations.length > 0) {
-        isCurrentStepValidated.value = false;
+        return false;
+
+    // Check question single error
     } else if (currentNode.validationState.violation) {
-        isCurrentStepValidated.value = false;
-    } else {
-        isCurrentStepValidated.value = true;
+        return false;
     }
+
+    return true;
 }
 const nextStep = () => {
-    validateStep();
+    if (!allFieldsValid()) {
+        // There was an error validating
+        return false;
+    }
 
-	if (isCurrentStepValidated.value && currentStep.value < steps.value.length - 1) {
+    // Do not increment further if at end of form
+	if (currentStep.value < steps.value.length - 1) {
         // Reset validation triggered later in the form
 	    submitPressed.value = false;
-        // Also reset validation state of current node
-        isCurrentStepValidated.value = true;
 		currentStep.value++;
 	}
 };
 const prevStep = () => {
-	if (currentStep.value > 0) {
+	if (currentStep.value > firstStep) {
 		currentStep.value--;
 	}
 };
-const isLastStep = computed(() => currentStep.value === steps.value.length - 1);
-watch(isLastStep, (newValue) => {
-    emit('endOfForm', newValue);
-});
 
 // // Calculate stepper progress
 // const totalNodes = computed(() => 
@@ -137,19 +140,55 @@ watch(isLastStep, (newValue) => {
 				<ExpectModelNode v-else :node="step" />
 			</template>
 		</div>
-
-		<div class="navigation-buttons">
-			<Button label="Previous" @click="prevStep" :disabled="currentStep === 0" />
-			<Button label="Next" @click="nextStep" :disabled="isCurrentStepValidated && currentStep === steps.length - 1" />
-		</div>
 	</div>
+
+    <div class="navigation-button-group">
+        <!-- If swapping to arrows: 🡨 🡪 -->
+        <Button v-if="currentStep > firstStep" class="navigation-button" label="Back" @click="prevStep" rounded outlined />
+        <Button v-if="currentStep === finalStep" class="navigation-button" label="Send" @click="allFieldsValid ? emit('sendFormFromStepper') : null" rounded />
+        <!-- Note the button ordering is important here as we use a last-child selector for styling -->
+        <Button v-if="currentStep < finalStep" class="navigation-button" label="Next" @click="nextStep" rounded outlined />
+    </div>
 </template>
 
 <style scoped lang="scss">
-.navigation-buttons {
+.stepper-container {
 	display: flex;
-	justify-content: space-between;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow-y: auto;
+	padding-bottom: 3rem;
+
+	:deep(.p-panel) {
+		box-shadow: none;
+	}
+}
+
+.navigation-button-group {
+	display: flex;
+	position: fixed;
+	bottom: 0;
+	left: 0;
 	width: 100%;
-	margin-top: 1rem;
+	background: white;
+	padding: 1rem;
+	justify-content: space-between;
+	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+}
+
+/* Ensure Next button is on the right when Back is hidden */
+.navigation-button-group .navigation-button:last-child {
+	margin-left: auto;
+}
+
+/* If only one button is visible, align it to the right */
+.navigation-button-group:has(.navigation-button:first-child:last-child) {
+	justify-content: flex-end;
+}
+
+.navigation-button {
+    padding-left: 3rem;
+    padding-right: 3rem;
+    font-size: 1rem;
 }
 </style>

From 87e4baa2892e7da4117147f0674106da846818fb Mon Sep 17 00:00:00 2001
From: spwoodcock <sam.woodcock@protonmail.com>
Date: Tue, 15 Apr 2025 15:47:14 +0100
Subject: [PATCH 4/8] fix(stepper): pass state to handleSubmit to match list
 view submit

---
 packages/web-forms/src/components/OdkWebForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-forms/src/components/OdkWebForm.vue b/packages/web-forms/src/components/OdkWebForm.vue
index 575ad32b0..a1d52c6da 100644
--- a/packages/web-forms/src/components/OdkWebForm.vue
+++ b/packages/web-forms/src/components/OdkWebForm.vue
@@ -242,7 +242,7 @@ watchEffect(() => {
 						<div class="flex flex-column gap-2">
 							<QuestionList v-if="!stepperLayout" :nodes="state.root.currentState.children" />
 							<!-- Note that QuestionStepper has the 'Send' button integrated instead of using the button below -->
-							<QuestionStepper v-if="stepperLayout" :nodes="state.root.currentState.children" @sendFormFromStepper="handleSubmit()" />
+							<QuestionStepper v-if="stepperLayout" :nodes="state.root.currentState.children" @sendFormFromStepper="handleSubmit(state)" />
 						</div>
 					</div>
 				</template>

From 252ffe5d4db64bc05454bc0fe466db81c6a59d07 Mon Sep 17 00:00:00 2001
From: DanielJDufour <daniel.j.dufour@gmail.com>
Date: Mon, 24 Mar 2025 07:50:24 -0400
Subject: [PATCH 5/8] bug fix: recompute final step when number of steps change

---
 packages/web-forms/src/components/QuestionStepper.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-forms/src/components/QuestionStepper.vue b/packages/web-forms/src/components/QuestionStepper.vue
index 061f7ddbb..dc152b387 100644
--- a/packages/web-forms/src/components/QuestionStepper.vue
+++ b/packages/web-forms/src/components/QuestionStepper.vue
@@ -60,7 +60,7 @@ const steps = computed(() =>
 
 // Handle stepper state
 const firstStep = 0;
-const finalStep = steps.value.length;
+const finalStep = computed(() => steps.value.length - 1);
 const currentStep = ref(firstStep);
 const submitPressed = ref(false);
 provide('submitPressed', submitPressed);

From c0a747f02405ff5d6bd66a96f3820248f0ebc32b Mon Sep 17 00:00:00 2001
From: spwoodcock <sam.woodcock@protonmail.com>
Date: Wed, 16 Apr 2025 02:38:25 +0100
Subject: [PATCH 6/8] fix: tweak stepper web form setup after rebase to latest

---
 packages/web-forms/src/components/OdkWebForm.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/web-forms/src/components/OdkWebForm.vue b/packages/web-forms/src/components/OdkWebForm.vue
index a1d52c6da..6767b0979 100644
--- a/packages/web-forms/src/components/OdkWebForm.vue
+++ b/packages/web-forms/src/components/OdkWebForm.vue
@@ -36,7 +36,7 @@ export interface OdkWebFormsProps {
 	 * with collapsable groups. This param changes to a stepper layout
 	 * closer to Collect.
 	 */
-	stepperLayout?: boolean;
+	readonly stepperLayout?: boolean;
 
 	/**
 	 * Note: this parameter must be set when subscribing to the
@@ -150,7 +150,6 @@ const emit = defineEmits<OdkWebFormEmits>();
 
 const state = initializeFormState();
 const submitPressed = ref(false);
-const showSendButton = ref(props.stepperLayout ? false : true);
 
 const init = async () => {
 	state.value = await loadFormState(props.formXml, {
@@ -240,20 +239,20 @@ watchEffect(() => {
 				<template #content>
 					<div class="form-questions">
 						<div class="flex flex-column gap-2">
-							<QuestionList v-if="!stepperLayout" :nodes="state.root.currentState.children" />
+							<QuestionList v-if="!props.stepperLayout" :nodes="state.root.currentState.children" />
 							<!-- Note that QuestionStepper has the 'Send' button integrated instead of using the button below -->
-							<QuestionStepper v-if="stepperLayout" :nodes="state.root.currentState.children" @sendFormFromStepper="handleSubmit(state)" />
+							<QuestionStepper v-if="props.stepperLayout" :nodes="state.root.currentState.children" @sendFormFromStepper="handleSubmit(state)" />
 						</div>
 					</div>
 				</template>
 			</Card>
 
-			<div v-if="showSendButton" class="footer flex justify-content-end flex-wrap gap-3">
+			<div v-if="!props.stepperLayout" class="footer flex justify-content-end flex-wrap gap-3">
 				<Button label="Send" rounded @click="handleSubmit(state)" />
 			</div>
 		</div>
 
-		<div v-if="showSendButton" class="powered-by-wrapper">
+		<div v-if="!props.stepperLayout" class="powered-by-wrapper">
 			<a class="anchor" href="https://getodk.org" target="_blank">
 				<span class="caption">Powered by</span>
 				<img

From 91567f7b69b2917db3d54b4539b0e833a24a7481 Mon Sep 17 00:00:00 2001
From: spwoodcock <sam.woodcock@protonmail.com>
Date: Wed, 16 Apr 2025 03:08:03 +0100
Subject: [PATCH 7/8] test: add tests for stepper layout OdkWebForm logic

---
 .../src/fixtures/other/multi-step.xform.xml   |  38 +++++
 .../tests/components/OdkWebForm.test.ts       | 150 ++++++++++++++++++
 2 files changed, 188 insertions(+)
 create mode 100644 packages/common/src/fixtures/other/multi-step.xform.xml

diff --git a/packages/common/src/fixtures/other/multi-step.xform.xml b/packages/common/src/fixtures/other/multi-step.xform.xml
new file mode 100644
index 000000000..be83df2b3
--- /dev/null
+++ b/packages/common/src/fixtures/other/multi-step.xform.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0"?>
+<h:html xmlns="http://www.w3.org/2002/xforms"
+  xmlns:ev="http://www.w3.org/2001/xml-events"
+  xmlns:h="http://www.w3.org/1999/xhtml"
+  xmlns:jr="http://openrosa.org/javarosa"
+  xmlns:orx="http://openrosa.org/xforms/"
+  xmlns:xsd="http://www.w3.org/2001/XMLSchema">
+  <h:head>
+    <h:title>Multi Step XForm</h:title>
+    <model>
+      <instance>
+        <root id="minimal">
+          <first-question/>
+          <second-question/>
+          <third-question/>
+          <meta>
+            <instanceID/>
+          </meta>
+        </root>
+      </instance>
+      <bind nodeset="/root/first-question" type="string" required="true()"/>
+      <bind nodeset="/root/second-question" type="string" required="true()"/>
+      <bind nodeset="/root/third-question" type="string" required="true()"/>
+      <bind nodeset="/root/meta/instanceID" type="string"/>
+    </model>
+  </h:head>
+  <h:body>
+    <input ref="/root/first-question">
+      <label>First question</label>
+    </input>
+    <input ref="/root/second-question">
+      <label>Second question</label>
+    </input>
+    <input ref="/root/third-question">
+      <label>Third question</label>
+    </input>
+  </h:body>
+</h:html>
diff --git a/packages/web-forms/tests/components/OdkWebForm.test.ts b/packages/web-forms/tests/components/OdkWebForm.test.ts
index e3d6f959f..6d145e590 100644
--- a/packages/web-forms/tests/components/OdkWebForm.test.ts
+++ b/packages/web-forms/tests/components/OdkWebForm.test.ts
@@ -443,4 +443,154 @@ describe('OdkWebForm', () => {
 			expect(textInput.element.value).toBe(expectedPostSubmissionValue);
 		});
 	});
+
+	describe('stepper layout', () => {
+		beforeEach(async () => {
+			// Replace form with one including two questions
+			formXML = await getFormXml('multi-step.xform.xml');
+		});
+
+		it('renders stepper layout when stepperLayout prop is true', async () => {
+			const component = mountComponent(formXML, {
+				overrideProps: { stepperLayout: true },
+			});
+			await flushPromises();
+
+			expect(component.find('.stepper-container').exists()).toBe(true);
+			expect(component.find('.navigation-button').exists()).toBe(true);
+		});
+
+		it('shows only one question at a time in stepper layout and allows navigation', async () => {
+			const component = mountComponent(formXML, {
+				overrideProps: { stepperLayout: true },
+			});
+			await flushPromises();
+
+			// --- First Question ---
+			let visibleQuestions = component.findAll('.question-container').filter((q) => q.isVisible());
+			expect(visibleQuestions.length).toBe(1);
+			expect(
+				visibleQuestions[0].findAll('span').some((span) => span.text().includes('First question'))
+			).toBe(true);
+
+			// Fill first input (assuming it's an input element)
+			await visibleQuestions[0].find('input').setValue('Answer 1');
+
+			expect(component.find('button[aria-label="Back"]').exists()).toBe(false);
+			let nextButton = component.find('button[aria-label="Next"]');
+			expect(nextButton.exists()).toBe(true);
+			expect(component.find('button[aria-label="Send"]').exists()).toBe(false);
+
+			await nextButton.trigger('click');
+
+			// --- Second Question ---
+			visibleQuestions = component.findAll('.question-container').filter((q) => q.isVisible());
+			expect(visibleQuestions.length).toBe(1);
+			expect(
+				visibleQuestions[0].findAll('span').some((span) => span.text().includes('Second question'))
+			).toBe(true);
+
+			// Fill second input
+			await visibleQuestions[0].find('input').setValue('Answer 2');
+
+			const backButton = component.find('button[aria-label="Back"]');
+			expect(backButton.exists()).toBe(true);
+			expect(component.find('button[aria-label="Next"]').exists()).toBe(true);
+			expect(component.find('button[aria-label="Send"]').exists()).toBe(false);
+
+			// Test back button works (return to first question)
+			await backButton.trigger('click');
+
+			visibleQuestions = component.findAll('.question-container').filter((q) => q.isVisible());
+			expect(visibleQuestions.length).toBe(1);
+			expect(
+				visibleQuestions[0].findAll('span').some((span) => span.text().includes('First question'))
+			).toBe(true);
+
+			// Move to final / third question
+			nextButton = component.find('button[aria-label="Next"]');
+			await nextButton.trigger('click');
+			nextButton = component.find('button[aria-label="Next"]');
+			await nextButton.trigger('click');
+
+			// --- Third Question ---
+			visibleQuestions = component.findAll('.question-container').filter((q) => q.isVisible());
+			expect(visibleQuestions.length).toBe(1);
+			expect(
+				visibleQuestions[0].findAll('span').some((span) => span.text().includes('Third question'))
+			).toBe(true);
+
+			// Fill third input
+			await visibleQuestions[0].find('input').setValue('Answer 3');
+
+			expect(component.find('button[aria-label="Back"]').exists()).toBe(true);
+			expect(component.find('button[aria-label="Next"]').exists()).toBe(false);
+			expect(component.find('button[aria-label="Send"]').exists()).toBe(true);
+
+			// Submit form
+			const sendButton = component.find('button[aria-label="Send"]');
+			await sendButton.trigger('click');
+
+			// Ensure no form error messages are shown
+			const errorMessages = component.findAll('.form-error-message').filter((el) => el.isVisible());
+			expect(errorMessages.length).toBe(0);
+		});
+
+		it('blocks navigation and send in stepper layout if current step is invalid', async () => {
+			const component = mountComponent(formXML, {
+				overrideProps: { stepperLayout: true },
+			});
+			await flushPromises();
+
+			let nextButton = component.find('button[aria-label="Next"]');
+			await nextButton.trigger('click');
+
+			// Displays an error, remains on first question
+			expect(component.get('.validation-message').isVisible()).toBe(true);
+			expect(component.get('.validation-message').text()).toBe('Condition not satisfied: required');
+			let visibleQuestions = component.findAll('.question-container').filter((q) => q.isVisible());
+			expect(visibleQuestions.length).toBe(1);
+			expect(
+				visibleQuestions[0].findAll('span').some((span) => span.text().includes('First question'))
+			).toBe(true);
+		});
+
+		it('allows submission once all steps are valid in stepper layout', async () => {
+			const mockSubmit = vi.fn();
+			const component = mountComponent(formXML, {
+				overrideProps: { stepperLayout: true },
+				onSubmit: mockSubmit,
+			});
+			await flushPromises();
+
+			// Progress to end of form
+			let visibleQuestions = component.findAll('.question-container').filter((q) => q.isVisible());
+			await visibleQuestions[0].find('input').setValue('Answer 1');
+			let nextButton = component.find('button[aria-label="Next"]');
+			nextButton = component.find('button[aria-label="Next"]');
+			await nextButton.trigger('click');
+			visibleQuestions = component.findAll('.question-container').filter((q) => q.isVisible());
+			await visibleQuestions[0].find('input').setValue('Answer 2');
+			nextButton = component.find('button[aria-label="Next"]');
+			await nextButton.trigger('click');
+
+			// Check entire form validation works
+			expect(component.get('.form-error-message').isVisible()).toBe(false);
+			const sendButton = component.find('button[aria-label="Send"]');
+			await sendButton.trigger('click');
+			expect(component.get('.form-error-message').isVisible()).toBe(true);
+
+			// Fill final question to make form valid, and check submission sends
+			visibleQuestions = component.findAll('.question-container').filter((q) => q.isVisible());
+			await visibleQuestions[0].find('input').setValue('Answer 3');
+			await sendButton.trigger('click');
+			expect(component.get('.form-error-message').isVisible()).toBe(false);
+			expect(mockSubmit).toHaveBeenCalled();
+		});
+
+		it('always shows the stepper next and back buttons at the bottom of the screen', async () => {
+			// TODO
+			console.log('here');
+		});
+	});
 });

From e232a3031ffbba71874ae02224dc725b5733d567 Mon Sep 17 00:00:00 2001
From: DanielJDufour <daniel.j.dufour@gmail.com>
Date: Fri, 25 Apr 2025 23:55:05 -0400
Subject: [PATCH 8/8] fixed issue #2414 (part 1), replacing text with icons

---
 .../src/components/QuestionStepper.vue          | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/web-forms/src/components/QuestionStepper.vue b/packages/web-forms/src/components/QuestionStepper.vue
index dc152b387..03d14a40f 100644
--- a/packages/web-forms/src/components/QuestionStepper.vue
+++ b/packages/web-forms/src/components/QuestionStepper.vue
@@ -144,10 +144,16 @@ const prevStep = () => {
 
     <div class="navigation-button-group">
         <!-- If swapping to arrows: 🡨 🡪 -->
-        <Button v-if="currentStep > firstStep" class="navigation-button" label="Back" @click="prevStep" rounded outlined />
-        <Button v-if="currentStep === finalStep" class="navigation-button" label="Send" @click="allFieldsValid ? emit('sendFormFromStepper') : null" rounded />
+        <Button v-if="currentStep > firstStep" class="navigation-button" @click="prevStep" rounded outlined>
+					<span class="icon-keyboard_arrow_left"></span>
+				</Button>
+        <Button v-if="currentStep === finalStep" class="navigation-button" @click="allFieldsValid ? emit('sendFormFromStepper') : null" rounded>
+					<span class="icon-cloud_upload"></span>
+				</Button>
         <!-- Note the button ordering is important here as we use a last-child selector for styling -->
-        <Button v-if="currentStep < finalStep" class="navigation-button" label="Next" @click="nextStep" rounded outlined />
+        <Button v-if="currentStep < finalStep" class="navigation-button" @click="nextStep" rounded outlined>
+					<span class="icon-keyboard_arrow_right"></span>
+				</Button>
     </div>
 </template>
 
@@ -191,4 +197,9 @@ const prevStep = () => {
     padding-right: 3rem;
     font-size: 1rem;
 }
+
+.navigation-button > span {
+		font-weight: bold;
+		font-size: 30px;	
+}
 </style>