imba-source 0.14.4 → 0.14.5

data/vendor/imba/dist/imba.js

@@ -90,7 +90,7 @@
 		*/
 		
 		Imba = {
-			VERSION: '0.14.4',
+			VERSION: '0.14.5',
 			CLIENT: isClient,
 			SERVER: !isClient,
 			DEBUG: false
@@ -190,7 +190,7 @@
 			return;
 		};
 		
-		return Imba.attr = function (scope,name,opts){
+		Imba.attr = function (scope,name,opts){
 			if (scope.defineAttribute) {
 				return scope.defineAttribute(name,opts);
 			};
@@ -206,9 +206,20 @@
 				this.setAttribute(name,value);
 				return this;
 			};
-			
 			return;
 		};
+		
+		Imba.propDidSet = function (object,property,val,prev){
+			var fn = property.watch;
+			if (fn instanceof Function) {
+				fn.call(object,val,prev,property);
+			} else if ((typeof fn=='string'||fn instanceof String) && object[fn]) {
+				object[fn](val,prev,property);
+			};
+			return;
+		};
+		
+		return Imba;
 
 	})();
 
@@ -645,6 +656,7 @@
 			return (b && b.indexOf) ? b.indexOf(a) : [].indexOf.call(a,b);
 		};
 		
+		function iter$(a){ return a ? (a.toArray ? a.toArray() : a) : []; };
 		Imba.static = function (items,nr){
 			items.static = nr;
 			return items;
@@ -657,10 +669,21 @@
 		
 		Imba.Tag = function Tag(dom){
 			this.setDom(dom);
+			this;
+		};
+		
+		Imba.Tag.buildNode = function (){
+			var dom = Imba.document().createElement(this._nodeType || 'div');
+			if (this._classes) {
+				var cls = this._classes.join(" ");
+				if (cls) { dom.className = cls };
+			};
+			return dom;
 		};
 		
 		Imba.Tag.createNode = function (){
-			throw "Not implemented";
+			var proto = (this._protoDom || (this._protoDom = this.buildNode()));
+			return proto.cloneNode(false);
 		};
 		
 		Imba.Tag.build = function (){
@@ -692,6 +715,27 @@
 			return this;
 		};
 		
+		Imba.Tag.prototype.ref = function (){
+			return this._ref;
+		};
+		
+		/*
+			Set inner html of node
+			*/
+		
+		Imba.Tag.prototype.setHtml = function (html){
+			this._dom.innerHTML = html;
+			return this;
+		};
+		
+		/*
+			Get inner html of node
+			*/
+		
+		Imba.Tag.prototype.html = function (){
+			return this._dom.innerHTML;
+		};
+		
 		/*
 			Method that is called by the compiled tag-chains, for
 			binding events on tags to methods etc.
@@ -716,7 +760,6 @@
 		
 		Imba.Tag.prototype.setId = function (id){
 			this.dom().id = id;
-			this;
 			return this;
 		};
 		
@@ -782,6 +825,147 @@
 			throw "Not implemented";
 		};
 		
+		/*
+			Remove specified child from current node.
+			@return {self}
+			*/
+		
+		Imba.Tag.prototype.removeChild = function (child){
+			var par = this.dom();
+			var el = child instanceof Imba.Tag ? (child.dom()) : (child);
+			if (el && el.parentNode == par) { par.removeChild(el) };
+			return this;
+		};
+		
+		// Benchmark difference
+		// def removeChild node
+		// 	dom.removeChild(node.@dom or node) if node
+		// 	self
+		
+		/*
+			@deprecated
+			Remove specified child from current node.
+			*/
+		
+		Imba.Tag.prototype.remove = function (child){
+			var par = this.dom();
+			var el = child && child.dom();
+			if (el && el.parentNode == par) { par.removeChild(el) };
+			return this;
+		};
+		
+		/*
+			Append a single item (node or string) to the current node.
+			If supplied item is a string it will automatically. This is used
+			by Imba internally, but will practically never be used explicitly.
+			@return {self}
+			*/
+		
+		Imba.Tag.prototype.appendChild = function (node){
+			if ((typeof node=='string'||node instanceof String)) { node = Imba.document().createTextNode(node) };
+			if (node) { this.dom().appendChild(node._dom || node) };
+			return this;
+		};
+		
+		/*
+			Insert a node into the current node (self), before another.
+			The relative node must be a child of current node. 
+			*/
+		
+		Imba.Tag.prototype.insertBefore = function (node,rel){
+			if ((typeof node=='string'||node instanceof String)) { node = Imba.document().createTextNode(node) };
+			if (node && rel) { this.dom().insertBefore((node._dom || node),(rel._dom || rel)) };
+			return this;
+		};
+		
+		/*
+			The .append method inserts the specified content as the last child
+			of the target node. If the content is already a child of node it
+			will be moved to the end.
+			
+			# example
+			    var root = <div.root>
+			    var item = <div.item> "This is an item"
+			    root.append item # appends item to the end of root
+		
+			    root.prepend "some text" # append text
+			    root.prepend [<ul>,<ul>] # append array
+			*/
+		
+		Imba.Tag.prototype.append = function (item){
+			// possible to append blank
+			// possible to simplify on server?
+			if (!item) { return this };
+			
+			if (item instanceof Array) {
+				for (var i = 0, ary = iter$(item), len = ary.length, member; i < len; i++) {
+					member = ary[i];
+					member && this.append(member);
+				};
+			} else if ((typeof item=='string'||item instanceof String) || (typeof item=='number'||item instanceof Number)) {
+				var node = Imba.document().createTextNode(item);
+				this._dom.appendChild(node);
+				if (this._empty) { this._empty = false };
+			} else {
+				// should delegate to self.appendChild
+				this._dom.appendChild(item._dom || item);
+				if (this._empty) { this._empty = false };
+			};
+			
+			return this;
+		};
+		
+		/*
+			@deprecated
+			*/
+		
+		Imba.Tag.prototype.insert = function (node,pars){
+			if(!pars||pars.constructor !== Object) pars = {};
+			var before = pars.before !== undefined ? pars.before : null;
+			var after = pars.after !== undefined ? pars.after : null;
+			if (after) { before = after.next() };
+			if (node instanceof Array) {
+				node = (tag$.$fragment().setContent(node,0).end());
+			};
+			if (before) {
+				this.dom().insertBefore(node.dom(),before.dom());
+			} else {
+				this.append(node);
+			};
+			return this;
+		};
+		
+		/*
+			@todo Should support multiple arguments like append
+		
+			The .prepend method inserts the specified content as the first
+			child of the target node. If the content is already a child of 
+			node it will be moved to the start.
+			
+		    	node.prepend <div.top> # prepend node
+		    	node.prepend "some text" # prepend text
+		    	node.prepend [<ul>,<ul>] # prepend array
+		
+			*/
+		
+		Imba.Tag.prototype.prepend = function (item){
+			var first = this._dom.childNodes[0];
+			first ? (this.insertBefore(item,first)) : (this.appendChild(item));
+			return this;
+		};
+		
+		
+		/*
+			Remove node from the dom tree
+			@return {self}
+			*/
+		
+		Imba.Tag.prototype.orphanize = function (){
+			var par;
+			if (par = this.parent()) { par.removeChild(this) };
+			return this;
+		};
+		
 		/*
 			Get text of node. Uses textContent behind the scenes (not innerText)
 			[https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent]()
@@ -821,7 +1005,49 @@
 			*/
 		
 		Imba.Tag.prototype.dataset = function (key,val){
-			throw "Not implemented";
+			if (key instanceof Object) {
+				for (var i = 0, keys = Object.keys(key), l = keys.length; i < l; i++){
+					this.dataset(keys[i],key[keys[i]]);
+				};
+				return this;
+			};
+			
+			if (arguments.length == 2) {
+				this.setAttribute(("data-" + key),val);
+				return this;
+			};
+			
+			if (key) {
+				return this.getAttribute(("data-" + key));
+			};
+			
+			var dataset = this.dom().dataset;
+			
+			if (!dataset) {
+				dataset = {};
+				for (var i = 0, ary = iter$(this.dom().attributes), len = ary.length, atr; i < len; i++) {
+					atr = ary[i];
+					if (atr.name.substr(0,5) == 'data-') {
+						dataset[Imba.toCamelCase(atr.name.slice(5))] = atr.value;
+					};
+				};
+			};
+			
+			return dataset;
+		};
+		
+		
+		/*
+			Remove all content inside node
+			*/
+		
+		Imba.Tag.prototype.empty = function (){
+			while (this._dom.firstChild){
+				this._dom.removeChild(this._dom.firstChild);
+			};
+			this._children = null;
+			this._empty = true;
+			return this;
 		};
 		
 		/*
@@ -909,6 +1135,8 @@
 			return this;
 		};
 		
+		
+		
 		/*
 			List of flags for this node. 
 			*/
@@ -917,6 +1145,14 @@
 			return this._dom.classList;
 		};
 		
