From e1322cda6728babd9552730f12c72dd3024b4be7 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Thu, 28 Nov 2024 23:12:25 +0100
Subject: [PATCH] feat(ui): use design system in builder - WF-127

---
 src/ui/src/builder/BuilderModal.vue           |  33 +++-
 src/ui/src/builder/BuilderSelect.vue          |  44 ++---
 .../builder/settings/BuilderFieldsAlign.vue   |   5 +-
 .../builder/settings/BuilderFieldsColor.vue   |  14 +-
 .../settings/BuilderFieldsKeyValue.vue        |  12 +-
 .../builder/settings/BuilderFieldsObject.vue  |   1 -
 .../builder/settings/BuilderFieldsPadding.vue | 130 +++++++------
 .../builder/settings/BuilderFieldsShadow.vue  |  22 ++-
 .../builder/settings/BuilderFieldsText.vue    |   1 -
 .../builder/settings/BuilderFieldsWidth.vue   |  28 ++-
 .../builder/settings/BuilderSectionTitle.vue  |  23 +++
 .../settings/BuilderSettingsBinding.vue       |  20 +-
 .../settings/BuilderSettingsHandlers.vue      | 178 +++++++-----------
 .../settings/BuilderSettingsProperties.vue    |  63 +++----
 .../settings/BuilderSettingsVisibility.vue    |  28 +--
 .../builder/settings/BuilderTemplateInput.vue |  38 ++--
 src/ui/src/builder/sharedStyles.css           |  70 -------
 src/ui/src/wds/WdsFieldWrapper.vue            |  71 ++++---
 src/ui/src/wds/WdsTextInput.vue               |  43 ++++-
 src/ui/src/wds/WdsTextareaInput.vue           |  32 +++-
 tests/e2e/tests/state.spec.ts                 |   2 +-
 tests/e2e/tests/stateAutocompletion.spec.ts   |  22 +--
 22 files changed, 429 insertions(+), 451 deletions(-)
 create mode 100644 src/ui/src/builder/settings/BuilderSectionTitle.vue

diff --git a/src/ui/src/builder/BuilderModal.vue b/src/ui/src/builder/BuilderModal.vue
index 62cbf4a4d..12ab381a7 100644
--- a/src/ui/src/builder/BuilderModal.vue
+++ b/src/ui/src/builder/BuilderModal.vue
@@ -1,7 +1,12 @@
 <!-- eslint-disable @typescript-eslint/ban-types -->
 <template>
 	<Teleport to="#modal">
