Improve determination of default values and logic around showing highlighted settings

packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte

@@ -93,10 +93,11 @@
           control={getComponentForSettingType(setting.type)}
           label={setting.label}
           key={setting.key}
-          value={componentInstance[setting.key] ??
-            componentDefinition[setting.key]?.defaultValue}
+          value={componentInstance[setting.key]}
+          defaultValue={setting.defaultValue}
           nested={setting.nested}
           onChange={val => updateProp(setting.key, val)}
+          highlighted={$store.highlightedSettingKey === setting.key}
           props={{
             options: setting.options || [],
             placeholder: setting.placeholder || null,
@@ -107,9 +108,6 @@
           {componentBindings}
           {componentInstance}
           {componentDefinition}
-          highlighted={$store.highlightedSettingKey === setting.key &&
-            (componentInstance[setting.key] == null ||
-              componentInstance[setting.key] === "")}
         />
       {/if}
     {/each}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte

@@ -13,6 +13,7 @@
   export let key = ""
   export let type = ""
   export let value = null
+  export let defaultValue = null
   export let props = {}
   export let onChange = () => {}
   export let bindings = []
@@ -20,8 +21,9 @@
   export let nested = false
   export let highlighted = false
 
+  $: nullishValue = value == null || value === ""
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
-  $: safeValue = getSafeValue(value, props.defaultValue, allBindings)
+  $: safeValue = getSafeValue(value, defaultValue, allBindings)
   $: tempValue = safeValue
   $: replaceBindings = val => readableToRuntimeBinding(allBindings, val)
 
@@ -71,7 +73,11 @@
   })
 </script>
 
-<div class="property-control" data-cy={`setting-${key}`} class:highlighted>
+<div
+  class="property-control"
+  class:highlighted={highlighted && nullishValue}
+  data-cy={`setting-${key}`}
+>
   {#if type !== "boolean" && label}
     <div class="label">
       <Label>{label}</Label>
@@ -104,12 +110,11 @@
     align-items: stretch;
     transition: background 130ms ease-out, border-color 130ms ease-out;
     border-left: 4px solid transparent;
-    margin-left: -4px;
+    margin: -6px calc(-1 * var(--spacing-xl));
+    padding: 6px var(--spacing-xl) 6px calc(var(--spacing-xl) - 4px);
   }
   .property-control.highlighted {
     background: var(--spectrum-global-color-gray-300);
-    margin: -6px calc(-1 * var(--spacing-xl));
-    padding: 6px var(--spacing-xl) 6px calc(var(--spacing-xl) - 4px);
     border-color: var(--spectrum-global-color-blue-400);
   }
   .label {

packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte

@@ -115,7 +115,6 @@
         control={def.control}
         label={def.label}
         key={def.key}
-        error="asdasds"
         value={deepGet($currentAsset, def.key)}
         onChange={val => setAssetProps(def.key, val, def.parser, def.validate)}
         {bindings}

packages/client/src/components/app/ComponentPlaceholder.svelte

@@ -13,7 +13,7 @@
     <div class="component-placeholder">
       <span>
         Add the <mark>{requiredSetting.label}</mark> setting to start using your
-        component &nbsp;
+        component -
       </span>
       <span
         class="spectrum-Link"