+		/*
+			@deprecated
+			*/
+		
+		Imba.Tag.prototype.classes = function (){
+			throw "Imba.Tag#classes is removed. Use Imba.Tag#flags";
+		};
+		
 		/*
 			Add speficied flag to current node.
 			If a second argument is supplied, it will be coerced into a Boolean,
@@ -966,6 +1202,30 @@
 			return this._dom.classList.contains(name);
 		};
 		
+		
+		/*
+			Set/update a named flag. It remembers the previous
+			value of the flag, and removes it before setting the new value.
+		
+				node.setFlag('type','todo')
+				node.setFlag('type','project')
+				# todo is removed, project is added.
+		
+			@return {self}
+			*/
+		
+		Imba.Tag.prototype.setFlag = function (name,value){
+			this._namedFlags || (this._namedFlags = []);
+			var prev = this._namedFlags[name];
+			if (prev != value) {
+				if (prev) { this.unflag(prev) };
+				if (value) { this.flag(value) };
+				this._namedFlags[name] = value;
+			};
+			return this;
+		};
+		
+		
 		/*
 			Get the scheduler for this node. A new scheduler will be created
 			if it does not already exist.
@@ -1012,6 +1272,200 @@
 			return tag$wrap(this.dom().parentNode);
 		};
 		
+		/*
+			Get the child at index
+			*/
+		
+		Imba.Tag.prototype.child = function (i){
+			return tag$wrap(this.dom().children[i || 0]);
+		};
+		
+		
+		/*
+			Get the children of node
+			@return {Imba.Selector}
+			*/
+		
+		Imba.Tag.prototype.children = function (sel){
+			var nodes = new Imba.Selector(null,this,this._dom.children);
+			return sel ? (nodes.filter(sel)) : (nodes);
+		};
+		
+		/*
+			Get the siblings of node
+			@return {Imba.Selector}
+			*/
+		
+		Imba.Tag.prototype.siblings = function (sel){
+			var par, self = this;
+			if (!(par = this.parent())) { return [] }; // FIXME
+			var ary = this.dom().parentNode.children;
+			var nodes = new Imba.Selector(null,this,ary);
+			return nodes.filter(function(n) { return n != self && (!sel || n.matches(sel)); });
+		};
+		
+		/*
+			Get node and its ascendents
+			@return {Array}
+			*/
+		
+		Imba.Tag.prototype.path = function (sel){
+			var node = this;
+			var nodes = [];
+			if (sel && sel.query) { sel = sel.query() };
+			
+			while (node){
+				if (!sel || node.matches(sel)) { nodes.push(node) };
+				node = node.parent();
+			};
+			return nodes;
+		};
+		
+		/*
+			Get ascendents of node
+			@return {Array}
+			*/
+		
+		Imba.Tag.prototype.parents = function (sel){
+			var par = this.parent();
+			return par ? (par.path(sel)) : ([]);
+		};
+		
+		/*
+			Get the immediately following sibling of node.
+			*/
+		
+		Imba.Tag.prototype.next = function (sel){
+			if (sel) {
+				var el = this;
+				while (el = el.next()){
+					if (el.matches(sel)) { return el };
+				};
+				return null;
+			};
+			return tag$wrap(this.dom().nextElementSibling);
+		};
+		
+		/*
+			Get the immediately preceeding sibling of node.
+			*/
+		
+		Imba.Tag.prototype.prev = function (sel){
+			if (sel) {
+				var el = this;
+				while (el = el.prev()){
+					if (el.matches(sel)) { return el };
+				};
+				return null;
+			};
+			return tag$wrap(this.dom().previousElementSibling);
+		};
+		
+		/*
+			Get descendants of current node, optionally matching selector
+			@return {Imba.Selector}
+			*/
+		
+		Imba.Tag.prototype.find = function (sel){
+			return new Imba.Selector(sel,this);
+		};
+		
+		/*
+			Get the first matching child of node
+		
+			@return {Imba.Tag}
+			*/
+		
+		Imba.Tag.prototype.first = function (sel){
+			return sel ? (this.find(sel).first()) : (tag$wrap(this.dom().firstElementChild));
+		};
+		
+		/*
+			Get the last matching child of node
+		
+				node.last # returns the last child of node
+				node.last %span # returns the last span inside node
+				node.last do |el| el.text == 'Hi' # return last node with text Hi
+		
+			@return {Imba.Tag}
+			*/
+		
+		Imba.Tag.prototype.last = function (sel){
+			return sel ? (this.find(sel).last()) : (tag$wrap(this.dom().lastElementChild));
+		};
+		
+		/*
+			Check if this node matches a selector
+			@return {Boolean}
+			*/
+		
+		Imba.Tag.prototype.matches = function (sel){
+			var fn;
+			if (sel instanceof Function) {
+				return sel(this);
+			};
+			
+			if (sel.query) { sel = sel.query() };
+			if (fn = (this._dom.matches || this._dom.matchesSelector || this._dom.webkitMatchesSelector || this._dom.msMatchesSelector || this._dom.mozMatchesSelector)) {
+				return fn.call(this._dom,sel);
+			};
+		};
+		
+		/*
+			Get the first element matching supplied selector / filter
+			traversing upwards, but including the node itself.
+			@return {Imba.Tag}
+			*/
+		
+		Imba.Tag.prototype.closest = function (sel){
+			if (!sel) { return this.parent() }; // should return self?!
+			var node = this;
+			if (sel.query) { sel = sel.query() };
+			
+			while (node){
+				if (node.matches(sel)) { return node };
+				node = node.parent();
+			};
+			return null;
+		};
+		
+		/*
+			Get the closest ancestor of node that matches
+			specified selector / matcher.
+		
+			@return {Imba.Tag}
+			*/
+		
+		Imba.Tag.prototype.up = function (sel){
+			if (!sel) { return this.parent() };
+			return this.parent() && this.parent().closest(sel);
+		};
+		
+		/*
+			Get the index of node.
+			@return {Number}
+			*/
+		
+		Imba.Tag.prototype.index = function (){
+			var i = 0;
+			var el = this.dom();
+			while (el.previousSibling){
+				el = el.previousSibling;
+				i++;
+			};
+			return i;
+		};
+		
+		/*
+			Check if node contains other node
+			@return {Boolean} 
+			*/
+		
+		Imba.Tag.prototype.contains = function (node){
+			return this.dom().contains(node && node._dom || node);
+		};
+		
+		
 		/*
 			Shorthand for console.log on elements
 			@return {self}
@@ -1069,6 +1523,26 @@
 			return this.getAttribute('style');
 		};
 		
+		/*
+			Focus on current node
+			@return {self}
+			*/
+		
+		Imba.Tag.prototype.focus = function (){
+			this.dom().focus();
+			return this;
+		};
+		
+		/*
+			Remove focus from current node
+			@return {self}
+			*/
+		
+		Imba.Tag.prototype.blur = function (){
+			this.dom().blur();
+			return this;
+		};
+		
 		Imba.Tag.prototype.toString = function (){
 			return this.dom().outerHTML;
 		};
