6 files changed, 40 insertions, 31 deletions
diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js
index e51bdd8a..ed1ac27a 100755
--- a/js/components/ui/color-chip.reel/color-chip.js
+++ b/js/components/ui/color-chip.reel/color-chip.js
@@ -29,12 +29,20 @@ var ColorChip = exports.ColorChip = Montage.create(Component, {
        value: 20
    },
-    initialColor: {
+    color: {
-        value: false
+        value: {r:0, g:0, b:0, a:1, css:'rgb(0,0,0)', mode:'rgb'}
    },
    changeDelegate: {
-        value: null
+        value: function(event) {
+            this.color = event._event.color;
+            var evt = document.createEvent("CustomEvent");
+            evt.initEvent("change", true, true);
+            evt.type = "change";
+            this.dispatchEvent(evt);
+        }
    },
    prepareForDraw: {
@@ -60,10 +68,10 @@ var ColorChip = exports.ColorChip = Montage.create(Component, {
        value: function(evt) {
            if(this.chip) {
                // This is a single chip - Not related to the color panel -- Set the initial color if found
-                var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(255,0,0)";
+                var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(0,0,0)";
-                if(this.initialColor) {
+                if(this.color) {
-                    var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.initialColor);
+                    var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.color.css);
                    mode = colorObj.mode;
                    r = colorObj.value.r;
                    g = colorObj.value.g;
diff --git a/js/components/ui/file-input.reel/file-input.html b/js/components/ui/file-input.reel/file-input.html
index 5cdd8f9e..2a8546a5 100755
--- a/js/components/ui/file-input.reel/file-input.html
+++ b/js/components/ui/file-input.reel/file-input.html
@@ -11,7 +11,7 @@
    <script type="text/montage-serialization">
    {
        "owner": {
-            "module": "js/components/ui/file-input",
+            "module": "js/components/ui/file-input.reel",
            "name": "FileInput",
            "properties": {
                "element": {"#": "fileInput"},
@@ -23,8 +23,8 @@
    </script>
 </head>
 <body>
-    <div id="fileInput">
+    <div id="fileInput" class="fileInput">
-        <input id="fileInputTextField" class="file-path" type="text" />
+        <input id="fileInputTextField" class="file-path nj-skinned" type="text" />
        <input id="fileInputControl" class="browse-button" type="file" />
    </div>
 </body>
diff --git a/js/components/ui/file-input.reel/file-input.js b/js/components/ui/file-input.reel/file-input.js
index 2ea38162..b57f7c21 100755
--- a/js/components/ui/file-input.reel/file-input.js
+++ b/js/components/ui/file-input.reel/file-input.js
@@ -5,7 +5,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 var Montage = require("montage/core/core").Montage,
-Component = require("montage/ui/component").Component;
+    Component = require("montage/ui/component").Component;
 var FileInput = exports.FileInput = Montage.create(Component, {
diff --git a/js/components/ui/input-group.reel/input-group.html b/js/components/ui/input-group.reel/input-group.html
index c99e29d6..0050b8cb 100755
--- a/js/components/ui/input-group.reel/input-group.html
+++ b/js/components/ui/input-group.reel/input-group.html
@@ -11,7 +11,7 @@
    <script type="text/montage-serialization">
    {
        "eventDelegator": {
-                "module": "montage/event/action-event-listener",
+                "module": "montage/core/event/action-event-listener",
                "name": "ActionEventListener",
                "properties": {
                    "handler": {"@": "owner"},
@@ -19,7 +19,7 @@
                }
            },
        "propControl1": {
-            "module": "js/components/ui/property-control",
+            "module": "js/components/ui/property-control.reel",
            "name": "PropertyControl",
            "properties": {
                "element": {"#": "inputPair"}
@@ -44,7 +44,7 @@
                            ]
        },
        "propList": {
-            "module": "montage/ui/repetition",
+            "module": "montage/ui/repetition.reel",
            "name": "Repetition",
            "properties": {
                "element": {"#": "inputList"}
@@ -58,7 +58,7 @@
            }
        },
        "owner": {
-            "module": "js/components/ui/input-group",
+            "module": "js/components/ui/input-group.reel",
            "name": "InputGroup",
            "properties": {
                "element": {"#": "inputRow"},
@@ -69,7 +69,7 @@
    </script>
 </head>
 <body>
-    <div id="inputRow" style="-webkit-user-select: none;">
+    <div id="inputRow" class="inputRow" style="-webkit-user-select: none;">
        <div id="inputList">
            <div id="inputPair"></div>
        </div>
diff --git a/js/components/ui/property-control.reel/property-control.html b/js/components/ui/property-control.reel/property-control.html
index 2e7c7b53..43e8e67f 100755
--- a/js/components/ui/property-control.reel/property-control.html
+++ b/js/components/ui/property-control.reel/property-control.html
@@ -11,14 +11,14 @@
    <script type="text/montage-serialization">
    {
        "substitution1": {
-            "module": "montage/ui/substitution",
+            "module": "montage/ui/substitution.reel",
            "name": "Substitution",
            "properties": {
                "element": {"#": "propController"}
            }
        },
        "owner": {
-            "module": "js/components/ui/property-control",
+            "module": "js/components/ui/property-control.reel",
            "name": "PropertyControl",
            "properties": {
                "element": {"#": "propControl"},
@@ -30,7 +30,7 @@
    </script>
 </head>
 <body>
-    <div id="propControl">
+    <div id="propControl" class="propControl">
        <div id="propLabel" class="prop-label"></div>
        <div id="propController" class="prop-controller">
            <div id="subDummy"></div>
diff --git a/js/components/ui/property-control.reel/property-control.js b/js/components/ui/property-control.reel/property-control.js
index 586d2e9a..58b1be9f 100755
--- a/js/components/ui/property-control.reel/property-control.js
+++ b/js/components/ui/property-control.reel/property-control.js
@@ -6,16 +6,16 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage = require("montage/core/core").Montage,
    Component = require("montage/ui/component").Component,
-    HotText = require("js/components/hottext").HotText,
+    HotText = require("js/components/hottext.reel").HotText,
-    HotTextUnit = require("js/components/hottextunit").HotTextUnit,
+    HotTextUnit = require("js/components/hottextunit.reel").HotTextUnit,
-    Slider = require("js/components/slider").Slider,
+    Slider = require("js/components/slider.reel").Slider,
-    Button = require("js/components/button").Button,
+    Button = require("js/components/button.reel").Button,
-    Checkbox = require("js/components/checkbox").Checkbox,
+    Checkbox = require("js/components/checkbox.reel").Checkbox,
-    Combobox = require("js/components/combobox").Combobox,
+    Combobox = require("js/components/combobox.reel").Combobox,
-    TextField = require("js/components/TextField").TextField,
+    TextField = require("js/components/TextField.reel").TextField,
-    ColorChip = require("js/components/ui/color-chip").ColorChip,
+    ColorChip = require("js/components/ui/color-chip.reel").ColorChip,
-    FileInput = require("js/components/ui/file-input").FileInput,
+    FileInput = require("js/components/ui/file-input.reel").FileInput,
-    InputGroup = require("js/components/ui/input-group").InputGroup;
+    InputGroup = require("js/components/ui/input-group.reel").InputGroup;
 var PropertyControl = exports.PropertyControl = Montage.create(Component, {
@@ -134,7 +134,7 @@ var PropertyControl = exports.PropertyControl = Montage.create(Component, {