Switch from <input type="button"> to <button> for button components, and allow #text as an alias to #value for better semantics.

src/ui/Component.js

@@ -37,7 +37,11 @@ var Component = Base.extend(Callback, /** @lends Component# */{
         },
 
         button: {
-            type: 'button'
+            tag: 'button',
+            type: 'button',
+            setValue: function(value) {
+                DomElement.set(this._input, 'text', value);
+            }
         },
 
         text: {
@@ -272,6 +276,39 @@ var Component = Base.extend(Callback, /** @lends Component# */{
         return this._parent;
     },
 
+    getValue: function() {
+        var value = this._value,
+            getValue = this._meta.getValue;
+        return getValue ? getValue.call(this, value) : value;
+    },
+
+    setValue: function(value) {
+        if (this._components)
+            return;
+        var meta = this._meta,
+            key = meta.value || 'value',
+            setValue = meta.setValue;
+        if (setValue)
+            value = setValue.call(this, value);
+        if (value !== undefined) {
+            DomElement.set(this._input, key, value);
+            // Read back and convert from input again to make sure we're in sync
+            value = DomElement.get(this._input, key);
+        }
+        if (meta.number)
+            value = parseFloat(value, 10);
+        if (this._value !== value) {
+            this._value = value;
+            if (!this._dontFire)
+                this.fire('change', this.getValue());
+        }
+    },
+
+    // Setup #text as an alias to #value, for better semantics when creating
+    // buttons.
+    getText: '#getValue',
+    setText: '#setValue',
+
     _setLabel: function(label, nodeName, parent) {
         if (parent) {
             this[nodeName] = DomElement.set(
@@ -310,32 +347,6 @@ var Component = Base.extend(Callback, /** @lends Component# */{
             setOptions.call(this);
     },
 
-    getValue: function() {
-        var value = this._value,
-            getValue = this._meta.getValue;
-        return getValue ? getValue.call(this, value) : value;
-    },
-
-    setValue: function(value) {
-        if (this._components)
-            return;
-        var meta = this._meta,
-            key = meta.value || 'value',
-            setValue = meta.setValue;
-        if (setValue)
-            value = setValue.call(this, value);
-        DomElement.set(this._input, key, value);
-        // Read back and convert from input again, to make sure we're in sync
-        value = DomElement.get(this._input, key);
-        if (meta.number)
-            value = parseFloat(value, 10);
-        if (this._value !== value) {
-            this._value = value;
-            if (!this._dontFire)
-                this.fire('change', this.getValue());
-        }
-    },
-
     getVisible: function() {
         return this._visible;
     },

src/ui/Palette.js

@@ -65,6 +65,10 @@
         (this._palettes = paper.palettes).push(this);
     },
 
+    getName: function() {
+        return this._name;
+    },
+
     getComponents: function() {
         return this._components;
     },