From ffada98a8680df780676fad409058bbf70e891dd Mon Sep 17 00:00:00 2001
From: Ezequias Antunes <ezequias.antunes@sysvale.com>
Date: Wed, 29 Apr 2026 11:33:23 -0300
Subject: [PATCH 1/8] Permite gerenciar o select usando o teclado

---
 src/components/Select.vue | 192 +++++++++++++++++++++++++++-----------
 1 file changed, 136 insertions(+), 56 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index be42d389..568e52eb 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -17,17 +17,14 @@
 				:onkeypress="`return ${allowSearch};`"
 				:placeholder="placeholder"
 				:disabled="disabled"
-				:readonly="!searchable || !active"
+				:readonly="!searchable"
 				:support-link-url="supportLinkUrl || linkUrl"
 				:support-link="supportLink || linkText"
 				:floating-label="floatingLabel || mobile"
 				:class="inputClass"
 				:fluid="computedFluid"
 				:ghost
-				@keydown.enter.prevent="activateSelectionOnEnter"
-				@keydown.arrow-down.prevent="highlightOnArrowDown"
-				@keydown.arrow-up.prevent="highlightOnArrowUp"
-				@keydown="emitKeydown"
+				@keydown="handleKeydown"
 				@click="activateSelectionOnClick"
 				@update:model-value="filterOptions"
 				@focus="activeSelection"
@@ -54,10 +51,16 @@
 						v-for="(option, index) in localOptions"
 						:key="option.id || option"
 						:ref="(el) => { liRefs[`${option[optionsField]}-${index}`] = el }"
-						class="option__text"
-						@mousedown="selectItem"
+						:class="[
+							'option__text',
+							{
+								highlight: index === currentPos,
+								'option__text--selected': isSelected(option)
+							}
+						]"
+						@mousedown="selectItem(index)"
 						@mouseover="highlightOnMouseOver(index)"
-						@mouseout="unhighlightOnMouseOut()"
+						@mouseout="currentPos = -1"
 					>
 						<!--
 							@slot Slot utilizado para personalizar a lista de opções do select. Os dados do scoped slot podem ser acessados como: ```slot-scope={ 'option', 'index', 'value' }```
@@ -306,16 +309,13 @@ const emits = defineEmits({
 });
 
 /* REACTIVE DATA */
-const currentPos = ref(0);
+const currentPos = ref(-1);
 const active = ref(false);
 const id = ref(null);
 const allowSearch = ref(false);
 const localOptions = ref([]);
 const pristineOptions = ref([]);
-const localValue = ref({
-	value: '',
-	id: '',
-});
+const localValue = ref({});
 const selectElement = ref('');
 const direction = ref('down');
 const uniqueKey = ref(generateKey());
