finish

src/ui/src/builder/settings/BuilderFieldsWidth.vue

@@ -50,7 +50,7 @@
 					<WdsTextInput
 						ref="fixedEl"
 						type="number"
-						model-value="valuePickFixed"
+						:model-value="valuePickFixed"
 						@update:model-value="handleInputFixed"
 					/>
 					<div>px</div>

src/ui/src/builder/settings/BuilderSectionTitle.vue

@@ -0,0 +1,20 @@
+<template>
+	<div class="BuilderSectionTitle">
+		<i class="material-symbols-outlined">{{ icon }}</i>
+		<h3>{{ label }}</h3>
+	</div>
+</template>
+
+<script setup lang="ts">
+defineProps({ icon: String, label: String });
+</script>
+
+<style lang="css" scoped>
+@import "../sharedStyles.css";
+.BuilderSectionTitle {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	font-size: 1rem;
+}
+</style>

src/ui/src/builder/settings/BuilderSettingsBinding.vue

@@ -1,14 +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">
 			<WdsFieldWrapper label="State element" :hint="hint">
 				<BuilderTemplateInput
 					type="state"
-					class="content"
 					:value="component.binding?.stateRef"
 					placeholder="my_var"
 					@input="

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;

src/ui/src/builder/sharedStyles.css

@@ -119,14 +119,6 @@ code {
 	padding: 2px;
 }
 
-.sectionTitle {
-	display: flex;
-	gap: 8px;
-	align-items: center;
-	font-size: 1rem;
-}
-
-
 .chipStack {
 	display: flex;
 	flex-direction: row;
@@ -154,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;
-}

src/ui/src/wds/WdsFieldWrapper.vue

@@ -1,7 +1,9 @@
 <template>
 	<div class="WdsFieldWrapper colorTransformer">
-		<div class="WdsFieldWrapper__title">
-			<label class="WdsFieldWrapper__title__label">{{ label }}</label>
+		<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"
@@ -19,7 +21,7 @@
 
 <script setup lang="ts">
 defineProps({
-	label: { type: String, required: true },
+	label: { type: String, required: false, default: undefined },
 	hint: { type: String, required: false, default: undefined },
 	helpButton: {
 		type: [String, Boolean],