Implement table captions through Palette#title / Component#title.

src/dom/DomElement.js

@@ -67,8 +67,9 @@ var DomElement = new function() {
     return /** @lends DomElement */{
         create: function(nodes, parent) {
             var isArray = Array.isArray(nodes),
-                res = create(isArray ? nodes : arguments, isArray ? parent : null);
+                res = create(isArray ? nodes : arguments,
-            return res.length == 1 ? res[0] : res;
+                        isArray ? parent : null);
+            return res.length === 1 ? res[0] : res;
         },
 
         find: function(selector, root) {
@@ -173,6 +174,22 @@ var DomElement = new function() {
                 el.removeChild(el.firstChild);
         },
 
+        insertBefore: function(ref, el) {
+            return ref.parentNode.insertBefore(create(el)[0], ref);
+        },
+
+//      insertAfter: function(ref, el) {
+//          var parent = ref.parentNode,
+//              next = ref.nextSibling,
+//              el = create(el)[0];
+//          if (next) {
+//              parent.insertBefore(el, next);
+//          } else {
+//              parent.appendChild(el);
+//          }
+//          return el;
+//      },
+
         getBounds: function(el, viewport) {
             var doc = el.ownerDocument,
                 body = doc.body,

src/ui/Component.js

@@ -117,10 +117,13 @@ var Component = Base.extend(Callback, /** @lends Component# */{
                 // On the root element, we need to create the table and row even
                 // if it's a columns layout.
                 table = this._table = !(columns && row) && DomElement.create(
-                    'table', { class: 'palettejs-pane' }),
+                    'table', { class: 'palettejs-pane' }, [ 'tbody' ]),
+                tbody = this._tbody = table && table.firstChild,
                 components = this._components = {},
                 currentRow = row,
                 numCells = 0;
+            element = row && table;
+            className = 'layout-' + (columns ? 'columns' : 'rows');
             this._numCells = 0;
             for (var key in props) {
                 var component = props[key];
@@ -128,7 +131,7 @@ var Component = Base.extend(Callback, /** @lends Component# */{
                     // Create the rows for vertical elements, as well as
                     // columns root elements.
                     if (table && !(columns && currentRow)) {
-                        currentRow = DomElement.addChildren(table, ['tr', {
+                        currentRow = DomElement.addChildren(tbody, ['tr', {
                             class: 'palettejs-row',
                             id: 'palettejs-row-' + key
                         }])[0];
@@ -178,8 +181,6 @@ var Component = Base.extend(Callback, /** @lends Component# */{
             // it through the same path as in the components object literal that
             // was passed.
             Base.set(this, components);
-            element = row && table;
-            className = 'layout-' + (columns ? 'columns' : 'rows');
         } else {
             var that = this;
             element = this._input = create(meta.tag || 'input', {
@@ -242,6 +243,28 @@ var Component = Base.extend(Callback, /** @lends Component# */{
         return this._name;
     },
 
+    getTitle: function() {
+        return this._title;
+    },
+
+    setTitle: function(title) {
+        this._title = title;
+        if (this._tbody) {
+            var node = this._titleNode;
+            if (!node && title) {
+                // Create a caption tag, and nest the title in a span inside,
+                // so we can offer some more flexibility with CSS on it.
+                node = this._titleNode = DomElement.insertBefore(
+                    this._tbody, [
+                        'caption', [ 'span' ],
+                    ]).firstChild;
+            } else if (node && !title) {
+                DomElement.remove(node);
+            }
+            DomElement.set(node, 'text', title);
+        }
+    },
+
     getPalette: function() {
         return this._palette;
     },

src/ui/Palette.js

@@ -26,29 +26,37 @@
 
     initialize: function Palette(title, components, values) {
         // Support object literal constructor
-        var props = Base.isPlainObject(title) && title;
+        var props = Base.isPlainObject(title) && title,
+            name;
         if (props) {
             title = props.title;
             components = props.components;
             values = props.values;
+            name = props.name;
         }
+        this._id = Palette._id = (Palette._id || 0) + 1;
         this._title = title;
-        this._values = values;
+        this._name = name || title
+                ? Base.hyphenate(title).replace(/\W/g, '_')
+                : 'palette-' + this._id;
+        this._values = values || {};
         this._components = components;
         // Create one root component that handles the layout and contains all
         // the components.
         var root = this._root = new Component(this, null, 'root', components,
-                values);
+                this._values);
         // Write the created components back into the passed components object,
         // so they are exposed and can easily be accessed from the outside.
         Base.set(components, root._components);
-        var parent = DomElement.find('.palettejs-panel')
+        var parent = DomElement.find('.palettejs-root')
             || DomElement.find('body').appendChild(DomElement.create('div', {
-                    class: 'palettejs-panel'
+                    class: 'palettejs-root'
                 }));
         this._element = parent.appendChild(DomElement.create('div', {
-                    class: 'palettejs-palette palettejs-' + root._className
+                    class: 'palettejs-palette palettejs-' + root._className,
+                    id: 'palettejs-palette-' + this._name
                 }, [root._table]));
+        this.setTitle(title);
         if (props)
             this._set(props, { title: true, components: true, values: true });
         // Link to the current scope's palettes list.
@@ -65,6 +73,14 @@
         return this._values;
     },
 
+    getTitle: function() {
+        return this._root.getTitle();
+    },
+
+    setTitle: function(title) {
+        return this._root.setTitle(title);
+    },
+
     getEnabled: function() {
         return this._root.getEnabled();
     },