-		<div class="BuilderModal" tabindex="-1" @keydown="handleKeydown">
+		<div
+			class="BuilderModal"
+			:class="{ 'BuilderModal--overflow': allowOverflow }"
+			tabindex="-1"
+			@keydown="handleKeydown"
+		>
 			<div class="main">
 				<div class="titleContainer">
 					<i v-if="icon" class="material-symbols-outlined">{{
@@ -38,19 +43,24 @@
 
 <script setup lang="ts">
 import WdsButton from "@/wds/WdsButton.vue";
-import { toRefs } from "vue";
+import { PropType, toRefs } from "vue";
 
 export type ModalAction = {
 	desc: string;
 	fn: (..._args: unknown[]) => unknown;
 };
 
-const props = defineProps<{
-	modalTitle: string;
-	icon?: string;
-	closeAction: ModalAction;
-	menuActions?: ModalAction[];
-}>();
+const props = defineProps({
+	modalTitle: { type: String, required: true },
+	icon: { type: String, required: false, default: undefined },
+	closeAction: { type: Object as PropType<ModalAction>, required: true },
+	menuActions: {
+		type: Array as PropType<ModalAction[]>,
+		required: false,
+		default: undefined,
+	},
+	allowOverflow: { type: Boolean, required: false },
+});
 
 const { modalTitle, icon, closeAction, menuActions } = toRefs(props);
 
@@ -82,6 +92,10 @@ const handleKeydown = (ev: KeyboardEvent) => {
 	box-shadow: 0px 3px 40px 0px rgba(172, 185, 220, 0.4);
 }
 
+.BuilderModal--overflow .main {
+	overflow: unset;
+}
+
 .titleContainer {
 	border-bottom: 1px solid var(--builderSubtleSeparatorColor);
 	padding: 8px 8px 8px 16px;
@@ -100,6 +114,9 @@ const handleKeydown = (ev: KeyboardEvent) => {
 	max-height: 60vh;
 	overflow: auto;
 }
+.BuilderModal--overflow .slotContainer {
+	overflow: unset;
+}
 
 .actionContainer {
 	border-top: 1px solid var(--builderSubtleSeparatorColor);
diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/builder/BuilderSelect.vue
index d454a3171..1c273b263 100644
--- a/src/ui/src/builder/BuilderSelect.vue
+++ b/src/ui/src/builder/BuilderSelect.vue
@@ -1,9 +1,5 @@
 <template>
-	<div
-		ref="trigger"
-		class="BuilderSelect"
-		:class="{ 'BuilderSelect--embedded': variant === 'embedded' }"
-	>
+	<div ref="trigger" class="BuilderSelect">
 		<button
 			class="BuilderSelect__trigger"
 			role="button"
@@ -57,14 +53,6 @@ const props = defineProps({
 	defaultIcon: { type: String, required: false, default: undefined },
 	hideIcons: { type: Boolean, required: false },
 	enableSearch: { type: Boolean, required: false },
-	/**
-	 * Customize the appareance of the selector.
-	 * In embeded mode, we remove the padding and the border around the trigger. Usefull when the selector is embed into a field wrapper.
-	 */
-	variant: {
-		type: String as PropType<"normal" | "embedded">,
-		default: "normal",
-	},
 });
 
 const currentValue = defineModel({ type: String, required: false });
@@ -125,26 +113,23 @@ function onSelect(value: string) {
 
 .BuilderSelect__trigger {
 	display: flex;
-	height: 32px;
+	align-items: center;
+	gap: 8px;
+
+	height: 40px;
 	width: 100%;
+	padding: 8.5px 12px 8.5px 12px;
 
-	gap: 8px;
+	border: 1px solid var(--separatorColor);
+	border-radius: 8px;
 
-	align-items: center;
-	padding: 8px;
 	font-weight: 400;
-	color: #3b3b3b;
-	background: #ffffff;
-}
+	font-size: 0.875rem;
 
-.BuilderSelect__trigger {
-	/* reset button */
-	border: none;
-	cursor: pointer;
+	color: var(--primaryTextColor);
+	background: transparent;
 
-	font-size: 0.75rem;
-	display: flex;
-	align-items: center;
+	cursor: pointer;
 }
 .BuilderSelect__trigger__label {
 	text-overflow: ellipsis;
@@ -162,9 +147,4 @@ function onSelect(value: string) {
 	color: #000000e6;
 	cursor: pointer;
 }
-
-.BuilderSelect--embedded .BuilderSelect__trigger {
-	padding: 0;
-	height: 18px;
-}
 </style>
diff --git a/src/ui/src/builder/settings/BuilderFieldsAlign.vue b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
index b45d97ef2..e9aa7a53b 100644
--- a/src/ui/src/builder/settings/BuilderFieldsAlign.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
@@ -264,12 +264,9 @@ onBeforeUnmount(() => {
 @import "../sharedStyles.css";
 
 .chipStackContainer {
-	padding: 12px;
 	margin-top: 4px;
-	padding-bottom: 12px;
 }
 .main {
-	border-top: 1px solid var(--builderSeparatorColor);
-	padding: 12px;
+	margin-top: 4px;
 }
 </style>
diff --git a/src/ui/src/builder/settings/BuilderFieldsColor.vue b/src/ui/src/builder/settings/BuilderFieldsColor.vue
index e96a65755..926a7a325 100644
--- a/src/ui/src/builder/settings/BuilderFieldsColor.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsColor.vue
@@ -145,12 +145,18 @@ onBeforeUnmount(() => {
 @import "../sharedStyles.css";
 
 .chipStackContainer {
-	padding: 12px;
 	margin-top: 4px;
-	padding-bottom: 12px;
 }
 .main {
-	border-top: 1px solid var(--builderSeparatorColor);
-	padding: 12px;
+	margin-top: 4px;
+}
+input[type="color"] {
+	width: 100%;
+	height: 34px;
+	border-radius: 8px;
+	border: 1px solid var(--separatorColor);
+
+	display: block;
+	height: 40px;
 }
 </style>
diff --git a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
index 9742227ab..b2d995799 100644
--- a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
@@ -192,15 +192,13 @@ onMounted(async () => {
 @import "../sharedStyles.css";
 
 .chipStackContainer {
-	padding: 12px;
-	margin-top: 4px;
-	padding-bottom: 12px;
-	border-bottom: 1px solid var(--builderSeparatorColor);
+	margin-bottom: 8px;
 }
 
 .staticList {
-	padding: 12px;
-	border-bottom: 1px solid var(--builderSeparatorColor);
+	padding: 8.5px 12px 8.5px 12px;
+	border: 1px solid var(--builderSeparatorColor);
+	border-radius: 8px;
 }
 
 .staticList:empty::before {
@@ -227,7 +225,7 @@ onMounted(async () => {
 }
 
 .formAdd {
-	padding: 12px;
+	margin-top: 8px;
 }
 
 .BuilderTemplateInput {
diff --git a/src/ui/src/builder/settings/BuilderFieldsObject.vue b/src/ui/src/builder/settings/BuilderFieldsObject.vue
index e52726c03..8dba465c6 100644
--- a/src/ui/src/builder/settings/BuilderFieldsObject.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsObject.vue
@@ -46,7 +46,6 @@ const templateField = computed(() => {
 @import "../sharedStyles.css";
 
 .BuilderFieldsObject {
-	padding: 16px 12px 12px 12px;
 	font-size: inherit;
 }
 </style>
diff --git a/src/ui/src/builder/settings/BuilderFieldsPadding.vue b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
index bf4c9dfc8..f7c7b73dd 100644
--- a/src/ui/src/builder/settings/BuilderFieldsPadding.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
@@ -46,75 +46,75 @@
 					:options="selectOptions"
 					@update:model-value="handleInputSelect"
 				/>
-				<div v-if="subMode == SubMode.all_sides" class="row">
-					<i>All</i>
-					<input
-						ref="fixedEl"
-						type="text"
-						:value="valuePadding[0]"
-						@input="handleInputs($event, subMode)"
-					/>
-					<div>px</div>
-				</div>
-				<div v-if="subMode == SubMode.xy_sides">
-					<div class="row">
-						<i>X</i>
-						<input
+				<div class="BuilderFieldsPadding__options">
+					<template v-if="subMode == SubMode.all_sides">
+						<i>All</i>
+						<WdsTextInput
 							ref="fixedEl"
-							type="text"
-							:value="valuePadding[0]"
-							@input="handleInputs($event, subMode, 'x')"
+							type="number"
+							:model-value="valuePadding[0]"
+							@update:model-value="handleInputs($event, subMode)"
+						/>
+						<div>px</div>
+					</template>
+					<template v-if="subMode == SubMode.xy_sides">
+						<i>X</i>
+						<WdsTextInput
+							type="number"
+							:model-value="valuePadding[0]"
+							@update:model-value="
+								handleInputs($event, subMode, 'x')
+							"
 						/>
 						<div>px</div>
-					</div>
-					<div class="row">
 						<i>Y</i>
-						<input
-							type="text"
-							:value="valuePadding[2]"
-							@input="handleInputs($event, subMode, 'y')"
+						<WdsTextInput
+							type="number"
+							:model-value="valuePadding[2]"
+							@update:model-value="
+								handleInputs($event, subMode, 'y')
+							"
 						/>
 						<div>px</div>
-					</div>
-				</div>
-				<div v-if="subMode == SubMode.per_side">
-					<div class="row">
+					</template>
+					<template v-if="subMode == SubMode.per_side">
 						<i>Left</i>
-						<input
-							ref="fixedEl"
-							type="text"
-							:value="valuePadding[0]"
-							@input="handleInputs($event, subMode, 'left')"
+						<WdsTextInput
+							type="number"
+							:model-value="valuePadding[0]"
+							@update:model-value="
+								handleInputs($event, subMode, 'left')
+							"
 						/>
 						<div>px</div>
-					</div>
-					<div class="row">
 						<i>Right</i>
-						<input
-							type="text"
-							:value="valuePadding[1]"
-							@input="handleInputs($event, subMode, 'right')"
+						<WdsTextInput
+							type="number"
+							:model-value="valuePadding[1]"
+							@update:model-value="
+								handleInputs($event, subMode, 'right')
+							"
 						/>
 						<div>px</div>
-					</div>
-					<div class="row">
 						<i>Top</i>
-						<input
-							type="text"
-							:value="valuePadding[2]"
-							@input="handleInputs($event, subMode, 'top')"
+						<WdsTextInput
+							type="number"
+							:model-value="valuePadding[2]"
+							@update:model-value="
+								handleInputs($event, subMode, 'top')
+							"
 						/>
 						<div>px</div>
-					</div>
-					<div class="row">
 						<i>Bottom</i>
-						<input
-							type="text"
-							:value="valuePadding[3]"
-							@input="handleInputs($event, subMode, 'bottom')"
+						<WdsTextInput
+							type="number"
+							:model-value="valuePadding[3]"
+							@update:model-value="
+								handleInputs($event, subMode, 'bottom')
+							"
 						/>
 						<div>px</div>
-					</div>
+					</template>
 				</div>
 			</div>
 
@@ -130,6 +130,7 @@
 
 <script setup lang="ts">
 import {
+	ComponentInstance,
 	computed,
 	inject,
 	nextTick,
@@ -144,6 +145,7 @@ import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
 import BuilderSelect from "../BuilderSelect.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import WdsTextInput from "@/wds/WdsTextInput.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -151,7 +153,7 @@ const { setContentValue } = useComponentActions(wf, ssbm);
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const pickerEl: Ref<HTMLInputElement> = ref(null);
-const fixedEl: Ref<HTMLInputElement> = ref(null);
+const fixedEl = ref<ComponentInstance<typeof WdsTextInput>>(null);
 const freehandInputEl: Ref<HTMLInputElement> = ref(null);
 
 type Mode = "pick" | "css" | "default";
@@ -327,7 +329,7 @@ const handleInputSelect = (select: string) => {
 	}
 
 	nextTick(() => {
-		fixedEl.value.focus();
+		fixedEl.value?.focus();
 	});
 };
 
@@ -339,8 +341,8 @@ const handleInputCss = (ev: Event) => {
 	);
 };
 
-const handleInputs = (ev: Event, subMode: SubMode, inputType?: string) => {
-	const value = (ev.target as HTMLInputElement).value;
+const handleInputs = (ev: string, subMode: SubMode, inputType?: string) => {
+	const value = Number(ev);
 	const cssValue = component.value.content[fieldKey.value];
 
 	if (subMode == SubMode.all_sides) {
@@ -392,26 +394,22 @@ onBeforeUnmount(() => {
 @import "../ico.css";
 
 .chipStackContainer {
-	padding: 12px;
 	margin-top: 4px;
-	padding-bottom: 12px;
 }
 
 .main {
-	border-top: 1px solid var(--builderSeparatorColor);
-	padding: 12px;
+	margin-top: 4px;
 }
 
-.row {
-	display: flex;
-	flex-direction: row;
+.BuilderFieldsPadding__options {
+	margin-top: 8px;
+	display: grid;
+	grid-template-columns: auto minmax(0, 100%) auto;
 	gap: 8px;
-	padding: 8px;
 	align-items: baseline;
+	width: 100%;
 }
-
-.row input {
-	width: calc(100% - 32px) !important;
+.BuilderFieldsPadding__options input {
 	text-align: right;
 }
 </style>
diff --git a/src/ui/src/builder/settings/BuilderFieldsShadow.vue b/src/ui/src/builder/settings/BuilderFieldsShadow.vue
index 2c9912d9d..40262fbc3 100644
--- a/src/ui/src/builder/settings/BuilderFieldsShadow.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsShadow.vue
@@ -237,24 +237,21 @@ onBeforeUnmount(() => {
 @import "../sharedStyles.css";
 
 .chipStackContainer {
-	padding: 12px;
 	margin-top: 4px;
-	padding-bottom: 12px;
 }
 .main {
-	border-top: 1px solid var(--builderSeparatorColor);
-	padding: 12px;
+	margin-top: 4px;
 }
 
 .pickerContainer {
 	display: flex;
-	gap: 8px;
+	gap: 4px;
 	flex-direction: column;
 }
 
 .param > .header {
 	display: flex;
-	margin-bottom: 8px;
+	margin-bottom: 4px;
 }
 
 .param > .header > .name {
@@ -264,4 +261,17 @@ onBeforeUnmount(() => {
 .param > .header > .value {
 	margin-left: auto;
 }
+.param input[type="range"] {
+	width: 100%;
+}
+
+input[type="color"] {
+	width: 100%;
+	height: 34px;
+	border-radius: 8px;
+	border: 1px solid var(--separatorColor);
+
+	display: block;
+	height: 40px;
+}
 </style>
diff --git a/src/ui/src/builder/settings/BuilderFieldsText.vue b/src/ui/src/builder/settings/BuilderFieldsText.vue
index 577e7ec8f..f6e0db840 100644
--- a/src/ui/src/builder/settings/BuilderFieldsText.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsText.vue
@@ -75,7 +75,6 @@ const handleInput = (ev: Event) => {
 
 <style>
 .BuilderFieldsText .content {
-	padding: 16px 12px 12px 12px;
 	width: 100%;
 }
 </style>
diff --git a/src/ui/src/builder/settings/BuilderFieldsWidth.vue b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
index 89f99e43c..8dfc5a4c4 100644
--- a/src/ui/src/builder/settings/BuilderFieldsWidth.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
@@ -47,11 +47,11 @@
 					@update:model-value="handleInputSelect"
 				/>
 				<div v-if="subMode == SubMode.fixed" class="fixedContainer">
-					<input
+					<WdsTextInput
 						ref="fixedEl"
-						type="text"
-						:value="valuePickFixed"
-						@input="handleInputFixed"
+						type="number"
+						:model-value="valuePickFixed"
+						@update:model-value="handleInputFixed"
 					/>
 					<div>px</div>
 				</div>
@@ -69,6 +69,7 @@
 
 <script setup lang="ts">
 import {
+	ComponentInstance,
 	computed,
 	inject,
 	nextTick,
@@ -83,6 +84,7 @@ import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "../../injectionKeys";
 import BuilderSelect from "../BuilderSelect.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import WdsTextInput from "@/wds/WdsTextInput.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -90,7 +92,7 @@ const { setContentValue } = useComponentActions(wf, ssbm);
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const pickerEl: Ref<HTMLInputElement> = ref(null);
-const fixedEl: Ref<HTMLInputElement> = ref(null);
+const fixedEl = ref<ComponentInstance<typeof WdsTextInput>>(null);
 const freehandInputEl: Ref<HTMLInputElement> = ref(null);
 
 type Mode = "pick" | "css" | "default";
@@ -239,12 +241,8 @@ const handleInputCss = (ev: Event) => {
 	);
 };
 
-const handleInputFixed = (ev: Event) => {
-	setContentValue(
-		component.value.id,
-		fieldKey.value,
-		(ev.target as HTMLInputElement).value + "px",
-	);
+const handleInputFixed = (ev: string) => {
+	setContentValue(component.value.id, fieldKey.value, `${ev}px`);
 };
 
 onMounted(() => {
@@ -260,19 +258,17 @@ onBeforeUnmount(() => {
 @import "../sharedStyles.css";
 
 .chipStackContainer {
-	padding: 12px;
 	margin-top: 4px;
-	padding-bottom: 12px;
 }
 .main {
-	border-top: 1px solid var(--builderSeparatorColor);
-	padding: 12px;
+	margin-top: 4px;
 }
 
 .fixedContainer {
+	margin-top: 8px;
 	display: flex;
 	flex-direction: row;
+	align-items: center;
 	gap: 8px;
-	padding: 8px;
 }
 </style>
diff --git a/src/ui/src/builder/settings/BuilderSectionTitle.vue b/src/ui/src/builder/settings/BuilderSectionTitle.vue
new file mode 100644
index 000000000..34ed2d88a
--- /dev/null
+++ b/src/ui/src/builder/settings/BuilderSectionTitle.vue
@@ -0,0 +1,23 @@
+<template>
+	<div class="BuilderSectionTitle">
+		<i class="material-symbols-outlined">{{ icon }}</i>
+		<h3>{{ label }}</h3>
+	</div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+	icon: { type: String, required: true },
+	label: { type: String, required: true },
+});
+</script>
+
+<style lang="css" scoped>
+@import "../sharedStyles.css";
+.BuilderSectionTitle {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	font-size: 1rem;
+}
+</style>
diff --git a/src/ui/src/builder/settings/BuilderSettingsBinding.vue b/src/ui/src/builder/settings/BuilderSettingsBinding.vue
index b6ffcc419..b025f7742 100644
--- a/src/ui/src/builder/settings/BuilderSettingsBinding.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsBinding.vue
@@ -1,15 +1,10 @@
 <template>
 	<div v-if="ssbm.isSelectionActive()" class="BuilderSettingsBinding">
-		<div class="sectionTitle">
-			<i class="material-symbols-outlined">link</i>
-			<h3>Binding</h3>
-		</div>
+		<BuilderSectionTitle icon="link" label="Binding" />
 		<div class="main">
-			<div class="fieldWrapper">
-				<span class="name">State element</span>
+			<WdsFieldWrapper label="State element" :hint="hint">
 				<BuilderTemplateInput
 					type="state"
-					class="content"
 					:value="component.binding?.stateRef"
 					placeholder="my_var"
 					@input="
@@ -20,12 +15,7 @@
 							)
 					"
 				/>
-				<div class="desc">
-					Links this component to a state element, in a two-way
-					fashion. Reference the state element directly, i.e. use
-					"my_var" instead of "@{my_var}".
-				</div>
-			</div>
+			</WdsFieldWrapper>
 		</div>
 	</div>
 </template>
@@ -35,6 +25,10 @@ import { computed, inject } from "vue";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
+
+const hint =
+	'Links this component to a state element, in a two-way fashion. Reference the state element directly, i.e. use "my_var" instead of "@{my_var}".';
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/settings/BuilderSettingsHandlers.vue b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
index 96d74fc6f..5a363339a 100644
--- a/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
@@ -1,45 +1,34 @@
 <template>
 	<div v-if="ssbm.isSelectionActive()" class="BuilderSettingsHandlers">
-		<div class="sectionTitle">
+		<div class="BuilderSettingsHandlers__title">
 			<i class="material-symbols-outlined">bolt</i>
 			<h3>Events</h3>
 		</div>
-		<div class="list">
+		<div class="BuilderSettingsHandlers__list">
 			<div
 				v-for="(eventInfo, eventType) in recognisedEvents"
 				:key="eventType"
-				class="fieldWrapper"
 			>
 				<div class="columns">
-					<div class="fieldWrapperMain">
-						<span class="name">{{ eventType }}</span>
-						<div class="content">
-							<BuilderSelect
-								:model-value="
-									component.handlers?.[eventType] ?? ''
-								"
-								:options="getOptions(eventType)"
-								variant="embedded"
-								enable-search
-								@update:model-value="
-									handleHandlerChange($event, eventType)
-								"
-							/>
-						</div>
-					</div>
-					<div class="fieldActions">
-						<button
-							v-if="getStubCode(eventType)"
-							variant="subtle"
-							title="Show event handler stub"
-							@click="showStub(eventType)"
-						>
-							<i class="material-symbols-outlined">help</i>
-						</button>
-					</div>
-				</div>
-				<div v-if="eventInfo?.desc" class="desc">
-					{{ eventInfo.desc }}
+					<WdsFieldWrapper
+						:label="eventType"
+						:hint="eventInfo?.desc"
+						:help-button="
+							getStubCode(eventType)
+								? 'Show event handler stub'
+								: false
+						"
+						@help-click="showStub(eventType)"
+					>
+						<BuilderSelect
+							:model-value="component.handlers?.[eventType] ?? ''"
+							:options="getOptions(eventType)"
+							enable-search
+							@update:model-value="
+								handleHandlerChange($event, eventType)
+							"
+						/>
+					</WdsFieldWrapper>
 				</div>
 			</div>
 		</div>
@@ -73,63 +62,38 @@
 				:close-action="customHandlerModalCloseAction"
 				icon="bolt"
 				modal-title="Add Custom Event Handler"
+				allow-overflow
 			>
 				<div class="customHandlerModalForm">
-					<div class="fieldWrapper">
-						<div class="fieldWrapperMain">
-							<span class="name">Event type</span>
-							<input
-								v-model="customHandlerModal.eventType"
-								class="content"
-								type="text"
-								list="commonEventTypes"
-							/>
-							<datalist id="commonEventTypes">
-								<option
-									v-for="commonEventType in commonEventTypes"
-									:key="commonEventType"
-									:value="commonEventType"
-								>
-									{{ commonEventType }}
-								</option>
-							</datalist>
-						</div>
-						<span class="desc">Can be any event type.</span>
-					</div>
-					<div class="fieldWrapper">
-						<div class="fieldWrapperMain">
-							<span class="name">Handler function</span>
-						</div>
-						<select
-							v-model="customHandlerModal.handlerFunctionName"
-							class="content"
-						>
-							<option
-								v-for="userFunction in userFunctions"
-								:key="userFunction.name"
-								:value="userFunction.name"
-							>
-								{{ userFunction.name }}
-							</option>
+					<WdsFieldWrapper
+						label="Event type"
+						hint="Can be any event type."
+					>
+						<WdsTextInput
+							v-model="customHandlerModal.eventType"
+							type="text"
+							list="commonEventTypes"
+						/>
+						<datalist id="commonEventTypes">
 							<option
-								v-for="pageKey in pageKeys"
-								:key="`$goToPage_${pageKey}`"
-								:value="`$goToPage_${pageKey}`"
+								v-for="commonEventType in commonEventTypes"
+								:key="commonEventType"
+								:value="commonEventType"
 							>
-								Go to page "{{ pageKey }}"
+								{{ commonEventType }}
 							</option>
-							<option
-								v-for="workflowKey in workflowKeys"
-								:key="`$runWorkflow_${workflowKey}`"
-								:value="`$runWorkflow_${workflowKey}`"
-							>
-								Run workflow "{{ workflowKey }}"
-							</option>
-						</select>
-						<span class="desc"
-							>The function that will handle the event.</span
-						>
-					</div>
+						</datalist>
+					</WdsFieldWrapper>
+					<WdsFieldWrapper
+						label="Handler function"
+						hint="The function that will handle the event."
+					>
+						<BuilderSelect
+							v-model="customHandlerModal.handlerFunctionName"
+							:options="options"
+							enable-search
+						/>
+					</WdsFieldWrapper>
 				</div>
 
 				<button @click="addCustomEventHandler()">
@@ -150,6 +114,8 @@ import BuilderModal, { ModalAction } from "../BuilderModal.vue";
 import { WriterComponentDefinition } from "@/writerTypes";
 import BuilderSelect from "../BuilderSelect.vue";
 import type { Option } from "../BuilderSelect.vue";
+import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
+import WdsTextInput from "@/wds/WdsTextInput.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -182,7 +148,7 @@ const options = computed<Option[]>(() => {
 	];
 });
 
-function getOptions(eventType: string): Option[] {
+function getOptions(eventType?: string): Option[] {
 	if (!isHandlerInvalid(eventType)) return options.value;
 
 	const handler = component.value.handlers?.[eventType];
@@ -359,34 +325,22 @@ const copyToClipboard = (text: string) => {
 <style scoped>
 @import "../sharedStyles.css";
 
-.list {
-	border-radius: 4px;
+.BuilderSettingsHandlers {
+	padding: 24px;
 }
 
-.fieldWrapper .columns {
-	display: grid;
-	grid-template-columns: minmax(0, 100%) auto;
-	gap: 12px;
+.BuilderSettingsHandlers__title {
+	padding-bottom: 24px;
+	display: flex;
+	gap: 8px;
 	align-items: center;
-	max-width: 100%;
-}
-
-.fieldWrapperMain {
-	width: 100%;
-}
-
-.fieldWrapper .content {
-	padding: 16px 8px 12px 8px;
-	width: 100%;
-}
-.fieldWrapper .content .select {
-	padding: 0;
-	height: auto;
+	font-size: 1rem;
 }
 
-.fieldActions > button {
-	border-radius: 16px;
-	font-size: 0.875rem;
+.BuilderSettingsHandlers__list {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
 }
 
 .customHandler {
@@ -421,14 +375,10 @@ const copyToClipboard = (text: string) => {
 }
 
 .customHandlerModalForm {
-	display: flex;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
 	align-items: center;
 	gap: 16px;
 	margin-bottom: 16px;
 }
-
-.customHandlerModalForm .fieldWrapper {
-	flex: 1 1 auto;
-	margin-top: 0;
-}
 </style>
diff --git a/src/ui/src/builder/settings/BuilderSettingsProperties.vue b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
index 950184fda..d91d64597 100644
--- a/src/ui/src/builder/settings/BuilderSettingsProperties.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
@@ -4,44 +4,46 @@
 		class="BuilderSettingsProperties"
 	>
 		<div
-			v-for="propertyCategory in fieldCategories.filter(
-				(fc) => fieldsByCategory[fc].length > 0,
-			)"
+			v-for="propertyCategory in fieldCategories"
 			:key="propertyCategory"
-			class="propertyCategory"
+			class="BuilderSettingsProperties__category"
 		>
-			<div class="title">
-				<h4>{{ propertyCategory }}</h4>
-			</div>
+			<h4
+				v-if="fieldsByCategory[propertyCategory].length > 0"
+				class="BuilderSettingsProperties__category__title"
+			>
+				{{ propertyCategory }}
+			</h4>
 			<div
 				v-for="[fieldKey, fieldValue] in fieldsByCategory[
 					propertyCategory
 				]"
 				:key="fieldKey"
+				class="BuilderSettingsProperties__category__field"
 			>
-				<div class="fieldWrapper">
-					<div v-if="propertyCategory != 'Tools'" class="name">
-						{{ fieldValue.name ?? fieldKey
-						}}<span class="type"> : {{ fieldValue.type }}</span>
-					</div>
-
+				<WdsFieldWrapper
+					:label="
+						propertyCategory === 'Tools'
+							? undefined
+							: fieldValue.name ?? fieldKey
+					"
+					:hint="fieldValue.desc"
+					:type="fieldValue.type"
+				>
 					<BuilderFieldsColor
 						v-if="fieldValue.type == FieldType.Color"
-						class="content"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
 					></BuilderFieldsColor>
 
 					<BuilderFieldsShadow
 						v-if="fieldValue.type == FieldType.Shadow"
-						class="content"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
 					></BuilderFieldsShadow>
 
 					<BuilderFieldsKeyValue
 						v-if="fieldValue.type == FieldType.KeyValue"
-						class="content"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
 						:instance-path="selectedInstancePath"
@@ -67,21 +69,18 @@
 
 					<BuilderFieldsObject
 						v-if="fieldValue.type == FieldType.Object"
-						class="content"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
 					></BuilderFieldsObject>
 
 					<BuilderFieldsWidth
 						v-if="fieldValue.type == FieldType.Width"
-						class="content"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
 					></BuilderFieldsWidth>
 
 					<BuilderFieldsAlign
 						v-if="fieldValue.type == FieldType.HAlign"
-						class="content"
 						direction="horizontal"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
@@ -89,7 +88,6 @@
 
 					<BuilderFieldsAlign
 						v-if="fieldValue.type == FieldType.VAlign"
-						class="content"
 						direction="vertical"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
@@ -97,7 +95,6 @@
 
 					<BuilderFieldsPadding
 						v-if="fieldValue.type == FieldType.Padding"
-						class="content"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
 					></BuilderFieldsPadding>
@@ -108,11 +105,7 @@
 						:component-id="selectedComponent.id"
 					>
 					</BuilderFieldsTools>
-
-					<div v-if="fieldValue.desc" class="desc">
-						{{ fieldValue.desc }}
-					</div>
-				</div>
+				</WdsFieldWrapper>
 			</div>
 		</div>
 	</div>
@@ -132,6 +125,7 @@ import BuilderFieldsShadow from "./BuilderFieldsShadow.vue";
 import BuilderFieldsText from "./BuilderFieldsText.vue";
 import BuilderFieldsWidth from "./BuilderFieldsWidth.vue";
 import BuilderFieldsTools from "./BuilderFieldsTools.vue";
+import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -179,17 +173,22 @@ const fieldsByCategory = computed(() => {
 @import "../sharedStyles.css";
 
 .BuilderSettingsProperties {
+	padding: 24px;
+
 	display: flex;
 	flex-direction: column;
-	gap: 24px;
+	gap: 16px;
 }
 
-textarea.content {
-	resize: vertical;
-	height: 8em;
+.BuilderSettingsProperties__category {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
 }
 
-input[type="color"].content {
-	height: 48px;
+.BuilderSettingsProperties__category__title {
+	color: var(--builderSecondaryTextColor);
+	font-weight: 500;
+	font-size: 12px;
 }
 </style>
diff --git a/src/ui/src/builder/settings/BuilderSettingsVisibility.vue b/src/ui/src/builder/settings/BuilderSettingsVisibility.vue
index 9e2f7358f..bf00b221a 100644
--- a/src/ui/src/builder/settings/BuilderSettingsVisibility.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsVisibility.vue
@@ -1,9 +1,6 @@
 <template>
 	<div v-if="ssbm.isSelectionActive()" class="BuilderSettingsVisibility">
-		<div class="sectionTitle">
-			<i class="material-symbols-outlined"> visibility </i>
-			<h3>Visibility</h3>
-		</div>
+		<BuilderSectionTitle icon="visibility" label="Visibility" />
 		<div class="main">
 			<div class="chipStack">
 				<div
@@ -42,18 +39,16 @@
 					Custom
 				</div>
 			</div>
-			<div
+			<WdsFieldWrapper
 				v-if="
 					typeof component.visible != 'undefined' &&
 					component.visible.expression === 'custom'
 				"
-				class="fieldWrapper"
+				:hint="hint"
 			>
-				<span class="name">Visibility value</span>
 				<BuilderTemplateInput
 					:value="component.visible.binding"
 					type="state"
-					class="content"
 					placeholder="my_visibility_state_value"
 					@input="
 						(ev: Event) =>
@@ -80,12 +75,7 @@
 						"
 					/><span>Reverse</span>
 				</div>
-				<div class="desc">
-					Reference a state or context element that will evaluate to
-					true or false. Reference the element directly, i.e. use
-					"my_var" instead of "@{my_var}".
-				</div>
-			</div>
+			</WdsFieldWrapper>
 		</div>
 	</div>
 </template>
@@ -95,12 +85,17 @@ import { computed, inject } from "vue";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
+import BuilderSectionTitle from "./BuilderSectionTitle.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setVisibleValue } = useComponentActions(wf, ssbm);
 
 const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
+
+const hint =
+	'Reference a state or context element that will evaluate to true or false. Reference the element directly, i.e. use "my_var" instead of "@{my_var}".';
 </script>
 
 <style scoped>
@@ -110,11 +105,8 @@ const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
 	margin-top: 16px;
 }
 
-.content {
-	padding: 16px 12px 12px 12px;
-}
-
 .flexRow {
+	margin-top: 4px;
 	display: flex;
 	flex-direction: row;
 	gap: 8px;
diff --git a/src/ui/src/builder/settings/BuilderTemplateInput.vue b/src/ui/src/builder/settings/BuilderTemplateInput.vue
index 2c13fccb8..37596b9d7 100644
--- a/src/ui/src/builder/settings/BuilderTemplateInput.vue
+++ b/src/ui/src/builder/settings/BuilderTemplateInput.vue
@@ -1,11 +1,9 @@
 <template>
 	<div class="BuilderTemplateInput">
 		<template v-if="!props.multiline">
-			<input
+			<WdsTextInput
 				ref="input"
-				class="templateInput"
-				type="text"
-				:value="props.value"
+				:model-value="props.value"
 				autocorrect="off"
 				autocomplete="off"
 				spellcheck="false"
@@ -30,19 +28,18 @@
 		</template>
 
 		<template v-if="props.multiline">
-			<textarea
+			<WdsTextareaInput
 				ref="input"
 				v-capture-tabs
-				class="templateInput"
 				:variant="props.variant"
-				:value="props.value"
+				:model-value="props.value"
 				autocorrect="off"
 				autocomplete="off"
 				spellcheck="false"
 				rows="3"
 				:placeholder="props.placeholder"
 				@input="handleInput"
-			></textarea>
+			/>
 		</template>
 
 		<div
@@ -68,8 +65,17 @@
 
 <script setup lang="ts">
 import Fuse from "fuse.js";
-import { PropType, inject, nextTick, ref, shallowRef } from "vue";
 import injectionKeys from "../../injectionKeys";
+import {
+	PropType,
+	inject,
+	nextTick,
+	ref,
+	shallowRef,
+	ComponentInstance,
+} from "vue";
+import WdsTextInput from "@/wds/WdsTextInput.vue";
+import WdsTextareaInput from "@/wds/WdsTextareaInput.vue";
 
 const emit = defineEmits(["input", "update:value"]);
 
@@ -97,7 +103,7 @@ const props = defineProps({
 
 const ss = inject(injectionKeys.core);
 const autocompleteOptions = shallowRef<{ text: string; type: string }[]>([]);
-const input = ref<HTMLInputElement | null>(null);
+const input = ref<ComponentInstance<typeof WdsTextInput> | null>(null);
 
 defineExpose({
 	focus: () => input.value?.focus(),
@@ -107,24 +113,23 @@ function _get(object: object, path: string[]) {
 	return path.reduce((acc, key) => acc?.[key], object);
 }
 
-const handleComplete = (selectedText) => {
+const handleComplete = (selectedText: string) => {
 	let newValue = input.value?.value ?? "";
-	const { selectionStart, selectionEnd } = input.value ?? {};
+	const { selectionStart, selectionEnd } = input.value?.getSelection() ?? {};
 	const text = newValue.slice(0, selectionStart);
 	const full = getPath(text);
 	if (full === null) return;
 	const keyword = full.at(-1);
 	const regexKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "$"; // escape the keyword to handle properly on a regex
 	const replaced = text.replace(new RegExp(regexKeyword), selectedText);
-
 	newValue = replaced + newValue.slice(selectionEnd);
 	emit("input", { target: { value: newValue } });
 	emit("update:value", newValue);
 	autocompleteOptions.value = [];
 	input.value.focus();
 	nextTick(() => {
-		input.value.selectionEnd = replaced.length;
-		input.value.selectionStart = replaced.length;
+		input.value.setSelectionEnd(replaced.length);
+		input.value.setSelectionStart(replaced.length);
 	});
 };
 
@@ -160,7 +165,8 @@ const handleInput = (ev) => {
 };
 
 const showAutocomplete = () => {
-	const { selectionStart, selectionEnd, value: newValue } = input.value ?? {};
+	const { selectionStart, selectionEnd } = input.value?.getSelection() ?? {};
+	const newValue = input.value?.value;
 	const collapsed = selectionStart === selectionEnd;
 	if (!collapsed) {
 		autocompleteOptions.value = [];
diff --git a/src/ui/src/builder/sharedStyles.css b/src/ui/src/builder/sharedStyles.css
index d4aff5ee0..a257d7f4e 100644
--- a/src/ui/src/builder/sharedStyles.css
+++ b/src/ui/src/builder/sharedStyles.css
@@ -119,61 +119,6 @@ code {
 	padding: 2px;
 }
 
-.sectionTitle {
-	display: flex;
-	gap: 8px;
-	align-items: center;
-	font-size: 1rem;
-}
-
-.fieldWrapper {
-	position: relative;
-	width: 100%;
-	margin-top: 16px;
-}
-
-:is(.fieldWrapper, .fieldWrapperMain) > .name {
-	position: absolute;
-	top: 0;
-	left: 8px;
-	background: var(--builderBackgroundColor);
-	padding: 0 4px 4px 4px;
-	font-size: 0.7rem;
-	z-index: 1;
-}
-
-:is(.fieldWrapper, .fieldWrapperMain) .name .type {
-	color: var(--builderSecondaryTextColor);
-}
-
-:is(.fieldWrapper, .fieldWrapperMain) .content {
-	position: relative;
-	top: 6px;
-	margin-bottom: 14px;
-	width: 100%;
-	border-radius: 4px;
-	border: 1px solid var(--builderSeparatorColor);
-	font-size: 0.75rem;
-	background: var(--builderBackgroundColor);
-	outline: none;
-}
-
-:is(.fieldWrapper, .fieldWrapperMain) .content:focus-within {
-	border: 1px solid var(--builderPrimaryTextColor);
-}
-
-:is(.fieldWrapper, .fieldWrapperMain) .content textarea,
-:is(.fieldWrapper, .fieldWrapperMain) .content input {
-	border: 0;
-	outline: none;
-	width: 100%;
-}
-
-.fieldWrapper > .desc {
-	color: var(--builderSecondaryTextColor);
-	font-size: 0.7rem;
-}
-
 .chipStack {
 	display: flex;
 	flex-direction: row;
@@ -201,18 +146,3 @@ code {
 .chip.active {
 	background: var(--builderSubtleSeparatorColor);
 }
-
-.countLabel {
-	background: var(--builderIntenseSelectedColor);
-	display: inline-flex;
-	color: var(--builderBackgroundColor);
-	align-items: center;
-	justify-content: center;
-	padding-left: 4px;
-	padding-right: 4px;
-	min-width: 20px;
-	height: 20px;
-	border-radius: 10px;
-	margin-left: 8px;
-	font-size: 0.7rem;
-}
diff --git a/src/ui/src/wds/WdsFieldWrapper.vue b/src/ui/src/wds/WdsFieldWrapper.vue
index 31cce095e..01e4da7fa 100644
--- a/src/ui/src/wds/WdsFieldWrapper.vue
+++ b/src/ui/src/wds/WdsFieldWrapper.vue
@@ -1,17 +1,38 @@
 <template>
 	<div class="WdsFieldWrapper colorTransformer">
-		<label>{{ label }}</label>
-		<div class="slotContainer" :class="{ frameSlot }"><slot></slot></div>
-		<div v-if="hint" class="hint">{{ hint }}</div>
+		<div v-if="label || helpButton" class="WdsFieldWrapper__title">
+			<label v-if="label" class="WdsFieldWrapper__title__label">{{
+				label
+			}}</label>
+			<button
+				v-if="helpButton"
+				class="WdsFieldWrapper__title__help"
+				variant="subtle"
+				:title="typeof helpButton === 'string' ? helpButton : undefined"
+				@click="$emit('helpClick')"
+			>
+				<i class="material-symbols-outlined">help</i>
+			</button>
+		</div>
+		<div class="WdsFieldWrapper__slot"><slot></slot></div>
+		<div v-if="hint" class="WdsFieldWrapper__hint">{{ hint }}</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
-	label: string;
-	hint?: string;
-	frameSlot?: boolean;
-}>();
+defineProps({
+	label: { type: String, required: false, default: undefined },
+	hint: { type: String, required: false, default: undefined },
+	helpButton: {
+		type: [String, Boolean],
+		required: false,
+		default: undefined,
+	},
+});
+
+defineEmits({
+	helpClick: () => true,
+});
 </script>
 
 <style scoped>
@@ -23,26 +44,34 @@ defineProps<{
 	gap: 4px;
 }
 
-label {
+.WdsFieldWrapper__title {
 	color: var(--primaryTextColor);
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 20px;
+	display: grid;
+	grid-template-columns: 1fr auto;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 8px;
 }
 
-.slotContainer.frameSlot {
-	border-radius: 8px;
-	padding: 8.5px 12px 8.5px 12px;
-	font-size: 0.875rem;
-	border: 1px solid var(--separatorColor);
+.WdsFieldWrapper__title__help {
+	background-color: transparent;
+	border: none;
+	border-radius: 50%;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+}
+.WdsFieldWrapper__title__help:hover {
+	color: var(--primaryColor);
 }
 
-.slotContainer.frameSlot:focus-within {
-	border: 1px solid var(--softenedAccentColor);
-	box-shadow: 0px 0px 0px 3px rgba(81, 31, 255, 0.05);
+.WdsFieldWrapper__title__label {
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
 }
 
-.hint {
+.WdsFieldWrapper__hint {
 	color: var(--secondaryTextColor);
 	margin-top: 4px;
 	font-family: Poppins;
diff --git a/src/ui/src/wds/WdsTextInput.vue b/src/ui/src/wds/WdsTextInput.vue
index 6a8c7e668..29a3edacf 100644
--- a/src/ui/src/wds/WdsTextInput.vue
+++ b/src/ui/src/wds/WdsTextInput.vue
@@ -2,20 +2,17 @@
 	<div
 		v-if="leftIcon"
 		class="WdsTextInput WdsTextInput--leftIcon colorTransformer"
+		v-bind="$attrs"
 		@click="input.focus()"
 	>
 		<i class="material-symbols-outlined">{{ leftIcon }}</i>
-		<input
-			ref="input"
-			v-model="model"
-			type="text"
-			:placeholder="placeholder"
-		/>
+		<input ref="input" v-model="model" v-bind="$attrs" />
 	</div>
 	<input
 		v-else
+		v-bind="$attrs"
+		ref="input"
 		v-model="model"
-		type="text"
 		class="WdsTextInput colorTransformer"
 	/>
 </template>
@@ -25,12 +22,40 @@ import { ref } from "vue";
 
 const model = defineModel({ type: String });
 
+// disable attributes inheritance to apply attr to nested input
+defineOptions({ inheritAttrs: false });
+
 defineProps({
 	leftIcon: { type: String, required: false, default: undefined },
-	placeholder: { type: String, required: false, default: undefined },
 });
 
-const input = ref();
+defineExpose({
+	focus,
+	getSelection,
+	value: model,
+	setSelectionEnd,
+	setSelectionStart,
+});
+
+const input = ref<HTMLInputElement>();
+
+function setSelectionStart(value: number) {
+	if (input.value) input.value.selectionStart = value;
+}
+function setSelectionEnd(value: number) {
+	if (input.value) input.value.selectionEnd = value;
+}
+
+function getSelection() {
+	return {
+		selectionStart: input.value?.selectionStart,
+		selectionEnd: input.value?.selectionEnd,
+	};
+}
+
+function focus() {
+	input.value?.focus();
+}
 </script>
 
 <style scoped>
diff --git a/src/ui/src/wds/WdsTextareaInput.vue b/src/ui/src/wds/WdsTextareaInput.vue
index 3d0e02ce5..362254b4a 100644
--- a/src/ui/src/wds/WdsTextareaInput.vue
+++ b/src/ui/src/wds/WdsTextareaInput.vue
@@ -1,9 +1,39 @@
 <template>
-	<textarea v-model="model"></textarea>
+	<textarea ref="input" v-model="model"></textarea>
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
+
 const model = defineModel<string>();
+
+defineExpose({
+	focus,
+	getSelection,
+	value: model,
+	setSelectionEnd,
+	setSelectionStart,
+});
+
+const input = ref<HTMLTextAreaElement>();
+
+function setSelectionStart(value: number) {
+	if (input.value) input.value.selectionStart = value;
+}
+function setSelectionEnd(value: number) {
+	if (input.value) input.value.selectionEnd = value;
+}
+
+function getSelection() {
+	return {
+		selectionStart: input.value?.selectionStart,
+		selectionEnd: input.value?.selectionEnd,
+	};
+}
+
+function focus() {
+	input.value?.focus();
+}
 </script>
 
 <style scoped>
diff --git a/tests/e2e/tests/state.spec.ts b/tests/e2e/tests/state.spec.ts
index 1e7e5f473..8466dda6d 100644
--- a/tests/e2e/tests/state.spec.ts
+++ b/tests/e2e/tests/state.spec.ts
@@ -4,7 +4,7 @@ import { test, expect } from "@playwright/test";
 const setTextField = async (page, text) => {
 	await page.locator('div.CoreText.component').click();
 	await page
-		.locator('.BuilderFieldsText[data-automation-key="text"] .templateInput')
+		.locator('.BuilderFieldsText[data-automation-key="text"] textarea')
 		.fill(text);
 }
 
diff --git a/tests/e2e/tests/stateAutocompletion.spec.ts b/tests/e2e/tests/stateAutocompletion.spec.ts
index 47ed5c67e..f51e140c4 100644
--- a/tests/e2e/tests/stateAutocompletion.spec.ts
+++ b/tests/e2e/tests/stateAutocompletion.spec.ts
@@ -4,7 +4,7 @@ import { test, expect } from "@playwright/test";
 const setTextField = async (page, text) => {
 	await page.locator('div.CoreText.component').click();
 	await page
-		.locator('.BuilderFieldsText[data-automation-key="text"] .templateInput')
+		.locator('.BuilderFieldsText[data-automation-key="text"] textarea')
 		.fill(text);
 }
 
@@ -29,7 +29,7 @@ test.describe("state autocompletion", () => {
 			await setTextField(page, "@{types.");
 			page.locator('.BuilderFieldsText[data-automation-key="text"] .fieldStateAutocomplete span.prop:text-matches("string")').click();
 			await expect(page
-				.locator('.BuilderFieldsText[data-automation-key="text"] .templateInput'))
+				.locator('.BuilderFieldsText[data-automation-key="text"] textarea'))
 				.toHaveValue("@{types.string");
 		});
 		test("counter", async ({ page }) => {
@@ -55,7 +55,7 @@ test.describe("state autocompletion", () => {
 		test("options should show on focus", async ({ page }) => {
 			await page.locator('div.CoreText.component').click();
 			await page
-				.locator('.BuilderFieldsText[data-automation-key="useMarkdown"] .templateInput')
+				.locator('.BuilderFieldsText[data-automation-key="useMarkdown"] input')
 				.focus();
 			await expect(page.locator('.BuilderFieldsText[data-automation-key="useMarkdown"] datalist option[value="yes"]')).toHaveCount(1);
 			await expect(page.locator('.BuilderFieldsText[data-automation-key="useMarkdown"] datalist option[value="no"]')).toHaveCount(1);
@@ -74,22 +74,22 @@ test.describe("state autocompletion", () => {
 				.locator(`${FIELD} button.chip:text-matches("Static List")`)
 				.click();
 			await page
-				.locator(`${FIELD} .inputKey .templateInput`)
+				.locator(`${FIELD} .inputKey input`)
 				.fill("@{types.");
 			await expect(page.locator(`${FIELD} .inputKey .fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
 			await expect(page.locator(`${FIELD} .inputKey .fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
 			page.locator(`${FIELD} .inputKey .fieldStateAutocomplete span.prop:text-matches("string")`).click();
 			await expect(page
-				.locator(`${FIELD} .inputKey .templateInput`))
+				.locator(`${FIELD} .inputKey input`))
 				.toHaveValue("@{types.string");
 			await page
-				.locator(`${FIELD} .inputValue .templateInput`)
+				.locator(`${FIELD} .inputValue input`)
 				.fill("@{types.");
 			await expect(page.locator(`${FIELD} .inputValue .fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
 			await expect(page.locator(`${FIELD} .inputValue .fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
 			page.locator(`${FIELD} .inputValue .fieldStateAutocomplete span.prop:text-matches("string")`).click();
 			await expect(page
-				.locator(`${FIELD} .inputValue .templateInput`))
+				.locator(`${FIELD} .inputValue input`))
 				.toHaveValue("@{types.string");
 			await page.locator('[data-automation-action="delete"]').click();
 		});
@@ -105,13 +105,13 @@ test.describe("state autocompletion", () => {
 				.locator(`${FIELD} button.chip:text-matches("JSON")`)
 				.click();
 			await page
-				.locator(`${FIELD} .templateInput`)
+				.locator(`${FIELD} textarea`)
 				.fill("@{types.");
 			await expect(page.locator(`${FIELD} .fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
 			await expect(page.locator(`${FIELD} .fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
 			page.locator(`${FIELD} .fieldStateAutocomplete span.prop:text-matches("string")`).click();
 			await expect(page
-				.locator(`${FIELD} .templateInput`))
+				.locator(`${FIELD} textarea`))
 				.toHaveValue("@{types.string");
 			await page.locator('[data-automation-action="delete"]').click();
 		});
@@ -125,13 +125,13 @@ test.describe("state autocompletion", () => {
 				.locator(`${FIELD} button.chip:text-matches("CSS")`)
 				.click();
 			await page
-				.locator(`${FIELD} .templateInput`)
+				.locator(`${FIELD} .BuilderTemplateInput input`)
 				.fill("@{types.");
 			await expect(page.locator(`${FIELD} .fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
 			await expect(page.locator(`${FIELD} .fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
 			page.locator(`${FIELD} .fieldStateAutocomplete span.prop:text-matches("string")`).click();
 			await expect(page
-				.locator(`${FIELD} .templateInput`))
+				.locator(`${FIELD} .BuilderTemplateInput input`))
 				.toHaveValue("@{types.string");
 		});
 	}