From ecef82070f0b7059dfcb38266c31fda8986492ef Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Thu, 18 Jul 2024 03:08:55 +0200
Subject: [PATCH 1/3] fix(NcInputField): Make focus visible on trailing button
 look better

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/NcInputField/NcInputField.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
index 2c396948ff..87b1657ddc 100644
--- a/src/components/NcInputField/NcInputField.vue
+++ b/src/components/NcInputField/NcInputField.vue
@@ -490,11 +490,17 @@ export default {
 	}
 
 	&__trailing-button {
+		--button-size: calc(var(--default-clickable-area) - 2 * var(--border-width-input-focused, 2px)) !important;
+
 		&.button-vue {
 			position: absolute;
-			top: 0;
-			right: 0;
+			top: var(--border-width-input-focused, 2px);
+			right: var(--border-width-input-focused, 2px);
 			border-radius: var(--border-radius-large);
+
+			&:focus-visible {
+				box-shadow: none !important;
+			}
 		}
 
 		&--pill.button-vue {

From f42b03181667b85f6a139a8559847dd4d7a3a35e Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Thu, 18 Jul 2024 15:06:22 +0200
Subject: [PATCH 2/3] fix(NcInputField): Perfectly align trailing button
 outline with input field

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

[skip ci]
---
 src/components/NcInputField/NcInputField.vue | 24 ++++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
index 87b1657ddc..023bbce3d7 100644
--- a/src/components/NcInputField/NcInputField.vue
+++ b/src/components/NcInputField/NcInputField.vue
@@ -35,7 +35,6 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 						'input-field__input--label-outside': labelOutside,
 						'input-field__input--success': success,
 						'input-field__input--error': error,
-						'input-field__input--pill': pill,
 					}]"
 				:value="modelValue.toString()"
 				@input="handleInput">
@@ -60,9 +59,6 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 			<NcButton v-if="showTrailingButton"
 				type="tertiary-no-background"
 				class="input-field__trailing-button"
-				:class="[{
-					'input-field__trailing-button--pill': pill,
-				}]"
 				:aria-label="trailingButtonLabel"
 				:disabled="disabled"
 				@click="handleTrailingButtonClick">
@@ -331,9 +327,10 @@ export default {
 <style lang="scss" scoped>
 
 .input-field {
+	--input-border-radius: var(--border-radius-element, var(--border-radius-large));
+	// styles
 	position: relative;
 	width: 100%;
-	border-radius: var(--border-radius-large);
 	margin-block-start: 6px; // for the label in active state
 
 	&__main-wrapper {
@@ -346,6 +343,10 @@ export default {
 		filter: saturate(0.4);
 	}
 
+	&--pill {
+		--input-border-radius: var(--border-radius-pill);
+	}
+
 	&__input {
 		margin: 0;
 		padding-inline: 12px 6px; // align with label 8px margin label + 6px padding label - 2px border input
@@ -358,11 +359,12 @@ export default {
 		background-color: var(--color-main-background);
 		color: var(--color-main-text);
 		border: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);
-		border-radius: var(--border-radius-large);
+		border-radius: var(--input-border-radius);
 
 		cursor: pointer;
 		-webkit-appearance: textfield !important;
 		-moz-appearance: textfield !important;
+		appearance: textfield !important;
 
 		// Center text if external label is used
 		&--label-outside {
@@ -420,10 +422,6 @@ export default {
 				box-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
 			}
 		}
-
-		&--pill {
-			border-radius: var(--border-radius-pill);
-		}
 	}
 
 	&__label {
@@ -491,21 +489,17 @@ export default {
 
 	&__trailing-button {
 		--button-size: calc(var(--default-clickable-area) - 2 * var(--border-width-input-focused, 2px)) !important;
+		--button-radius: calc(var(--input-border-radius) - var(--border-width-input-focused, 2px)); // lower radius as size is smaller
 
 		&.button-vue {
 			position: absolute;
 			top: var(--border-width-input-focused, 2px);
 			right: var(--border-width-input-focused, 2px);
-			border-radius: var(--border-radius-large);
 
 			&:focus-visible {
 				box-shadow: none !important;
 			}
 		}
-
-		&--pill.button-vue {
-			border-radius: var(--border-radius-pill);
-		}
 	}
 
 	&__helper-text-message {

From 33004b104318ee707586504178a30eed08e8495d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Mon, 5 Aug 2024 10:46:37 +0200
Subject: [PATCH 3/3] fix(NcInput): correctly apply pill class
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 src/components/NcInputField/NcInputField.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
index 023bbce3d7..cb712d7841 100644
--- a/src/components/NcInputField/NcInputField.vue
+++ b/src/components/NcInputField/NcInputField.vue
@@ -17,7 +17,8 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 </docs>
 
 <template>
-	<div class="input-field" :class="[{ 'input-field--disabled': disabled }, $props.class ]">
+	<div class="input-field"
+		:class="[{ 'input-field--disabled': disabled, 'input-field--pill': pill, }, $props.class ]">
 		<div class="input-field__main-wrapper">
 			<input v-bind="$attrs"
 				:id="computedId"