From e51719f73beccb6f78b67fd6226b7763de68930f Mon Sep 17 00:00:00 2001
From: Pascal Roehling <pas.roehling@gmail.com>
Date: Wed, 17 Jun 2026 19:07:42 +0200
Subject: [PATCH 1/5] refactor(pointerPosition): ensure type safety of
 currentEpsgSystem

---
 src/plugins/pointerPosition/store.ts | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/plugins/pointerPosition/store.ts b/src/plugins/pointerPosition/store.ts
index d432a29655..4364abce7f 100644
--- a/src/plugins/pointerPosition/store.ts
+++ b/src/plugins/pointerPosition/store.ts
@@ -38,12 +38,19 @@ export const usePointerPositionStore = defineStore(
 					}))
 		)
 
-		const currentEpsgSystem = computed(
-			() => availableProjections.value[selectedProjectionIndex.value]
-		)
+		const currentEpsgSystem = computed(() => {
+			const projection =
+				availableProjections.value[selectedProjectionIndex.value]
+			if (!projection) {
+				throw new Error(
+					'selectedProjectionIndex out of bounds. This should never happen.'
+				)
+			}
+			return projection
+		})
 
 		const selectedProjection = computed({
-			get: () => currentEpsgSystem.value?.code,
+			get: () => currentEpsgSystem.value.code,
 			set: (value) => {
 				const index = availableProjections.value.findIndex(
 					({ code }) => code === value
@@ -58,7 +65,7 @@ export const usePointerPositionStore = defineStore(
 
 		const formattedPointerPosition = computed(() =>
 			pointerPosition.value.length
-				? createStringXY(currentEpsgSystem.value?.decimals ?? 4)(
+				? createStringXY(currentEpsgSystem.value.decimals)(
 						transform(
 							pointerPosition.value,
 							coreStore.map.getView().getProjection().getCode(),

From 6a1ed67d2fef72782f9d2c434726cc8f7840f0a6 Mon Sep 17 00:00:00 2001
From: Pascal Roehling <pas.roehling@gmail.com>
Date: Wed, 17 Jun 2026 19:08:10 +0200
Subject: [PATCH 2/5] refactor: adjust PolarSelect to utilize defineModel

Also, remove shadowing of variables and redundant defaults for props.
---
 src/components/PolarSelect.ce.vue             | 77 +++++++------------
 .../components/AddressSearch.ce.vue           |  3 +-
 .../components/PointerPosition.ce.vue         |  6 +-
 .../scale/components/ScaleWidget.ce.vue       | 14 ++--
 4 files changed, 37 insertions(+), 63 deletions(-)

diff --git a/src/components/PolarSelect.ce.vue b/src/components/PolarSelect.ce.vue
index 79b591bcb8..1f43f5b73f 100644
--- a/src/components/PolarSelect.ce.vue
+++ b/src/components/PolarSelect.ce.vue
@@ -1,29 +1,27 @@
 <template>
 	<div class="kern-form-input">
-		<label v-if="label" class="kern-label" :for="id">
+		<label v-if="label" class="kern-label" :for="resolvedId">
 			{{ label }}
 		</label>
-		<div class="kern-form-input__select-wrapper" :class="small ? 'small' : ''">
+		<div class="kern-form-input__select-wrapper" :class="{ small }">
 			<select
-				:id="id"
+				:id="resolvedId"
 				class="kern-form-input__select"
 				:aria-label="ariaLabel"
 				:disabled
 				:required
 				:multiple
-				:value
+				:value="model"
 				@change="onChange"
 			>
 				<option v-if="defaultLabel" value="">{{ defaultLabel }}</option>
-				<!-- Intentional for straightforward API -->
-				<!-- eslint-disable-next-line vue/no-template-shadow -->
 				<option
-					v-for="{ value, label, ariaLabel } of options"
-					:key="value"
-					:value="value"
-					:aria-label="ariaLabel"
+					v-for="option of options"
+					:key="option.value"
+					:value="option.value"
+					:aria-label="option.ariaLabel"
 				>
-					{{ label }}
+					{{ option.label }}
 				</option>
 			</select>
 		</div>
@@ -33,55 +31,36 @@
 <script setup lang="ts">
 import { computed, useId } from 'vue'
 
-const props = withDefaults(
-	defineProps<{
-		label?: string
+const props = defineProps<{
+	options: {
+		value: string | number
+		label: string
 		ariaLabel?: string
-		defaultLabel?: string
-		value: string | string[]
-		options: {
-			value: string | number
-			label: string
-			ariaLabel?: string
-			[key: string]: unknown
-		}[]
-		disabled?: boolean
-		required?: boolean
-		multiple?: boolean
-		small?: boolean
-		id?: string
-	}>(),
-	{
-		label: '',
-		ariaLabel: undefined,
-		defaultLabel: '',
-		disabled: false,
-		required: false,
-		multiple: false,
-		small: false,
-		id: '',
-	}
-)
+		[key: string]: unknown
+	}[]
+	label?: string
+	ariaLabel?: string
+	defaultLabel?: string
+	disabled?: boolean
+	required?: boolean
+	multiple?: boolean
+	small?: boolean
+	id?: string
+}>()
+const model = defineModel<string | string[]>({ required: true })
 
 const fallbackId = useId()
-
-const id = computed(() => props.id || fallbackId)
-
-const emit = defineEmits<{
-	(e: 'update:value', value: string | string[]): void
-}>()
+const resolvedId = computed(() => props.id || fallbackId)
 
 function onChange(event: Event) {
 	const target = event.target as HTMLSelectElement
 	if (props.multiple) {
-		const selected = Array.from(target.selectedOptions).map((opt) => opt.value)
-		emit('update:value', selected)
+		model.value = Array.from(target.selectedOptions).map((opt) => opt.value)
 	} else {
-		emit('update:value', target.value)
+		model.value = target.value
 	}
 }
 </script>
-
 <style scoped>
 .kern-form-input__select-wrapper.small {
 	height: var(--kern-metric-dimension-default);
diff --git a/src/plugins/addressSearch/components/AddressSearch.ce.vue b/src/plugins/addressSearch/components/AddressSearch.ce.vue
index f092cf0218..0e97da13cb 100644
--- a/src/plugins/addressSearch/components/AddressSearch.ce.vue
+++ b/src/plugins/addressSearch/components/AddressSearch.ce.vue
@@ -12,6 +12,7 @@
 			<!-- Mapping in template to guarantee update on language change-->
 			<PolarSelect
 				v-if="hasMultipleGroups"
+				v-model="selectedGroupId"
 				:aria-label="$t(($) => $.groupSelector, { ns: PluginId })"
 				:options="
 					groupSelectOptions.map(({ groupId, text }) => ({
@@ -19,8 +20,6 @@
 						label: $t(($) => $[text], { ns: PluginId }),
 					}))
 				"
-				:value="selectedGroupId"
-				@update:value="selectedGroupId = $event as string"
 			/>
 			<div class="polar-plugin-address-search-input-wrapper">
 				<span class="kern-icon kern-icon--search" aria-hidden="true" />
diff --git a/src/plugins/pointerPosition/components/PointerPosition.ce.vue b/src/plugins/pointerPosition/components/PointerPosition.ce.vue
index 1158b154c4..1c80ad096e 100644
--- a/src/plugins/pointerPosition/components/PointerPosition.ce.vue
+++ b/src/plugins/pointerPosition/components/PointerPosition.ce.vue
@@ -7,7 +7,7 @@
 		<span class="kern-icon kern-icon--point-scan" aria-hidden="true" />
 		<PolarSelect
 			v-if="availableProjections.length > 1"
-			:value="String(selectedProjection)"
+			v-model="selectedProjection"
 			:options="
 				availableProjections.map((projection) => ({
 					value: projection.code,
@@ -17,10 +17,6 @@
 			"
 			:aria-label="$t(($) => $.projectionSelect.label, { ns: PluginId })"
 			small
-			@update:value="
-				(value) =>
-					(selectedProjection = Array.isArray(value) ? value[0] : value)
-			"
 		/>
 		<small v-else>
 			{{ selectedProjection }}
diff --git a/src/plugins/scale/components/ScaleWidget.ce.vue b/src/plugins/scale/components/ScaleWidget.ce.vue
index 0955bee70b..95caa1519a 100644
--- a/src/plugins/scale/components/ScaleWidget.ce.vue
+++ b/src/plugins/scale/components/ScaleWidget.ce.vue
@@ -11,11 +11,10 @@
 	>
 		<PolarSelect
 			v-if="showScaleSwitcher"
-			:value="zoomValue"
+			v-model="zoomValue"
 			:options="zoomOptions"
 			:aria-label="$t(($) => $.scaleSwitcher, { ns: PluginId })"
 			small
-			@update:value="setZoom"
 		/>
 		<span v-else class="scale-as-a-ratio">
 			{{ scaleToOne }}
@@ -45,11 +44,12 @@ const { layoutTag, scaleToOne, scaleWithUnit, showScaleSwitcher, zoomOptions } =
 
 const { layout, zoom } = storeToRefs(coreStore)
 
-const zoomValue = computed(() => `${Math.round(zoom.value)}`)
-
-function setZoom(value) {
-	zoom.value = Number(value)
-}
+const zoomValue = computed({
+	get: () => `${Math.round(zoom.value)}`,
+	set: (value: string) => {
+		zoom.value = Number(value)
+	},
+})
 </script>
 
 <style scoped>

From 95e49bec6d27a30608e7b8c68e63a0fbb859ecf8 Mon Sep 17 00:00:00 2001
From: Dennis Sen <dennis.sen@dataport.de>
Date: Tue, 23 Jun 2026 07:10:06 +0200
Subject: [PATCH 3/5] refactor: switch to v-model

---
 src/components/PolarSelect.ce.vue | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/components/PolarSelect.ce.vue b/src/components/PolarSelect.ce.vue
index 1f43f5b73f..d310816f78 100644
--- a/src/components/PolarSelect.ce.vue
+++ b/src/components/PolarSelect.ce.vue
@@ -6,13 +6,12 @@
 		<div class="kern-form-input__select-wrapper" :class="{ small }">
 			<select
 				:id="resolvedId"
+				v-model="model"
 				class="kern-form-input__select"
 				:aria-label="ariaLabel"
 				:disabled
 				:required
 				:multiple
-				:value="model"
-				@change="onChange"
 			>
 				<option v-if="defaultLabel" value="">{{ defaultLabel }}</option>
 				<option
@@ -51,15 +50,6 @@ const model = defineModel<string | string[]>({ required: true })
 
 const fallbackId = useId()
 const resolvedId = computed(() => props.id || fallbackId)
-
-function onChange(event: Event) {
-	const target = event.target as HTMLSelectElement
-	if (props.multiple) {
-		model.value = Array.from(target.selectedOptions).map((opt) => opt.value)
-	} else {
-		model.value = target.value
-	}
-}
 </script>
 <style scoped>
 .kern-form-input__select-wrapper.small {

From a930925a0d514e687295f2d8eb0639d3410e2f6e Mon Sep 17 00:00:00 2001
From: Pascal Roehling <pas.roehling@gmail.com>
Date: Tue, 23 Jun 2026 17:21:40 +0200
Subject: [PATCH 4/5] refactor: consolidate label and ariaLabel and use
 labelSrOnly as a new prop in PolarSelect

---
 src/components/PolarSelect.ce.vue                        | 9 ++++++---
 .../addressSearch/components/AddressSearch.ce.vue        | 3 ++-
 .../pointerPosition/components/PointerPosition.ce.vue    | 3 ++-
 src/plugins/scale/components/ScaleWidget.ce.vue          | 3 ++-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/PolarSelect.ce.vue b/src/components/PolarSelect.ce.vue
index d310816f78..2f18a94442 100644
--- a/src/components/PolarSelect.ce.vue
+++ b/src/components/PolarSelect.ce.vue
@@ -1,6 +1,10 @@
 <template>
 	<div class="kern-form-input">
-		<label v-if="label" class="kern-label" :for="resolvedId">
+		<label
+			:for="resolvedId"
+			class="kern-label"
+			:class="{ 'kern-sr-only': labelSrOnly }"
+		>
 			{{ label }}
 		</label>
 		<div class="kern-form-input__select-wrapper" :class="{ small }">
@@ -8,7 +12,6 @@
 				:id="resolvedId"
 				v-model="model"
 				class="kern-form-input__select"
-				:aria-label="ariaLabel"
 				:disabled
 				:required
 				:multiple
@@ -38,7 +41,7 @@ const props = defineProps<{
 		[key: string]: unknown
 	}[]
 	label?: string
-	ariaLabel?: string
+	labelSrOnly?: boolean
 	defaultLabel?: string
 	disabled?: boolean
 	required?: boolean
diff --git a/src/plugins/addressSearch/components/AddressSearch.ce.vue b/src/plugins/addressSearch/components/AddressSearch.ce.vue
index 0e97da13cb..f0c6a6356c 100644
--- a/src/plugins/addressSearch/components/AddressSearch.ce.vue
+++ b/src/plugins/addressSearch/components/AddressSearch.ce.vue
@@ -13,7 +13,8 @@
 			<PolarSelect
 				v-if="hasMultipleGroups"
 				v-model="selectedGroupId"
-				:aria-label="$t(($) => $.groupSelector, { ns: PluginId })"
+				:label="$t(($) => $.groupSelector, { ns: PluginId })"
+				:label-sr-only="true"
 				:options="
 					groupSelectOptions.map(({ groupId, text }) => ({
 						value: groupId,
diff --git a/src/plugins/pointerPosition/components/PointerPosition.ce.vue b/src/plugins/pointerPosition/components/PointerPosition.ce.vue
index 1c80ad096e..c6d375077d 100644
--- a/src/plugins/pointerPosition/components/PointerPosition.ce.vue
+++ b/src/plugins/pointerPosition/components/PointerPosition.ce.vue
@@ -15,7 +15,8 @@
 					ariaLabel: projection.code,
 				}))
 			"
-			:aria-label="$t(($) => $.projectionSelect.label, { ns: PluginId })"
+			:label="$t(($) => $.projectionSelect.label, { ns: PluginId })"
+			:label-sr-only="true"
 			small
 		/>
 		<small v-else>
diff --git a/src/plugins/scale/components/ScaleWidget.ce.vue b/src/plugins/scale/components/ScaleWidget.ce.vue
index 95caa1519a..053fb02a02 100644
--- a/src/plugins/scale/components/ScaleWidget.ce.vue
+++ b/src/plugins/scale/components/ScaleWidget.ce.vue
@@ -13,7 +13,8 @@
 			v-if="showScaleSwitcher"
 			v-model="zoomValue"
 			:options="zoomOptions"
-			:aria-label="$t(($) => $.scaleSwitcher, { ns: PluginId })"
+			:label="$t(($) => $.scaleSwitcher, { ns: PluginId })"
+			:label-sr-only="true"
 			small
 		/>
 		<span v-else class="scale-as-a-ratio">

From 351d0715b79565f4578989bd7012395f23a00b80 Mon Sep 17 00:00:00 2001
From: Pascal Roehling <pas.roehling@gmail.com>
Date: Wed, 24 Jun 2026 14:50:03 +0200
Subject: [PATCH 5/5] refactor: remove unused and not fully implemented
 multiple prop from PolarSelect

---
 src/components/PolarSelect.ce.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/PolarSelect.ce.vue b/src/components/PolarSelect.ce.vue
index 2f18a94442..bec61559ff 100644
--- a/src/components/PolarSelect.ce.vue
+++ b/src/components/PolarSelect.ce.vue
@@ -14,7 +14,6 @@
 				class="kern-form-input__select"
 				:disabled
 				:required
-				:multiple
 			>
 				<option v-if="defaultLabel" value="">{{ defaultLabel }}</option>
 				<option
@@ -45,11 +44,10 @@ const props = defineProps<{
 	defaultLabel?: string
 	disabled?: boolean
 	required?: boolean
-	multiple?: boolean
 	small?: boolean
 	id?: string
 }>()
-const model = defineModel<string | string[]>({ required: true })
+const model = defineModel<string>({ required: true })
 
 const fallbackId = useId()
 const resolvedId = computed(() => props.id || fallbackId)