diff --git a/src/components/PolarInput.ce.vue b/src/components/PolarInput.ce.vue
index cad0e95def..cd747e7511 100644
--- a/src/components/PolarInput.ce.vue
+++ b/src/components/PolarInput.ce.vue
@@ -1,28 +1,26 @@
 <template>
 	<div class="kern-form-check">
 		<input
-			:id="`polar-${type}-${value}-${idSuffix}`"
+			:id="id"
 			v-model="model"
 			:class="`polar-input kern-form-check__${type}`"
 			:name="name"
 			:value="value"
 			:type="type"
-			:disabled="disabled"
+			:disabled
 		/>
-		<label
-			class="polar-input kern-label"
-			:for="`polar-${type}-${value}-${idSuffix}`"
-		>
+		<label class="polar-input kern-label" :for="id">
 			<slot />
 		</label>
 	</div>
 </template>
 
 <script setup lang="ts" generic="T extends 'checkbox' | 'radio'">
+import { useId } from 'vue'
+
 // NOTE: It is fine here that props is only used as a type in the script.
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = defineProps<{
-	idSuffix: string
 	name: string
 	type: T
 	value: string
@@ -31,6 +29,7 @@ const props = defineProps<{
 const model = defineModel<
 	typeof props.type extends 'checkbox' ? string[] : string
 >({ required: true })
+const id = useId()
 </script>
 
 <style scoped>
diff --git a/src/components/PolarInputGroup.ce.vue b/src/components/PolarInputGroup.ce.vue
index 447dd94983..8423d0f06f 100644
--- a/src/components/PolarInputGroup.ce.vue
+++ b/src/components/PolarInputGroup.ce.vue
@@ -1,6 +1,6 @@
 <template>
 	<fieldset class="kern-fieldset">
-		<legend class="kern-label">
+		<legend class="kern-label" :class="{ 'kern-sr-only': legendSrOnly }">
 			{{ legend }}
 		</legend>
 		<div class="kern-fieldset__body">
@@ -12,6 +12,7 @@
 <script setup lang="ts">
 defineProps<{
 	legend: string
+	legendSrOnly?: boolean
 }>()
 </script>
 
diff --git a/src/components/kern/KernBlockButtonCheckbox.ce.vue b/src/components/kern/KernBlockButtonCheckbox.ce.vue
deleted file mode 100644
index 1869e9eefc..0000000000
--- a/src/components/kern/KernBlockButtonCheckbox.ce.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-	<input
-		:id="id"
-		v-model="model"
-		type="checkbox"
-		@keydown.prevent.enter="model = !model"
-		@focus="scrollVisible($event)"
-	/>
-	<label :for="id" class="kern-btn kern-btn--block kern-btn--tertiary">
-		<span v-if="icon" class="kern-icon" :class="icon" aria-hidden="true" />
-		<span class="kern-label"><slot /></span>
-	</label>
-</template>
-
-<script setup lang="ts">
-import type { Icon } from '@/core'
-
-import { useId } from 'vue'
-
-defineProps<{ icon?: Icon }>()
-
-const model = defineModel<boolean>({ required: true })
-
-const id = useId()
-
-function scrollVisible(evt: FocusEvent) {
-	const target = evt.target as HTMLInputElement
-	const label = target.parentElement?.querySelector(`label[for="${target.id}"]`)
-	if (label?.scrollIntoView) {
-		label.scrollIntoView({
-			behavior: 'smooth',
-			block: 'nearest',
-			inline: 'nearest',
-		})
-	}
-}
-</script>
-
-<style scoped>
-.kern-btn--tertiary {
-	background-color: #edf1fa;
-	justify-content: left;
-
-	.kern-label {
-		text-decoration: none;
-	}
-}
-
-label {
-	border: var(--kern-metric-border-width-default) solid transparent;
-}
-
-input[type='checkbox'] {
-	position: absolute;
-	height: 0;
-	clip-path: circle(0);
-
-	&:focus-visible + label {
-		padding: var(--kern-metric-space-none) var(--kern-metric-space-default);
-		border-radius: var(--kern-metric-border-radius-default);
-		outline: 4px solid var(--kern-color-action-focus-default-contextual);
-		outline-offset: 2px;
-	}
-
-	&:checked + label {
-		border-color: var(--kern-color-action-default);
-	}
-}
-</style>
diff --git a/src/components/kern/KernBlockButtonRadioGroup.ce.vue b/src/components/kern/KernBlockButtonRadioGroup.ce.vue
deleted file mode 100644
index f1c11aea44..0000000000
--- a/src/components/kern/KernBlockButtonRadioGroup.ce.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-	<div class="radiogroup" role="radiogroup">
-		<template v-for="(item, index) of items" :key="index">
-			<span
-				ref="radios"
-				role="radio"
-				:aria-checked="model === item.value"
-				:aria-labelledby="id + '-' + index"
-				tabindex="0"
-				:data-value="item.value"
-				@keydown.prevent.space="model = item.value"
-				@keydown.prevent.enter="model = item.value"
-				@focus="scrollVisible($event)"
-			/>
-			<label
-				:id="id + '-' + index"
-				class="kern-btn kern-btn--block kern-btn--tertiary"
-				@click.prevent="((model = item.value), radios?.[index].focus())"
-			>
-				<span
-					v-if="item.icon"
-					class="kern-icon"
-					:class="item.icon"
-					aria-hidden="true"
-				/>
-				<span class="kern-label">{{ item.label }}</span>
-			</label>
-		</template>
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { Icon } from '@/core'
-
-import { useId, useTemplateRef } from 'vue'
-
-defineProps<{
-	items: {
-		value: string
-		label: string
-		icon?: Icon
-	}[]
-}>()
-
-const model = defineModel<string>({ required: true })
-
-const id = useId()
-
-const radios = useTemplateRef<HTMLInputElement>('radios')
-
-function scrollVisible(evt: FocusEvent) {
-	const target = evt.target as HTMLInputElement
-	const label = target.parentElement?.querySelector(
-		`label[id="${target.getAttribute('aria-labelledby')}"]`
-	)
-	if (label?.scrollIntoView) {
-		label.scrollIntoView({
-			behavior: 'smooth',
-			block: 'nearest',
-			inline: 'nearest',
-		})
-	}
-}
-</script>
-
-<style scoped>
-.radiogroup {
-	display: contents;
-}
-
-.kern-btn--tertiary {
-	background-color: #edf1fa;
-	justify-content: left;
-
-	.kern-label {
-		text-decoration: none;
-	}
-}
-
-label {
-	border: var(--kern-metric-border-width-default) solid transparent;
-}
-
-[role='radio'] {
-	position: absolute;
-	height: 0;
-	clip-path: circle(0);
-
-	&:focus-visible + label {
-		padding: var(--kern-metric-space-none) var(--kern-metric-space-default);
-		border-radius: var(--kern-metric-border-radius-default);
-		outline: 4px solid var(--kern-color-action-focus-default-contextual);
-		outline-offset: 2px;
-	}
-
-	&[aria-checked='true'] + label {
-		border-color: var(--kern-color-action-default);
-	}
-}
-</style>
diff --git a/src/components/kern/KernCheckbox.ce.vue b/src/components/kern/KernCheckbox.ce.vue
deleted file mode 100644
index 986af544b9..0000000000
--- a/src/components/kern/KernCheckbox.ce.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-	<div class="kern-form-check">
-		<input
-			:id="id"
-			v-model="model"
-			class="kern-form-check__checkbox"
-			type="checkbox"
-			@keydown.prevent.enter="model = !model"
-		/>
-		<label :for="id" class="kern-label"><slot /></label>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { useId } from 'vue'
-
-const model = defineModel<boolean>({ required: true })
-
-const id = useId()
-</script>
-
-<style scoped>
-.kern-form-check {
-	box-sizing: border-box;
-}
-</style>
diff --git a/src/components/kern/KernRadioGroup.ce.vue b/src/components/kern/KernRadioGroup.ce.vue
deleted file mode 100644
index 36ad0ce798..0000000000
--- a/src/components/kern/KernRadioGroup.ce.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-	<div v-for="(item, index) of items" :key="index" class="kern-form-check">
-		<input
-			:id="id + '-' + index"
-			v-model="model"
-			class="kern-form-check__radio"
-			type="radio"
-			:value="item.value"
-		/>
-		<label :for="id + '-' + index" class="kern-label">
-			{{ item.label }}
-		</label>
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { Icon } from '@/core'
-
-import { useId } from 'vue'
-
-defineProps<{
-	items: {
-		value: string
-		label: string
-		icon?: Icon | false
-	}[]
-}>()
-
-const model = defineModel<string>({ required: true })
-
-const id = useId()
-</script>
-
-<style scoped>
-.kern-form-check {
-	box-sizing: border-box;
-}
-</style>
diff --git a/src/plugins/filter/components/FilterCategory.ce.vue b/src/plugins/filter/components/FilterCategory.ce.vue
index 5192300b98..2eb6064297 100644
--- a/src/plugins/filter/components/FilterCategory.ce.vue
+++ b/src/plugins/filter/components/FilterCategory.ce.vue
@@ -1,7 +1,6 @@
 <template>
 	<FilterSection
-		v-for="(category, index) of filterStore.selectedLayerConfiguration
-			.categories"
+		v-for="(category, index) of filterStore.categories"
 		:key="index"
 		:title="
 			$t(
@@ -13,7 +12,18 @@
 			)
 		"
 	>
-		<div class="polar-filter-category-values">
+		<PolarInputGroup
+			legend-sr-only
+			:legend="
+				$t(
+					($) =>
+						$['layer'][filterStore.selectedLayerId]['category'][
+							category.targetProperty
+						]['title'],
+					{ ns: PluginId, defaultValue: category.targetProperty }
+				)
+			"
+		>
 			<KernButton
 				v-if="category.selectAll"
 				class="kern-btn--block kern-btn--tertiary"
@@ -22,28 +32,13 @@
 			>
 				{{ $t(($) => $.category.deselectAll, { ns: PluginId }) }}
 			</KernButton>
-			<component
-				:is="
-					coreStore.layout === 'standard'
-						? KernBlockButtonCheckbox
-						: KernCheckbox
-				"
+			<PolarInput
 				v-for="categoryValue of category.knownValues"
 				:key="flattenValue(categoryValue)"
-				:icon="typeof categoryValue !== 'string' && categoryValue.icon"
-				:model-value="
-					filterStore.getCategoryStatus(
-						category.targetProperty,
-						expandValue(categoryValue)
-					)
-				"
-				@update:model-value="
-					filterStore.setCategoryStatus(
-						category.targetProperty,
-						expandValue(categoryValue),
-						$event
-					)
-				"
+				v-model="category.selection"
+				type="checkbox"
+				:name="category.targetProperty"
+				:value="flattenValue(categoryValue)"
 			>
 				{{
 					$t(
@@ -54,23 +49,21 @@
 						{ ns: PluginId, defaultValue: flattenValue(categoryValue) }
 					)
 				}}
-			</component>
-		</div>
+			</PolarInput>
+		</PolarInputGroup>
 	</FilterSection>
 </template>
 
 <script setup lang="ts">
-import KernBlockButtonCheckbox from '@/components/kern/KernBlockButtonCheckbox.ce.vue'
 import KernButton from '@/components/kern/KernButton.ce.vue'
-import KernCheckbox from '@/components/kern/KernCheckbox.ce.vue'
-import { useCoreStore } from '@/core/stores'
+import PolarInput from '@/components/PolarInput.ce.vue'
+import PolarInputGroup from '@/components/PolarInputGroup.ce.vue'
 
 import { useFilterStore } from '../store'
 import { PluginId } from '../types'
-import { expandValue, flattenValue } from '../utils/flattenAndExpandValue'
+import { flattenValue } from '../utils/flattenAndExpandValue'
 import FilterSection from './FilterSection.ce.vue'
 
-const coreStore = useCoreStore()
 const filterStore = useFilterStore()
 </script>
 
diff --git a/src/plugins/filter/components/FilterTime.ce.vue b/src/plugins/filter/components/FilterTime.ce.vue
index 9cc3ac1574..dada98c687 100644
--- a/src/plugins/filter/components/FilterTime.ce.vue
+++ b/src/plugins/filter/components/FilterTime.ce.vue
@@ -1,19 +1,23 @@
 <template>
 	<FilterSection :title="$t(($) => $.time.header, { ns: PluginId })">
-		<div class="polar-filter-category-values">
-			<component
-				:is="
-					coreStore.layout === 'standard'
-						? KernBlockButtonRadioGroup
-						: KernRadioGroup
-				"
+		<PolarInputGroup
+			legend-sr-only
+			:legend="$t(($) => $.time.header, { ns: PluginId })"
+		>
+			<PolarInput
+				v-for="item of filterStore.timeItems"
+				:key="item.value"
 				v-model="filterStore.timeModel"
-				:items="filterStore.timeItems"
-				@update:model-value="scrollVisible($event)"
-			/>
-		</div>
+				type="radio"
+				name="timeFilter"
+				:value="item.value"
+			>
+				{{ item.label }}
+			</PolarInput>
+		</PolarInputGroup>
 		<div
 			v-if="filterStore.timeModel === 'custom'"
+			ref="dateRange"
 			class="polar-filter-time-range"
 		>
 			<KernDateRangePicker
@@ -26,32 +30,29 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, useTemplateRef } from 'vue'
+import { nextTick, useTemplateRef, watch } from 'vue'
 
-import KernBlockButtonRadioGroup from '@/components/kern/KernBlockButtonRadioGroup.ce.vue'
 import KernDateRangePicker from '@/components/kern/KernDateRangePicker.ce.vue'
-import KernRadioGroup from '@/components/kern/KernRadioGroup.ce.vue'
-import { useCoreStore } from '@/core/stores'
+import PolarInput from '@/components/PolarInput.ce.vue'
+import PolarInputGroup from '@/components/PolarInputGroup.ce.vue'
 
 import { useFilterStore } from '../store'
 import { PluginId } from '../types'
 import FilterSection from './FilterSection.ce.vue'
 
-const coreStore = useCoreStore()
 const filterStore = useFilterStore()
 
-const section = useTemplateRef<HTMLElement>('section')
+const dateRange = useTemplateRef<HTMLElement>('dateRange')
 
-async function scrollVisible(model: string) {
-	if (model === 'custom') {
-		await nextTick()
-		if (section.value?.lastElementChild?.scrollIntoView) {
-			section.value.lastElementChild.scrollIntoView({
-				behavior: 'smooth',
-			})
+watch(
+	() => filterStore.timeModel,
+	async (value) => {
+		if (value === 'custom') {
+			await nextTick()
+			dateRange.value?.scrollIntoView({ behavior: 'smooth' })
 		}
 	}
-}
+)
 </script>
 
 <style scoped>
diff --git a/src/plugins/filter/components/FilterUI.spec.ts b/src/plugins/filter/components/FilterUI.spec.ts
index 412d2fbe21..93189ee749 100644
--- a/src/plugins/filter/components/FilterUI.spec.ts
+++ b/src/plugins/filter/components/FilterUI.spec.ts
@@ -3,7 +3,7 @@ import type { VueWrapper } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import { test as _test, assert, expect, vi } from 'vitest'
-import { nextTick } from 'vue'
+import { computed, nextTick } from 'vue'
 
 import { useCoreStore } from '@/core/stores'
 import { mockedT } from '@/test/utils/mockI18n'
@@ -70,7 +70,24 @@ test('Component transfers category and time filters to the store', async ({
 			},
 		},
 	}
-	store.getCategoryStatus = vi.fn().mockReturnValue(true)
+	let selectionValue = ['cat', 'dog']
+	const setSpy = vi.fn((value: string[]) => {
+		selectionValue = value
+	})
+	// @ts-expect-error | This is for testing
+	store.categories = computed(() => [
+		{
+			targetProperty: 'pet',
+			knownValues: ['cat', 'dog'],
+			selectAll: true,
+			get selection() {
+				return selectionValue
+			},
+			set selection(v: string[]) {
+				setSpy(v)
+			},
+		},
+	])
 
 	await nextTick()
 
@@ -82,11 +99,7 @@ test('Component transfers category and time filters to the store', async ({
 	assert(onlyCat !== undefined, 'Could not find cat button')
 	await onlyCat.trigger('click')
 
-	expect(store.setCategoryStatus).toHaveBeenCalledExactlyOnceWith(
-		'pet',
-		{ key: 'cat', values: ['cat'] },
-		false
-	)
+	expect(setSpy).toHaveBeenCalledExactlyOnceWith(['dog'])
 
 	const yesterday = wrapper
 		.findAll('label')
diff --git a/src/plugins/filter/store.ts b/src/plugins/filter/store.ts
index 340db586c6..f495a21618 100644
--- a/src/plugins/filter/store.ts
+++ b/src/plugins/filter/store.ts
@@ -107,27 +107,12 @@ export const useFilterStore = defineStore('plugins/filter', () => {
 		selectedLayerHasTimeFilter: filterMainStoreRefs.selectedLayerHasTimeFilter,
 
 		/**
-		 * For a given category value for a target property, return the selected values.
+		 * Categories of the selected layer, each enriched with a writable
+		 * `selection` computed (usable with `v-model`).
 		 *
-		 * @remarks
-		 * If there are multiple values specified for the category value, the category is considered selected if all values are selected.
-		 *
-		 * @param targetProperty - Target property
-		 * @param categoryValue - Value to filter for
-		 * @returns `true` if the category value is selected, `false` otherwise
-		 * @alpha
-		 */
-		getCategoryStatus: filterCategoryStore.getStatus,
-
-		/**
-		 * Set the selection state for a given category value for a target property.
-		 *
-		 * @param targetProperty - Target property
-		 * @param categoryValue - Value to filter for
-		 * @param newStatus - `true` if the category value should be selected, `false` otherwise
 		 * @alpha
 		 */
-		setCategoryStatus: filterCategoryStore.setStatus,
+		categories: filterCategoryStore.categories,
 
 		/**
 		 * For a given category, select all values if at least some are not selected yet, or de-select all values otherwise.
diff --git a/src/plugins/filter/stores/category.ts b/src/plugins/filter/stores/category.ts
index a4b2c5c370..9f28ec4a21 100644
--- a/src/plugins/filter/stores/category.ts
+++ b/src/plugins/filter/stores/category.ts
@@ -1,57 +1,113 @@
-import type { Category, CategoryValue, FilterState } from '../types'
+import type { Category, FilterState } from '../types'
 
 import { acceptHMRUpdate, defineStore } from 'pinia'
+import { computed, watch } from 'vue'
 
-import { flattenValue } from '../utils/flattenAndExpandValue'
+import { expandValue, flattenValue } from '../utils/flattenAndExpandValue'
 import { useFilterMainStore } from './main'
 
+export interface CategoryWithSelection extends Category {
+	selection: string[]
+}
+
+function getAllTechnicalValues(category: Category): string[] {
+	return category.knownValues.flatMap((v) => expandValue(v).values)
+}
+
+function uniqueConcat(...arrays: string[][]): string[] {
+	return [...new Set(arrays.flat())]
+}
+
 export const useFilterCategoryStore = defineStore(
 	'plugins/filter/category',
 	() => {
 		const filterMainStore = useFilterMainStore()
 
-		function createMissingObjects(targetProperty: string) {
-			// The state is created automatically and this component is only used when a layer is selected.
-			const layerState = filterMainStore.selectedLayerState as FilterState
-			layerState.knownValues ??= {}
-			return (layerState.knownValues[targetProperty] ??= Object.fromEntries(
-				filterMainStore.selectedLayerConfiguration.categories
-					?.find((category) => category.targetProperty === targetProperty)
-					?.knownValues.map((value) => [flattenValue(value), true]) ?? []
-			))
-		}
+		/**
+		 * Initializes the filter state for all categories of the selected layer.
+		 * On (re-)selection of a layer, all known values are added to the state,
+		 * ensuring all features are visible by default. Previously deselected
+		 * values are re-added intentionally to reset the filter on layer switch.
+		 */
+		watch(
+			() => filterMainStore.selectedLayerConfiguration.categories,
+			(categories) => {
+				const state = filterMainStore.selectedLayerState
+				if (!categories || !state) {
+					return
+				}
+				state.knownValues ??= {}
+				for (const category of categories) {
+					state.knownValues[category.targetProperty] = uniqueConcat(
+						state.knownValues[category.targetProperty] ?? [],
+						getAllTechnicalValues(category)
+					)
+				}
+			},
+			{ immediate: true }
+		)
 
-		function getStatus(targetProperty: string, { values }: CategoryValue) {
-			return Object.entries(
-				filterMainStore.selectedLayerState?.knownValues?.[targetProperty] ?? {}
-			)
-				.filter(([value]) => values.includes(value))
-				.every(([, status]) => status)
-		}
-
-		function setStatus(
-			targetProperty: string,
-			{ values }: CategoryValue,
-			newValue: boolean
-		) {
-			const valueState = createMissingObjects(targetProperty)
-			values.forEach((value) => (valueState[value] = newValue))
-		}
+		const categories = computed<CategoryWithSelection[]>(
+			() =>
+				filterMainStore.selectedLayerConfiguration.categories?.map(
+					(category) => ({
+						...category,
+						get selection() {
+							const stateValues =
+								filterMainStore.selectedLayerState?.knownValues?.[
+									category.targetProperty
+								] ?? []
+							return category.knownValues
+								.filter((entry) =>
+									expandValue(entry).values.every((v) =>
+										stateValues.includes(v)
+									)
+								)
+								.map(flattenValue)
+						},
+						set selection(selectedKeys: string[]) {
+							const state = filterMainStore.selectedLayerState as FilterState
+							state.knownValues ??= {}
+							const allMyValues = getAllTechnicalValues(category)
+							const newMyValues = selectedKeys.flatMap((key) => {
+								const entry = category.knownValues.find(
+									(v) => flattenValue(v) === key
+								)
+								return entry ? expandValue(entry).values : [key]
+							})
+							const current = state.knownValues[category.targetProperty] ?? []
+							const othersValues = current.filter(
+								(v) => !allMyValues.includes(v)
+							)
+							state.knownValues[category.targetProperty] = uniqueConcat(
+								othersValues,
+								newMyValues
+							)
+						},
+					})
+				) ?? []
+		)
 
 		function selectOrDeselectAll(category: Category) {
-			const valueState = createMissingObjects(category.targetProperty)
-			const categoryValues = category.knownValues.flatMap((entry) =>
-				typeof entry === 'string' ? [entry] : entry.values
-			)
-			const newStatus =
-				Object.values(valueState).filter((selected) => selected).length !==
-				categoryValues.length
-			categoryValues.forEach((value) => (valueState[value] = newStatus))
+			const state = filterMainStore.selectedLayerState as FilterState
+			state.knownValues ??= {}
+			const stateValues = state.knownValues[category.targetProperty] ?? []
+			const allMyValues = getAllTechnicalValues(category)
+			const allSelected = allMyValues.every((v) => stateValues.includes(v))
+			if (allSelected) {
+				state.knownValues[category.targetProperty] = stateValues.filter(
+					(v) => !allMyValues.includes(v)
+				)
+			} else {
+				state.knownValues[category.targetProperty] = uniqueConcat(
+					stateValues,
+					allMyValues
+				)
+			}
 		}
 
 		return {
-			getStatus,
-			setStatus,
+			categories,
 			selectOrDeselectAll,
 		}
 	}
diff --git a/src/plugins/filter/stores/time.ts b/src/plugins/filter/stores/time.ts
index 3a978c73c6..fb222803da 100644
--- a/src/plugins/filter/stores/time.ts
+++ b/src/plugins/filter/stores/time.ts
@@ -1,4 +1,3 @@
-import type { Icon } from '@/core'
 import type { Time } from '../types'
 
 import { t } from 'i18next'
@@ -180,28 +179,24 @@ export const useFilterTimeStore = defineStore('plugins/filter/time', () => {
 			{
 				value: 'all',
 				label: t(($) => $.time.noRestriction, { ns: PluginId }),
-				icon: 'kern-icon--all-inclusive',
 			},
 			...(configuration.value.last?.map((offset) => ({
 				value: `last-${offset}`,
 				label: t(($) => $.time.last, { count: offset, ns: PluginId }),
-				icon: 'kern-icon--history' as Icon,
 			})) || []),
 			...(configuration.value.next?.map((offset) => ({
 				value: `next-${offset}`,
 				label: t(($) => $.time.next, { count: offset, ns: PluginId }),
-				icon: 'kern-icon--timeline' as Icon,
 			})) || []),
 			...(configuration.value.freeSelection
 				? [
 						{
 							value: 'custom',
 							label: t(($) => $.time.chooseTimeFrame, { ns: PluginId }),
-							icon: 'kern-icon--calendar-month' as Icon,
 						},
 					]
 				: []),
-		] satisfies { value: string; label: string; icon: Icon }[]
+		]
 	})
 
 	return {
diff --git a/src/plugins/filter/types.ts b/src/plugins/filter/types.ts
index 3b51beefa0..e8962395d1 100644
--- a/src/plugins/filter/types.ts
+++ b/src/plugins/filter/types.ts
@@ -308,17 +308,19 @@ export interface FilterPluginOptions extends PluginOptions {
  */
 export interface FilterState {
 	/**
-	 * For each key representing a property's key, only values listed as keys with a truthy value in the value record are visible.
+	 * For each key representing a property's key, only the technical values
+	 * contained in the array are visible. A property key that is absent imposes
+	 * no restriction (all of its values pass).
 	 *
 	 * @example
 	 * The following example allows the property `houseType` to have the value `shed` only.
 	 * ```ts
 	 * {
-	 * 	houseType: { shed: true, house: false },
+	 * 	houseType: ['shed'],
 	 * }
 	 * ```
 	 */
-	knownValues?: Record<string, Record<string, boolean>>
+	knownValues?: Record<string, string[]>
 
 	/**
 	 * For each key representing a property's key, only values starting after `from` and ending until `until` are visible.
diff --git a/src/plugins/filter/utils/doesFeaturePassFilter.ts b/src/plugins/filter/utils/doesFeaturePassFilter.ts
index 11a7ad63cc..05406d0f9a 100644
--- a/src/plugins/filter/utils/doesFeaturePassFilter.ts
+++ b/src/plugins/filter/utils/doesFeaturePassFilter.ts
@@ -14,8 +14,8 @@ import { parseDateWithPattern } from './parseDateWithPattern'
 export function doesFeaturePassFilter(feature: Feature, filter: FilterState) {
 	if (
 		filter.knownValues &&
-		!Object.entries(filter.knownValues).every(
-			([key, values]) => values[feature.get(key)]
+		!Object.entries(filter.knownValues).every(([key, values]) =>
+			values.includes(feature.get(key))
 		)
 	) {
 		return false
@@ -49,9 +49,7 @@ if (import.meta.vitest) {
 	test('a feature passes the category filter', () => {
 		const filter = {
 			knownValues: {
-				category: {
-					blue: true,
-				},
+				category: ['blue'],
 			},
 		} satisfies FilterState
 		expect(doesFeaturePassFilter(feature, filter)).toBeTruthy()
@@ -60,9 +58,7 @@ if (import.meta.vitest) {
 	test('a feature fails the category filter', () => {
 		const filter = {
 			knownValues: {
-				category: {
-					red: true,
-				},
+				category: ['red'],
 			},
 		} satisfies FilterState
 		expect(doesFeaturePassFilter(feature, filter)).toBeFalsy()
@@ -97,12 +93,8 @@ if (import.meta.vitest) {
 	test('a feature fails one out of two filters', () => {
 		const filter = {
 			knownValues: {
-				category: {
-					blue: true,
-				},
-				misc: {
-					yes: true,
-				},
+				category: ['blue'],
+				misc: ['yes'],
 			},
 		} satisfies FilterState
 		expect(doesFeaturePassFilter(feature, filter)).toBeFalsy()
diff --git a/src/plugins/layerChooser/components/LayerOptions.ce.vue b/src/plugins/layerChooser/components/LayerOptions.ce.vue
index c9396d09a1..d8af39d8bf 100644
--- a/src/plugins/layerChooser/components/LayerOptions.ce.vue
+++ b/src/plugins/layerChooser/components/LayerOptions.ce.vue
@@ -9,7 +9,6 @@
 				<img v-if="layerImage" :src="layerImage" :alt="layerName" />
 				<PolarInput
 					v-model="activeLayers"
-					id-suffix="polar-layer-chooser-mask-options"
 					type="checkbox"
 					name="polar-layer-chooser-mask-options"
 					:value="layerName"
diff --git a/src/plugins/layerChooser/components/LayerSelection.ce.vue b/src/plugins/layerChooser/components/LayerSelection.ce.vue
index 385c275afa..5ac3efe291 100644
--- a/src/plugins/layerChooser/components/LayerSelection.ce.vue
+++ b/src/plugins/layerChooser/components/LayerSelection.ce.vue
@@ -11,7 +11,6 @@
 			>
 				<PolarInput
 					v-model="activeBackgroundId"
-					:id-suffix="`polar-layer-chooser-background`"
 					name="polar-layer-chooser-background"
 					type="radio"
 					:value="id"
@@ -43,7 +42,6 @@
 					>
 						<PolarInput
 							v-model="activeMaskIds"
-							:id-suffix="`polar-layer-chooser-mask-${type}`"
 							name="polar-layer-chooser-mask"
 							type="checkbox"
 							:value="id"