feat: Autocomplete values in advanced panel

[kof]

#4816

Description

• When adding a new property, you sometimes don't know the property name, e.g. you know you want to "center" it but you don't remember if its align-items, align-content or any other and you need to see the list.
• Currently you can create a css variable "bla" and it will bypass validation, now it will validate
• also try "color" esc autocomplete, enter
• or "color:red" esc autocomplete enter

Try typing "center"

Steps for reproduction

1. click button
2. expect xyz

Code Review

• hi @kof, I need you to do
  • conceptual review (architecture, feature-correctness)
  • detailed review (read every line)
  • test it on preview

Before requesting a review

• made a self-review
• added inline comments where things may be not obvious (the "why", not "what")

Before merging

• tested locally and on preview environment (preview dev login: 0000)
• updated test cases document
• added tests
• if any new env variables are added, added them to .env file

[johnsicili]

Can the values render on canvas as we arrow through them in autocomplete?

Showing values helps not just recall the names but also see what they do... I often do this with flex/grid alignment

[kof]

Oh you mean the autocomplete upon property creation! Good call

[johnsicili]

Like this:

previewrender.mp4

Every arrow over should render that option so we can see what it does IMO

[kof]

yep, on it, it wasn't possible before I added the values to autocomplete and now it is!

[kof]

@johnsicili added preview on highlight

[johnsicili]

NICE this is getting good