Use curly brackets around variable names, and other notes

[SimonBiggs]

Much like f-strings in python:

https://cito.github.io/blog/f-strings/

This way, without the curly brackets it is just a string, but with the curly brackets it says "this is a variable". That way I don't need the list notation when just one item wants to be used.

[SimonBiggs]

Also change to just have two custom element types, <run-section> and components inherited off of <input>. Need to strip out Angular, and make ScriptedForms based just on standard web components. Restyle the user variables with Jupyter Widget styling.

Some example syntax below:

<run-section when="session-starts">

```python
file_names = ['a_file_name.csv', 'another_file_name.py']

x = 1
y = 2

def a_function():
    return x + y

disabled = False

def some_code():
    print('boo')

another_button_name = 'foobar'
```
</run-section>

<run-section when="session-starts">

```python
some_code()
```

</run-section>

<run-section when="page-loads">

```python
some_code()
```

</run-section>

<run-section when="any-variables-change">
</run-section>

<input is="a-slider" name="x">
<input is="a-number" name="y">

<run-section when="section-variables-change">
</run-section>

<run-section when="button-pressed" value="a_button_name" disabled="{disabled}">
</run-section>

<run-section when="button-pressed" value="{another_button_name}" disabled="{disabled}">
</run-section>

<run-section when="files-change" files="{file_names}">
</run-section>

<run-section when="files-change" files="test.csv">
</run-section>

<run-section when="files-change" files="['boo.csv', 'hello.csv']">
</run-section>

<run-section when="session-starts">

```python
kwargs = {
    when: "files-change",
    files: ['hello.csv']
}

custom_when = 'files-change'
```

</run-section>

<run-section kwargs="{kwargs}">
</run-section>

<run-section when="{custom_when}">
</run-section>
```