I came across this interesting kind while investigating the Picker control.  It's pretty basic -- 1 property and 1 method (+1 protected) -- but can be a useful base class to streamline the styling of a control.

[[MORE]]

Stateful's single method is setState() which expects attribute as a string and its state as a boolean.  This method in turn adds or removes a css class with the attribute name as the suffix.  The prefix for the class name is set using the single published property of Stateful -- cssNamespace.  The default cssNamespace is "enyo" but I'd recommend changing it to something unique to your application.

While you could create a Stateful kind directly, it's designed to be used as a base class.  For example, CustomButton (which is one of the base kinds for the Picker control), publishes several additional properties; each of the changed handlers for these properties call Stateful.setState to style the control appropriate for the change in property value.

An example will help illustrate.  For a further example, take a look at the source for CustomButton.

CSS

.extras-active {
  background-color:red;
}

JavaScript

enyo.kind({
  name:"StatefulButton",
  kind:"Stateful",
  cssNamespace:"extras",
  published:{
    active:false
  },
  activeChanged:function() {
    this.setState("active", this.active);
  },
  clickHandler:function() {
      this.setActive(!this.active);
  }
});

enyo.kind({
  name:"com.technisode.example.App",
  kind:"VFlexBox",
  components:[
    {kind:"StatefulButton", active:true, content:"Button 1"},
    {kind:"StatefulButton", active:false, content:"Button 2"},
    {kind:"StatefulButton", active:false, content:"Button 3"}
  ]
});