From a2ab81f13c1e4f63fbd761fda504e5b921805c8a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 6 May 2026 13:33:02 +0000
Subject: [PATCH] fix: prevent unintentional form submission in button
 components

- Add type="button" to SegmentedControl, IconButton, FlatButton, MobileNavigation, and StepperInput.
- Update Button.vue to support a type prop defaulting to "button".
- Add unit tests for SegmentedControl form submission.
- Update snapshots and project version.

Co-authored-by: lucasn4s <17988272+lucasn4s@users.noreply.github.com>
---
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 src/components/Button.vue                     |  9 ++++
 src/components/FlatButton.vue                 |  1 +
 src/components/IconButton.vue                 |  1 +
 src/components/MobileNavigation.vue           |  1 +
 src/components/SegmentedControl.vue           |  1 +
 src/components/StepperInput.vue               |  2 +
 src/tests/SegmentedControl.spec.ts            | 54 +++++++++++++++++++
 src/tests/__snapshots__/Button.spec.ts.snap   |  2 +-
 .../__snapshots__/CalloutCard.spec.ts.snap    |  2 +-
 .../CarouselController.spec.ts.snap           |  2 +-
 .../__snapshots__/EmptyState.spec.ts.snap     |  2 +-
 .../__snapshots__/IconButton.spec.ts.snap     |  2 +-
 .../MobileNavigation.spec.ts.snap             |  2 +-
 .../__snapshots__/MultiFileInput.spec.ts.snap |  2 +-
 .../SegmentedControl.spec.ts.snap             |  3 ++
 src/tests/__snapshots__/Wizard.spec.ts.snap   |  4 +-
 18 files changed, 84 insertions(+), 12 deletions(-)
 create mode 100644 src/tests/SegmentedControl.spec.ts
 create mode 100644 src/tests/__snapshots__/SegmentedControl.spec.ts.snap

diff --git a/package-lock.json b/package-lock.json
index 28399dd22..3a5fb6d08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.156.1",
+	"version": "3.158.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@sysvale/cuida",
-			"version": "3.156.1",
+			"version": "3.158.1",
 			"dependencies": {
 				"@popperjs/core": "^2.11.6",
 				"@sysvale/cuida-icons": "^1.18.0",
diff --git a/package.json b/package.json
index 9100fbf69..57f3aae25 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.158.0",
+	"version": "3.158.1",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",
diff --git a/src/components/Button.vue b/src/components/Button.vue
index a39d5ea24..a5d843e96 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -2,6 +2,7 @@
 <template>
 	<button
 		v-cdstip="tooltipDisabled"
+		:type="type"
 		class="button__container"
 		:class="computedStyle"
 		@click.stop="clickHandler"
@@ -122,6 +123,14 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	/**
+	 * O tipo do botão.
+	 * @values 'button', 'submit', 'reset'
+	 */
+	type: {
+		type: String,
+		default: 'button',
+	},
 });
 
 const emits = defineEmits([
diff --git a/src/components/FlatButton.vue b/src/components/FlatButton.vue
index db72d7472..42a444b99 100644
--- a/src/components/FlatButton.vue
+++ b/src/components/FlatButton.vue
@@ -1,6 +1,7 @@
 <template>
 	<button
 		ref="componentRef"
+		type="button"
 		class="flat-button__container"
 		:class="computedStyle"
 		@click="clickHandler"
diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
index 3e39da87c..b60c304f4 100644
--- a/src/components/IconButton.vue
+++ b/src/components/IconButton.vue
@@ -5,6 +5,7 @@
 			:text="innerTooltipText"
 		>
 			<button
+				type="button"
 				class="CdsIcon-button__container"
 				:class="computedModifiers"
 				@click="clickHandler"
diff --git a/src/components/MobileNavigation.vue b/src/components/MobileNavigation.vue
index 0a689d858..1e5df4aa1 100644
--- a/src/components/MobileNavigation.vue
+++ b/src/components/MobileNavigation.vue
@@ -81,6 +81,7 @@
 						</div>
 
 						<button
+							type="button"
 							class="mobile-navigation__sidebar-logout"
 							@click="emit('logout')"
 						>
diff --git a/src/components/SegmentedControl.vue b/src/components/SegmentedControl.vue
index abc00ac3d..7cd9d37f5 100644
--- a/src/components/SegmentedControl.vue
+++ b/src/components/SegmentedControl.vue
@@ -5,6 +5,7 @@
 		<button
 			v-for="(segment, index) in segments"
 			:key="index"
+			type="button"
 			class="segment-control__button"
 			:class="{
 				'segment-control__button--active': segment === activeSegment,
diff --git a/src/components/StepperInput.vue b/src/components/StepperInput.vue
index 4a44e2e43..151b725a6 100644
--- a/src/components/StepperInput.vue
+++ b/src/components/StepperInput.vue
@@ -57,6 +57,7 @@
 				<button
 					v-long-click="() => changeValue(step)"
 					:disabled="disabled"
+					type="button"
 					class="stepper-input__icon--plus"
 					tabindex="-1"
 					@focus="handleFocus"
@@ -73,6 +74,7 @@
 				<button
 					v-long-click="() => changeValue(-step)"
 					:disabled="disabled"
+					type="button"
 					class="stepper-input__icon--minus"
 					tabindex="-1"
 					@focus="handleFocus"
diff --git a/src/tests/SegmentedControl.spec.ts b/src/tests/SegmentedControl.spec.ts
new file mode 100644
index 000000000..579cf39e6
--- /dev/null
+++ b/src/tests/SegmentedControl.spec.ts
@@ -0,0 +1,54 @@
+import { describe, test, expect } from 'vitest';
+import SegmentedControl from '../components/SegmentedControl.vue';
+import { mount } from '@vue/test-utils';
+
+describe('SegmentedControl', () => {
+	test('renders correctly', async () => {
+		const wrapper = mount(SegmentedControl, {
+			props: {
+				segments: ['Segment 1', 'Segment 2'],
+			},
+		});
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+
+	test('should have type="button" in all segment buttons to prevent form submission', () => {
+		const wrapper = mount(SegmentedControl, {
+			props: {
+				segments: ['Segment 1', 'Segment 2'],
+			},
+		});
+
+		const buttons = wrapper.findAll('button');
+		buttons.forEach((button) => {
+			expect(button.attributes('type')).toBe('button');
+		});
+	});
+
+	test('should NOT trigger form submit when a segment is clicked', async () => {
+		const TestComponent = {
+			components: { SegmentedControl },
+			template: `
+				<form @submit.prevent="handleSubmit">
+					<SegmentedControl :segments="['S1', 'S2']" />
+				</form>
+			`,
+			data() {
+				return { submitted: false };
+			},
+			methods: {
+				handleSubmit() {
+					this.submitted = true;
+				},
+			},
+		};
+
+		const wrapper = mount(TestComponent);
+		const button = wrapper.find('button');
+
+		await button.trigger('click');
+
+		expect(wrapper.vm.submitted).toBe(false);
+	});
+});
diff --git a/src/tests/__snapshots__/Button.spec.ts.snap b/src/tests/__snapshots__/Button.spec.ts.snap
index b2733957e..3cbaf97f8 100644
--- a/src/tests/__snapshots__/Button.spec.ts.snap
+++ b/src/tests/__snapshots__/Button.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button > renders correctly 1`] = `
-"<button data-v-3c9d0845="" class="button__container button--green--active button-size--md">
+"<button data-v-3c9d0845="" type="button" class="button__container button--green--active button-size--md">
   <!--v-if-->
   <!--v-if-->
   <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Botão
diff --git a/src/tests/__snapshots__/CalloutCard.spec.ts.snap b/src/tests/__snapshots__/CalloutCard.spec.ts.snap
index 5e4fd69ce..5a6b373be 100644
--- a/src/tests/__snapshots__/CalloutCard.spec.ts.snap
+++ b/src/tests/__snapshots__/CalloutCard.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`CalloutCard > renders correctly 1`] = `
 							Evento que indica que o Botão foi clicado
 							@event action-button-click
 							@type {Event}
-						--><button data-v-3c9d0845="" class="button__container button--green--active button-size--md" id="content-button">
+						--><button data-v-3c9d0845="" type="button" class="button__container button--green--active button-size--md" id="content-button">
     <!--v-if-->
     <!--v-if-->
     <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Ok
diff --git a/src/tests/__snapshots__/CarouselController.spec.ts.snap b/src/tests/__snapshots__/CarouselController.spec.ts.snap
index 06fab9723..3e949e92a 100644
--- a/src/tests/__snapshots__/CarouselController.spec.ts.snap
+++ b/src/tests/__snapshots__/CarouselController.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button > renders correctly 1`] = `
-"<button data-v-3c9d0845="" class="button__container button--green--active button-size--md" total="12" perpage="4" propertyname="Métricas">
+"<button data-v-3c9d0845="" type="button" class="button__container button--green--active button-size--md" total="12" perpage="4" propertyname="Métricas">
   <!--v-if-->
   <!--v-if-->
   <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Click here
diff --git a/src/tests/__snapshots__/EmptyState.spec.ts.snap b/src/tests/__snapshots__/EmptyState.spec.ts.snap
index d67cc4ea5..1744a7530 100644
--- a/src/tests/__snapshots__/EmptyState.spec.ts.snap
+++ b/src/tests/__snapshots__/EmptyState.spec.ts.snap
@@ -13,7 +13,7 @@ exports[`EmptyState > renders correctly 1`] = `
 			Evento emitido quando o botão do Empty State é clicado
 			@event action-button-click
 			@type {Event}
-		--><button data-v-3c9d0845="" data-v-f262d0f3="" class="button__container button--green--active button-size--md empty-state__button">
+		--><button data-v-3c9d0845="" data-v-f262d0f3="" type="button" class="button__container button--green--active button-size--md empty-state__button">
     <!--v-if-->
     <!--v-if-->
     <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Finalizar
diff --git a/src/tests/__snapshots__/IconButton.spec.ts.snap b/src/tests/__snapshots__/IconButton.spec.ts.snap
index 7a854dbb4..1cde0376d 100644
--- a/src/tests/__snapshots__/IconButton.spec.ts.snap
+++ b/src/tests/__snapshots__/IconButton.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`IconButton > renders correctly 1`] = `"<span data-v-f6045c74="" id="CdsIcon-button"><span data-v-f6045c74=""><button data-v-f6045c74="" class="CdsIcon-button__container CdsIcon-button--lg CdsIcon-button__container--white"><cds-icon-stub data-v-f6045c74="" name="trash-outline" width="24" height="24" color="currentColor" dark="false" light="false" class="CdsIcon-button__icon"></cds-icon-stub></button></span></span>"`;
+exports[`IconButton > renders correctly 1`] = `"<span data-v-f6045c74="" id="CdsIcon-button"><span data-v-f6045c74=""><button data-v-f6045c74="" type="button" class="CdsIcon-button__container CdsIcon-button--lg CdsIcon-button__container--white"><cds-icon-stub data-v-f6045c74="" name="trash-outline" width="24" height="24" color="currentColor" dark="false" light="false" class="CdsIcon-button__icon"></cds-icon-stub></button></span></span>"`;
diff --git a/src/tests/__snapshots__/MobileNavigation.spec.ts.snap b/src/tests/__snapshots__/MobileNavigation.spec.ts.snap
index 369d7a97b..3502b4fc3 100644
--- a/src/tests/__snapshots__/MobileNavigation.spec.ts.snap
+++ b/src/tests/__snapshots__/MobileNavigation.spec.ts.snap
@@ -31,7 +31,7 @@ exports[`MobileNavigation > renders correctly 1`] = `
               <p data-v-c1f5c1c8="">Joana Mendes</p>
               <p data-v-c1f5c1c8="">Administradora</p>
             </div>
-          </div><button data-v-c1f5c1c8="" class="mobile-navigation__sidebar-logout">
+          </div><button data-v-c1f5c1c8="" type="button" class="mobile-navigation__sidebar-logout">
             <cds-icon-stub data-v-c1f5c1c8="" name="logout-outline" width="24" height="24" color="currentColor" dark="false" light="false"></cds-icon-stub>
           </button>
         </div>
diff --git a/src/tests/__snapshots__/MultiFileInput.spec.ts.snap b/src/tests/__snapshots__/MultiFileInput.spec.ts.snap
index 72b739ac6..49c1f4a17 100644
--- a/src/tests/__snapshots__/MultiFileInput.spec.ts.snap
+++ b/src/tests/__snapshots__/MultiFileInput.spec.ts.snap
@@ -73,7 +73,7 @@ exports[`MultiFileInput snapshot test > renders correctly 1`] = `
       </div>
     </div>
     <div data-v-96e95147="" class="multi-file-input__empty-state"> Os arquivos adicionados serão exibidos aqui </div>
-    <div data-v-96e95147="" class="multi-file-input__footer"><button data-v-3c9d0845="" data-v-96e95147="" class="button__container button--green--disabled button-size--md">
+    <div data-v-96e95147="" class="multi-file-input__footer"><button data-v-3c9d0845="" data-v-96e95147="" type="button" class="button__container button--green--disabled button-size--md">
         <!--v-if-->
         <!--v-if-->
         <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Enviar
diff --git a/src/tests/__snapshots__/SegmentedControl.spec.ts.snap b/src/tests/__snapshots__/SegmentedControl.spec.ts.snap
new file mode 100644
index 000000000..c9e7ebda0
--- /dev/null
+++ b/src/tests/__snapshots__/SegmentedControl.spec.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SegmentedControl > renders correctly 1`] = `"<div class="segment-control"><button type="button" class="segment-control__button segment-control__button--inactive"><span>Segment 1</span></button><button type="button" class="segment-control__button segment-control__button--inactive"><span>Segment 2</span></button></div>"`;
diff --git a/src/tests/__snapshots__/Wizard.spec.ts.snap b/src/tests/__snapshots__/Wizard.spec.ts.snap
index 032e477d9..73b38ac39 100644
--- a/src/tests/__snapshots__/Wizard.spec.ts.snap
+++ b/src/tests/__snapshots__/Wizard.spec.ts.snap
@@ -21,12 +21,12 @@ exports[`Wizard > renders correctly 1`] = `
       </div>
     </div>
   </div>
-  <div data-v-61a7952a="" class="cds-wizard__buttons"><button data-v-3c9d0845="" data-v-61a7952a="" class="button__container button--secondary--active button-size--md">
+  <div data-v-61a7952a="" class="cds-wizard__buttons"><button data-v-3c9d0845="" data-v-61a7952a="" type="button" class="button__container button--secondary--active button-size--md">
       <!--v-if-->
       <!--v-if-->
       <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Anterior
       <!--v-if-->
-    </button><button data-v-3c9d0845="" data-v-61a7952a="" class="button__container button--green--active button-size--md">
+    </button><button data-v-3c9d0845="" data-v-61a7952a="" type="button" class="button__container button--green--active button-size--md">
       <!--v-if-->
       <!--v-if-->
       <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Próximo