fix(templates): replace HTML comments with HBS ones (#4681)

Replaces the HTML comments inside the HBS templates with HBS comments as suggested in the related issue and following the [official docs](https://handlebarsjs.com/examples/comments.html). The HBS comments are stripped from the output and are available only to developers at DEV time, while the HTML ones are part of the output and could be observed in the browser. After this change only the lit-html comments can be seen.

Previously (the comment is part of the lit template)

```js
const block0 = (context, tags, suffix) => html`<div class="ui5-panel-root"><!-- header: either header or h1 with header text --><div @click="${context._headerClick}"
```
After (the comment is removed)

```js
const block0 = (context, tags, suffix) => html`<div class="ui5-panel-root"><div @click="${context._headerClick}"
```

As the related issue suggests, I went trough the list of tasks:

- [ ] investigate the hbs2lit script's handling of comments  - we can look at this more closely, so far haven't found anything specific to comments, the following [line] somehow seems relevant at least it has "comment" in the name (https://github.com/SAP/ui5-webcomponents/blob/master/packages/tools/lib/hbs2lit/src/partialsVisitor.js#L95)
```js
CommentStatement: function(/* comment */) {},
```


- [X] add support for hbs comments, if necessary - have not found issues so far, HBS comments work as expected
- [x] use hbs comments everywhere (fix all current  templates) - done with the change

Related to: #2802

packages/main/src/Calendar.hbs

@@ -49,7 +49,7 @@
 		></ui5-yearpicker>
 	</div>
 
-	<!-- Positioned above the content due to flex-direction:column-reverse, but physically here for tab order to work -->
+	{{! Positioned above the content due to flex-direction:column-reverse, but physically here for tab order to work}}
 	<ui5-calendar-header
 			id="{{_id}}-head"
 			.primaryCalendarType="{{_primaryCalendarType}}"

packages/main/src/DatePicker.hbs

@@ -2,7 +2,7 @@
 		class="ui5-date-picker-root"
 		style="{{styles.main}}"
 >
-	<!-- INPUT -->
+	{{! INPUT}}
 	<ui5-input
 			id="{{_id}}-inner"
 			class="ui5-date-picker-input"

packages/main/src/List.hbs

@@ -4,7 +4,7 @@
 	@keydown="{{_onkeydown}}"
 >
 	<div class="ui5-list-scroll-container">
-		<!-- header -->
+		{{! header}}
 		{{#if header.length}}
 			<slot name="header" />
 		{{/if}}

packages/main/src/Panel.hbs

@@ -4,7 +4,7 @@
 	aria-label="{{effectiveAccessibleName}}"
 	dir="{{effectiveDir}}"
 >
-	<!-- header: either header or h1 with header text -->
+	{{! header: either header or h1 with header text}}
 	<div
 		@click="{{_headerClick}}"
 		@keydown="{{_headerKeyDown}}"
@@ -51,7 +51,7 @@
 		{{/if}}
 	</div>
 
-	<!-- content area -->
+	{{! content area}}
 	<div
 		class="ui5-panel-content"
 		id="{{_id}}-content"

packages/main/src/StepInput.hbs

@@ -5,7 +5,7 @@
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 >
-	<!-- Decrement Icon -->
+	{{! Decrement Icon}}
 	{{#unless readonly}}
 	<div
 		class="ui5-step-icon ui5-step-dec"
@@ -28,7 +28,8 @@
 		></ui5-icon>
 	</div>
 	{{/unless}}
-	<!-- INPUT -->
+
+	{{! INPUT}}
 	<ui5-input
 			id="{{_id}}-inner"
 			class="ui5-step-input-input"
@@ -53,7 +54,7 @@
 
 	</ui5-input>
 
-	<!-- Increment Icon -->
+	{{! Increment Icon}}
 	{{#unless readonly}}
 	<div
 		class="ui5-step-icon ui5-step-inc"