Suggester could set a data-attribute with the current selection

[Cube707]

Please fill out these Check-boxes

• [X] I checked for existing similar feature requests
• [X] I have read the docs and checked that the feature I am requesting is not already implemented
• [X] My feature request consists of only one feature

Is your Feature Request related to a Problem or Annoyance?

I would like to modify some styles depending on a user selected value while still having the value available for calculations. Here it would be helpfull if the suggester would set a data-attribute containing the current selection on itself, which could be use inside a css selector.

Describe the Feature you'd like

The current value of a selector should be available as for example the attribute data-selected, which would make it selectable via css.

The html would look something like this:

<div class="mb-input-wrapper my-custom-class mb-input-type-suggester" data-selected="1">
    <div class="mb-suggest-input">
        <div class="mb-suggest-text">
            <span>1</span>
        </div>
        <button class="mb-button-inner mod-plain" aria-label="">
            <div class="mb-icon-wrapper"></div>
        </button>
    </div>
</div>

which would allow you to write this css selector:

.my-custom-class[data-selected="1"] {...}

Alternatives

No response

Additional Context

full context of what I am working on, in case I am overlooking things:

I am trying to create a Ability-table for DnD 5e, which should display different proficiency-levels with different styling:

The first column "prof" is a INPUT[selector] which has for options 0, 0.5, 1, 2 which correspond to the for icons shown. The selected values are used to calculate the last column "bonus". Currently I can't select the styling depending on the made selection but have to hard-code a classname. I would like to change that.

[mProjectsCode]

This sounds like a good addition, but it should be added to all input fields. However, I am not sure how more complex values can be stringified. Probably a simple JSON.stringify.

[Cube707]

I am not sure how more complex values can be stringified. Probably a simple JSON.stringify

JSON will work, but " would need to be escaped as both HML and JSON require double-quotes, which makes it a little anoying?

Maybe relying on the String-constructor would be enough. Its not really realistic to write styles for every permutation of a complex object and this way the developer could provide his own toString() implementation and match that in his css. That's at least how I would do it in python, not sure how well this concept translates to JavaScript