@@ -413,6 +413,8 @@ watch(model, (newValue, oldValue) => {
 }, { immediate: true });
 
 watch(localValue, (currentValue) => {
+	syncCurrentPos();
+
 	if (JSON.stringify(currentValue) === JSON.stringify(model.value)) return;
 
 	const isValueEmpty = !currentValue || (typeof currentValue === 'object' && Object.keys(currentValue).length === 0);
@@ -444,6 +446,10 @@ function filterOptions(value) {
 		return;
 	}
 
+	if (props.searchable && !active.value) {
+		active.value = true;
+	}
+
 	if (props.searchable && props.addable) {
 		searchString.value = value;
 	}
@@ -455,6 +461,8 @@ function filterOptions(value) {
 	} else {
 		simpleOptionSearch(sanitizedString);
 	}
+
+	currentPos.value = 0;
 }
 
 function simpleOptionSearch(sanitizedSearchValue) {
@@ -480,43 +488,83 @@ function deepOptionSearch(sanitizedSearchValue) {
 function activeSelection() {
 	if (props.disabled) return;
 
-	resetActiveSelection();
-
-	nextTick().then(() => {
-		const element = localOptions.value[currentPos.value];
-		liRefs.value[`${get(element, props.optionsField)}-${currentPos.value}`]?.classList.add('highlight');
-	});
+	syncCurrentPos();
 	emitFocus();
 }
 
+function syncCurrentPos() {
+	const valueToFind = get(localValue.value, props.optionsField);
+	const index = localOptions.value.findIndex(option => option[props.optionsField] === valueToFind);
+
+	if (index !== -1) {
+		currentPos.value = index;
+	} else {
+		currentPos.value = -1;
+	}
+}
+
+function handleKeydown(event) {
+	if (props.disabled) return;
+
+	switch (event.key) {
+		case 'Enter':
+			event.preventDefault();
+			activateSelectionOnEnter();
+			break;
+		case 'ArrowDown':
+		case 'Down':
+			event.preventDefault();
+			highlightOnArrowDown();
+			break;
+		case 'ArrowUp':
+		case 'Up':
+			event.preventDefault();
+			highlightOnArrowUp();
+			break;
+		case 'Escape':
+		case 'Esc':
+			active.value = false;
+			select.value.blur();
+			break;
+		default:
+			if (props.searchable && !active.value && event.key.length === 1) {
+				active.value = true;
+			}
+			emitKeydown(event);
+			break;
+	}
+}
+
 function activateSelectionOnEnter() {
 	if (props.disabled) return;
 
+	if (!active.value) {
+		active.value = true;
+		syncCurrentPos();
+		return;
+	}
+
 	if (localOptions.value.length === 0 && !(props.searchable && props.addable)) {
 		active.value = false;
 		isTyping.value = false;
-		select.value.blur();
 		return;
 	}
 
-	active.value = !active.value;
 	isSelectingItem = true;
 
-	resetActiveSelection();
-
-	if (typeof localOptions.value[currentPos.value] === 'undefined') {
-		handleAddOption();
-
-		localValue.value = props.searchable && props.addable
-			? localValue.value
-			: localOptions.value.length ? cloneDeep(localOptions.value[0]) : {};
+	if (currentPos.value === -1 || typeof localOptions.value[currentPos.value] === 'undefined') {
+		if (props.searchable && props.addable) {
+			handleAddOption();
+		} else {
+			localValue.value = localOptions.value.length ? cloneDeep(localOptions.value[0]) : {};
+		}
 	} else {
 		localValue.value = cloneDeep(localOptions.value[currentPos.value]);
 	}
 
 	searchString.value = '';
 	isTyping.value = false;
-	select.value.blur();
+	active.value = false;
 
 	nextTick(() => {
 		isSelectingItem = false;
@@ -536,6 +584,10 @@ function activateSelectionOnClick() {
 
 	active.value = !active.value;
 
+	if (active.value) {
+		syncCurrentPos();
+	}
+
 	emitClick();
 	select.value.focus();
 }
@@ -561,25 +613,35 @@ function hide() {
 		active.value = false;
 		isTyping.value = false;
 		isSelectingItem = false;
+		currentPos.value = -1;
 	});
 
 	emitBlur();
 }
 
-function selectItem() {
+function selectItem(index) {
+	const position = (typeof index === 'number') ? index : currentPos.value;
+	if (position === -1 || !localOptions.value[position]) return;
+
 	isSelectingItem = false;
 	searchString.value = '';
-	localValue.value = cloneDeep(localOptions.value[currentPos.value]);
+	localValue.value = cloneDeep(localOptions.value[position]);
 	active.value = false;
 	isTyping.value = false;
 	select.value.blur();
 
 	nextTick(() => {
 		isSelectingItem = false;
+		currentPos.value = -1;
 	});
 }
 
+function isSelected(option) {
+	return option[props.optionsField] === localValue.value?.[props.optionsField];
+}
+
 function getLiInDOM(position) {
+	if (position < 0 || position >= localOptions.value.length) return null;
 	const element = localOptions.value[position];
 	return liRefs.value[`${element[props.optionsField]}-${position}`];
 }
@@ -605,47 +667,61 @@ function handleOptionVisibility(option, amount, direction) {
 }
 
 function highlightOnArrowDown() {
-	if (!active.value) return;
+	if (props.disabled) return;
+
+	if (!active.value) {
+		if (currentPos.value < localOptions.value.length - 1) {
+			currentPos.value += 1;
+			localValue.value = cloneDeep(localOptions.value[currentPos.value]);
+		}
+		return;
+	}
+
 	if (currentPos.value === localOptions.value.length - 1) return;
 
 	currentPos.value += 1;
-	const selectedOption = getLiInDOM(currentPos.value);
-	const previousOption = getLiInDOM(currentPos.value - 1);
 
-	selectedOption.classList.add('highlight');
-	previousOption.classList.remove('highlight');
-
-	handleOptionVisibility(selectedOption, 37, 'down');
+	nextTick(() => {
+		const selectedOption = getLiInDOM(currentPos.value);
+		if (selectedOption) {
+			handleOptionVisibility(selectedOption, 37, 'down');
+		}
+	});
 }
 
 function highlightOnArrowUp() {
-	if (!active.value) return;
-	if (currentPos.value === 0) return;
+	if (props.disabled) return;
 
-	const selectedOption = getLiInDOM(currentPos.value);
-	const previousOption = getLiInDOM(currentPos.value - 1);
+	if (!active.value) {
+		if (currentPos.value > 0) {
+			currentPos.value -= 1;
+			localValue.value = cloneDeep(localOptions.value[currentPos.value]);
+		}
+		return;
+	}
 
-	selectedOption.classList.remove('highlight');
-	previousOption.classList.add('highlight');
+	if (currentPos.value <= 0) return;
 
-	handleOptionVisibility(selectedOption, -37, 'up');
 	currentPos.value -= 1;
+
+	nextTick(() => {
+		const selectedOption = getLiInDOM(currentPos.value);
+		if (selectedOption) {
+			handleOptionVisibility(selectedOption, -37, 'up');
+		}
+	});
 }
 
 function highlightOnMouseOver(index) {
 	currentPos.value = index;
-	getLiInDOM(currentPos.value).classList.add('highlight');
 }
 
 function unhighlightOnMouseOut() {
-	getLiInDOM(currentPos.value).classList.remove('highlight');
+	// A lógica de remoção de classe agora é reativa via currentPos.
 }
 
 function resetActiveSelection() {
-	localOptions.value.forEach((option, index) => {
-		const element = localOptions.value[index];
-		liRefs.value[`${element[props.optionsField]}-${index}`].classList.remove('highlight');
-	})
+	// Não é mais necessário com a abordagem reativa.
 }
 
 function handleAddOption() {
@@ -827,11 +903,9 @@ defineExpose({
 
 		&--up {
 			bottom: 40px;
-			width: 100%;
 		}
 
 		&--down {
-			width: 100%;
 		}
 	}
 }
@@ -861,11 +935,17 @@ defineExpose({
 	&__text {
 		padding: tokens.pa(3);
 		text-overflow: ellipsis;
+		transition: all 100ms ease-in-out;
 
 		&--muted {
 			@extend .option__text;
 			color: tokens.$n-400;
 		}
+
+		&--selected {
+			background-color: tokens.$n-30;
+			font-weight: tokens.$font-weight-semibold;
+		}
 	}
 
 	&__container {
@@ -875,8 +955,8 @@ defineExpose({
 	}
 }
 
-.highlight{
-	background-color: tokens.$n-10;
+.highlight {
+	background-color: tokens.$n-30;
 	cursor: pointer;
 }
 

From 681fb63fdafc83bab84235d5aaca978fc4be03d2 Mon Sep 17 00:00:00 2001
From: Ezequias Antunes <56970805+ezequias21@users.noreply.github.com>
Date: Wed, 29 Apr 2026 13:14:30 -0300
Subject: [PATCH 2/8] Apply suggestion from @greptile-apps[bot]

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
---
 src/components/Select.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 568e52eb..89c6d779 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -60,7 +60,7 @@
 						]"
 						@mousedown="selectItem(index)"
 						@mouseover="highlightOnMouseOver(index)"
-						@mouseout="currentPos = -1"
+						@mouseout="syncCurrentPos()"
 					>
 						<!--
 							@slot Slot utilizado para personalizar a lista de opções do select. Os dados do scoped slot podem ser acessados como: ```slot-scope={ 'option', 'index', 'value' }```

From c943edb0792a215c26209ac679abf8980bc069b4 Mon Sep 17 00:00:00 2001
From: Ezequias Antunes <56970805+ezequias21@users.noreply.github.com>
Date: Wed, 29 Apr 2026 13:15:00 -0300
Subject: [PATCH 3/8] Apply suggestion from @greptile-apps[bot]

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
---
 src/components/Select.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 89c6d779..68010caf 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -462,7 +462,7 @@ function filterOptions(value) {
 		simpleOptionSearch(sanitizedString);
 	}
 
-	currentPos.value = 0;
+	currentPos.value = localOptions.value.length > 0 ? 0 : -1;
 }
 
 function simpleOptionSearch(sanitizedSearchValue) {

From 21a9c8a718a0c18e0a6a2be7281467a0f148dd4a Mon Sep 17 00:00:00 2001
From: Ezequias Antunes <ezequiasantunes18@gmail.com>
Date: Wed, 29 Apr 2026 14:01:25 -0300
Subject: [PATCH 4/8] =?UTF-8?q?Corrige=20scroll=20impedindo=20a=20visualiz?=
 =?UTF-8?q?a=C3=A7=C3=A3o=20das=20op=C3=A7=C3=B5es=20via=20teclado=20em=20?=
 =?UTF-8?q?alguns=20casos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Select.vue | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 68010caf..2579c2ca 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -646,23 +646,19 @@ function getLiInDOM(position) {
 	return liRefs.value[`${element[props.optionsField]}-${position}`];
 }
 
-function handleOptionVisibility(option, amount, direction) {
-	const optionDOMRect = option.getBoundingClientRect();
+function handleOptionVisibility(option) {
 	const optionsContainer = selectOptions.value;
-	const optionsContainerDOMRect = optionsContainer.getBoundingClientRect();
+	const optionTop = option.offsetTop;
+	const optionBottom = optionTop + option.offsetHeight;
+	const containerTop = optionsContainer.scrollTop;
+	const containerBottom = containerTop + optionsContainer.clientHeight;
 
-	if (
-		direction === 'up'
-		&& optionDOMRect.top <= optionsContainerDOMRect.top
-	) {
-		optionsContainer.scrollTop += amount;
+	if (optionTop < containerTop) {
+		optionsContainer.scrollTop = optionTop;
 	}
 
-	if (
-		direction === 'down'
-		&& optionDOMRect.top >= optionsContainerDOMRect.bottom
-	) {
-		optionsContainer.scrollTop += amount;
+	if (optionBottom > containerBottom) {
+		optionsContainer.scrollTop = optionBottom - optionsContainer.clientHeight;
 	}
 }
 
@@ -680,11 +676,12 @@ function highlightOnArrowDown() {
 	if (currentPos.value === localOptions.value.length - 1) return;
 
 	currentPos.value += 1;
+	localValue.value = cloneDeep(localOptions.value[currentPos.value]);
 
 	nextTick(() => {
 		const selectedOption = getLiInDOM(currentPos.value);
 		if (selectedOption) {
-			handleOptionVisibility(selectedOption, 37, 'down');
+			handleOptionVisibility(selectedOption);
 		}
 	});
 }
@@ -703,11 +700,12 @@ function highlightOnArrowUp() {
 	if (currentPos.value <= 0) return;
 
 	currentPos.value -= 1;
+	localValue.value = cloneDeep(localOptions.value[currentPos.value]);
 
 	nextTick(() => {
 		const selectedOption = getLiInDOM(currentPos.value);
 		if (selectedOption) {
-			handleOptionVisibility(selectedOption, -37, 'up');
+			handleOptionVisibility(selectedOption);
 		}
 	});
 }
@@ -902,10 +900,12 @@ defineExpose({
 		}
 
 		&--up {
+			width: 100%;
 			bottom: 40px;
 		}
 
 		&--down {
+			width: 100%;
 		}
 	}
 }
@@ -944,7 +944,7 @@ defineExpose({
 
 		&--selected {
 			background-color: tokens.$n-30;
-			font-weight: tokens.$font-weight-semibold;
+			// font-weight: tokens.$font-weight-semibold;
 		}
 	}
 

From 7826e3aeb2862d6d405fca202fcfccd0aa7c209c Mon Sep 17 00:00:00 2001
From: Ezequias Antunes <ezequiasantunes18@gmail.com>
Date: Wed, 29 Apr 2026 15:02:03 -0300
Subject: [PATCH 5/8] =?UTF-8?q?Volta=20novamente=20a=20emiss=C3=A3o=20do?=
 =?UTF-8?q?=20evento=20keydown,=20quando=20qualquer=20tecla=20=C3=A9=20pre?=
 =?UTF-8?q?ssioada?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Select.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 2579c2ca..d0baa802 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -530,9 +530,10 @@ function handleKeydown(event) {
 			if (props.searchable && !active.value && event.key.length === 1) {
 				active.value = true;
 			}
-			emitKeydown(event);
 			break;
 	}
+
+	emitKeydown(event);
 }
 
 function activateSelectionOnEnter() {

From 123dec86d7adc69e727156ad61fe13c5dc9ed573 Mon Sep 17 00:00:00 2001
From: Ezequias Antunes <ezequiasantunes18@gmail.com>
Date: Wed, 29 Apr 2026 15:42:27 -0300
Subject: [PATCH 6/8] =?UTF-8?q?Corrige=20comportamento=20que=20ao=20pesqui?=
 =?UTF-8?q?sar=20por=20um=20elemento,=20escolher=20a=20op=C3=A7=C3=A3o=20e?=
 =?UTF-8?q?=20em=20seguida=20abrir=20novamente=20as=20op=C3=A7=C3=B5es,=20?=
 =?UTF-8?q?vem=20somente=20as=20op=C3=A7=C3=B5es=20filtradas=20anteriormen?=
 =?UTF-8?q?te?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Select.vue | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index d0baa802..f97fd91f 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -566,6 +566,7 @@ function activateSelectionOnEnter() {
 	searchString.value = '';
 	isTyping.value = false;
 	active.value = false;
+	localOptions.value = pristineOptions.value;
 
 	nextTick(() => {
 		isSelectingItem = false;
@@ -587,6 +588,8 @@ function activateSelectionOnClick() {
 
 	if (active.value) {
 		syncCurrentPos();
+	} else {
+		localOptions.value = pristineOptions.value;
 	}
 
 	emitClick();
@@ -715,14 +718,6 @@ function highlightOnMouseOver(index) {
 	currentPos.value = index;
 }
 
-function unhighlightOnMouseOut() {
-	// A lógica de remoção de classe agora é reativa via currentPos.
-}
-
-function resetActiveSelection() {
-	// Não é mais necessário com a abordagem reativa.
-}
-
 function handleAddOption() {
 	if (!props.addable || !searchString.value) {
 		return;

From 4a64ce148db01373244a0a7c7b6acb03f6ab0488 Mon Sep 17 00:00:00 2001
From: Ezequias Antunes <ezequiasantunes18@gmail.com>
Date: Thu, 30 Apr 2026 08:48:11 -0300
Subject: [PATCH 7/8] =?UTF-8?q?Altera=20vers=C3=A3o=20do=20pacote?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 5736a196..9100fbf6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.156.1",
+	"version": "3.158.0",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",
@@ -86,4 +86,4 @@
 	"readme": "ERROR: No README data found!",
 	"homepage": "https://github.com/Sysvale/cuida#readme",
 	"_id": "@sysvale/cuida@3.0.0-alpha.21"
-}
+}
\ No newline at end of file

From cf9320cb9f23ae1496970502fd80e2599c383004 Mon Sep 17 00:00:00 2001
From: Lucas Nascimento <lucas.barbosa.nas@gmail.com>
Date: Mon, 4 May 2026 11:26:34 -0300
Subject: [PATCH 8/8] =?UTF-8?q?Remove=20trecho=20de=20c=C3=B3digo=20para?=
 =?UTF-8?q?=20evitar=20efeito=20colateral=20indesejado?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Select.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index d1e7ad8d..f23aaaf4 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -446,10 +446,6 @@ function filterOptions(value) {
 		return;
 	}
 
-	if (props.searchable && !active.value) {
-		active.value = true;
-	}
-
 	if (props.searchable && props.addable) {
 		searchString.value = value;
 	}