From e8979d258141791e5ee767893990e52577e9b4d2 Mon Sep 17 00:00:00 2001
From: skjnldsv <skjnldsv@protonmail.com>
Date: Wed, 27 May 2026 11:32:26 +0200
Subject: [PATCH] fix(NcSelect): use NcTextField for floating label design

Replace the plain `<input>` in NcSelect's search slot with NcTextField
to get consistent floating label, border, and focus styling across all
form fields.

Single mode:
- NcTextField owns the border and floating label
- Selected value overlays the input (position: absolute, z-index: 2)
- Label floats on focus or when value selected via :has(.vs__selected)

Multi mode:
- Border on .vs__dropdown-toggle (contains tags + search input)
- Floating label via #header slot, centered when empty, floats on
  border when tags present or dropdown open
- Search input inline with tags (flex-grow, no layout jump on open)
- Tags hidden behind actions prevented via padding-inline-end

Drop-up:
- Border/radius inverted (transparent top, rounded bottom)
- Label moves to bottom border

Other fixes:
- Forward vue-select events (keydown, blur, focus, IME) via
  filterEvents() to reach the native <input>
- Scope CSS variables to .v-select.select (not body)
- Dropdown menu variables set directly (teleported to body by
  floating-ui, can't inherit from .v-select.select)
- Inline inputLikeBorder mixin to fix @media doubled-selector bug
- Dark/light theme border overrides with correct selectors
- No-wrap overflow clips before actions area

Signed-off-by: skjnldsv <skjnldsv@users.noreply.github.com>
Signed-off-by: skjnldsv <skjnldsv@protonmail.com>
---
 src/components/NcSelect/NcSelect.vue          | 559 +++++++++++++++---
 .../components/NcSelect/NcSelect.spec.ts      | 286 +++++++++
 .../components/NcSelect/NcSelect.story.vue    |  53 ++
 .../unit/components/NcSelect/NcSelect.spec.ts | 191 ++++++
 4 files changed, 1010 insertions(+), 79 deletions(-)
 create mode 100644 tests/component/components/NcSelect/NcSelect.spec.ts
 create mode 100644 tests/component/components/NcSelect/NcSelect.story.vue
 create mode 100644 tests/unit/components/NcSelect/NcSelect.spec.ts

diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
index b212773289..b82397027a 100644
--- a/src/components/NcSelect/NcSelect.vue
+++ b/src/components/NcSelect/NcSelect.vue
@@ -150,6 +150,150 @@ export default {
 </style>
 ```
 
+### Pre-selected and clearable
+
+```vue
+<template>
+	<div class="grid">
+		<div class="container">
+			<NcSelect v-model="singleValue"
+				input-label="Clearable single"
+				:options="options"
+				clearable />
+		</div>
+		<div class="container">
+			<NcSelect v-model="singlePlaceholder"
+				input-label="With placeholder"
+				placeholder="Search for something..."
+				:options="options" />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			options: ['foo', 'bar', 'baz', 'qux', 'quux'],
+			singleValue: 'bar',
+			singlePlaceholder: null,
+		}
+	},
+}
+</script>
+
+<style>
+.grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 10px;
+}
+
+.container {
+	display: flex;
+	flex-direction: column;
+}
+</style>
+```
+
+### Disabled state
+
+```vue
+<template>
+	<div class="grid">
+		<div class="container">
+			<NcSelect v-model="singleValue"
+				input-label="Disabled single"
+				:options="options"
+				disabled />
+		</div>
+		<div class="container">
+			<NcSelect v-model="multiValue"
+				input-label="Disabled multi"
+				:options="options"
+				multiple
+				disabled />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			options: ['foo', 'bar', 'baz'],
+			singleValue: 'foo',
+			multiValue: ['foo', 'bar'],
+		}
+	},
+}
+</script>
+
+<style>
+.grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 10px;
+}
+
+.container {
+	display: flex;
+	flex-direction: column;
+}
+</style>
+```
+
+### Label outside
+
+```vue
+<template>
+	<div class="grid">
+		<div class="container">
+			<label for="ext-single">External label (single)</label>
+			<NcSelect v-model="singleValue"
+				input-id="ext-single"
+				label-outside
+				placeholder="Pick an option"
+				:options="options" />
+		</div>
+		<div class="container">
+			<label for="ext-multi">External label (multi)</label>
+			<NcSelect v-model="multiValue"
+				input-id="ext-multi"
+				label-outside
+				:options="options"
+				multiple />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			options: ['foo', 'bar', 'baz', 'qux', 'quux'],
+			singleValue: null,
+			multiValue: [],
+		}
+	},
+}
+</script>
+
+<style>
+.grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 10px;
+}
+
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+</style>
+```
+
 ### Native form validation example
 
 ```vue