@@ -1088,14 +1562,14 @@
 			
 			obj.prototype = Object.create(sup.prototype);
 			obj.__super__ = obj.prototype.__super__ = sup.prototype;
-			obj.prototype.initialize = obj.prototype.constructor = obj;
+			obj.prototype.constructor = obj;
 			if (sup.inherit) { sup.inherit(obj) };
 			return obj;
 		};
 		
 		function Tag(){
 			return function(dom) {
-				this.setDom(dom);
+				this.initialize(dom);
 				return this;
 			};
 		};
@@ -1326,7 +1800,6 @@
 /***/ function(module, exports) {
 
 	(function(){
-		function iter$(a){ return a ? (a.toArray ? a.toArray() : a) : []; };
 		
 		Imba.document = function (){
 			return window.document;
@@ -1386,16 +1859,6 @@
 			tag.prototype.name = function(v){ return this.getAttribute('name'); }
 			tag.prototype.setName = function(v){ this.setAttribute('name',v); return this; };
 			
-			tag.prototype.id = function (){
-				return this.dom().id;
-			};
-			
-			tag.prototype.setId = function (id){
-				this.dom().id = id;
-				this;
-				return this;
-			};
-			
 			tag.prototype.width = function (){
 				return this._dom.offsetWidth;
 			};
@@ -1410,48 +1873,6 @@
 				return this;
 			};
 			
-			/*
-				Set inner html of node
-				*/
-			
-			tag.prototype.setHtml = function (html){
-				this._dom.innerHTML = html;
-				this;
-				return this;
-			};
-			
-			/*
-				Get inner html of node
-				*/
-			
-			tag.prototype.html = function (){
-				return this._dom.innerHTML;
-			};
-			
-			/*
-				Remove all content inside node
-				*/
-			
-			tag.prototype.empty = function (){
-				while (this._dom.firstChild){
-					this._dom.removeChild(this._dom.firstChild);
-				};
-				this._children = null;
-				this._empty = true;
-				return this;
-			};
-			
-			/*
-				Remove specified child from current node.
-				*/
-			
-			tag.prototype.remove = function (child){
-				var par = this.dom();
-				var el = child && child.dom();
-				if (el && el.parentNode == par) { par.removeChild(el) };
-				return this;
-			};
-			
 			tag.prototype.emit = function (name,pars){
 				if(!pars||pars.constructor !== Object) pars = {};
 				var data = pars.data !== undefined ? pars.data : null;
@@ -1460,345 +1881,9 @@
 				return this;
 			};
 			
-			tag.prototype.dataset = function (key,val){
-				if (key instanceof Object) {
-					for (var i = 0, keys = Object.keys(key), l = keys.length; i < l; i++){
-						this.dataset(keys[i],key[keys[i]]);
-					};
-					return this;
-				};
-				
-				if (arguments.length == 2) {
-					this.setAttribute(("data-" + key),val);
-					return this;
-				};
-				
-				if (key) {
-					return this.getAttribute(("data-" + key));
-				};
-				
-				var dataset = this.dom().dataset;
-				
-				if (!dataset) {
-					dataset = {};
-					for (var i = 0, ary = iter$(this.dom().attributes), len = ary.length, atr; i < len; i++) {
-						atr = ary[i];
-						if (atr.name.substr(0,5) == 'data-') {
-							dataset[Imba.toCamelCase(atr.name.slice(5))] = atr.value;
-						};
-					};
-				};
-				
-				return dataset;
-			};
-			
-			/*
-				Get descendants of current node, optionally matching selector
-				@return {Imba.Selector}
-				*/
-			
-			tag.prototype.find = function (sel){
-				return new Imba.Selector(sel,this);
-			};
-			
-			/*
-				Get the first matching child of node
-			
-				@return {Imba.Tag}
-				*/
-			
-			tag.prototype.first = function (sel){
-				return sel ? (this.find(sel).first()) : (tag$wrap(this.dom().firstElementChild));
-			};
-			
-			/*
-				Get the last matching child of node
-			
-					node.last # returns the last child of node
-					node.last %span # returns the last span inside node
-					node.last do |el| el.text == 'Hi' # return last node with text Hi
-			
-				@return {Imba.Tag}
-				*/
-			
-			tag.prototype.last = function (sel){
-				return sel ? (this.find(sel).last()) : (tag$wrap(this.dom().lastElementChild));
-			};
-			
-			/*
-				Get the child at index
-				*/
-			
-			tag.prototype.child = function (i){
-				return tag$wrap(this.dom().children[i || 0]);
-			};
-			
-			tag.prototype.children = function (sel){
-				var nodes = new Imba.Selector(null,this,this._dom.children);
-				return sel ? (nodes.filter(sel)) : (nodes);
-			};
-			
-			tag.prototype.orphanize = function (){
-				var par;
-				if (par = this.dom().parentNode) { par.removeChild(this._dom) };
-				return this;
-			};
-			
-			tag.prototype.matches = function (sel){
-				var fn;
-				if (sel instanceof Function) {
-					return sel(this);
-				};
-				
-				if (sel.query) { sel = sel.query() };
-				if (fn = (this._dom.matches || this._dom.matchesSelector || this._dom.webkitMatchesSelector || this._dom.msMatchesSelector || this._dom.mozMatchesSelector)) {
-					return fn.call(this._dom,sel);
-				};
-			};
-			
-			/*
-				Get the first element matching supplied selector / filter
-				traversing upwards, but including the node itself.
-				@return {Imba.Tag}
-				*/
-			
-			tag.prototype.closest = function (sel){
-				if (!sel) { return this.parent() }; // should return self?!
-				var node = this;
-				if (sel.query) { sel = sel.query() };
-				
-				while (node){
-					if (node.matches(sel)) { return node };
-					node = node.parent();
-				};
-				return null;
-			};
-			
-			/*
-				Get the closest ancestor of node that matches
-				specified selector / matcher.
-			
-				@return {Imba.Tag}
-				*/
-			
-			tag.prototype.up = function (sel){
-				if (!sel) { return this.parent() };
-				return this.parent() && this.parent().closest(sel);
-			};
-			
-			tag.prototype.path = function (sel){
-				var node = this;
-				var nodes = [];
-				if (sel && sel.query) { sel = sel.query() };
-				
-				while (node){
-					if (!sel || node.matches(sel)) { nodes.push(node) };
-					node = node.parent();
-				};
-				return nodes;
-			};
-			
-			tag.prototype.parents = function (sel){
-				var par = this.parent();
-				return par ? (par.path(sel)) : ([]);
-			};
-			
-			
-			
-			tag.prototype.siblings = function (sel){
-				var par, self = this;
-				if (!(par = this.parent())) { return [] }; // FIXME
-				var ary = this.dom().parentNode.children;
-				var nodes = new Imba.Selector(null,this,ary);
-				return nodes.filter(function(n) { return n != self && (!sel || n.matches(sel)); });
-			};
-			
-			/*
-				Get the immediately following sibling of node.
-				*/
-			
-			tag.prototype.next = function (sel){
-				if (sel) {
-					var el = this;
-					while (el = el.next()){
-						if (el.matches(sel)) { return el };
-					};
-					return null;
-				};
-				return tag$wrap(this.dom().nextElementSibling);
-			};
-			
-			/*
-				Get the immediately preceeding sibling of node.
-				*/
-			
-			tag.prototype.prev = function (sel){
-				if (sel) {
-					var el = this;
-					while (el = el.prev()){
-						if (el.matches(sel)) { return el };
-					};
-					return null;
-				};
-				return tag$wrap(this.dom().previousElementSibling);
-			};
-			
-			tag.prototype.contains = function (node){
-				return this.dom().contains(node && node._dom || node);
-			};
-			
-			tag.prototype.index = function (){
-				var i = 0;
-				var el = this.dom();
-				while (el.previousSibling){
-					el = el.previousSibling;
-					i++;
-				};
-				return i;
-			};
-			
-			
-			/*
-				
-				@deprecated
-				*/
-			
-			tag.prototype.insert = function (node,pars){
-				if(!pars||pars.constructor !== Object) pars = {};
-				var before = pars.before !== undefined ? pars.before : null;
-				var after = pars.after !== undefined ? pars.after : null;
-				if (after) { before = after.next() };
-				if (node instanceof Array) {
-					node = (tag$.$fragment().setContent(node,0).end());
-				};
-				if (before) {
-					this.dom().insertBefore(node.dom(),before.dom());
-				} else {
-					this.append(node);
-				};
-				return this;
-			};
-			
-			/*
-				Focus on current node
-				@return {self}
-				*/
-			
-			tag.prototype.focus = function (){
-				this.dom().focus();
-				return this;
-			};
-			
-			/*
-				Remove focus from current node
-				@return {self}
-				*/
-			
-			tag.prototype.blur = function (){
-				this.dom().blur();
-				return this;
-			};
-			
 			tag.prototype.template = function (){
 				return null;
 			};
-			
-			/*
-				@todo Should support multiple arguments like append
-			
-				The .prepend method inserts the specified content as the first
-				child of the target node. If the content is already a child of 
-				node it will be moved to the start.
-				
-			    	node.prepend <div.top> # prepend node
-			    	node.prepend "some text" # prepend text
-			    	node.prepend [<ul>,<ul>] # prepend array
-			
-				*/
-			
-			tag.prototype.prepend = function (item){
-				var first = this._dom.childNodes[0];
-				first ? (this.insertBefore(item,first)) : (this.appendChild(item));
-				return this;
-			};
-			
-			/*
-				The .append method inserts the specified content as the last child
-				of the target node. If the content is already a child of node it
-				will be moved to the end.
-				
-				# example
-				    var root = <div.root>
-				    var item = <div.item> "This is an item"
-				    root.append item # appends item to the end of root
-			
-				    root.prepend "some text" # append text
-				    root.prepend [<ul>,<ul>] # append array
-				*/
-			
-			tag.prototype.append = function (item){
-				// possible to append blank
-				// possible to simplify on server?
-				if (!item) { return this };
-				
-				if (item instanceof Array) {
-					for (var i = 0, ary = iter$(item), len = ary.length, member; i < len; i++) {
-						member = ary[i];
-						member && this.append(member);
-					};
-				} else if ((typeof item=='string'||item instanceof String) || (typeof item=='number'||item instanceof Number)) {
-					var node = Imba.document().createTextNode(item);
-					this._dom.appendChild(node);
-					if (this._empty) { this._empty = false };
-				} else {
-					this._dom.appendChild(item._dom || item);
-					if (this._empty) { this._empty = false };
-				};
-				
-				return this;
-			};
-			
-			/*
-				Insert a node into the current node (self), before another.
-				The relative node must be a child of current node. 
-				*/
-			
-			tag.prototype.insertBefore = function (node,rel){
-				if ((typeof node=='string'||node instanceof String)) { node = Imba.document().createTextNode(node) };
-				if (node && rel) { this.dom().insertBefore((node._dom || node),(rel._dom || rel)) };
-				return this;
-			};
-			
-			/*
-				Append a single item (node or string) to the current node.
-				If supplied item is a string it will automatically. This is used
-				by Imba internally, but will practically never be used explicitly.
-				*/
-			
-			tag.prototype.appendChild = function (node){
-				if ((typeof node=='string'||node instanceof String)) { node = Imba.document().createTextNode(node) };
-				if (node) { this.dom().appendChild(node._dom || node) };
-				return this;
-			};
-			
-			/*
-				Remove a single child from the current node.
-				Used by Imba internally.
-				*/
-			
-			tag.prototype.removeChild = function (node){
-				if (node) { this.dom().removeChild(node._dom || node) };
-				return this;
-			};
-			
-			/*
-				@deprecated
-				*/
-			
-			tag.prototype.classes = function (){
-				console.log('Imba.Tag#classes is deprecated');
-				return this._dom.classList;
-			};
 		});
 		
 		return tag$.defineTag('svgelement', 'htmlelement');
@@ -1933,15 +2018,34 @@
 		});
 		
 		tag$.defineTag('input', function(tag){
-			tag.prototype.type = function(v){ return this.getAttribute('type'); }
-			tag.prototype.setType = function(v){ this.setAttribute('type',v); return this; };
-			tag.prototype.required = function(v){ return this.getAttribute('required'); }
-			tag.prototype.setRequired = function(v){ this.setAttribute('required',v); return this; };
+			tag.prototype.accept = function(v){ return this.getAttribute('accept'); }
+			tag.prototype.setAccept = function(v){ this.setAttribute('accept',v); return this; };
 			tag.prototype.disabled = function(v){ return this.getAttribute('disabled'); }
 			tag.prototype.setDisabled = function(v){ this.setAttribute('disabled',v); return this; };
-			tag.prototype.autofocus = function(v){ return this.getAttribute('autofocus'); }
-			tag.prototype.setAutofocus = function(v){ this.setAttribute('autofocus',v); return this; };
+			tag.prototype.form = function(v){ return this.getAttribute('form'); }
+			tag.prototype.setForm = function(v){ this.setAttribute('form',v); return this; };
+			tag.prototype.list = function(v){ return this.getAttribute('list'); }
+			tag.prototype.setList = function(v){ this.setAttribute('list',v); return this; };
+			tag.prototype.max = function(v){ return this.getAttribute('max'); }
+			tag.prototype.setMax = function(v){ this.setAttribute('max',v); return this; };
+			tag.prototype.maxlength = function(v){ return this.getAttribute('maxlength'); }
+			tag.prototype.setMaxlength = function(v){ this.setAttribute('maxlength',v); return this; };
+			tag.prototype.min = function(v){ return this.getAttribute('min'); }
+			tag.prototype.setMin = function(v){ this.setAttribute('min',v); return this; };
+			tag.prototype.pattern = function(v){ return this.getAttribute('pattern'); }
+			tag.prototype.setPattern = function(v){ this.setAttribute('pattern',v); return this; };
+			tag.prototype.required = function(v){ return this.getAttribute('required'); }
+			tag.prototype.setRequired = function(v){ this.setAttribute('required',v); return this; };
+			tag.prototype.size = function(v){ return this.getAttribute('size'); }
+			tag.prototype.setSize = function(v){ this.setAttribute('size',v); return this; };
+			tag.prototype.step = function(v){ return this.getAttribute('step'); }
+			tag.prototype.setStep = function(v){ this.setAttribute('step',v); return this; };
+			tag.prototype.type = function(v){ return this.getAttribute('type'); }
+			tag.prototype.setType = function(v){ this.setAttribute('type',v); return this; };
 			
+			tag.prototype.__autofocus = {dom: true,name: 'autofocus'};
+			tag.prototype.autofocus = function(v){ return this.dom().autofocus; }
+			tag.prototype.setAutofocus = function(v){ if (v != this.dom().autofocus) { this.dom().autofocus = v }; return this; };
 			tag.prototype.__value = {dom: true,name: 'value'};
 			tag.prototype.value = function(v){ return this.dom().value; }
 			tag.prototype.setValue = function(v){ if (v != this.dom().value) { this.dom().value = v }; return this; };
@@ -1968,7 +2072,16 @@
 		tag$.defineTag('ins');
 		tag$.defineTag('kbd');
 		tag$.defineTag('keygen');
-		tag$.defineTag('label');
+		tag$.defineTag('label', function(tag){
+			tag.prototype.accesskey = function(v){ return this.getAttribute('accesskey'); }
+			tag.prototype.setAccesskey = function(v){ this.setAttribute('accesskey',v); return this; };
+			tag.prototype.for = function(v){ return this.getAttribute('for'); }
+			tag.prototype.setFor = function(v){ this.setAttribute('for',v); return this; };
+			tag.prototype.form = function(v){ return this.getAttribute('form'); }
+			tag.prototype.setForm = function(v){ this.setAttribute('form',v); return this; };
+		});
+		
+		
 		tag$.defineTag('legend');
 		tag$.defineTag('li');
 		
@@ -2001,13 +2114,18 @@
 		tag$.defineTag('noscript');
 		
 		tag$.defineTag('ol');
+		
 		tag$.defineTag('optgroup', function(tag){
+			tag.prototype.label = function(v){ return this.getAttribute('label'); }
+			tag.prototype.setLabel = function(v){ this.setAttribute('label',v); return this; };
 			tag.prototype.__disabled = {dom: true,name: 'disabled'};
 			tag.prototype.disabled = function(v){ return this.dom().disabled; }
 			tag.prototype.setDisabled = function(v){ if (v != this.dom().disabled) { this.dom().disabled = v }; return this; };
 		});
 		
 		tag$.defineTag('option', function(tag){
+			tag.prototype.label = function(v){ return this.getAttribute('label'); }
+			tag.prototype.setLabel = function(v){ this.setAttribute('label',v); return this; };
 			tag.prototype.__disabled = {dom: true,name: 'disabled'};
 			tag.prototype.disabled = function(v){ return this.dom().disabled; }
 			tag.prototype.setDisabled = function(v){ if (v != this.dom().disabled) { this.dom().disabled = v }; return this; };
@@ -2019,7 +2137,13 @@
 			tag.prototype.setValue = function(v){ if (v != this.dom().value) { this.dom().value = v }; return this; };
 		});
 		
-		tag$.defineTag('output');
+		tag$.defineTag('output', function(tag){
+			tag.prototype.for = function(v){ return this.getAttribute('for'); }
+			tag.prototype.setFor = function(v){ this.setAttribute('for',v); return this; };
+			tag.prototype.form = function(v){ return this.getAttribute('form'); }
+			tag.prototype.setForm = function(v){ this.setAttribute('form',v); return this; };
+		});
+		
 		tag$.defineTag('p');
 		
 		tag$.defineTag('object', function(tag){
@@ -2037,7 +2161,14 @@
 		});
 		
 		tag$.defineTag('pre');
-		tag$.defineTag('progress');
+		tag$.defineTag('progress', function(tag){
+			tag.prototype.max = function(v){ return this.getAttribute('max'); }
+			tag.prototype.setMax = function(v){ this.setAttribute('max',v); return this; };
+			tag.prototype.__value = {dom: true,name: 'value'};
+			tag.prototype.value = function(v){ return this.dom().value; }
+			tag.prototype.setValue = function(v){ if (v != this.dom().value) { this.dom().value = v }; return this; };
+		});
+		
 		tag$.defineTag('q');
 		tag$.defineTag('rp');
 		tag$.defineTag('rt');
@@ -2059,18 +2190,21 @@
 		tag$.defineTag('section');
 		
 		tag$.defineTag('select', function(tag){
+			tag.prototype.size = function(v){ return this.getAttribute('size'); }
+			tag.prototype.setSize = function(v){ this.setAttribute('size',v); return this; };
+			tag.prototype.form = function(v){ return this.getAttribute('form'); }
+			tag.prototype.setForm = function(v){ this.setAttribute('form',v); return this; };
 			tag.prototype.multiple = function(v){ return this.getAttribute('multiple'); }
 			tag.prototype.setMultiple = function(v){ this.setAttribute('multiple',v); return this; };
-			
+			tag.prototype.__autofocus = {dom: true,name: 'autofocus'};
+			tag.prototype.autofocus = function(v){ return this.dom().autofocus; }
+			tag.prototype.setAutofocus = function(v){ if (v != this.dom().autofocus) { this.dom().autofocus = v }; return this; };
 			tag.prototype.__disabled = {dom: true,name: 'disabled'};
 			tag.prototype.disabled = function(v){ return this.dom().disabled; }
 			tag.prototype.setDisabled = function(v){ if (v != this.dom().disabled) { this.dom().disabled = v }; return this; };
 			tag.prototype.__required = {dom: true,name: 'required'};
 			tag.prototype.required = function(v){ return this.dom().required; }
 			tag.prototype.setRequired = function(v){ if (v != this.dom().required) { this.dom().required = v }; return this; };
-			tag.prototype.__readOnly = {dom: true,name: 'readOnly'};
-			tag.prototype.readOnly = function(v){ return this.dom().readOnly; }
-			tag.prototype.setReadOnly = function(v){ if (v != this.dom().readOnly) { this.dom().readOnly = v }; return this; };
 			tag.prototype.__value = {dom: true,name: 'value'};
 			tag.prototype.value = function(v){ return this.dom().value; }
 			tag.prototype.setValue = function(v){ if (v != this.dom().value) { this.dom().value = v }; return this; };
@@ -2094,9 +2228,10 @@
 			tag.prototype.setRows = function(v){ this.setAttribute('rows',v); return this; };
 			tag.prototype.cols = function(v){ return this.getAttribute('cols'); }
 			tag.prototype.setCols = function(v){ this.setAttribute('cols',v); return this; };
-			tag.prototype.autofocus = function(v){ return this.getAttribute('autofocus'); }
-			tag.prototype.setAutofocus = function(v){ this.setAttribute('autofocus',v); return this; };
 			
+			tag.prototype.__autofocus = {dom: true,name: 'autofocus'};
+			tag.prototype.autofocus = function(v){ return this.dom().autofocus; }
+			tag.prototype.setAutofocus = function(v){ if (v != this.dom().autofocus) { this.dom().autofocus = v }; return this; };
 			tag.prototype.__value = {dom: true,name: 'value'};
 			tag.prototype.value = function(v){ return this.dom().value; }
 			tag.prototype.setValue = function(v){ if (v != this.dom().value) { this.dom().value = v }; return this; };