From 2734da44e6800ee7f5edefe9364b372a8c0e40a7 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Mon, 24 Mar 2025 18:04:25 +0100
Subject: [PATCH 1/8] feat(ui): support disabled options in WDS dropdown -
 WF-188

---
 src/ui/src/wds/WdsCheckbox.vue         | 15 +++++++--------
 src/ui/src/wds/WdsDropdownMenu.spec.ts | 13 ++++++-------
 src/ui/src/wds/WdsDropdownMenu.vue     |  3 +++
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/ui/src/wds/WdsCheckbox.vue b/src/ui/src/wds/WdsCheckbox.vue
index 6cb6ae9e6..ad4df7d41 100644
--- a/src/ui/src/wds/WdsCheckbox.vue
+++ b/src/ui/src/wds/WdsCheckbox.vue
@@ -23,13 +23,7 @@ function onChange(event: InputEvent) {
 </script>
 
 <template>
-	<label
-		:for="id"
-		class="WdsCheckbox"
-		:class="classes"
-		@mousedown.prevent
-		@click.prevent="checked = !checked"
-	>
+	<label :for="id" class="WdsCheckbox" :class="classes" @mousedown.prevent>
 		<div class="WdsCheckbox__checkbox">
 			<i class="WdsCheckbox__checkbox__check material-symbols-outlined"
 				>check</i
@@ -57,6 +51,10 @@ function onChange(event: InputEvent) {
 	row-gap: 2px;
 	cursor: pointer;
 }
+.WdsCheckbox--disabled {
+	opacity: 40%;
+	cursor: not-allowed;
+}
 .WdsCheckbox__checkbox {
 	border: 1px solid var(--wdsColorGray4);
 	width: 18px;
@@ -75,7 +73,8 @@ function onChange(event: InputEvent) {
 	display: none;
 }
 
-.WdsCheckbox:hover:not(.WdsCheckbox--checked) .WdsCheckbox__checkbox__check {
+.WdsCheckbox:hover:not(.WdsCheckbox--checked):not(.WdsCheckbox--disabled)
+	.WdsCheckbox__checkbox__check {
 	display: block;
 	color: var(--wdsColorGray4);
 }
diff --git a/src/ui/src/wds/WdsDropdownMenu.spec.ts b/src/ui/src/wds/WdsDropdownMenu.spec.ts
index d9ce5b663..cd551dccc 100644
--- a/src/ui/src/wds/WdsDropdownMenu.spec.ts
+++ b/src/ui/src/wds/WdsDropdownMenu.spec.ts
@@ -1,8 +1,9 @@
-import { mount, shallowMount } from "@vue/test-utils";
+import { shallowMount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 
 import WdsDropdownMenu from "./WdsDropdownMenu.vue";
 import { WdsDropdownMenuOption } from "./WdsDropdownMenu.vue";
+import WdsCheckbox from "./WdsCheckbox.vue";
 
 describe("WdsDropdownMenu", () => {
 	const options: WdsDropdownMenuOption[] = [
@@ -30,8 +31,8 @@ describe("WdsDropdownMenu", () => {
 	});
 
 	describe("multiple mode", () => {
-		it("should support multiple mode", async () => {
-			const wrapper = mount(WdsDropdownMenu, {
+		it("should support multiple mode", () => {
+			const wrapper = shallowMount(WdsDropdownMenu, {
 				props: {
 					selected: ["???"],
 					enableMultiSelection: true,
@@ -39,11 +40,9 @@ describe("WdsDropdownMenu", () => {
 				},
 			});
 
-			await wrapper
-				.get(`.WdsDropdownMenu__checkbox[data-automation-key="b"]`)
-				.trigger("click");
+			wrapper.getComponent(WdsCheckbox).vm.$emit("update:modelValue");
 
-			expect(wrapper.emitted("select").at(0)).toStrictEqual([["b"]]);
+			expect(wrapper.emitted("select").at(0)).toStrictEqual([["a"]]);
 		});
 	});
 });
diff --git a/src/ui/src/wds/WdsDropdownMenu.vue b/src/ui/src/wds/WdsDropdownMenu.vue
index a93d9213c..f75a3928d 100644
--- a/src/ui/src/wds/WdsDropdownMenu.vue
+++ b/src/ui/src/wds/WdsDropdownMenu.vue
@@ -58,6 +58,7 @@
 				:label="option.label"
 				:detail="option.detail"
 				:data-automation-key="option.value"
+				:disabled="option.disabled"
 				:model-value="isSelected(option.value)"
 				@update:model-value="onSelect(option.value)"
 			/>
@@ -73,6 +74,7 @@
 					'WdsDropdownMenu__item--hideIcon': hideIcons,
 				}"
 				:data-automation-key="option.value"
+				:disabled="option.disabled"
 				@click="onSelect(option.value)"
 			>
 				<template v-if="!hideIcons">
@@ -123,6 +125,7 @@ export type WdsDropdownMenuOption = {
 	 * A font icon or an array of image URL
 	 */
 	icon?: string | string[];
+	disabled?: boolean;
 };
 </script>
 

From 6f806aec962aa2cb9352d00bafbdf7539e2c90a5 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Mon, 24 Mar 2025 18:05:22 +0100
Subject: [PATCH 2/8] feat(ui): use `BuilderSelect` in UI dropdown - WF-188

---
 src/ui/src/builder/BuilderSelect.vue          |  14 +-
 .../settings/BuilderFieldsComponentId.spec.ts |   3 -
 .../settings/BuilderFieldsHandler.spec.ts     |   3 -
 .../src/components/core/base/BaseSelect.vue   | 507 ------------------
 .../core/input/CoreMultiselectInput.vue       |  44 +-
 .../components/core/input/CoreSelectInput.vue |  45 +-
 6 files changed, 62 insertions(+), 554 deletions(-)
 delete mode 100644 src/ui/src/components/core/base/BaseSelect.vue

diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/builder/BuilderSelect.vue
index 395562a57..4ae9a087c 100644
--- a/src/ui/src/builder/BuilderSelect.vue
+++ b/src/ui/src/builder/BuilderSelect.vue
@@ -30,6 +30,12 @@
 					closable
 					@close="handleRemoveValue(option.value)"
 				/>
+				<p
+					v-if="selectedOptions.length === 0 && placeholder"
+					class="BuilderSelect__trigger__multiSelectLabel__placeholder"
+				>
+					{{ placeholder }}
+				</p>
 			</div>
 			<div
 				v-else
@@ -37,7 +43,7 @@
 				data-writer-tooltip-strategy="overflow"
 				:data-writer-tooltip="currentLabel"
 			>
-				{{ currentLabel }}
+				{{ currentLabel ?? placeholder }}
 			</div>
 			<div class="BuilderSelect__trigger__arrow">
 				<i class="material-symbols-outlined">{{ expandIcon }}</i>
@@ -90,6 +96,7 @@ const props = defineProps({
 		>,
 		default: () => [],
 	},
+	placeholder: { type: String, required: false, default: undefined },
 	defaultIcon: { type: String, required: false, default: undefined },
 	hideIcons: { type: Boolean, required: false },
 	enableSearch: { type: Boolean, required: false },
@@ -213,7 +220,7 @@ function handleRemoveValue(value: string) {
 	font-size: 0.875rem;
 
 	color: var(--primaryTextColor);
-	background: transparent;
+	background: var(--wdsColorWhite);
 
 	cursor: pointer;
 }
@@ -247,4 +254,7 @@ function handleRemoveValue(value: string) {
 	justify-content: flex-start;
 	gap: 8px;
 }
+.BuilderSelect__trigger__multiSelectLabel__placeholder {
+	color: var(--wdsColorGray5);
+}
 </style>
diff --git a/src/ui/src/builder/settings/BuilderFieldsComponentId.spec.ts b/src/ui/src/builder/settings/BuilderFieldsComponentId.spec.ts
index 62ff625f4..b75b4c77c 100644
--- a/src/ui/src/builder/settings/BuilderFieldsComponentId.spec.ts
+++ b/src/ui/src/builder/settings/BuilderFieldsComponentId.spec.ts
@@ -33,9 +33,6 @@ describe("BuilderFieldsComponentId", () => {
 				fieldKey,
 			},
 			global: {
-				stubs: {
-					BaseSelect: true,
-				},
 				provide: {
 					...mockProvides,
 					[injectionKeys.builderManager as symbol]: wfbm,
diff --git a/src/ui/src/builder/settings/BuilderFieldsHandler.spec.ts b/src/ui/src/builder/settings/BuilderFieldsHandler.spec.ts
index e13f17d46..8b50f0f58 100644
--- a/src/ui/src/builder/settings/BuilderFieldsHandler.spec.ts
+++ b/src/ui/src/builder/settings/BuilderFieldsHandler.spec.ts
@@ -25,9 +25,6 @@ describe("BuilderFieldsHandler", () => {
 				fieldKey,
 			},
 			global: {
-				stubs: {
-					BaseSelect: true,
-				},
 				provide: {
 					...mockProvides,
 					[injectionKeys.builderManager as symbol]: ssbm,
diff --git a/src/ui/src/components/core/base/BaseSelect.vue b/src/ui/src/components/core/base/BaseSelect.vue
deleted file mode 100644
index 1165726fd..000000000
--- a/src/ui/src/components/core/base/BaseSelect.vue
+++ /dev/null
@@ -1,507 +0,0 @@
-<template>
-	<div
-		:id="baseId"
-		ref="rootEl"
-		class="BaseSelect colorTransformer"
-		tabindex="0"
-		:data-mode="mode"
-		:data-list-position="listPosition"
-		role="listbox"
-		:aria-activedescendant="
-			highlightedOffset
-				? `${baseId}-option-${highlightedOffset}`
-				: undefined
-		"
-		@keydown="handleKeydown"
-		@click="handleClick"
-		@focusout="handleFocusOut"
-	>
-		<div ref="selectedOptionsEl" class="selectedOptions">
-			<div v-show="selectedOptions.length == 0" class="placeholder">
-				<template v-if="placeholder">{{ placeholder }}</template>
-				<template v-else-if="mode == 'multiple' && maximumCount > 0"
-					>Select up to {{ maximumCount }} option{{
-						maximumCount > 1 ? "s" : ""
-					}}...</template
-				>
-				<template v-else-if="mode == 'multiple'"
-					>Select options....</template
-				>
-				<template v-else-if="mode == 'single'"
-					>Select an option...</template
-				>
-			</div>
-			<div
-				v-for="optionKey in selectedOptions"
-				:key="optionKey"
-				class="option"
-				:class="{ notFound: !options?.[optionKey] }"
-				aria-selected="true"
-			>
-				<div v-if="options?.[optionKey]" class="desc" role="option">
-					{{ options[optionKey] }}
-				</div>
-				<div v-else class="desc" role="option">
-					{{ optionKey }}
-				</div>
-
-				<div
-					class="remove"
-					data-prevent-list="true"
-					aria-label="Remove"
-					@click="removeItem(optionKey)"
-				>
-					<i class="material-symbols-outlined"> close </i>
-				</div>
-			</div>
-			<input
-				ref="inputEl"
-				v-model="activeText"
-				type="text"
-				aria-autocomplete="none"
-				tabindex="-1"
-				@keydown="handleInputKeydown"
-				@blur="handleInputBlur"
-			/>
-		</div>
-		<div v-show="listPosition !== 'hidden'" ref="listEl" class="list">
-			<div
-				v-for="(option, optionKey, offset) in listOptions"
-				:id="`${baseId}-option-${offset}`"
-				:key="`${offset}-${optionKey}`"
-				class="option"
-				role="option"
-				:data-list-offset="offset"
-				data-prevent-list="true"
-				:class="{ highlighted: highlightedOffset == offset }"
-				@mousemove="highlightItem(offset)"
-				@click="selectOption(optionKey)"
-			>
-				{{ option }}
-			</div>
-			<div v-if="Object.keys(listOptions).length == 0" class="empty">
-				<template v-if="mode == 'multiple' && isMaximumCountReached"
-					>Up to {{ maximumCount }} option{{
-						maximumCount > 1 ? "s" : ""
-					}}
-					allowed.</template
-				>
-				<template v-else>No results</template>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import {
-	computed,
-	nextTick,
-	PropType,
-	Ref,
-	ref,
-	toRefs,
-	useTemplateRef,
-	watch,
-} from "vue";
-
-const emit = defineEmits(["change"]);
-
-const props = defineProps({
-	baseId: { type: String, required: true },
-	activeValue: {
-		type: [Array, String] as PropType<string[] | string>,
-		required: true,
-	},
-	options: {
-		type: Object as PropType<Record<string, string | number | undefined>>,
-		required: true,
-	},
-	maximumCount: { type: Number, required: true },
-	mode: { type: String as PropType<"single" | "multiple">, required: true },
-	placeholder: { type: String, required: false, default: undefined },
-});
-
-const { baseId, options, maximumCount, mode, placeholder } = toRefs(props);
-
-const activeValue = computed<string[]>(() =>
-	typeof props.activeValue === "string"
-		? [props.activeValue]
-		: props.activeValue,
-);
-
-const LIST_MAX_HEIGHT_PX = 200;
-const rootEl = useTemplateRef("rootEl");
-const inputEl = useTemplateRef("inputEl");
-const selectedOptionsEl = useTemplateRef("selectedOptionsEl");
-const listEl = useTemplateRef("listEl");
-const activeText: Ref<string> = ref("");
-const highlightedOffset: Ref<number | null> = ref(null);
-const selectedOptions: Ref<string[]> = ref([]);
-const listPosition: Ref<"top" | "bottom" | "hidden"> = ref("hidden");
-
-const listOptions = computed(() => {
-	if (mode.value == "multiple" && isMaximumCountReached.value) return {};
-	const listed = {};
-	Object.entries(options.value).forEach(([optionKey, option]) => {
-		if (
-			mode.value == "multiple" &&
-			selectedOptions.value.includes(optionKey)
-		)
-			return;
-
-		if (
-			!String(option)
-				.toLocaleLowerCase()
-				.includes(activeText.value.toLocaleLowerCase())
-		)
-			return;
-		listed[optionKey] = option;
-	});
-	return listed;
-});
-
-const isMaximumCountReached = computed(() => {
-	if (maximumCount.value <= 0) return false;
-	if (selectedOptions.value.length < maximumCount.value) return false;
-	return true;
-});
-
-watch(
-	activeValue,
-	() => {
-		selectedOptions.value = activeValue.value.filter(
-			(v) => options.value[v] !== undefined,
-		);
-	},
-	{ immediate: true },
-);
-
-watch(listOptions, () => {
-	enforceHighlightBoundaries();
-});
-
-function enforceHighlightBoundaries() {
-	if (highlightedOffset.value <= 0) {
-		highlightedOffset.value = 0;
-		return;
-	}
-	const maxOffset = Object.keys(listOptions.value).length - 1;
-	if (highlightedOffset.value >= maxOffset) {
-		highlightedOffset.value = maxOffset;
-	}
-}
-
-watch(highlightedOffset, () => {
-	if (highlightedOffset.value === null) return;
-	const el = rootEl.value?.querySelector(
-		`[data-list-offset="${highlightedOffset.value}"]`,
-	);
-	if (!el) return;
-	el.scrollIntoView({ block: "nearest", inline: "nearest" });
-});
-
-function emitChangeEvent() {
-	const optionKeys = Object.keys(options.value);
-	const validSelectedOptions = selectedOptions.value.filter((o) =>
-		optionKeys.includes(o),
-	);
-	emit("change", validSelectedOptions);
-}
-
-function removeItem(optionKey: string) {
-	const index = selectedOptions.value.indexOf(optionKey);
-	if (index !== -1) {
-		selectedOptions.value.splice(index, 1);
-		highlightedOffset.value = null;
-	}
-	emitChangeEvent();
-}
-
-function removeLastItem() {
-	selectedOptions.value.pop();
-	emitChangeEvent();
-}
-
-async function hideList(backToRoot = false) {
-	listPosition.value = "hidden";
-	activeText.value = "";
-	if (!backToRoot) return;
-	await nextTick();
-	if (!rootEl.value) return;
-	rootEl.value.tabIndex = 0;
-	rootEl.value.focus();
-}
-
-function handleKeydown(ev: KeyboardEvent) {
-	const key = ev.key;
-	if (key == "Escape") {
-		ev.preventDefault();
-		hideList(true);
-		return;
-	}
-	if (key !== "Tab" && key !== "Shift" && listPosition.value == "hidden") {
-		showList();
-		return;
-	}
-	if (key == "Enter") {
-		if (highlightedOffset.value === null) return;
-		const listKeys = Object.keys(listOptions.value);
-		if (!listKeys || listKeys.length == 0) return;
-		selectOption(listKeys[highlightedOffset.value]);
-		return;
-	}
-	if (key == "ArrowUp") {
-		ev.preventDefault();
-		if (highlightedOffset.value === null) {
-			const maxOffset = Object.keys(listOptions.value).length - 1;
-			highlightedOffset.value = maxOffset;
-			return;
-		}
-		highlightedOffset.value--;
-		enforceHighlightBoundaries();
-		return;
-	}
-	if (key == "ArrowDown") {
-		ev.preventDefault();
-		if (highlightedOffset.value === null) {
-			highlightedOffset.value = 0;
-			return;
-		}
-		highlightedOffset.value++;
-		enforceHighlightBoundaries();
-		return;
-	}
-}
-
-function handleInputKeydown(ev: KeyboardEvent) {
-	if (
-		mode.value == "multiple" &&
-		ev.key == "Backspace" &&
-		!activeText.value
-	) {
-		removeLastItem();
-	}
-}
-
-async function selectOption(optionKey: string) {
-	if (mode.value == "single") {
-		selectedOptions.value = [];
-	} else {
-		if (selectedOptions.value.includes(optionKey)) {
-			return;
-		}
-	}
-	selectedOptions.value.push(optionKey);
-	emitChangeEvent();
-	activeText.value = "";
-	if (selectedOptions.value.length == maximumCount.value) {
-		hideList(true);
-	}
-	await nextTick();
-	selectedOptionsEl.value.scrollTop = selectedOptionsEl.value.scrollHeight;
-}
-
-function handleFocusOut(ev: FocusEvent) {
-	const relatedEl = ev.relatedTarget as HTMLElement;
-	if (!rootEl.value) return;
-	if (rootEl.value.contains(relatedEl)) return;
-	hideList(false);
-}
-
-function handleInputBlur(ev: FocusEvent) {
-	const relatedEl = ev.relatedTarget as HTMLElement;
-	if (!rootEl.value) return;
-	if (rootEl.value.contains(relatedEl)) return;
-	hideList(true);
-}
-
-function handleClick(ev: Event) {
-	const el = ev.target as HTMLElement;
-	if (el.dataset.preventList) return;
-	showList();
-}
-
-async function showList() {
-	if (listPosition.value !== "hidden") return;
-	const { bottom: rootBottom } = rootEl.value.getBoundingClientRect();
-	const bodyHeight = document.body.clientHeight;
-	if (LIST_MAX_HEIGHT_PX + rootBottom >= bodyHeight) {
-		listPosition.value = "top";
-	} else {
-		listPosition.value = "bottom";
-	}
-	await nextTick();
-	rootEl.value.tabIndex = -1;
-	inputEl.value?.focus();
-}
-
-function highlightItem(offset: number) {
-	highlightedOffset.value = offset;
-}
-</script>
-
-<style scoped>
-@import "@/renderer/sharedStyles.css";
-@import "@/renderer/colorTransformations.css";
-
-.BaseSelect {
-	width: 100%;
-	position: relative;
-	outline: none;
-}
-
-.selectedOptions {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-	border: 1px solid var(--separatorColor);
-	width: 100%;
-	outline: none;
-	min-height: 48px;
-	background: var(--containerBackgroundColor);
-	max-height: v-bind("`${LIST_MAX_HEIGHT_PX}px`");
-	overflow-y: auto;
-	padding: 7px 8px 7px 8px;
-	font-size: 0.75rem;
-	border-radius: 8px;
-}
-
-[data-mode]:not([data-list-position="hidden"]) .selectedOptions .placeholder {
-	display: none;
-}
-
-[data-mode][data-list-position="hidden"] .selectedOptions .placeholder {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding-left: 8px;
-	color: var(--secondaryTextColor);
-}
-
-.BaseSelect:focus-within[data-list-position="hidden"] .selectedOptions {
-	border-color: var(--softenedAccentColor);
-}
-
-[data-list-position="bottom"] .selectedOptions {
-	border: 1px solid var(--softenedAccentColor);
-	border-bottom: 1px solid var(--containerBackgroundColor);
-	border-radius: 8px 8px 0 0;
-}
-
-[data-list-position="top"] .selectedOptions {
-	border: 1px solid var(--softenedAccentColor);
-	border-top: 1px solid var(--containerBackgroundColor);
-	border-radius: 0 0 8px 8px;
-}
-
-.selectedOptions .option {
-	background: var(--accentColor);
-	color: var(--chipTextColor);
-	border-radius: 4px;
-	display: flex;
-	gap: 8px;
-	user-select: none;
-	align-items: center;
-	outline: none;
-	min-height: 32px;
-	padding: 4px 8px 4px 8px;
-}
-
-.selectedOptions .option.notFound {
-	background: var(--separatorColor);
-	color: var(--containerBackgroundColor);
-}
-
-[data-mode="single"]:not([data-list-position="hidden"])
-	.selectedOptions
-	.option {
-	display: none;
-}
-
-.selectedOptions .option .desc {
-	height: 100%;
-	display: flex;
-	align-items: center;
-}
-
-[data-mode="multiple"] .selectedOptions .option .remove {
-	display: flex;
-	align-items: center;
-	height: 100%;
-	padding: 4px;
-	margin-right: -4px;
-	border-radius: 4px;
-	backdrop-filter: brightness(95%);
-	cursor: pointer;
-}
-
-[data-mode="single"] .selectedOptions .option .remove {
-	display: none;
-}
-
-.selectedOptions input {
-	min-width: 120px;
-	flex: 1 1 auto;
-	border: none;
-	border-bottom: 1px solid var(--separatorColor);
-	transition: 0.2s ease-in-out border;
-	display: none;
-	color: var(--primaryTextColor);
-	background: var(--containerBackgroundColor);
-	outline: none;
-}
-
-[data-mode]:not([data-list-position="hidden"]) .selectedOptions input {
-	display: block;
-}
-
-.list {
-	position: absolute;
-	z-index: 10;
-	background: var(--containerBackgroundColor);
-	width: 100%;
-	border: 1px solid var(--softenedAccentColor);
-	border-top: none;
-	max-height: v-bind("`${LIST_MAX_HEIGHT_PX}px`");
-	overflow-y: auto;
-	overflow-x: hidden;
-	border-radius: 0 0 8px 8px;
-}
-
-[data-list-position="top"] .list {
-	box-shadow: 0 -4px 16px -4px rgba(0, 0, 0, 0.2);
-	bottom: 100%;
-	border: 1px solid var(--softenedAccentColor);
-	border-bottom: none;
-	border-radius: 8px 8px 0 0;
-}
-
-[data-list-position="bottom"] .list {
-	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.2);
-	top: 100%;
-	border: 1px solid var(--softenedAccentColor);
-	border-top: none;
-}
-
-.list .option {
-	padding: 8px;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	color: var(--primaryTextColor);
-}
-
-.list .option.highlighted {
-	background: var(--softenedAccentColor);
-	padding: 8px;
-}
-
-.list .empty {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: calc(v-bind("`${LIST_MAX_HEIGHT_PX}px`") / 2);
-	padding-bottom: 8px;
-	color: var(--secondaryTextColor);
-}
-</style>
diff --git a/src/ui/src/components/core/input/CoreMultiselectInput.vue b/src/ui/src/components/core/input/CoreMultiselectInput.vue
index d90188ed1..0dcebc7b7 100644
--- a/src/ui/src/components/core/input/CoreMultiselectInput.vue
+++ b/src/ui/src/components/core/input/CoreMultiselectInput.vue
@@ -4,20 +4,18 @@
 		:label="fields.label.value"
 		class="CoreMultiselectInput"
 	>
-		<BaseSelect
-			:base-id="flattenedInstancePath"
-			:active-value="formValue"
+		<BuilderSelect
+			v-model="model"
 			:options="options"
-			:maximum-count="maximumCount"
-			mode="multiple"
 			:placeholder="fields.placeholder.value"
-			@change="handleChange"
-		></BaseSelect>
+			enable-multi-selection
+			hide-icons
+		/>
 	</BaseInputWrapper>
 </template>
 
 <script lang="ts">
-import { computed, inject, Ref } from "vue";
+import { computed, inject } from "vue";
 import { ref } from "vue";
 import { FieldCategory, FieldType } from "@/writerTypes";
 import {
@@ -80,6 +78,7 @@ export default {
 				...accentColor,
 				desc: "The colour of the chips created for each selected option.",
 			},
+			// TODO: use it
 			chipTextColor: {
 				name: "Chip text",
 				type: FieldType.Color,
@@ -109,15 +108,12 @@ export default {
 <script setup lang="ts">
 import injectionKeys from "@/injectionKeys";
 import { useFormValueBroker } from "@/renderer/useFormValueBroker";
-import BaseSelect from "../base/BaseSelect.vue";
+import BuilderSelect, { Option } from "@/builder/BuilderSelect.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
-const options = computed(() => fields.options.value);
-const maximumCount: Ref<number> = computed(() => fields.maximumCount.value);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
 const wf = inject(injectionKeys.core);
 const instancePath = inject(injectionKeys.instancePath);
-const flattenedInstancePath = inject(injectionKeys.flattenedInstancePath);
 
 const { formValue, handleInput } = useFormValueBroker(
 	wf,
@@ -125,9 +121,27 @@ const { formValue, handleInput } = useFormValueBroker(
 	rootInstance,
 );
 
-function handleChange(selectedOptions: string[]) {
-	handleInput(selectedOptions, "wf-options-change");
-}
+const hasReachSelectionLimit = computed(() => {
+	if (!fields.maximumCount.value) return false;
+	return model.value.length >= fields.maximumCount.value;
+});
+
+const options = computed(() => {
+	return Object.entries(fields.options.value).map<Option>(([key, value]) => ({
+		value: key,
+		label: String(value),
+		disabled: hasReachSelectionLimit.value && !model.value.includes(key),
+	}));
+});
+
+const model = computed<string[]>({
+	get() {
+		return formValue.value ?? [];
+	},
+	set(value) {
+		handleInput(value, "wf-options-change");
+	},
+});
 </script>
 
 <style scoped>
diff --git a/src/ui/src/components/core/input/CoreSelectInput.vue b/src/ui/src/components/core/input/CoreSelectInput.vue
index 0c46e1ce0..3de7530e5 100644
--- a/src/ui/src/components/core/input/CoreSelectInput.vue
+++ b/src/ui/src/components/core/input/CoreSelectInput.vue
@@ -4,22 +4,19 @@
 		:label="fields.label.value"
 		class="CoreSelectInput"
 	>
-		<BaseSelect
-			:base-id="flattenedInstancePath"
-			:active-value="formValue ? [formValue] : []"
+		<BuilderSelect
+			v-model="model"
 			:options="options"
-			:maximum-count="1"
-			mode="single"
 			:placeholder="fields.placeholder.value"
-			@change="handleChange"
-		></BaseSelect>
+			hide-icons
+		/>
 	</BaseInputWrapper>
 </template>
 
 <script lang="ts">
 import { computed, inject } from "vue";
 import { ref } from "vue";
-import { FieldCategory, FieldType } from "@/writerTypes";
+import { FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	containerBackgroundColor,
@@ -30,7 +27,6 @@ import {
 } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
-import { WdsColor } from "@/wds/tokens";
 import { validatorObjectRecordNotNested } from "@/constants/validators";
 import { validatorPositiveNumber } from "@/constants/validators";
 
@@ -75,14 +71,6 @@ export default {
 				validator: validatorPositiveNumber,
 			},
 			accentColor,
-			chipTextColor: {
-				name: "Chip text",
-				type: FieldType.Color,
-				default: WdsColor.White,
-				desc: "The color of the text in the chips.",
-				category: FieldCategory.Style,
-				applyStyleVariable: true,
-			},
 			primaryTextColor,
 			secondaryTextColor,
 			containerBackgroundColor,
@@ -103,13 +91,11 @@ export default {
 <script setup lang="ts">
 import injectionKeys from "@/injectionKeys";
 import { useFormValueBroker } from "@/renderer/useFormValueBroker";
-import BaseSelect from "../base/BaseSelect.vue";
+import BuilderSelect, { Option } from "@/builder/BuilderSelect.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
-const options = computed(() => fields.options.value);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
 const wf = inject(injectionKeys.core);
-const flattenedInstancePath = inject(injectionKeys.flattenedInstancePath);
 const instancePath = inject(injectionKeys.instancePath);
 
 const { formValue, handleInput } = useFormValueBroker(
@@ -118,10 +104,21 @@ const { formValue, handleInput } = useFormValueBroker(
 	rootInstance,
 );
 
-function handleChange(selectedOptions: string[]) {
-	const selectedOption = selectedOptions?.[0] ?? null;
-	handleInput(selectedOption, "wf-option-change");
-}
+const options = computed(() =>
+	Object.entries(fields.options.value).map<Option>(([key, value]) => ({
+		value: key,
+		label: String(value),
+	})),
+);
+
+const model = computed<string[]>({
+	get() {
+		return formValue.value;
+	},
+	set(value) {
+		handleInput(value, "wf-options-change");
+	},
+});
 </script>
 
 <style scoped>

From 294f881ed1971b3519c9ad483575b69babc6f099 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 25 Mar 2025 09:37:02 +0100
Subject: [PATCH 3/8] chore(ui): rename `BuilderSelect` to `WdsSelect` - WF-188

---
 .../src/builder/BuilderApplicationSelect.vue  |  8 +++---
 src/ui/src/builder/BuilderGraphSelect.spec.ts | 10 +++----
 src/ui/src/builder/BuilderGraphSelect.vue     |  8 +++---
 .../builder/settings/BuilderFieldsAlign.vue   |  6 ++---
 .../BuilderFieldsBlueprintKey.spec.ts         |  8 +++---
 .../settings/BuilderFieldsBlueprintKey.vue    |  8 +++---
 .../BuilderFieldsComponentEventType.vue       |  8 +++---
 .../settings/BuilderFieldsComponentId.spec.ts |  6 ++---
 .../settings/BuilderFieldsComponentId.vue     |  8 +++---
 .../settings/BuilderFieldsHandler.spec.ts     |  8 +++---
 .../builder/settings/BuilderFieldsHandler.vue |  8 +++---
 .../builder/settings/BuilderFieldsPadding.vue |  6 ++---
 .../builder/settings/BuilderFieldsWidth.vue   |  6 ++---
 .../core/input/CoreMultiselectInput.vue       |  4 +--
 .../components/core/input/CoreSelectInput.vue |  4 +--
 .../WdsSelect.spec.ts}                        | 12 ++++-----
 .../BuilderSelect.vue => wds/WdsSelect.vue}   | 26 +++++++++----------
 tests/e2e/tests/blueprints.spec.ts            |  2 +-
 18 files changed, 69 insertions(+), 77 deletions(-)
 rename src/ui/src/{builder/BuilderSelect.spec.ts => wds/WdsSelect.spec.ts} (78%)
 rename src/ui/src/{builder/BuilderSelect.vue => wds/WdsSelect.vue} (91%)

diff --git a/src/ui/src/builder/BuilderApplicationSelect.vue b/src/ui/src/builder/BuilderApplicationSelect.vue
index daa134fa8..d52ebd963 100644
--- a/src/ui/src/builder/BuilderApplicationSelect.vue
+++ b/src/ui/src/builder/BuilderApplicationSelect.vue
@@ -8,13 +8,13 @@ import {
 	PropType,
 } from "vue";
 import { useListResources } from "@/composables/useListResources";
-import type { Option } from "./BuilderSelect.vue";
+import type { Option } from "@/wds/WdsSelect.vue";
 import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
 import type { WriterApplication } from "@/writerTypes";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
 
-const BuilderSelect = defineAsyncComponent({
-	loader: () => import("./BuilderSelect.vue"),
+const WdsSelect = defineAsyncComponent({
+	loader: () => import("@/wds/WdsSelect.vue"),
 	loadingComponent: BuilderAsyncLoader,
 });
 
@@ -86,7 +86,7 @@ defineExpose({ selectedData });
 
 <template>
 	<div class="BuilderGraphSelect--text">
-		<BuilderSelect
+		<WdsSelect
 			v-if="graphs.length > 0 || isLoading"
 			v-model="currentValue"
 			:options="options"
diff --git a/src/ui/src/builder/BuilderGraphSelect.spec.ts b/src/ui/src/builder/BuilderGraphSelect.spec.ts
index 8159d4a6d..21bbea3a1 100644
--- a/src/ui/src/builder/BuilderGraphSelect.spec.ts
+++ b/src/ui/src/builder/BuilderGraphSelect.spec.ts
@@ -3,7 +3,7 @@ import BuilderGraphSelect from "./BuilderGraphSelect.vue";
 import { flushPromises, shallowMount } from "@vue/test-utils";
 import { buildMockCore } from "@/tests/mocks";
 import injectionKeys from "@/injectionKeys";
-import BuilderSelect from "./BuilderSelect.vue";
+import WdsSelect from "@/wds/WdsSelect.vue";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
 
 describe("BuilderGraphSelect", () => {
@@ -26,7 +26,7 @@ describe("BuilderGraphSelect", () => {
 			props: { modelValue: "1" },
 			global: {
 				stubs: {
-					BuilderSelect: true,
+					WdsSelect: true,
 				},
 				provide: {
 					[injectionKeys.core as symbol]: core,
@@ -35,7 +35,7 @@ describe("BuilderGraphSelect", () => {
 		});
 		await flushPromises();
 		expect(sendListResourcesRequest).toHaveBeenCalledOnce();
-		expect(wrapper.findComponent(BuilderSelect).exists()).toBe(true);
+		expect(wrapper.findComponent(WdsSelect).exists()).toBe(true);
 	});
 
 	it("should fallback to input", async () => {
@@ -47,7 +47,7 @@ describe("BuilderGraphSelect", () => {
 			props: { modelValue: "1" },
 			global: {
 				stubs: {
-					BuilderSelect: true,
+					WdsSelect: true,
 				},
 				provide: {
 					[injectionKeys.core as symbol]: core,
@@ -56,7 +56,7 @@ describe("BuilderGraphSelect", () => {
 		});
 		await flushPromises();
 		expect(sendListResourcesRequest).toHaveBeenCalledOnce();
-		expect(wrapper.findComponent(BuilderSelect).exists()).toBe(false);
+		expect(wrapper.findComponent(WdsSelect).exists()).toBe(false);
 		expect(wrapper.findComponent(WdsTextInput).exists()).toBe(true);
 	});
 });
diff --git a/src/ui/src/builder/BuilderGraphSelect.vue b/src/ui/src/builder/BuilderGraphSelect.vue
index a48dceeda..4e3d79a86 100644
--- a/src/ui/src/builder/BuilderGraphSelect.vue
+++ b/src/ui/src/builder/BuilderGraphSelect.vue
@@ -8,13 +8,13 @@ import {
 	PropType,
 } from "vue";
 import { useListResources } from "@/composables/useListResources";
-import type { Option } from "./BuilderSelect.vue";
+import type { Option } from "@/wds/WdsSelect.vue";
 import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
 import type { WriterGraph } from "@/writerTypes";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
 
-const BuilderSelect = defineAsyncComponent({
-	loader: () => import("./BuilderSelect.vue"),
+const WdsSelect = defineAsyncComponent({
+	loader: () => import("@/wds/WdsSelect.vue"),
 	loadingComponent: BuilderAsyncLoader,
 });
 
@@ -73,7 +73,7 @@ defineExpose({ selectedData });
 
 <template>
 	<div class="BuilderGraphSelect--text">
-		<BuilderSelect
+		<WdsSelect
 			v-if="graphs.length > 0 || isLoading"
 			v-model="currentValue"
 			:options="options"
diff --git a/src/ui/src/builder/settings/BuilderFieldsAlign.vue b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
index 2ba830563..eddd5464f 100644
--- a/src/ui/src/builder/settings/BuilderFieldsAlign.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
@@ -13,7 +13,7 @@
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
-				<BuilderSelect
+				<WdsSelect
 					ref="pickerEl"
 					:model-value="subMode"
 					:options="selectOptions"
@@ -58,8 +58,8 @@ import {
 } from "./constants/builderFieldsCssTabs";
 import BuilderAsyncLoader from "../BuilderAsyncLoader.vue";
 
-const BuilderSelect = defineAsyncComponent({
-	loader: () => import("../BuilderSelect.vue"),
+const WdsSelect = defineAsyncComponent({
+	loader: () => import("@/wds/WdsSelect.vue"),
 	loadingComponent: BuilderAsyncLoader,
 });
 
diff --git a/src/ui/src/builder/settings/BuilderFieldsBlueprintKey.spec.ts b/src/ui/src/builder/settings/BuilderFieldsBlueprintKey.spec.ts
index 40f731a1a..c41ec2591 100644
--- a/src/ui/src/builder/settings/BuilderFieldsBlueprintKey.spec.ts
+++ b/src/ui/src/builder/settings/BuilderFieldsBlueprintKey.spec.ts
@@ -4,7 +4,7 @@ import { flushPromises, mount } from "@vue/test-utils";
 import { buildMockCore, buildMockComponent, mockProvides } from "@/tests/mocks";
 import injectionKeys from "@/injectionKeys";
 import { generateBuilderManager } from "../builderManager";
-import BuilderSelect from "../BuilderSelect.vue";
+import WdsSelect from "@/wds/WdsSelect.vue";
 import WdsButton from "@/wds/WdsButton.vue";
 import type { generateCore } from "@/core";
 
@@ -57,7 +57,7 @@ describe("BuilderFieldsBlueprintKey", () => {
 
 		expect(wrapper.attributes("data-automation-key")).toBe(fieldKey);
 
-		const select = wrapper.getComponent(BuilderSelect);
+		const select = wrapper.getComponent(WdsSelect);
 
 		expect(select.props("modelValue")).toBe("");
 
@@ -74,7 +74,7 @@ describe("BuilderFieldsBlueprintKey", () => {
 		const wrapper = buildWrapper(componentWf2.id);
 		await flushPromises();
 
-		const select = wrapper.getComponent(BuilderSelect);
+		const select = wrapper.getComponent(WdsSelect);
 
 		select.vm.$emit("update:modelValue", componentWf1.content.key);
 
@@ -104,7 +104,7 @@ describe("BuilderFieldsBlueprintKey", () => {
 		const wrapper = buildWrapper(componentWf3.id);
 		await flushPromises();
 
-		const select = wrapper.getComponent(BuilderSelect);
+		const select = wrapper.getComponent(WdsSelect);
 
 		expect(select.props("modelValue")).toBe(unexstingBlueprintKey);
 
diff --git a/src/ui/src/builder/settings/BuilderFieldsBlueprintKey.vue b/src/ui/src/builder/settings/BuilderFieldsBlueprintKey.vue
index 0603ca3c5..98e645bcf 100644
--- a/src/ui/src/builder/settings/BuilderFieldsBlueprintKey.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsBlueprintKey.vue
@@ -3,7 +3,7 @@
 		class="BuilderFieldsBlueprintKey"
 		:data-automation-key="props.fieldKey"
 	>
-		<BuilderSelect v-model="selectedBlueprintKey" :options="options" />
+		<WdsSelect v-model="selectedBlueprintKey" :options="options" />
 		<WdsButton
 			v-if="selectedBlueprintComponentId"
 			variant="neutral"
@@ -21,11 +21,9 @@ import { toRefs, inject, computed, defineAsyncComponent } from "vue";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
 import WdsButton from "@/wds/WdsButton.vue";
-import { Option } from "../BuilderSelect.vue";
+import { Option } from "@/wds/WdsSelect.vue";
 
-const BuilderSelect = defineAsyncComponent(
-	() => import("../BuilderSelect.vue"),
-);
+const WdsSelect = defineAsyncComponent(() => import("@/wds/WdsSelect.vue"));
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/settings/BuilderFieldsComponentEventType.vue b/src/ui/src/builder/settings/BuilderFieldsComponentEventType.vue
index aca1c3e82..f330f0d77 100644
--- a/src/ui/src/builder/settings/BuilderFieldsComponentEventType.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsComponentEventType.vue
@@ -3,7 +3,7 @@
 		class="BuilderFieldsComponentEventType"
 		:data-automation-key="props.fieldKey"
 	>
-		<BuilderSelect
+		<WdsSelect
 			v-if="options.length"
 			v-model="selected"
 			:options="options"
@@ -17,13 +17,11 @@
 import { toRefs, inject, computed, defineAsyncComponent } from "vue";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
-import type { Option } from "../BuilderSelect.vue";
+import type { Option } from "@/wds/WdsSelect.vue";
 import { FieldType } from "@/writerTypes";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
 
-const BuilderSelect = defineAsyncComponent(
-	() => import("../BuilderSelect.vue"),
-);
+const WdsSelect = defineAsyncComponent(() => import("@/wds/WdsSelect.vue"));
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/settings/BuilderFieldsComponentId.spec.ts b/src/ui/src/builder/settings/BuilderFieldsComponentId.spec.ts
index b75b4c77c..3a6a1eeff 100644
--- a/src/ui/src/builder/settings/BuilderFieldsComponentId.spec.ts
+++ b/src/ui/src/builder/settings/BuilderFieldsComponentId.spec.ts
@@ -4,7 +4,7 @@ import { flushPromises, mount } from "@vue/test-utils";
 import { buildMockCore, buildMockComponent, mockProvides } from "@/tests/mocks";
 import injectionKeys from "@/injectionKeys";
 import { generateBuilderManager } from "../builderManager";
-import BuilderSelect from "../BuilderSelect.vue";
+import WdsSelect from "@/wds/WdsSelect.vue";
 import WdsButton from "@/wds/WdsButton.vue";
 import type { generateCore } from "@/core";
 
@@ -56,7 +56,7 @@ describe("BuilderFieldsComponentId", () => {
 
 		expect(wrapper.attributes("data-automation-key")).toBe(fieldKey);
 
-		const select = wrapper.getComponent(BuilderSelect);
+		const select = wrapper.getComponent(WdsSelect);
 
 		expect(select.props("modelValue")).toBe("");
 
@@ -77,7 +77,7 @@ describe("BuilderFieldsComponentId", () => {
 		const wrapper = buildWrapper(componentPage.id);
 		await flushPromises();
 
-		const select = wrapper.getComponent(BuilderSelect);
+		const select = wrapper.getComponent(WdsSelect);
 
 		select.vm.$emit("update:modelValue", componentButton.id);
 
diff --git a/src/ui/src/builder/settings/BuilderFieldsComponentId.vue b/src/ui/src/builder/settings/BuilderFieldsComponentId.vue
index 3b5b2a27c..001dee34a 100644
--- a/src/ui/src/builder/settings/BuilderFieldsComponentId.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsComponentId.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="BuilderFieldsComponentId" :data-automation-key="props.fieldKey">
-		<BuilderSelect v-model="selected" :options="options" enable-search />
+		<WdsSelect v-model="selected" :options="options" enable-search />
 		<WdsButton
 			v-if="selected"
 			variant="neutral"
@@ -18,13 +18,11 @@
 import { toRefs, inject, computed, defineAsyncComponent } from "vue";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
-import type { Option } from "../BuilderSelect.vue";
+import type { Option } from "@/wds/WdsSelect.vue";
 import { useComponentDescription } from "../useComponentDescription";
 import WdsButton from "@/wds/WdsButton.vue";
 
-const BuilderSelect = defineAsyncComponent(
-	() => import("../BuilderSelect.vue"),
-);
+const WdsSelect = defineAsyncComponent(() => import("@/wds/WdsSelect.vue"));
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/settings/BuilderFieldsHandler.spec.ts b/src/ui/src/builder/settings/BuilderFieldsHandler.spec.ts
index 8b50f0f58..275916399 100644
--- a/src/ui/src/builder/settings/BuilderFieldsHandler.spec.ts
+++ b/src/ui/src/builder/settings/BuilderFieldsHandler.spec.ts
@@ -4,7 +4,7 @@ import { flushPromises, mount } from "@vue/test-utils";
 import { buildMockCore, buildMockComponent, mockProvides } from "@/tests/mocks";
 import injectionKeys from "@/injectionKeys";
 import { generateBuilderManager } from "../builderManager";
-import BuilderSelect from "../BuilderSelect.vue";
+import WdsSelect from "@/wds/WdsSelect.vue";
 import type { generateCore } from "@/core";
 
 describe("BuilderFieldsHandler", () => {
@@ -52,7 +52,7 @@ describe("BuilderFieldsHandler", () => {
 
 		expect(wrapper.attributes("data-automation-key")).toBe(fieldKey);
 
-		const select = wrapper.getComponent(BuilderSelect);
+		const select = wrapper.getComponent(WdsSelect);
 
 		expect(select.props("modelValue")).toBe("");
 
@@ -69,7 +69,7 @@ describe("BuilderFieldsHandler", () => {
 		const wrapper = buildWrapper(component1.id);
 		await flushPromises();
 
-		const select = wrapper.getComponent(BuilderSelect);
+		const select = wrapper.getComponent(WdsSelect);
 
 		select.vm.$emit("update:modelValue", "func1");
 
@@ -91,7 +91,7 @@ describe("BuilderFieldsHandler", () => {
 		const wrapper = buildWrapper(component2.id);
 		await flushPromises();
 
-		const select = wrapper.getComponent(BuilderSelect);
+		const select = wrapper.getComponent(WdsSelect);
 
 		expect(select.props("modelValue")).toBe(unexstingHandler);
 
diff --git a/src/ui/src/builder/settings/BuilderFieldsHandler.vue b/src/ui/src/builder/settings/BuilderFieldsHandler.vue
index 49cb61a16..470f16bd1 100644
--- a/src/ui/src/builder/settings/BuilderFieldsHandler.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsHandler.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="BuilderFieldsHandler" :data-automation-key="props.fieldKey">
-		<BuilderSelect v-model="selectedHandler" :options="options" />
+		<WdsSelect v-model="selectedHandler" :options="options" />
 	</div>
 </template>
 
@@ -8,11 +8,9 @@
 import { toRefs, inject, computed, defineAsyncComponent } from "vue";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
-import { Option } from "../BuilderSelect.vue";
+import { Option } from "@/wds/WdsSelect.vue";
 
-const BuilderSelect = defineAsyncComponent(
-	() => import("../BuilderSelect.vue"),
-);
+const WdsSelect = defineAsyncComponent(() => import("@/wds/WdsSelect.vue"));
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/settings/BuilderFieldsPadding.vue b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
index 991af54ec..83d84dad1 100644
--- a/src/ui/src/builder/settings/BuilderFieldsPadding.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
@@ -13,7 +13,7 @@
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
-				<BuilderSelect
+				<WdsSelect
 					ref="pickerEl"
 					:model-value="subMode"
 					:options="selectOptions"
@@ -128,8 +128,8 @@ import {
 } from "./constants/builderFieldsCssTabs";
 import BuilderAsyncLoader from "../BuilderAsyncLoader.vue";
 
-const BuilderSelect = defineAsyncComponent({
-	loader: () => import("../BuilderSelect.vue"),
+const WdsSelect = defineAsyncComponent({
+	loader: () => import("@/wds/WdsSelect.vue"),
 	loadingComponent: BuilderAsyncLoader,
 });
 
diff --git a/src/ui/src/builder/settings/BuilderFieldsWidth.vue b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
index d8ed43f6e..5094867e0 100644
--- a/src/ui/src/builder/settings/BuilderFieldsWidth.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
@@ -13,7 +13,7 @@
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
-				<BuilderSelect
+				<WdsSelect
 					ref="pickerEl"
 					:model-value="subMode"
 					:options="selectOptions"
@@ -67,8 +67,8 @@ import {
 } from "./constants/builderFieldsCssTabs";
 import BuilderAsyncLoader from "../BuilderAsyncLoader.vue";
 
-const BuilderSelect = defineAsyncComponent({
-	loader: () => import("../BuilderSelect.vue"),
+const WdsSelect = defineAsyncComponent({
+	loader: () => import("@/wds/WdsSelect.vue"),
 	loadingComponent: BuilderAsyncLoader,
 });
 
diff --git a/src/ui/src/components/core/input/CoreMultiselectInput.vue b/src/ui/src/components/core/input/CoreMultiselectInput.vue
index 0dcebc7b7..adb55bf29 100644
--- a/src/ui/src/components/core/input/CoreMultiselectInput.vue
+++ b/src/ui/src/components/core/input/CoreMultiselectInput.vue
@@ -4,7 +4,7 @@
 		:label="fields.label.value"
 		class="CoreMultiselectInput"
 	>
-		<BuilderSelect
+		<WdsSelect
 			v-model="model"
 			:options="options"
 			:placeholder="fields.placeholder.value"
@@ -108,7 +108,7 @@ export default {
 <script setup lang="ts">
 import injectionKeys from "@/injectionKeys";
 import { useFormValueBroker } from "@/renderer/useFormValueBroker";
-import BuilderSelect, { Option } from "@/builder/BuilderSelect.vue";
+import WdsSelect, { Option } from "@/wds/WdsSelect.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
diff --git a/src/ui/src/components/core/input/CoreSelectInput.vue b/src/ui/src/components/core/input/CoreSelectInput.vue
index 3de7530e5..68d4769a0 100644
--- a/src/ui/src/components/core/input/CoreSelectInput.vue
+++ b/src/ui/src/components/core/input/CoreSelectInput.vue
@@ -4,7 +4,7 @@
 		:label="fields.label.value"
 		class="CoreSelectInput"
 	>
-		<BuilderSelect
+		<WdsSelect
 			v-model="model"
 			:options="options"
 			:placeholder="fields.placeholder.value"
@@ -91,7 +91,7 @@ export default {
 <script setup lang="ts">
 import injectionKeys from "@/injectionKeys";
 import { useFormValueBroker } from "@/renderer/useFormValueBroker";
-import BuilderSelect, { Option } from "@/builder/BuilderSelect.vue";
+import WdsSelect, { Option } from "@/wds/WdsSelect.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
diff --git a/src/ui/src/builder/BuilderSelect.spec.ts b/src/ui/src/wds/WdsSelect.spec.ts
similarity index 78%
rename from src/ui/src/builder/BuilderSelect.spec.ts
rename to src/ui/src/wds/WdsSelect.spec.ts
index 7f1dc9435..40960fdc9 100644
--- a/src/ui/src/builder/BuilderSelect.spec.ts
+++ b/src/ui/src/wds/WdsSelect.spec.ts
@@ -1,11 +1,11 @@
 import { flushPromises, mount, shallowMount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 
-import BuilderSelect from "./BuilderSelect.vue";
-import { Option } from "./BuilderSelect.vue";
+import WdsSelect from "./WdsSelect.vue";
+import { Option } from "./WdsSelect.vue";
 import WdsDropdownMenu from "@/wds/WdsDropdownMenu.vue";
 
-describe("BuilderSelect", () => {
+describe("WdsSelect", () => {
 	const options: Option[] = [
 		{ label: "Label A", value: "a" },
 		{ label: "Label B", value: "b" },
@@ -13,7 +13,7 @@ describe("BuilderSelect", () => {
 	];
 
 	it("should display unknow value selected", () => {
-		const wrapper = shallowMount(BuilderSelect, {
+		const wrapper = shallowMount(WdsSelect, {
 			props: {
 				modelValue: "x",
 				enableMultiSelection: false,
@@ -28,7 +28,7 @@ describe("BuilderSelect", () => {
 	});
 
 	it("should support single mode", async () => {
-		const wrapper = mount(BuilderSelect, {
+		const wrapper = mount(WdsSelect, {
 			props: {
 				modelValue: "a",
 				enableMultiSelection: false,
@@ -42,7 +42,7 @@ describe("BuilderSelect", () => {
 		});
 		await flushPromises();
 
-		await wrapper.get(".BuilderSelect__trigger").trigger("click");
+		await wrapper.get(".WdsSelect__trigger").trigger("click");
 		await flushPromises();
 
 		const dropdownMenu = wrapper.getComponent(WdsDropdownMenu);
diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/wds/WdsSelect.vue
similarity index 91%
rename from src/ui/src/builder/BuilderSelect.vue
rename to src/ui/src/wds/WdsSelect.vue
index 4ae9a087c..04cdf9979 100644
--- a/src/ui/src/builder/BuilderSelect.vue
+++ b/src/ui/src/wds/WdsSelect.vue
@@ -1,7 +1,7 @@
 <template>
-	<div ref="trigger" class="BuilderSelect">
+	<div ref="trigger" class="WdsSelect">
 		<button
-			class="BuilderSelect__trigger"
+			class="WdsSelect__trigger"
 			role="button"
 			@click="isOpen = !isOpen"
 		>
@@ -21,7 +21,7 @@
 			</template>
 			<div
 				v-if="enableMultiSelection"
-				class="BuilderSelect__trigger__multiSelectLabel"
+				class="WdsSelect__trigger__multiSelectLabel"
 			>
 				<WdsTag
 					v-for="option of selectedOptions"
@@ -32,20 +32,20 @@
 				/>
 				<p
 					v-if="selectedOptions.length === 0 && placeholder"
-					class="BuilderSelect__trigger__multiSelectLabel__placeholder"
+					class="WdsSelect__trigger__multiSelectLabel__placeholder"
 				>
 					{{ placeholder }}
 				</p>
 			</div>
 			<div
 				v-else
-				class="BuilderSelect__trigger__label"
+				class="WdsSelect__trigger__label"
 				data-writer-tooltip-strategy="overflow"
 				:data-writer-tooltip="currentLabel"
 			>
 				{{ currentLabel ?? placeholder }}
 			</div>
-			<div class="BuilderSelect__trigger__arrow">
+			<div class="WdsSelect__trigger__arrow">
 				<i class="material-symbols-outlined">{{ expandIcon }}</i>
 			</div>
 		</button>
@@ -197,14 +197,14 @@ function handleRemoveValue(value: string) {
 </script>
 
 <style scoped>
-.BuilderSelect {
+.WdsSelect {
 	position: relative;
 	user-select: none;
 	width: 100%;
 	font-size: 0.875rem;
 }
 
-.BuilderSelect__trigger {
+.WdsSelect__trigger {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -224,19 +224,19 @@ function handleRemoveValue(value: string) {
 
 	cursor: pointer;
 }
-.BuilderSelect__trigger:focus {
+.WdsSelect__trigger:focus {
 	border: 1px solid var(--softenedAccentColor);
 	box-shadow: 0px 0px 0px 3px rgba(81, 31, 255, 0.05);
 	outline: none;
 }
-.BuilderSelect__trigger__label {
+.WdsSelect__trigger__label {
 	text-overflow: ellipsis;
 	overflow: hidden;
 	flex-grow: 1;
 	text-align: left;
 	white-space: nowrap;
 }
-.BuilderSelect__trigger__arrow {
+.WdsSelect__trigger__arrow {
 	border: none;
 	background-color: transparent;
 	display: flex;
@@ -246,7 +246,7 @@ function handleRemoveValue(value: string) {
 	cursor: pointer;
 }
 
-.BuilderSelect__trigger__multiSelectLabel {
+.WdsSelect__trigger__multiSelectLabel {
 	flex-grow: 1;
 
 	display: flex;
@@ -254,7 +254,7 @@ function handleRemoveValue(value: string) {
 	justify-content: flex-start;
 	gap: 8px;
 }
-.BuilderSelect__trigger__multiSelectLabel__placeholder {
+.WdsSelect__trigger__multiSelectLabel__placeholder {
 	color: var(--wdsColorGray5);
 }
 </style>
diff --git a/tests/e2e/tests/blueprints.spec.ts b/tests/e2e/tests/blueprints.spec.ts
index 95f6cc732..017fa5ec6 100644
--- a/tests/e2e/tests/blueprints.spec.ts
+++ b/tests/e2e/tests/blueprints.spec.ts
@@ -86,7 +86,7 @@ test.describe("Blueprints", () => {
 		await runBlueprintBlock.click();
 		await page
 			.locator(`.BuilderFieldsBlueprintKey[data-automation-key="blueprintKey"]`)
-			.locator(".BuilderSelect__trigger")
+			.locator(".WdsSelect__trigger")
 			.click();
 		await page
 			.locator(`.BuilderFieldsBlueprintKey[data-automation-key="blueprintKey"]`)

From a93407ce97fa0cffa1de3d41a427354a5b56edf8 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 25 Mar 2025 14:39:53 +0100
Subject: [PATCH 4/8] fix(ui): make `WdsSelect` draggable for Firefox - WF-188

use a `<div>` instead of button because Firefox has an issue with
draggable `<button>`

see https://bugzilla.mozilla.org/show_bug.cgi?id=568313
---
 src/ui/src/wds/WdsSelect.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/ui/src/wds/WdsSelect.vue b/src/ui/src/wds/WdsSelect.vue
index 04cdf9979..38fc6af07 100644
--- a/src/ui/src/wds/WdsSelect.vue
+++ b/src/ui/src/wds/WdsSelect.vue
@@ -1,9 +1,12 @@
 <template>
 	<div ref="trigger" class="WdsSelect">
-		<button
+		<!-- use a `<div>` instead of button because Firefox has an issue with draggable `<button>` https://bugzilla.mozilla.org/show_bug.cgi?id=568313 -->
+		<div
 			class="WdsSelect__trigger"
 			role="button"
+			tabindex="0"
 			@click="isOpen = !isOpen"
+			@keydown.enter="isOpen = !isOpen"
 		>
 			<template
 				v-if="
@@ -48,7 +51,7 @@
 			<div class="WdsSelect__trigger__arrow">
 				<i class="material-symbols-outlined">{{ expandIcon }}</i>
 			</div>
-		</button>
+		</div>
 		<WdsDropdownMenu
 			v-if="isOpen"
 			ref="dropdown"

From ecaa3a6f9e244d973c8538cb3e4e58828088e693 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 25 Mar 2025 16:57:16 +0100
Subject: [PATCH 5/8] feat(ui): customize `WdsSelect` from UI component -
 WF-188

---
 .../core/input/CoreMultiselectInput.vue       | 21 ++++++++++++++++---
 .../components/core/input/CoreSelectInput.vue | 12 +++++++++--
 src/ui/src/wds/WdsCheckbox.vue                |  1 +
 src/ui/src/wds/WdsDropdownMenu.vue            |  1 +
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/ui/src/components/core/input/CoreMultiselectInput.vue b/src/ui/src/components/core/input/CoreMultiselectInput.vue
index adb55bf29..4dfd08f14 100644
--- a/src/ui/src/components/core/input/CoreMultiselectInput.vue
+++ b/src/ui/src/components/core/input/CoreMultiselectInput.vue
@@ -23,7 +23,6 @@ import {
 	containerBackgroundColor,
 	cssClasses,
 	primaryTextColor,
-	secondaryTextColor,
 	separatorColor,
 } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
@@ -78,7 +77,6 @@ export default {
 				...accentColor,
 				desc: "The colour of the chips created for each selected option.",
 			},
-			// TODO: use it
 			chipTextColor: {
 				name: "Chip text",
 				type: FieldType.Color,
@@ -88,7 +86,6 @@ export default {
 				applyStyleVariable: true,
 			},
 			primaryTextColor,
-			secondaryTextColor,
 			containerBackgroundColor,
 			separatorColor,
 			cssClasses,
@@ -153,4 +150,22 @@ const model = computed<string[]>({
 	width: 100%;
 	position: relative;
 }
+
+/* Override WDS components from component's styles */
+
+:deep(.WdsTag) {
+	background-color: var(--accentColor);
+	color: var(--chipTextColor);
+}
+:deep(.WdsTag):hover {
+	background-color: var(--accentColor);
+	color: var(--chipTextColor);
+}
+:deep(.WdsSelect__trigger) {
+	border-color: var(--separatorColor);
+	background-color: var(--containerBackgroundColor);
+}
+:deep(.WdsSelect__trigger):focus {
+	border: 1px solid var(--separatorColor);
+}
 </style>
diff --git a/src/ui/src/components/core/input/CoreSelectInput.vue b/src/ui/src/components/core/input/CoreSelectInput.vue
index 68d4769a0..046a7ba00 100644
--- a/src/ui/src/components/core/input/CoreSelectInput.vue
+++ b/src/ui/src/components/core/input/CoreSelectInput.vue
@@ -22,7 +22,6 @@ import {
 	containerBackgroundColor,
 	cssClasses,
 	primaryTextColor,
-	secondaryTextColor,
 	separatorColor,
 } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
@@ -72,7 +71,6 @@ export default {
 			},
 			accentColor,
 			primaryTextColor,
-			secondaryTextColor,
 			containerBackgroundColor,
 			separatorColor,
 			cssClasses,
@@ -130,4 +128,14 @@ const model = computed<string[]>({
 	width: 100%;
 	position: relative;
 }
+
+/* Override WDS components from component's styles */
+
+:deep(.WdsSelect__trigger) {
+	border-color: var(--separatorColor);
+	background-color: var(--containerBackgroundColor);
+}
+:deep(.WdsSelect__trigger):focus {
+	border: 1px solid var(--separatorColor);
+}
 </style>
diff --git a/src/ui/src/wds/WdsCheckbox.vue b/src/ui/src/wds/WdsCheckbox.vue
index ad4df7d41..77d00051e 100644
--- a/src/ui/src/wds/WdsCheckbox.vue
+++ b/src/ui/src/wds/WdsCheckbox.vue
@@ -50,6 +50,7 @@ function onChange(event: InputEvent) {
 	column-gap: 12px;
 	row-gap: 2px;
 	cursor: pointer;
+	text-align: center;
 }
 .WdsCheckbox--disabled {
 	opacity: 40%;
diff --git a/src/ui/src/wds/WdsDropdownMenu.vue b/src/ui/src/wds/WdsDropdownMenu.vue
index f75a3928d..a341f0216 100644
--- a/src/ui/src/wds/WdsDropdownMenu.vue
+++ b/src/ui/src/wds/WdsDropdownMenu.vue
@@ -315,6 +315,7 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
+	z-index: 2;
 }
 
 .WdsDropdownMenu__header__search {

From 30cd4d0447e9b8ca3344cdb0dd49894c2ac4fa9f Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Mon, 28 Apr 2025 14:16:40 +0200
Subject: [PATCH 6/8] feat(ui): add animation for WdsSelect - WF-188

---
 src/ui/src/wds/WdsSelect.vue | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/ui/src/wds/WdsSelect.vue b/src/ui/src/wds/WdsSelect.vue
index 38fc6af07..72dbe8e87 100644
--- a/src/ui/src/wds/WdsSelect.vue
+++ b/src/ui/src/wds/WdsSelect.vue
@@ -52,19 +52,21 @@
 				<i class="material-symbols-outlined">{{ expandIcon }}</i>
 			</div>
 		</div>
-		<WdsDropdownMenu
-			v-if="isOpen"
-			ref="dropdown"
-			:enable-search="enableSearch"
-			:enable-multi-selection="enableMultiSelection"
-			:hide-icons="hideIcons"
-			:loading="loading"
-			:options="options"
-			:selected="currentValue"
-			:style="floatingStyles"
-			@select="onSelect"
-			@search="updateFloatingStyle"
-		/>
+		<BaseTransitionSlideFade>
+			<WdsDropdownMenu
+				v-if="isOpen"
+				ref="dropdown"
+				:enable-search="enableSearch"
+				:enable-multi-selection="enableMultiSelection"
+				:hide-icons="hideIcons"
+				:loading="loading"
+				:options="options"
+				:selected="currentValue"
+				:style="floatingStyles"
+				@select="onSelect"
+				@search="updateFloatingStyle"
+			/>
+		</BaseTransitionSlideFade>
 	</div>
 </template>
 
@@ -87,6 +89,7 @@ import type { WdsDropdownMenuOption } from "@/wds/WdsDropdownMenu.vue";
 import { useFocusWithin } from "@/composables/useFocusWithin";
 import WdsTag from "@/wds/WdsTag.vue";
 import SharedImgWithFallback from "@/components/shared/SharedImgWithFallback.vue";
+import BaseTransitionSlideFade from "@/components/core/base/BaseTransitionSlideFade.vue";
 
 const WdsDropdownMenu = defineAsyncComponent(
 	() => import("@/wds/WdsDropdownMenu.vue"),

From 82f7d7f99c91032af3b37eba7d835010956c04f8 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 29 Apr 2025 10:18:43 +0200
Subject: [PATCH 7/8] fix(ui): improve WdsSelect design shifts - WF-188

---
 src/ui/src/wds/WdsModal.vue  | 3 ++-
 src/ui/src/wds/WdsSelect.vue | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/ui/src/wds/WdsModal.vue b/src/ui/src/wds/WdsModal.vue
index b52f7d2cc..7565e362c 100644
--- a/src/ui/src/wds/WdsModal.vue
+++ b/src/ui/src/wds/WdsModal.vue
@@ -121,7 +121,8 @@ const { title, actions } = toRefs(props);
 	max-width: 240ch;
 }
 
-.WdsModal--overflow .WdsModal__main {
+.WdsModal--overflow .WdsModal__main,
+.WdsModal--overflow .WdsModal__main__content {
 	overflow: unset;
 }
 
diff --git a/src/ui/src/wds/WdsSelect.vue b/src/ui/src/wds/WdsSelect.vue
index 72dbe8e87..64a3f7e61 100644
--- a/src/ui/src/wds/WdsSelect.vue
+++ b/src/ui/src/wds/WdsSelect.vue
@@ -259,6 +259,7 @@ function handleRemoveValue(value: string) {
 	flex-wrap: wrap;
 	justify-content: flex-start;
 	gap: 8px;
+	min-height: 24px;
 }
 .WdsSelect__trigger__multiSelectLabel__placeholder {
 	color: var(--wdsColorGray5);

From ae7901645c492271610c70a64078d0e52b23e8c1 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 29 Apr 2025 11:28:55 +0200
Subject: [PATCH 8/8] fix(ui): fix `handleInput` event name - WF-188

---
 src/ui/src/components/core/input/CoreSelectInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/src/components/core/input/CoreSelectInput.vue b/src/ui/src/components/core/input/CoreSelectInput.vue
index 046a7ba00..55c89047d 100644
--- a/src/ui/src/components/core/input/CoreSelectInput.vue
+++ b/src/ui/src/components/core/input/CoreSelectInput.vue
@@ -114,7 +114,7 @@ const model = computed<string[]>({
 		return formValue.value;
 	},
 	set(value) {
-		handleInput(value, "wf-options-change");
+		handleInput(value, "wf-option-change");
 	},
 });
 </script>