Mark individual styles as changed if they have been changed

packages/builder/src/components/userInterface/PropertyGroup.svelte

@@ -10,25 +10,27 @@
   export let onStyleChanged = () => {}
   export let open = false
 
+  const hasPropChanged = prop => {
+    if (prop.initialValue !== undefined) {
+      return style[prop.key] !== prop.initialValue
+    }
+    return style[prop.key] != null && style[prop.key] !== ""
+  }
+
   $: style = componentInstance["_styles"][styleCategory] || {}
-  $: changed = properties.some(
+  $: changed = properties.some(prop => hasPropChanged(prop))
-    prop =>
-      style[prop.key] != null &&
-      style[prop.key] !== "" &&
-      style[prop.key] !== prop.initialValue
-  )
 </script>
 
 <DetailSummary name={`${name}${changed ? ' *' : ''}`} on:open show={open} thin>
   <div>
-    {#each properties as props}
+    {#each properties as prop}
       <PropertyControl
-        label={props.label}
+        label={`${prop.label}${hasPropChanged(prop) ? ' *' : ''}`}
-        control={props.control}
+        control={prop.control}
-        key={props.key}
+        key={prop.key}
-        value={style[props.key]}
+        value={style[prop.key]}
         onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
-        props={{ ...excludeProps(props, ['control', 'label']) }} />
+        props={{ ...excludeProps(prop, ['control', 'label']) }} />
     {/each}
   </div>
 </DetailSummary>