@@ -323,6 +467,7 @@ export default {
 
 <template>
 	<VueSelect
+		data-v-new-select
 		class="select"
 		:class="{
 			'select--legacy': isLegacy,
@@ -331,7 +476,7 @@ export default {
 		v-bind="propsToForward"
 		@search="search = $event"
 		@update:modelValue="$emit('update:modelValue', $event)">
-		<template v-if="!labelOutside && inputLabel" #header>
+		<template v-if="multiple && !labelOutside && inputLabel" #header>
 			<label
 				:for="inputId"
 				class="select__label">
@@ -339,13 +484,25 @@ export default {
 			</label>
 		</template>
 		<template #search="{ attributes, events }">
-			<input
+			<!--
+				v-bind MUST come before explicit props — Vue 3 last-binding-wins.
+				We spread vue-select attributes but null out placeholder/value/modelValue
+				so our explicit bindings below take precedence.
+			-->
+			<NcTextField
+				v-bind="{ ...attributes, placeholder: undefined, value: undefined, modelValue: undefined }"
+				v-on="filterEvents(events)"
 				class="vs__search"
 				:class="[inputClass]"
-				v-bind="attributes"
+				:modelValue="attributes.value"
+				:placeholder="multiple || modelValue ? '' : (placeholder || '')"
+				:label="!labelOutside && !multiple && inputLabel ? inputLabel : ''"
+				:labelOutside="labelOutside || multiple"
+				:disabled="disabled"
 				:required="inputRequired"
-				dir="auto"
-				v-on="events">
+				@update:modelValue="events.input({ target: { value: $event } })" />
+			<!-- No placeholder when: multi mode (select__label serves as placeholder)
+				 or value selected (vs__selected overlay shows the value instead). -->
 		</template>
 		<template #open-indicator="{ attributes }">
 			<ChevronDown
@@ -354,8 +511,7 @@ export default {
 				:style="{
 					cursor: !disabled ? 'pointer' : null,
 				}"
-				:size="26" />
-				<!-- Set size to 26 to make up for the increased padding of this icon -->
+				:size="20" />
 		</template>
 		<template #option="option">
 			<!-- @slot Customize how a option is rendered. -->
@@ -401,6 +557,7 @@ import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 import NcEllipsisedOption from '../NcEllipsisedOption/NcEllipsisedOption.vue'
 import NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'
+import NcTextField from '../NcTextField/NcTextField.vue'
 import { t } from '../../l10n.ts'
 import { createElementId } from '../../utils/createElementId.ts'
 import { isLegacy } from '../../utils/legacy.ts'
@@ -412,6 +569,7 @@ export default {
 		ChevronDown,
 		NcEllipsisedOption,
 		NcLoadingIcon,
+		NcTextField,
 		VueSelect,
 	},
 
@@ -895,6 +1053,21 @@ export default {
 
 	methods: {
 		t,
+
+		/**
+		 * Filter out the `input` event from vue-select events.
+		 * Input is handled via @update:modelValue to avoid double-firing.
+		 * All other events (keydown, blur, focus, compositionstart, compositionend)
+		 * must reach the native <input> for keyboard nav, dropdown close, and IME.
+		 *
+		 * @param {object} events vue-select event handlers
+		 * @return {object} events without `input`
+		 */
+		filterEvents(events) {
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+			const { input, ...rest } = events
+			return rest
+		},
 	},
 }
 </script>
@@ -902,12 +1075,8 @@ export default {
 <style lang="scss">
 @use '../../assets/input-border.scss' as border;
 
-body {
-	/**
-	 * Set custom vue-select CSS variables.
-	 * Needs to be on the body (not :root) for theming to apply (see nextcloud/server#36462)
-	 */
-
+[data-v-new-select].v-select.select {
+	/* Custom vue-select CSS variables scoped to NcSelect */
 	/* Search Input */
 	--vs-search-input-color: var(--color-main-text);
 	--vs-search-input-bg: var(--color-main-background);
@@ -966,10 +1135,7 @@ body {
 	--vs-transition-duration: 0ms;
 
 	/* Actions */
-	--vs-actions-padding: 0 8px 0 4px;
-}
-
-.v-select.select {
+	--vs-actions-padding: 0 8px 0 8px;
 	/* Override default vue-select styles */
 	min-height: calc(var(--default-clickable-area) - 2 * var(--border-width-input));
 	min-width: 260px;
@@ -979,11 +1145,6 @@ body {
 		--vs-border-width: var(--border-width-input-focused, 2px);
 	}
 
-	.select__label {
-		display: block;
-		margin-bottom: 2px;
-	}
-
 	.vs__selected {
 		height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width) - var(--default-grid-baseline));
 		margin: calc(var(--default-grid-baseline) / 2);
@@ -994,66 +1155,86 @@ body {
 		border: none;
 	}
 
-	&.vs--open .vs__selected:first-of-type {
-		margin-inline-start: calc(var(--default-grid-baseline) / 2 - (var(--border-width-input-focused, 2px) - var(--border-width-input, 2px))) !important; // prevent jumping
-	}
-
 	.vs__search {
-		text-overflow: ellipsis;
-		color: var(--color-main-text);
-		min-height: unset !important;
-		height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width)) !important;
-
-		&::placeholder {
-			color: var(--color-text-maxcontrast);
-		}
+		// NcTextField filling the search area; padding-end reserved for the actions overlay
+		width: 100%;
+		--input-padding-end: calc(var(--default-clickable-area) + var(--default-grid-baseline));
+
+		// Neutralize vue-select defaults on the wrapper div (no longer the native input)
+		border: none !important;
+		margin: 0 !important;
+		padding: 0 !important;
 	}
 
-	.vs__search, .vs__search:focus {
-		margin: 0;
+	// Force floating label when a value is selected (search input is empty but a value exists)
+	.vs__selected-options:has(.vs__selected) .vs__search {
+		.input-field__input + .input-field__label {
+			--input-label-font-size: 13px;
+			line-height: 1.5;
+			inset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);
+			font-weight: 500;
+			border-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;
+			background-color: var(--color-main-background);
+			padding-inline: var(--default-grid-baseline);
+			margin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));
+			transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);
+		}
 	}
 
-	.vs__dropdown-toggle {
-		position: relative;
-		max-height: 100px;
-		padding: var(--border-width-input);
-		overflow-y: auto;
+	// Single mode: border is on NcTextField, dropdown-toggle is invisible
+	&:not(.vs--multiple) .vs__dropdown-toggle {
+		padding: 0;
+		overflow: visible;
+		border: none !important;
+		box-shadow: none !important;
+		background: transparent;
 	}
 
 	.vs__actions {
-		position: sticky;
-		top: 0;
+		position: absolute;
+		z-index: 999;
+		inset-inline-end: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		height: 100%;
+		margin-block-start: 1px;
+		display: flex;
+		align-items: center;
 	}
 
 	.vs__clear {
 		margin-inline-end: 2px;
 	}
 
-	&.vs--open .vs__dropdown-toggle {
-		border-color: var(--color-main-text);
-		border-bottom-color: transparent;
-		border-bottom-left-radius: 0;
-		border-bottom-right-radius: 0;
-		border-style: solid;
-		border-width: var(--border-width-input-focused);
-		outline: 2px solid var(--color-main-background);
-		padding: 0;
-	}
-
-	&:not(.vs--disabled, .vs--open) {
-		.vs__dropdown-toggle:active,
-		.vs__dropdown-toggle:focus-within {
-			outline: 2px solid var(--color-main-background);
-			border-color: var(--color-main-text);
+	&.vs--open {
+		// Remove bottom border-radius when dropdown is open
+		.vs__search .input-field__input {
+			border-end-start-radius: 0 !important;
+			border-end-end-radius: 0 !important;
 		}
 	}
 
 	&.vs--disabled {
+		// Override vue-select's disabled background on all internal elements
+		// to prevent stacking with NcInputField's own background
+		.vs__clear,
+		.vs__dropdown-toggle,
+		.vs__open-indicator,
+		.vs__open-indicator-button,
 		.vs__search,
 		.vs__selected {
+			background-color: transparent;
 			color: var(--color-text-maxcontrast);
 		}
 
+		// Lighter border in disabled state to match single mode (NcInputField uses --color-border-dark)
+		.vs__dropdown-toggle {
+			--input-border-box-shadow-light: 0 -1px var(--color-border-dark),
+				0 0 0 1px color-mix(in srgb, var(--color-border-dark), 65% transparent);
+			--input-border-box-shadow-dark: 0 1px var(--color-border-dark),
+				0 0 0 1px color-mix(in srgb, var(--color-border-dark), 65% transparent);
+		}
+
 		.vs__clear,
 		.vs__deselect {
 			display: none;
@@ -1061,9 +1242,12 @@ body {
 	}
 
 	&--no-wrap {
+		.vs__dropdown-toggle {
+			overflow: hidden;
+		}
 		.vs__selected-options {
 			flex-wrap: nowrap;
-			overflow: auto;
+			overflow: auto !important;
 			min-width: unset;
 			.vs__selected {
 				min-width: unset;
@@ -1073,50 +1257,227 @@ body {
 
 	&--drop-up {
 		&.vs--open {
+			// Invert border-radius for drop-up: round bottom, flatten top
+			.vs__search .input-field__input {
+				border-end-start-radius: var(--border-radius-element) !important;
+				border-end-end-radius: var(--border-radius-element) !important;
+				border-start-start-radius: 0 !important;
+				border-start-end-radius: 0 !important;
+			}
+
+			// Move floating label to bottom so it doesn't overlap dropdown above
+			.vs__search .input-field__label {
+				inset-block-start: auto !important;
+				inset-block-end: calc(-1.5 * 13px / 2) !important;
+			}
+
+			// Multi: move label to bottom (inherits font/color/padding from floated state)
+			.select__label {
+				top: auto !important;
+				bottom: 0 !important;
+				transform: translateY(50%) !important;
+				// Flip border-radius for bottom position
+				border-radius: 0 0 var(--default-grid-baseline) var(--default-grid-baseline) !important;
+			}
+
+			// Multi drop-up: invert border only, keep padding unchanged
+			// to avoid layout jump (select--drop-up is added after vs--open)
 			.vs__dropdown-toggle {
-				border-radius: 0 0 var(--vs-border-radius) var(--vs-border-radius);
-				border-top-color: transparent;
-				border-bottom-color: var(--color-main-text);
+				border-block-start-color: transparent !important;
+				border-block-end-color: var(--color-main-text) !important;
+				border-start-start-radius: 0 !important;
+				border-start-end-radius: 0 !important;
+				border-end-start-radius: var(--border-radius-element) !important;
+				border-end-end-radius: var(--border-radius-element) !important;
+			}
+
+			// Revert the padding from the bottom-open state
+			&.vs--multiple .vs__dropdown-toggle {
+				padding-block: 0 calc(var(--default-grid-baseline) * 1.5) !important;
 			}
 		}
 	}
 
 	.vs__selected-options {
 		// If search is hidden, ensure that the height of the search is the same
-		min-height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width));
+		min-height: unset;
 
 		// Hide search from dom if unused to prevent unneeded flex wrap
-		.vs__selected ~ .vs__search[readonly] {
+		.vs__selected ~ .vs__search:has(.input-field__input[readonly]) {
 			position: absolute;
 		}
-		padding: 0 5px;
+		padding: 0;
+		border: none;
+		overflow: visible;
 	}
 
-	&.vs--single {
-		&.vs--loading,
-		&.vs--open {
-			.vs__selected {
-				// Fix `max-width` for `position: absolute`
-				max-width: 100%;
-				// Fix color to be accessible
-				opacity: 1;
-				color: var(--color-text-maxcontrast);
+	// Multi-select: border on dropdown-toggle (contains tags + input)
+	// NcTextField is transparent; floating label via #header slot
+	&.vs--multiple {
+		.vs__dropdown-toggle {
+			// Use transparent border in closed state to reserve the same space
+			// as the open state's real border — prevents layout jump on click
+			border: var(--border-width-input-focused, 2px) solid transparent;
+			box-shadow: var(--input-border-box-shadow);
+			// Top padding for floating label clearance, no bottom padding
+			padding-block: calc(var(--default-grid-baseline) * 1.5) 0;
+			// Left padding so tags don't overlap the border-radius curve
+			padding-inline-start: var(--default-grid-baseline);
+			overflow: visible;
+			background: var(--color-main-background);
+		}
+
+		// When open, switch to visible border with subtle bottom divider
+		&.vs--open .vs__dropdown-toggle {
+			box-shadow: none !important;
+			border-color: var(--color-main-text);
+			// Subtle divider line between tags and dropdown (not fully transparent)
+			border-block-end-color: var(--color-border-maxcontrast);
+			border-end-start-radius: 0;
+			border-end-end-radius: 0;
+			outline: 2px solid var(--color-main-background);
+		}
+
+		// Remove NcTextField border in multi mode — border is on dropdown-toggle
+		.vs__search .input-field__input {
+			box-shadow: none !important;
+			background: transparent;
+		}
+
+		// NcTextField shares flex row with tags — always inline, no absolute hiding
+		.vs__search {
+			width: 0;
+			flex-grow: 1;
+			min-width: 40px;
+		}
+
+		// No-wrap: clip overflow inside the toggle (needs to be here
+		// for specificity to beat the overflow: visible above)
+		&.select--no-wrap {
+			.vs__dropdown-toggle {
+				overflow: hidden;
+			}
+
+			.vs__actions {
+				// Slight fade for non-wrap tags display
+				background: linear-gradient(90deg, transparent, var(--color-main-background) 10%, var(--color-main-background) 100%);
+				margin-block: 0px;
+				margin-inline-end: 2px;
+				border-radius: var(--border-radius-element);
+				height: calc(100% - 6px);
 			}
 		}
+
+		// No label margin needed — label is via #header
+		.vs__search .input-field {
+			margin-block-start: 0;
+		}
+
+		// Match NcTextField height to tag row height for consistent toggle sizing
+		.vs__search .input-field__main-wrapper {
+			height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width) - var(--default-grid-baseline));
+			margin: calc(var(--default-grid-baseline) / 2) 0;
+		}
+
+		// Label: centered inside toggle when empty (placeholder-like),
+		// floats above border when has value or open (matches NcInputField)
+		.select__label {
+			position: absolute;
+			z-index: 1;
+			inset-inline-start: var(--border-width-input-focused, 2px);
+			// Center vertically regardless of toggle height
+			top: 50%;
+			transform: translateY(-50%);
+			font-size: var(--default-font-size);
+			margin-inline: var(--border-radius-element);
+			color: var(--color-text-maxcontrast);
+			pointer-events: none;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			max-width: calc(100% - var(--clickable-area-large));
+			transition: top var(--animation-quick), transform var(--animation-quick), font-size var(--animation-quick), font-weight var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);
+		}
+
+		// Float label when has tags or dropdown is open
+		&:has(.vs__selected) .select__label,
+		&.vs--open .select__label {
+			--input-label-font-size: 13px;
+			font-size: var(--input-label-font-size);
+			line-height: 1.5;
+			// Match NcInputField: half the line-height above the border
+			top: calc(-1.5 * var(--input-label-font-size) / 2);
+			transform: none;
+			font-weight: 500;
+			border-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;
+			background-color: var(--color-main-background);
+			padding-inline: var(--default-grid-baseline);
+			margin-inline: calc(var(--border-radius-element) - var(--default-grid-baseline));
+			transition: top var(--animation-quick), transform var(--animation-quick), font-size var(--animation-quick), font-weight var(--animation-quick), background-color var(--animation-quick);
+		}
+	}
+
+	&.vs--single {
+		// In single mode, overlay the selected value on top of the NcTextField input area
+		// so it appears inside the border (which is on the NcTextField, not the toggle)
 		.vs__selected-options {
+			position: relative;
 			flex-wrap: nowrap;
 		}
+
 		.vs__selected {
+			position: absolute;
+			inset-block: 0;
+			inset-inline-start: 0;
+			inset-inline-end: 0;
+			margin: 0;
+			z-index: 2; // above vs__search (z-index: 1 from vue-select default)
+			pointer-events: none;
+			display: flex;
+			align-items: center;
+			padding-block: 0;
+			padding-inline: var(--border-radius-element) var(--input-padding-end, calc(var(--default-clickable-area) + var(--default-grid-baseline)));
 			background: unset !important;
+			border: none;
+			border-radius: 0;
+			height: unset;
+			font-size: var(--default-font-size);
+			color: var(--color-main-text);
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
 		}
-	}
-}
 
-.vs__dropdown-toggle {
-	@include border.inputLikeBorder('.select--legacy', var(--vs-border-color));
+		// Extra padding when clear button visible (clear + chevron need more space)
+		&:has(.vs__clear) .vs__selected {
+			padding-inline-end: calc(2 * var(--default-clickable-area));
+		}
+
+		&.vs--loading,
+		&.vs--open {
+			.vs__selected {
+				// Fix color to be accessible while typing
+				opacity: 0.4;
+			}
+		}
+	}
 }
 
+// Dropdown menu is teleported to body by floating-ui, so it must be
+// styled at root level (cannot be nested under .v-select.select).
+// CSS variables must also be set here since it can't inherit from .v-select.select.
 .vs__dropdown-menu {
+	--vs-border-color: var(--color-border-maxcontrast);
+	--vs-border-style: solid;
+	--vs-border-radius: var(--border-radius-element);
+	--vs-dropdown-bg: var(--color-main-background);
+	--vs-dropdown-color: var(--color-main-text);
+	--vs-dropdown-option-padding: 8px 20px;
+	--vs-dropdown-option--active-bg: var(--color-background-hover);
+	--vs-dropdown-option--active-color: var(--color-main-text);
+	--vs-dropdown-option--kb-focus-box-shadow: inset 0px 0px 0px 2px var(--color-border-maxcontrast);
+	--vs-dropdown-option--deselect-bg: var(--color-error);
+	--vs-dropdown-option--deselect-color: #fff;
 	border-width: var(--border-width-input-focused) !important;
 	border-color: var(--color-main-text) !important;
 	outline: none !important;
@@ -1154,4 +1515,44 @@ body {
 		color: var(--color-text-maxcontrast) !important;
 	}
 }
+
+// Border for .vs__dropdown-toggle — inlined from inputLikeBorder mixin
+// because the mixin's @media #{&} produces doubled selectors when nested.
+[data-v-new-select].v-select.select .vs__dropdown-toggle {
+	--input-border-box-shadow-light: 0 -1px var(--vs-border-color),
+		0 0 0 1px color-mix(in srgb, var(--vs-border-color), 65% transparent);
+	--input-border-box-shadow-dark: 0 -1px var(--vs-border-color),
+		0 0 0 1px color-mix(in srgb, var(--vs-border-color), 65% transparent);
+	--input-border-box-shadow: var(--input-border-box-shadow-light);
+	border: none;
+	border-radius: var(--border-radius-element);
+	box-shadow: var(--input-border-box-shadow);
+}
+
+// Hover: use .vs--disabled on parent (toggle div never has [disabled] attribute)
+[data-v-new-select].v-select.select:not(.vs--disabled) .vs__dropdown-toggle:hover {
+	box-shadow: 0 0 0 1px var(--vs-border-color);
+}
+
+@media (prefers-color-scheme: dark) {
+	[data-v-new-select].v-select.select .vs__dropdown-toggle {
+		--input-border-box-shadow: var(--input-border-box-shadow-dark);
+	}
+}
+
+[data-theme-dark] [data-v-new-select].v-select.select .vs__dropdown-toggle {
+	--input-border-box-shadow: var(--input-border-box-shadow-dark);
+}
+
+[data-theme-light] [data-v-new-select].v-select.select .vs__dropdown-toggle {
+	--input-border-box-shadow: var(--input-border-box-shadow-light);
+}
+
+.select--legacy[data-v-new-select].v-select.select .vs__dropdown-toggle {
+	box-shadow: 0 0 0 1px var(--vs-border-color);
+
+	&:hover:not([disabled]) {
+		box-shadow: 0 0 0 2px var(--vs-border-color);
+	}
+}
 </style>
diff --git a/tests/component/components/NcSelect/NcSelect.spec.ts b/tests/component/components/NcSelect/NcSelect.spec.ts
new file mode 100644
index 0000000000..6beee846b5
--- /dev/null
+++ b/tests/component/components/NcSelect/NcSelect.spec.ts
@@ -0,0 +1,286 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { expect, test } from '@playwright/experimental-ct-vue'
+import NcSelectStory from './NcSelect.story.vue'
+
+test.describe('NcSelect - single mode', () => {
+	test('has a visible combobox', async ({ mount }) => {
+		const component = await mount(NcSelectStory)
+		await expect(component.getByRole('combobox')).toBeVisible()
+	})
+
+	test('shows label as placeholder when empty', async ({ mount }) => {
+		const component = await mount(NcSelectStory, {
+			props: { inputLabel: 'Pick a fruit' },
+		})
+		await expect(component.getByText('Pick a fruit')).toBeVisible()
+	})
+
+	test('opens dropdown on click', async ({ mount, page }) => {
+		const component = await mount(NcSelectStory)
+		await component.getByRole('combobox').click()
+		await expect(page.getByRole('option', { name: 'foo' })).toBeVisible()
+	})
+
+	test('opens dropdown on Enter', async ({ mount, page }) => {
+		const component = await mount(NcSelectStory)
+		await component.getByRole('combobox').press('Enter')
+		await expect(page.getByRole('option', { name: 'foo' })).toBeVisible()
+	})
+
+	test('closes on Escape', async ({ mount, page }) => {
+		const component = await mount(NcSelectStory)
+		await component.getByRole('combobox').click()
+		await expect(page.getByRole('option', { name: 'foo' })).toBeVisible()
+
+		await component.getByRole('combobox').press('Escape')
+		await expect(page.getByRole('option', { name: 'foo' })).not.toBeVisible()
+	})
+
+	test('arrow keys navigate options', async ({ mount, page }) => {
+		const component = await mount(NcSelectStory)
+		await component.getByRole('combobox').click()
+		await component.getByRole('combobox').press('ArrowDown')
+
+		// First option should be highlighted
+		const options = page.getByRole('option')
+		await expect(options.first()).toBeVisible()
+	})
+
+	test('selects option with Enter', async ({ mount, page }) => {
+		const emitted: unknown[] = []
+		const component = await mount(NcSelectStory, {
+			on: { selected: (data) => emitted.push(data) },
+		})
+
+		await component.getByRole('combobox').click()
+		await page.getByRole('option', { name: 'bar' }).click()
+
+		expect(emitted).toHaveLength(1)
+		expect(emitted[0]).toBe('bar')
+	})
+
+	test('typing filters options', async ({ mount, page }) => {
+		const component = await mount(NcSelectStory)
+		await component.getByRole('combobox').click()
+		await component.getByRole('combobox').fill('ba')
+
+		await expect(page.getByRole('option', { name: 'bar' })).toBeVisible()
+		await expect(page.getByRole('option', { name: 'baz' })).toBeVisible()
+		expect(await page.getByRole('option').all()).toHaveLength(2)
+	})
+
+	test('shows selected value', async ({ mount }) => {
+		const component = await mount(NcSelectStory, {
+			props: { preselected: true },
+		})
+
+		await expect(component.getByText('foo')).toBeVisible()
+	})
+
+	test('disabled state prevents interaction', async ({ mount }) => {
+		const component = await mount(NcSelectStory, {
+			props: { disabled: true },
+		})
+
+		await component.getByRole('combobox').click({ force: true })
+		await expect(component.locator('.vs__dropdown-menu')).not.toBeVisible()
+	})
+})
+
+test.describe('NcSelect - multi mode', () => {
+	test('shows label when empty', async ({ mount }) => {
+		const component = await mount(NcSelectStory, {
+			props: { multiple: true, inputLabel: 'Pick items' },
+		})
+		await expect(component.getByText('Pick items')).toBeVisible()
+	})
+
+	test('shows tags when values selected', async ({ mount }) => {
+		const component = await mount(NcSelectStory, {
+			props: { multiple: true, preselected: true },
+		})
+
+		await expect(component.getByText('foo')).toBeVisible()
+		await expect(component.getByText('bar')).toBeVisible()
+	})
+
+	test('can select multiple options', async ({ mount, page }) => {
+		const emitted: unknown[] = []
+		const component = await mount(NcSelectStory, {
+			props: { multiple: true },
+			on: { selected: (data) => emitted.push(data) },
+		})
+
+		await component.getByRole('combobox').click()
+		await page.getByRole('option', { name: 'foo' }).click()
+
+		await component.getByRole('combobox').click()
+		await page.getByRole('option', { name: 'bar' }).click()
+
+		expect(emitted).toHaveLength(2)
+		expect(emitted[0]).toEqual(['foo'])
+		expect(emitted[1]).toEqual(['foo', 'bar'])
+	})
+
+	test('can remove tag with deselect button', async ({ mount }) => {
+		const emitted: unknown[] = []
+		const component = await mount(NcSelectStory, {
+			props: { multiple: true, preselected: true },
+			on: { selected: (data) => emitted.push(data) },
+		})
+
+		// Click the deselect (×) button on first tag
+		const deselectButtons = component.locator('.vs__deselect')
+		await deselectButtons.first().click()
+
+		expect(emitted).toHaveLength(1)
+		expect(emitted[0]).toEqual(['bar'])
+	})
+})
+
+test.describe('NcSelect - e2e flows', () => {
+	test('search, select, and clear single value', async ({ mount, page }) => {
+		const emitted: unknown[] = []
+		const component = await mount(NcSelectStory, {
+			props: { inputLabel: 'Pick one' },
+			on: { selected: (data) => emitted.push(data) },
+		})
+
+		// Type to search
+		await component.getByRole('combobox').click()
+		await component.getByRole('combobox').fill('qu')
+		expect(await page.getByRole('option').all()).toHaveLength(2)
+
+		// Select 'qux'
+		await page.getByRole('option', { name: 'qux' }).click()
+		expect(emitted[0]).toBe('qux')
+
+		// Value is shown
+		await expect(component.getByText('qux')).toBeVisible()
+	})
+
+	test('keyboard-only selection flow', async ({ mount, page }) => {
+		const emitted: unknown[] = []
+		const component = await mount(NcSelectStory, {
+			on: { selected: (data) => emitted.push(data) },
+		})
+
+		const combobox = component.getByRole('combobox')
+
+		// Open with Enter
+		await combobox.press('Enter')
+		await expect(page.getByRole('option').first()).toBeVisible()
+
+		// Navigate down twice and select with Enter
+		await combobox.press('ArrowDown')
+		await combobox.press('ArrowDown')
+		await combobox.press('Enter')
+
+		expect(emitted).toHaveLength(1)
+	})
+
+	test('click outside closes dropdown', async ({ mount, page }) => {
+		const component = await mount(NcSelectStory)
+
+		await component.getByRole('combobox').click()
+		await expect(page.getByRole('option').first()).toBeVisible()
+
+		// Click outside the select
+		await page.locator('body').click({ position: { x: 10, y: 10 } })
+		await expect(page.getByRole('option').first()).not.toBeVisible()
+	})
+
+	test('multi: search filters then select adds tag', async ({ mount, page }) => {
+		const emitted: unknown[] = []
+		const component = await mount(NcSelectStory, {
+			props: { multiple: true },
+			on: { selected: (data) => emitted.push(data) },
+		})
+
+		// Type to filter
+		await component.getByRole('combobox').click()
+		await component.getByRole('combobox').fill('ba')
+		expect(await page.getByRole('option').all()).toHaveLength(2)
+
+		// Select 'baz'
+		await page.getByRole('option', { name: 'baz' }).click()
+		expect(emitted[0]).toEqual(['baz'])
+
+		// Tag visible
+		await expect(component.getByText('baz')).toBeVisible()
+
+		// Select another
+		await component.getByRole('combobox').click()
+		await page.getByRole('option', { name: 'foo' }).click()
+		expect(emitted[1]).toEqual(['baz', 'foo'])
+	})
+
+	test('multi: Backspace removes last tag', async ({ mount }) => {
+		const emitted: unknown[] = []
+		const component = await mount(NcSelectStory, {
+			props: { multiple: true, preselected: true },
+			on: { selected: (data) => emitted.push(data) },
+		})
+
+		// foo and bar are preselected
+		await expect(component.getByText('foo')).toBeVisible()
+		await expect(component.getByText('bar')).toBeVisible()
+
+		// Focus and press Backspace to remove last tag
+		await component.getByRole('combobox').click()
+		await component.getByRole('combobox').press('Backspace')
+
+		expect(emitted).toHaveLength(1)
+		expect(emitted[0]).toEqual(['foo'])
+	})
+
+	test('selecting same value in single mode replaces it', async ({ mount, page }) => {
+		const emitted: unknown[] = []
+		const component = await mount(NcSelectStory, {
+			props: { preselected: true },
+			on: { selected: (data) => emitted.push(data) },
+		})
+
+		// foo is preselected, select bar instead
+		await component.getByRole('combobox').click()
+		await page.getByRole('option', { name: 'bar' }).click()
+
+		expect(emitted[0]).toBe('bar')
+		await expect(component.getByText('bar')).toBeVisible()
+	})
+})
+
+test.describe('NcSelect - NcTextField parity', () => {
+	test('renders an input element', async ({ mount }) => {
+		const component = await mount(NcSelectStory)
+		await expect(component.locator('input')).toBeVisible()
+	})
+
+	test('label floats when input is focused', async ({ mount }) => {
+		const component = await mount(NcSelectStory, {
+			props: { inputLabel: 'My label' },
+		})
+
+		const label = component.locator('label')
+		await component.getByRole('combobox').click()
+
+		// Label should still be visible (floated above border)
+		await expect(label).toBeVisible()
+		await expect(label).toContainText('My label')
+	})
+
+	test('label floats when value is selected', async ({ mount }) => {
+		const component = await mount(NcSelectStory, {
+			props: { inputLabel: 'My label', preselected: true },
+		})
+
+		// Label should be floated (not centered as placeholder)
+		const label = component.locator('label')
+		await expect(label).toBeVisible()
+		await expect(label).toContainText('My label')
+	})
+})
diff --git a/tests/component/components/NcSelect/NcSelect.story.vue b/tests/component/components/NcSelect/NcSelect.story.vue
new file mode 100644
index 0000000000..5858a36bf1
--- /dev/null
+++ b/tests/component/components/NcSelect/NcSelect.story.vue
@@ -0,0 +1,53 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div class="story-wrapper">
+		<NcSelect
+			v-model="value"
+			:inputLabel="inputLabel"
+			:multiple="multiple"
+			:disabled="disabled"
+			:placeholder="placeholder"
+			:options="options"
+			@update:modelValue="$emit('selected', $event)" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import NcSelect from '../../../../src/components/NcSelect/NcSelect.vue'
+
+const props = withDefaults(defineProps<{
+	inputLabel?: string
+	multiple?: boolean
+	disabled?: boolean
+	placeholder?: string
+	options?: string[]
+	preselected?: boolean
+}>(), {
+	inputLabel: 'Choose an option',
+	multiple: false,
+	disabled: false,
+	placeholder: '',
+	options: () => (['foo', 'bar', 'baz', 'qux', 'quux']),
+	preselected: false,
+})
+
+defineEmits<{
+	selected: [data?: string | string[]]
+}>()
+
+const value = ref<string | string[] | undefined>(props.preselected
+	? props.multiple ? ['foo', 'bar'] : 'foo'
+	: undefined)
+</script>
+
+<style scoped>
+.story-wrapper {
+	padding: 20px;
+	max-width: 400px;
+}
+</style>
diff --git a/tests/unit/components/NcSelect/NcSelect.spec.ts b/tests/unit/components/NcSelect/NcSelect.spec.ts
new file mode 100644
index 0000000000..5e04969952
--- /dev/null
+++ b/tests/unit/components/NcSelect/NcSelect.spec.ts
@@ -0,0 +1,191 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import NcSelect from '../../../../src/components/NcSelect/NcSelect.vue'
+
+const options = ['foo', 'bar', 'baz']
+
+describe('NcSelect', () => {
+	it('renders NcTextField in search slot', () => {
+		const wrapper = mount(NcSelect, {
+			props: { inputLabel: 'Label', options },
+		})
+
+		expect(wrapper.findComponent({ name: 'NcTextField' }).exists()).toBe(true)
+	})
+
+	it('has the label set', () => {
+		const wrapper = mount(NcSelect, {
+			props: { inputLabel: 'The label', options },
+		})
+
+		expect(wrapper.find('label').text()).toBe('The label')
+	})
+
+	it('passes placeholder prop to NcTextField', () => {
+		const wrapper = mount(NcSelect, {
+			props: { inputLabel: 'Label', placeholder: 'Pick one', options },
+		})
+
+		// vue-select includes placeholder in attributes, NcTextField receives it
+		const textField = wrapper.findComponent({ name: 'NcInputField' })
+		expect(textField.exists()).toBe(true)
+	})
+
+	it('has the disabled attribute', async () => {
+		const wrapper = mount(NcSelect, {
+			props: { inputLabel: 'Label', options },
+		})
+
+		expect(wrapper.find('input').attributes('disabled')).toBeUndefined()
+
+		await wrapper.setProps({ disabled: true })
+		expect(wrapper.find('input').attributes('disabled')).toBe('')
+	})
+
+	it('has the inputClass set on NcTextField', () => {
+		const wrapper = mount(NcSelect, {
+			props: { inputLabel: 'Label', inputClass: 'custom-class', options },
+		})
+
+		expect(wrapper.findComponent({ name: 'NcTextField' }).classes('custom-class')).toBe(true)
+	})
+
+	it('emits update:modelValue on selection', async () => {
+		const wrapper = mount(NcSelect, {
+			props: { inputLabel: 'Label', options },
+		})
+
+		// Open dropdown
+		await wrapper.find('.vs__dropdown-toggle').trigger('mousedown')
+		await wrapper.vm.$nextTick()
+
+		// Select first option
+		const option = wrapper.find('.vs__dropdown-option')
+		if (option.exists()) {
+			await option.trigger('mousedown')
+			await wrapper.vm.$nextTick()
+			expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		}
+	})
+
+	it('sets required conditionally based on value', async () => {
+		const wrapper = mount(NcSelect, {
+			props: { inputLabel: 'Label', required: true, modelValue: null, options },
+		})
+
+		expect(wrapper.find('input').attributes('required')).toBe('')
+
+		await wrapper.setProps({ modelValue: 'foo' })
+		expect(wrapper.find('input').attributes('required')).toBeUndefined()
+	})
+
+	describe('single mode', () => {
+		it('uses NcTextField label (not header slot)', () => {
+			const wrapper = mount(NcSelect, {
+				props: { inputLabel: 'Single label', options },
+			})
+
+			// Label is on NcTextField, not a separate .select__label element
+			const textField = wrapper.findComponent({ name: 'NcTextField' })
+			expect(textField.props('label')).toBe('Single label')
+			expect(wrapper.find('.select__label').exists()).toBe(false)
+		})
+	})
+
+	describe('multi mode', () => {
+		it('renders label via header slot', () => {
+			const wrapper = mount(NcSelect, {
+				props: { inputLabel: 'Multi label', multiple: true, options },
+			})
+
+			expect(wrapper.find('.select__label').exists()).toBe(true)
+			expect(wrapper.find('.select__label').text()).toBe('Multi label')
+		})
+
+		it('passes labelOutside to NcTextField', () => {
+			const wrapper = mount(NcSelect, {
+				props: { inputLabel: 'Multi label', multiple: true, options },
+			})
+
+			const textField = wrapper.findComponent({ name: 'NcTextField' })
+			expect(textField.props('labelOutside')).toBe(true)
+		})
+	})
+
+	describe('labelOutside', () => {
+		it('does not render floating label when labelOutside is true', () => {
+			const wrapper = mount(NcSelect, {
+				props: { inputLabel: 'Label', labelOutside: true, options },
+			})
+
+			// Single: NcTextField label should be empty
+			const textField = wrapper.findComponent({ name: 'NcTextField' })
+			expect(textField.props('label')).toBe('')
+		})
+
+		it('does not render header label in multi mode when labelOutside', () => {
+			const wrapper = mount(NcSelect, {
+				props: { inputLabel: 'Label', labelOutside: true, multiple: true, options },
+			})
+
+			expect(wrapper.find('.select__label').exists()).toBe(false)
+		})
+	})
+
+	describe('accessibility', () => {
+		it('warns when neither inputLabel nor ariaLabelCombobox is set', () => {
+			const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+			mount(NcSelect, { props: { options } })
+			expect(warnSpy).toHaveBeenCalled()
+			warnSpy.mockRestore()
+		})
+
+		it('does not warn when inputLabel is set', () => {
+			const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+			mount(NcSelect, { props: { inputLabel: 'Label', options } })
+			expect(warnSpy).not.toHaveBeenCalled()
+			warnSpy.mockRestore()
+		})
+
+		it('does not warn about NcSelect label when ariaLabelCombobox is set', () => {
+			const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+			mount(NcSelect, { props: { ariaLabelCombobox: 'Search', options } })
+			// NcSelect itself should not warn, though NcInputField may warn separately
+			const ncSelectWarns = warnSpy.mock.calls.filter((args) => typeof args[0] === 'string' && args[0].includes('[NcSelect]'))
+			expect(ncSelectWarns).toHaveLength(0)
+			warnSpy.mockRestore()
+		})
+	})
+
+	describe('event forwarding', () => {
+		it('forwards keydown events to the inner input', async () => {
+			const wrapper = mount(NcSelect, {
+				props: { inputLabel: 'Label', options },
+			})
+
+			const input = wrapper.find('input')
+			await input.trigger('keydown', { key: 'ArrowDown' })
+			// If keydown is forwarded, vue-select processes it — no error thrown
+			expect(wrapper.find('.v-select').exists()).toBe(true)
+		})
+
+		it('filters input event from forwarded events', () => {
+			const wrapper = mount(NcSelect, {
+				props: { inputLabel: 'Label', options },
+			})
+
+			const vm = wrapper.vm as any
+			const events = { input: vi.fn(), keydown: vi.fn(), blur: vi.fn() }
+			const filtered = vm.filterEvents(events)
+
+			expect(filtered).not.toHaveProperty('input')
+			expect(filtered).toHaveProperty('keydown')
+			expect(filtered).toHaveProperty('blur')
+		})
+	})
+})