shit more or less works for the very basic stuff

src/components/button.style.js

@@ -2,10 +2,10 @@ export default {
   name: 'Button',
   selector: '.btn',
   states: {
-    hover: ':hover',
     disabled: ':disabled',
+    toggled: '.toggled',
     pressed: ':active',
-    toggled: '.toggled'
+    hover: ':hover'
   },
   variants: {
     danger: '.danger',

src/components/panel.style.js

@@ -4,6 +4,7 @@ export default {
   validInnerComponents: [
     'Text',
     'Icon',
-    'Button'
+    'Button',
+    'PanelHeader'
   ]
 }

src/components/panel_header.style.js

@@ -0,0 +1,9 @@
+export default {
+  name: 'PanelHeader',
+  selector: '.panel-heading',
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Button'
+  ]
+}

src/components/text.style.js

@@ -1,6 +1,6 @@
 export default {
   name: 'Text',
-  selector: '',
+  selector: '/*text*/',
   states: {
     faint: '.faint'
   }

src/components/underlay.style.js

@@ -1,6 +1,6 @@
 export default {
   name: 'Underlay',
-  selector: '.underlay',
+  selector: '#app',
   validInnerComponents: [
     'Panel'
   ]