feat: Add semantic classes to dom

[connoratrug]

What are the main changes you did

Add more semantic classes to the dom elements
This enables easy selection via dom selector

This can be use to make nicer ( readable, maintainable, stabler) selectors for analytics ( or other stuff)
Not sure if we want to use '''class''' or """data-semanic-*""" for this

How to test

• explain here what to do to test this (or point to unit tests)

Checklist

• updated docs in case of new feature
• added/updated tests
• added/updated testplan to include a test for this fix, including ref to bug using # notation

[connoratrug]

"should we then wrap this in a span or something?" that one option ( make this , ( and all other stuff single root ) , other option is to add $attr.class ( $attr.[prop]) to the component as described in https://vuejs.org/guide/components/attrs.html#attribute-inheritance-on-multiple-root-nodes

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud