[TheMeinerLP]

Description

The select fields in the MD3 dashboard had three visible problems in dark mode: the open option list was the browser's own white popup with barely readable options and an OS-blue selection, a focused field showed a purple outline next to a pink label, and the field appeared to jump on focus.

Cause: MdSelect wrapped a native <select>. The browser drew its own option list, and @tailwindcss/forms draws a blue outer ring on a focused <select>, so the outline and the label disagreed.

Fix: MdSelect is now a select-only combobox with an MD3 menu drawn in the body. The menu uses the surface-container and primary roles, opens above the field when there is no room below, and follows the keyboard as a native select does (arrows, Home, End, type-ahead, Enter, Space, Escape, Tab). The focus colour is primary for the outline, the floating label and the trailing icon. The outline is a 1px border plus a 1px inset shadow, so focus never moves the field. Invalid fields keep the error role.

All call sites (search sort and order, audit action, maintenance dialogs, settings forms, repository wizard, the JSON-forms enum and one-of renderers) use MdSelect, so they change without edits. v-model, props and events are unchanged. A visually hidden native <select> stays in the DOM as the form value, so existing code that reads the select by id or name keeps working.

Type of change

• fix - bug fix
• feat - new feature
• refactor - internal change without behaviour change
• perf - performance improvement
• docs - documentation only
• test - tests only
• build / ci / chore - tooling, dependencies, pipelines
• Breaking change (configuration, API or behaviour that existing deployments rely on)

How was tested

Frontend only (reposilite-frontend/). Gradle was not run.

• npx vitest run on MdSelect.test.js (42 tests: keyboard, v-model, ARIA, menu placement, focus classes, error and disabled states), plus the 19 test files of the components that render MdSelect (538 tests in total) with --maxWorkers=2, all green.
• npm run build: passes.
• eslint on the two changed files: clean.
• Manual check in Chromium on the search page in dark mode: the menu renders on the dark surface with readable options and a primary selection; the focused field keeps its box position and label position, and its border, inset outline and label share one primary colour; ArrowDown, ArrowDown, Enter changes sort to artifactId, updates the URL and keeps focus on the field.

Checklist

• Commit messages follow the Conventional Commits convention documented in CLAUDE.md
• Tests cover the change
• ./gradlew build passes locally (not run: no backend change)
• Documentation and configuration samples are updated if the change is user-facing (no docs changed)
• Existing copyright headers are preserved; no new files
• No credentials, tokens or personal data are included in the diff