can anybody please help with what I'm doing wrong?
the styles exist and are valid but they don't get applied
Could you bind the view.custom.state value to classes itself, and use a map transform to set the class you want as the result?
You're using a heavy script transform for something that can easily be accommodated for within an expression or map binding, which are significantly less resource expensive => more scalable.
Regardless however, to answer the "why" of why that isn't working, value is bound to a static string "view.custom.state"; this should be {view.custom.state}.
But again, don't use a script binding, just use an expression; design for efficiency from the start so you don't give yourself painful work in the future.
case({view.custom.state}
,0,".../stopped"
,1,".../running"
,2,".../faulted"
,".../stopped"
) +
" <otherClasses>"
Small cross-language syntax mistake. We all do it 
I mean case is also viable, you just need to add a default value in the event the value you're inspecting does not match any defined cases.
For you, that'd be:
case({view.custom.state},
0, "exchange/water-pack/components/symbol-state/stopped",
1, "exchange/water-pack/components/symbol-state/running",
2, "exchange/water-pack/components/symbol-state/faulted",
""
)
The last set of "" is important for this to work.
