webshims-rails 1.10.3 → 1.10.6

data/vendor/assets/javascripts/webshims/shims/combos/11.js

@@ -42,6 +42,7 @@
 			var oVal = val;
 			var thumbStyle = {};
 			var rangeStyle = {};
+			
 			if(!_noNormalize && parseFloat(val, 10) != val){
 				val = o.min + ((o.max - o.min) / 2);
 			}
@@ -51,6 +52,7 @@
 			}
 			left =  100 * ((val - o.min) / (o.max - o.min));
 			
+			if(this._init && val == o.value && oVal == val){return;}
 			this.options.value = val;
 			this.thumb.stop();
 			this.range.stop();
@@ -120,24 +122,30 @@
 			$('.ws-range-ticks', trail).remove();
 			
 			
-			$(this.orig).jProp('list').find('option').each(function(){
-				o.options[$.prop(this, 'value')] = $.prop(this, 'label');
+			$(this.orig).jProp('list').find('option:not([disabled])').each(function(){
+				o.options[$.prop(this, 'value')] = $.prop(this, 'label') || '';
 			});
 			
 			$.each(o.options, function(val, label){
 				if(!isNumber(val) || val < min || val > max){return;}
 				var left = 100 * ((val - min) / (max - min));
-				var title = o.showLabels ? ' title="'+ label +'"' : '';
+				var title = o.showLabels && label ? ' title="'+ label +'"' : '';
 				if(that.vertical){
 					left = Math.abs(left - 100);
 				}
-				trail.append('<span class="ws-range-ticks"'+ title +' style="'+(that.dirs.left)+': '+left+'%;" />');
+				
+				that.posCenter(
+					$('<span class="ws-range-ticks"'+ title +' data-label="'+label+'" style="'+(that.dirs.left)+': '+left+'%;" />').appendTo(trail)
+				);
 			});
 		},
 		readonly: function(val){
 			val = !!val;
 			this.options.readonly = val;
 			this.element.attr('aria-readonly', ''+val);
+			if(this._init){
+				this.updateMetrics();
+			}
 		},
 		disabled: function(val){
 			val = !!val;
@@ -147,6 +155,9 @@
 			} else {
 				this.element.attr({tabindex: this.options.tabindex, 'aria-disabled': 'false'});
 			}
+			if(this._init){
+				this.updateMetrics();
+			}
 		},
 		tabindex: function(val){
 			this.options.tabindex = val;
@@ -226,6 +237,24 @@
 			
 			return val;
 		},
+		addRemoveClass: function(cName, add){
+			var isIn = this.element.prop('className').indexOf(cName) != -1;
+			var action;
+			if(!add && isIn){
+				action = 'removeClass';
+				this.element.removeClass(cName);
+				this.updateMetrics();
+			} else if(add && !isIn){
+				action = 'addClass';
+				
+			}
+			if(action){
+				this.element[action](cName);
+				if(this._init){
+					this.updateMetrics();
+				}
+			}
+		},
 		addBindings: function(){
 			var leftOffset, widgetUnits, hasFocus;
 			var that = this;
@@ -265,25 +294,36 @@
 					that.value(val, false, animate);
 					eventTimer.call('input', val);
 				}
+				if(e && e.type == 'mousemove'){
+					e.preventDefault();
+				}
 			};
-			
 			var remove = function(e){
 				if(e && e.type == 'mouseup'){
 					eventTimer.call('input', o.value);
 					eventTimer.call('change', o.value);
 				}
-				that.element.removeClass('ws-active');
+				that.addRemoveClass('ws-active');
 				$(document).off('mousemove', setValueFromPos).off('mouseup', remove);
+				$(window).off('blur', removeWin);
+			};
+			var removeWin = function(e){
+				if(e.target == window){remove();}
 			};
 			var add = function(e){
+				var outerWidth;
 				e.preventDefault();
 				$(document).off('mousemove', setValueFromPos).off('mouseup', remove);
+				$(window).off('blur', removeWin);
 				if(!o.readonly && !o.disabled){
-					leftOffset = that.element.focus().addClass('ws-active').offset();
-					widgetUnits = that.element[that.dirs.width]();
+					that.element.focus();
+					that.addRemoveClass('ws-active', true);
+					leftOffset = that.element.focus().offset();
+					widgetUnits = that.element[that.dirs.innerWidth]();
 					if(!widgetUnits || !leftOffset){return;}
+					outerWidth = that.thumb[that.dirs.outerWidth]();
 					leftOffset = leftOffset[that.dirs.pos];
-					widgetUnits = 100 / (widgetUnits  - ((that.thumb[that.dirs.outerWidth]() || 2) / 2));
+					widgetUnits = 100 / widgetUnits;
 					setValueFromPos(e, o.animate);
 					$(document)
 						.on({
@@ -291,6 +331,7 @@
 							mousemove: setValueFromPos
 						})
 					;
+					$(window).on('blur', removeWin);
 					e.stopPropagation();
 				}
 			};
@@ -300,18 +341,20 @@
 					if(!o.disabled){
 						eventTimer.init('input', o.value);
 						eventTimer.init('change', o.value);
-						that.element.addClass('ws-focus');
+						that.addRemoveClass('ws-focus', true);
+						that.updateMetrics();
 					}
 					hasFocus = true;
 				},
 				blur: function(e){
 					that.element.removeClass('ws-focus ws-active');
+					that.updateMetrics();
 					hasFocus = false;
 					eventTimer.init('input', o.value);
 					eventTimer.call('change', o.value);
 				},
 				keyup: function(){
-					that.element.removeClass('ws-active');
+					that.addRemoveClass('ws-active');
 					eventTimer.call('input', o.value);
 					eventTimer.call('change', o.value);
 				},
@@ -336,7 +379,7 @@
 							step = false;
 						}
 						if (step) {
-							that.element.addClass('ws-active');
+							that.addRemoveClass('ws-active', true);
 							eventTimer.call('input', o.value);
 							e.preventDefault();
 						}
@@ -358,38 +401,88 @@
 			this.thumb.on({
 				mousedown: add
 			});
+			$(function(){
+				webshims.ready('dom-support', function(){
+					that.element.onWSOff('updateshadowdom', function(){
+						that.updateMetrics();
+					});
+				});
+				if(!$.fn.onWSOff){
+					webshims._polyfill(['dom-support']);
+				}
+			});
+		},
+		posCenter: function(elem, outerWidth){
+			var temp;
+			if(this.options.calcCenter && (!this._init || this.element[0].offsetWidth)){
+				if(!elem){
+					elem = this.thumb;
+				}
+				if(!outerWidth){
+					outerWidth = elem[this.dirs.outerWidth]();
+				}
+				outerWidth = outerWidth / -2;
+				elem.css(this.dirs.marginLeft, outerWidth);
+				
+				if(this.options.calcTrail && elem[0] == this.thumb[0]){
+					temp = this.element[this.dirs.innerHeight]();
+					elem.css(this.dirs.marginTop, (elem[this.dirs.outerHeight]() - temp) / -2);
+					this.range.css(this.dirs.marginTop, (this.range[this.dirs.outerHeight]() - temp) / -2 );
+					outerWidth *= -1;
+					this.trail
+						.css(this.dirs.left, outerWidth)
+						.css(this.dirs.right, outerWidth)
+					;
+				}
+			}
 		},
 		updateMetrics: function(){
 			var width = this.element.innerWidth();
 			this.vertical = (width && this.element.innerHeight() - width  > 10);
 			
 			this.dirs = this.vertical ? 
-				{mouse: 'pageY', pos: 'top', min: 'max', max: 'min', left: 'top', width: 'height', outerWidth: 'outerHeight'} :
-				{mouse: 'pageX', pos: 'left', min: 'min', max: 'max', left: 'left', width: 'width', outerWidth: 'outerWidth'}
+				{mouse: 'pageY', pos: 'top', min: 'max', max: 'min', left: 'top', right: 'bottom', width: 'height', innerWidth: 'innerHeight', innerHeight: 'innerWidth', outerWidth: 'outerHeight', outerHeight: 'outerWidth', marginTop: 'marginLeft', marginLeft: 'marginTop'} :
+				{mouse: 'pageX', pos: 'left', min: 'min', max: 'max', left: 'left', right: 'right', width: 'width', innerWidth: 'innerWidth', innerHeight: 'innerHeight', outerWidth: 'outerWidth', outerHeight: 'outerHeight', marginTop: 'marginTop', marginLeft: 'marginLeft'}
 			;
 			this.element
 				[this.vertical ? 'addClass' : 'removeClass']('vertical-range')
 				[this.vertical ? 'addClass' : 'removeClass']('horizontal-range')
 			;
+			this.posCenter();
 		}
 	};
 	
 	$.fn.rangeUI = function(opts){
-		opts = $.extend({readonly: false, disabled: false, tabindex: 0, min: 0, step: 1, max: 100, value: 50, input: $.noop, change: $.noop, _change: $.noop, showLabels: true, options: {}}, opts);
+		opts = $.extend({
+			readonly: false, 
+			disabled: false, 
+			tabindex: 0, 
+			min: 0, 
+			step: 1, 
+			max: 100, 
+			value: 50, 
+			input: $.noop, 
+			change: $.noop, 
+			_change: $.noop, 
+			showLabels: true, 
+			options: {},
+			calcCenter: true,
+			calcTrail: true
+		}, opts);
 		return this.each(function(){
-			$.webshims.objectCreate(rangeProto, {
+			webshims.objectCreate(rangeProto, {
 				element: {
 					value: $(this)
 				}
 			}, opts);
 		});
 	};
-	jQuery.webshims.isReady('range-ui', true);
+	webshims.isReady('range-ui', true);
 })(jQuery);
-jQuery.webshims.register('form-number-date-ui', function($, webshims, window, document, undefined, options){
+webshims.register('form-number-date-ui', function($, webshims, window, document, undefined, options){
 	"use strict";
 	var curCfg;
-	var formcfg = $.webshims.formcfg;
+	var formcfg = webshims.formcfg;
 	
 	var stopPropagation = function(e){
 		e.stopImmediatePropagation(e);
@@ -407,7 +500,7 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 		date: {
 			_create: function(){
 				var obj = {
-					splits: [$('<input type="text" class="yy" size="4" maxlength />')[0], $('<input type="text" class="mm" maxlength="2" size="2" />')[0], $('<input type="text" class="dd ws-spin" maxlength="2" size="2" />')[0]] 
+					splits: [$('<input type="text" class="yy" size="4" inputmode="numeric" />')[0], $('<input type="text" class="mm" inputmode="numeric" maxlength="2" size="2" />')[0], $('<input type="text" class="dd ws-spin" inputmode="numeric" maxlength="2" size="2" />')[0]] 
 				};
 				obj.elements = [obj.splits[0], $('<span class="ws-input-seperator" />')[0], obj.splits[1], $('<span class="ws-input-seperator" />')[0], obj.splits[2]];
 				return obj;
@@ -433,7 +526,7 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 		month: {
 			_create: function(){
 				var obj = {
-					splits: [$('<input type="text" class="yy" size="4" />')[0], $('<input type="text" class="mm ws-spin" />')[0]] 
+					splits: [$('<input type="text" class="yy" inputmode="numeric" size="4" />')[0], $('<input type="text" class="mm ws-spin" />')[0]] 
 				};
 				obj.elements = [obj.splits[0], $('<span class="ws-input-seperator" />')[0], obj.splits[1]];
 				return obj;
@@ -453,6 +546,23 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 			}
 		}
 	};
+	
+	var steps = {
+		number: {
+			step: 1
+		},
+		time: {
+			step: 60
+		},
+		month: {
+			step: 1,
+			start: new Date()
+		},
+		date: {
+			step: 1,
+			start: new Date()
+		}
+	};
 	var labelWidth = (function(){
 		var getId = function(){
 			return webshims.getID(this);
@@ -477,7 +587,8 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 		
 	(function(){
 		var monthDigits = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
-		formcfg.de = {
+		
+		formcfg.de = $.extend(true, {
 			numberFormat: {
 				",": ".",
 				".": ","
@@ -511,9 +622,9 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				showMonthAfterYear: false,
 				yearSuffix: ''
 			}
-		};
+		}, formcfg.de || {});
 		
-		formcfg.en = {
+		formcfg.en = $.extend(true, {
 			numberFormat: {
 				".": ".",
 				",": ","
@@ -545,13 +656,17 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				"showMonthAfterYear": false,
 				"yearSuffix": ""
 			}
-		};
+		}, formcfg['en'] || {});
+		if(!formcfg['en-US']){
+			formcfg['en-US'] = formcfg['en'];
+		}
+		if(!formcfg['']){
+			formcfg[''] = formcfg['en-US'];
+		}
 		
-		formcfg['en-US'] = formcfg['en-US'] || formcfg['en'];
-		formcfg[''] = formcfg[''] || formcfg['en-US'];
 		curCfg = formcfg[''];
 		
-		var createMonthKeys = function(langCfg){
+		var processLangCFG = function(langCfg){
 			if(!langCfg.date.monthkeys){
 				var create = function(i, name){
 					var strNum;
@@ -567,24 +682,25 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				$.each(langCfg.date.monthNames, create);
 				$.each(langCfg.date.monthNamesShort, create);
 			}
+			if(!langCfg.colorSigns){
+				langCfg.colorSigns = '#abcdefABCDEF';
+			}
 		};
 		
-		createMonthKeys(curCfg);
+		processLangCFG(curCfg);
 		
-		$.webshims.ready('dom-extend', function(){
-			$.webshims.activeLang({
-				register: 'form-core', 
-				callback: function(){
-					$.each(arguments, function(i, val){
-						if(formcfg[val]){
-							curCfg = formcfg[val];
-							createMonthKeys(curCfg);
-							$(document).triggerHandler('wslocalechange');
-							return false;
-						}
-					});
-				}
-			});
+		$.webshims.activeLang({
+			register: 'form-core', 
+			callback: function(){
+				$.each(arguments, function(i, val){
+					if(formcfg[val]){
+						curCfg = formcfg[val];
+						processLangCFG(curCfg);
+						$(document).triggerHandler('wslocalechange');
+						return false;
+					}
+				});
+			}
 		});
 	})();
 		
@@ -604,8 +720,6 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 			return val * 1;
 		};
 		
-		var createOpts = ['step', 'min', 'max', 'readonly', 'title', 'disabled', 'tabindex', 'placeholder', 'value'];
-		
 		
 		var formatVal = {
 			number: function(val){
@@ -644,6 +758,16 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				}
 				
 				return val;
+			},
+			color: function(val, opts){
+				var ret = '#000000';
+				if(val){
+					val = val.toLowerCase();
+					if(val.length == 7 && createHelper('color').isValid(val)) {
+						ret = val;
+					}
+				}
+				return ret;
 			}
 		};
 		
@@ -658,7 +782,7 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				
 				var p = (!opts.splitInput) ? val.trim().split(/[\.\s-\/\\]+/) : val;
 				
-				if(p.length == 2){
+				if(p.length == 2 && p[0] && p[1]){
 					p[0] = curCfg.date.monthkeys[p[0]] || p[0];
 					p[1] = curCfg.date.monthkeys[p[1]] || p[1];
 					if(p[1].length == 2){
@@ -688,27 +812,25 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 					([addZero(val[obj.yy]), addZero(val[obj.mm]), addZero(val[obj.dd])]).join('-') : 
 					''
 				;
-			}
-		};
-		
-		var steps = {
-			number: {
-				step: 1
 			},
-			time: {
-				step: 60
-			},
-			month: {
-				step: 1,
-				start: new Date()
-			},
-			date: {
-				step: 1,
-				start: new Date()
+			color: function(val, opts){
+				var ret = '#000000';
+				if(val){
+					val = val.toLowerCase();
+					if (val.indexOf('#') !== 0) {
+						val = '#' + val;
+					}
+					if(val.length == 4){
+						val = '#' + val.charAt(1) + val.charAt(1) + val.charAt(2) + val.charAt(2) + val.charAt(3) + val.charAt(3);
+					}
+					if(val.length == 7 && createHelper('color').isValid(val)) {
+						ret = val;
+					}
+				}
+				return ret;
 			}
 		};
 		
-		
 		var placeholderFormat = {
 			date: function(val, opts){
 				var hintValue = (val || '').split('-');
@@ -753,6 +875,9 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 						asValue: function(val){
 							var type = (typeof val == 'object') ? 'valueAsDate' : 'valueAsNumber';
 							return input.prop(type, val).prop('value');
+						},
+						isValid: function(val){
+							return input.prop('value', val).is(':valid') && input.prop('value') == val;
 						}
 					};
 				}
@@ -762,211 +887,80 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 		
 		steps.range = steps.number;
 		
-		
-		var spinBtnProto = {
+		var wsWidgetProto = {
 			_create: function(){
-				var i;
+				var i, that, timedMirror;
 				var o = this.options;
-				var helper = createHelper(o.type);
+				var createOpts = this.createOpts;
+				
 				this.type = o.type;
 				this.orig = o.orig;
 				
-				this.elemHelper = $('<input type="'+ this.type+'" />');
-				this.asNumber = helper.asNumber;
-				this.asValue = helper.asValue;
+				this.buttonWrapper = $('<span class="input-buttons '+this.type+'-input-buttons"></span>').insertAfter(this.element);
+				this.options.containerElements.push(this.buttonWrapper[0]);
 				
-				this.buttonWrapper = $('<span class="input-buttons '+this.type+'-input-buttons"><span unselectable="on" class="step-controls"><span class="step-up"></span><span class="step-down"></span></span></span>')
-					.insertAfter(this.element)
-				;
+				o.mirrorValidity = o.mirrorValidity && this.orig && Modernizr.formvalidation && !webshims.bugs.bustedValidity;
 				
-				if(o.splitInput){
+				if(o.splitInput && this._addSplitInputs){
 					this._addSplitInputs();
 				} else {
 					this.inputElements = this.element;
 				}
 				
-				this.options.containerElements.push(this.buttonWrapper[0]);
-				
-				if(typeof steps[this.type].start == 'object'){
+				if( steps[this.type] && typeof steps[this.type].start == 'object'){
 					steps[this.type].start = this.asNumber(steps[this.type].start);
 				}
 				
-				
-				
 				for(i = 0; i < createOpts.length; i++){
-					this[createOpts[i]](o[createOpts[i]]);
-				}
-				
-				this.element.data('wsspinner', this);
-				
-				this.addBindings();
-				
-				if(!o.min && typeof o.relMin == 'number'){
-					o.min = this.asValue(this.getRelNumber(o.relMin));
-					$.prop(this.orig, 'min', o.min);
+					if(o[createOpts[i]] != null){
+						this[createOpts[i]](o[createOpts[i]], o[createOpts[i]]);
+					}
 				}
-				
-				if(!o.max && typeof o.relMax == 'number'){
-					o.max = this.asValue(this.getRelNumber(o.relMax));
-					$.prop(this.orig, 'max', o.max);
+				if(this.type == 'color'){
+					this.inputElements.prop('maxLength', 7);
 				}
+				this.addBindings();
+				$(this.element).data('wsWidget'+o.type, this);
 				
 				this._init = true;
-			},
-			_addSplitInputs: function(){
-				if(!this.inputElements){
-					var create = splitInputs[this.type]._create();
-					this.splits = create.splits;
-					this.inputElements = $(create.elements).prependTo(this.element).filter('input');
-				}
-			},
-			parseValue: function(){
-				var value = this.inputElements.map(function(){
-					return $.prop(this, 'value');
-				}).get();
-				if(!this.options.splitInput){
-					value = value[0];
-				}
-				return parseVal[this.type](value, this.options);
-			},
-			formatValue: function(val, noSplit){
-				return formatVal[this.type](val, noSplit === false ? false : this.options);
-			},
-			placeholder: function(val){
-				var options = this.options;
-				options.placeholder = val;
-				var placeholder = val;
-				if(placeholderFormat[this.type]){
-					placeholder = placeholderFormat[this.type](val, this.options);
-				}
-				if(options.splitInput && typeof placeholder == 'object'){
-					$.each(this.splits, function(i, elem){
-						$.prop(elem, 'placeholder', placeholder[i]);
-					});
-				} else {
-					this.element.prop('placeholder', placeholder);
-				}
-			},
-			getRelNumber: function(rel){
-				var start = steps[this.type].start || 0;
-				if(rel){
-					start += rel;
-				}
-				return start;
-			},
-			addZero: addZero,
-			_setStartInRange: function(){
-				var start = this.getRelNumber(this.options.relDefaultValue);
-				if(!isNaN(this.minAsNumber) && start < this.minAsNumber){
-					start = this.minAsNumber;
-				} else if(!isNaN(this.maxAsNumber) && start > this.maxAsNumber){
-					start = this.maxAsNumber;
-				}
-				this.elemHelper.prop('valueAsNumber', start);
-				this.options.defValue = this.elemHelper.prop('value');
-				
-			},
-			reorderInputs: function(){
-				if(splitInputs[this.type]){
-					var element = this.element;
-					splitInputs[this.type].sort(element);
-					setTimeout(function(){
-						var data = webshims.data(element);
-						if(data && data.shadowData){
-							data.shadowData.shadowFocusElement = element.find('input')[0] || element[0];
-						}
-					}, 9);
-				}
-			},
-			value: function(val){
-				this.valueAsNumber = this.asNumber(val);
-				this.options.value = val;
-				if(isNaN(this.valueAsNumber) || (!isNaN(this.minAsNumber) && this.valueAsNumber < this.minAsNumber) || (!isNaN(this.maxAsNumber) && this.valueAsNumber > this.maxAsNumber)){
-					this._setStartInRange();
-				} else {
-					this.elemHelper.prop('value', val);
-					this.options.defValue = "";
-				}
 				
-				val = formatVal[this.type](val, this.options);
-				if(this.options.splitInput){
+				if(o.mirrorValidity){
+					that = this;
+					timedMirror = function(){
+						clearTimeout(timedMirror._timerDealy);
+						timedMirror._timerDealy = setTimeout(timedMirror._wsexec, 9);
+					};
+					timedMirror._wsexec = function(){
+						clearTimeout(timedMirror._timerDealy);
+						that.mirrorValidity(true);
+					};
 					
-					$.each(this.splits, function(i, elem){
-						$.prop(elem, 'value', val[i]);
-					});
-				} else {
-					this.element.prop('value', val);
-				}
-				
-				this._propertyChange('value');
-			},
-			initDataList: function(){
-				var listTimer;
-				var that = this;
-				var updateList = function(){
-					$(that.orig)
-						.jProp('list')
-						.off('updateDatalist', updateList)
-						.on('updateDatalist', updateList)
-					;
-					clearTimeout(listTimer);
-					listTimer = setTimeout(function(){
-						if(that.list){
-							that.list();
+					timedMirror();
+					$(this.orig).on('change input', function(e){
+						if(e.type == 'input'){
+							timedMirror();
+						} else {
+							timedMirror._wsexec();
 						}
-					}, 9);
-					
-				};
-				
-				$(this.orig).onTrigger('listdatalistchange', updateList);
-			},
-			getOptions: function(){
-				var options = {};
-				var datalist = $(this.orig).jProp('list');
-				datalist.find('option').each(function(){
-					options[$.prop(this, 'value')] = $.prop(this, 'label');
-				});
-				return [options, datalist.data('label')];
-			},
-			list: function(val){
-				if(this.type == 'number' || this.type == 'time'){
-					this.element.attr('list', $.attr(this.orig, 'list'));
-				}
-				this.options.list = val;
-				this._propertyChange('list');
-			},
-			_propertyChange: $.noop,
-			tabindex: function(val){
-				this.options.tabindex = val;
-				this.inputElements.prop('tabindex', this.options.tabindex);
-			},
-			title: function(val){
-				this.options.title = val;
-				this.element.prop('title', this.options.title);
-			},
-			
-			min: function(val){
-				this.elemHelper.prop('min', val);
-				this.minAsNumber = this.asNumber(val);
-				if(this.valueAsNumber != null && isNaN(this.valueAsNumber)){
-					this._setStartInRange();
+					});
 				}
-				this.options.min = val;
-				this._propertyChange('min');
 			},
-			max: function(val){
-				this.elemHelper.prop('max', val);
-				this.maxAsNumber = this.asNumber(val);
-				if(this.valueAsNumber != null && isNaN(this.valueAsNumber)){
-					this._setStartInRange();
+			mirrorValidity: function(_noTest){
+				//
+				if(this._init && this.options.mirrorValidity){
+					if(!_noTest){
+						$.prop(this.orig, 'validity');
+					}
+					var message = $(this.orig).getErrorMessage();
+					if(message !== this.lastErrorMessage){
+						this.inputElements.prop('setCustomValidity', function(i, val){
+							if(val._supvalue){
+								val._supvalue.call(this, message);
+							}
+						});
+						this.lastErrorMessage = message;
+					}
 				}
-				this.options.max = val;
-				this._propertyChange('max');
-			},
-			step: function(val){
-				var defStep = steps[this.type];
-				this.options.step = val;
-				this.elemHelper.prop('step', retDefault(val, defStep.step));
 			},
 			addBindings: function(){
 				var isFocused;
@@ -1019,6 +1013,9 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 						var val;
 						clearTimeout(timer);
 						val = that.parseValue();
+						if(that.type == 'color'){
+							that.inputElements.val(val);
+						}
 						$.prop(that.orig, 'value', val);
 						eventTimer.call('input', val);
 						if(!e || e.type != 'wsupdatevalue'){
@@ -1055,6 +1052,7 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 					;
 					setTimeout(function(){
 						if(that.popover){
+							that.popover.element.on('wspopoverhide', onBlur);
 							$('> *', that.popover.element)
 								.on({
 									'focusin': onFocus,
@@ -1135,7 +1133,7 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 									e.preventDefault();
 								}
 							}
-						}
+						};
 					})()
 				};
 				var mouseDownInit = function(){
@@ -1159,28 +1157,6 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 					};
 				})();
 				
-				['stepUp', 'stepDown'].forEach(function(name){
-					step[name] = function(factor){
-						if(!o.disabled && !o.readonly){
-							if(!isFocused){
-								mouseDownInit();
-							}
-							var ret = false;
-							if (!factor) {
-								factor = 1;
-							}
-							try {
-								that.elemHelper[name](factor);
-								ret = that.elemHelper.prop('value');
-								that.value(ret);
-								eventTimer.call('input', ret);
-							} catch (er) {}
-							return ret;
-						}
-					};
-				});
-				
-				
 				
 				this.buttonWrapper.on('mousedown', mouseDownInit);
 				
@@ -1197,960 +1173,415 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				
 				this.inputElements.on(elementEvts);
 				
-				if(!o.noSpinbtn){
-					spinEvents[$.fn.mwheelIntent ? 'mwheelIntent' : 'mousewheel'] = function(e, delta){
-						if(delta && isFocused && !o.disabled){
-							step[delta > 0 ? 'stepUp' : 'stepDown']();
-							e.preventDefault();
-						}
-					};
-					spinEvents.keydown = function(e){
-						if(o.list || e.isDefaultPrevented() || $.attr(this, 'list')){return;}
-						var stepped = true;
-						var code = e.keyCode;
-						if (code == 38) {
-							step.stepUp();
-						} else if (code == 40) {
-							step.stepDown();
-						} else {
-							stepped = false;
-						}
-						if(stepped){
-							e.preventDefault();
-						}
-					};
-					
-					spinElement.attr({'autocomplete': 'off', role: 'spinbutton'}).on(spinEvents);
-				}
-				
-				
-				if(!o.splitInput){
-					$(document).on('wslocalechange',function(){
-						if(o.value){
-							that.value(o.value);
-						}
-
-						if(placeholderFormat[that.type] && o.placeholder){
-							that.placeholder(o.placeholder);
-						}
+				if(steps[this.type]){
+					['stepUp', 'stepDown'].forEach(function(name){
+						step[name] = function(factor){
+							if(!o.disabled && !o.readonly){
+								if(!isFocused){
+									mouseDownInit();
+								}
+								var ret = false;
+								if (!factor) {
+									factor = 1;
+								}
+								try {
+									that.elemHelper[name](factor);
+									ret = that.elemHelper.prop('value');
+									that.value(ret);
+									eventTimer.call('input', ret);
+								} catch (er) {}
+								return ret;
+							}
+						};
 					});
-				} else {
-					$(document).onTrigger('wslocalechange',function(){
-						that.reorderInputs();
-					});
-				}
-				
-				$('.step-up', this.buttonWrapper)
-					.on({
-						'mousepressstart mousepressend': mousePress,
-						'mousedown mousepress': function(e){
-							step.stepUp();
-						}
-					})
-				;
-				$('.step-down', this.buttonWrapper)
-					.on({
-						'mousepressstart mousepressend': mousePress,
-						'mousedown mousepress': function(e){
-							step.stepDown();
-						}
-					})
-				;
-				initChangeEvents();
-			}
-		};
-		
-		['readonly', 'disabled'].forEach(function(name){
-			spinBtnProto[name] = function(val){
-				if(this.options[name] != val || !this._init){
-					this.options[name] = !!val;
-					if(name == 'readonly' && this.options.noInput){
-						this.element
-							.prop(name, true)
-							.attr({'aria-readonly': this.options[name]})
-						;
-					} else {
-						this.element.prop(name, this.options[name]);
+					if(!o.noSpinbtn){
+						spinEvents[$.fn.mwheelIntent ? 'mwheelIntent' : 'mousewheel'] = function(e, delta){
+							if(delta && isFocused && !o.disabled){
+								step[delta > 0 ? 'stepUp' : 'stepDown']();
+								e.preventDefault();
+							}
+						};
+						spinEvents.keydown = function(e){
+							if(o.list || e.isDefaultPrevented() || $.attr(this, 'list')){return;}
+							var stepped = true;
+							var code = e.keyCode;
+							if (code == 38) {
+								step.stepUp();
+							} else if (code == 40) {
+								step.stepDown();
+							} else {
+								stepped = false;
+							}
+							if(stepped){
+								e.preventDefault();
+							}
+						};
+						
+						spinElement.attr({'autocomplete': 'off', role: 'spinbutton'}).on(spinEvents);
 					}
-					this.buttonWrapper[this.options[name] ? 'addClass' : 'removeClass']('ws-'+name);
+					$(this.buttonWrapper)
+						.on('mousepressstart mousepressend', '.step-up, .step-down', mousePress)
+						.on('mousedown mousepress', '.step-up', function(e){
+								step.stepUp();
+						})
+						.on('mousedown mousepress', '.step-down', function(e){
+								step.stepDown();
+						})
+					;
 				}
-			};
-		});
-		
-		
-		$.fn.spinbtnUI = function(opts){
-			opts = $.extend({
-				monthNames: 'monthNames',
-				size: 1,
-				startView: 0
-			}, opts);
-			return this.each(function(){
-				$.webshims.objectCreate(spinBtnProto, {
-					element: {
-						value: $(this)
-					}
-				}, opts);
-			});
-		};
-	})();
-	
-	(function(){
-		var picker = {};
-		var disable = {
-			
-		};
-		
-		var getDateArray = function(date){
-			var ret = [date.getFullYear(), addZero(date.getMonth() + 1), addZero(date.getDate())];
-			ret.month = ret[0]+'-'+ret[1];
-			ret.date = ret[0]+'-'+ret[1]+'-'+ret[2];
-			return ret;
-		};
-		var today = getDateArray(new Date());
+				if(this.type != 'color'){
+					(function(){
+						var localeChange ;
+						if(!o.splitInput){
+							localeChange = function(){
+								if(o.value){
+									that.value(o.value);
+								}
 		
-		var _setFocus = function(element, _noFocus){
-			var setFocus, that;
-			element = $(element || this.activeButton);
-			this.activeButton.attr({tabindex: '-1', 'aria-selected': 'false'});
-			this.activeButton = element.attr({tabindex: '0', 'aria-selected': 'true'});
-			this.index = this.buttons.index(this.activeButton[0]);
-			
-			clearTimeout(this.timer);
-			
-			if(!this.popover.openedByFocus && !_noFocus){
-				that = this;
-				setFocus = function(noTrigger){
-					clearTimeout(that.timer);
-					that.timer = setTimeout(function(){
-						if(element[0]){
-							element[0].focus();
-							if(noTrigger !== true && !element.is(':focus')){
-								setFocus(true);
-							}
+								if(placeholderFormat[that.type] && o.placeholder){
+									that.placeholder(o.placeholder);
+								}
+							};
+						} else {
+							localeChange = function(){
+								that.reorderInputs();
+							};
+							that.reorderInputs();
 						}
-					}, that.popover.isVisible ? 99 : 360);
-				};
-				this.popover.activateElement(element);
-				setFocus();
-			}
-			
-		};
-		
-		var _initialFocus = function(){
-			var sel;
-			if(this.popover.navedInitFocus){
-				sel = this.popover.navedInitFocus.sel || this.popover.navedInitFocus;
-				if((!this.activeButton || !this.activeButton[0]) && this.buttons[sel]){
-					this.activeButton = this.buttons[sel]();
-				} else if(sel){
-					this.activeButton = $(sel, this.element);
+						$(that.orig).onWSOff('wslocalechange', localeChange);
+					})();
 				}
 				
-				if(!this.activeButton[0] && this.popover.navedInitFocus.alt){
-					this.activeButton = this.buttons[this.popover.navedInitFocus.alt]();
+				initChangeEvents();
+			},
+			value: function(val){
+				if(!this._init || val !== this.options.value){
+					this.element.val(this.formatValue(val));
+					this.options.value = val;
+					this._propertyChange('value');
+					this.mirrorValidity();
 				}
-			}
-			
-			if(!this.activeButton || !this.activeButton[0]){
-				this.activeButton = this.buttons.filter('.checked-value');
-			}
-			
-			if(!this.activeButton[0]){
-				this.activeButton = this.buttons.filter('.this-value');
-			}
-			if(!this.activeButton[0]){
-				this.activeButton = this.buttons.eq(0);
-			}
-			
-			this.setFocus(this.activeButton, this.opts.noFocus);
-		};
-		
-		
-		webshims.ListBox = function (element, popover, opts){
-			this.element = $('ul', element);
-			this.popover = popover;
-			this.opts = opts || {};
-			this.buttons = $('button:not(:disabled)', this.element);
-			
-			
-			this.ons(this);
-			this._initialFocus();
-		};
-		
-		webshims.ListBox.prototype = {
-			setFocus: _setFocus,
-			_initialFocus: _initialFocus,
-			prev: function(){
-				var index = this.index - 1;
-				if(index < 0){
-					if(this.opts.prev){
-						this.popover.navedInitFocus = 'last';
-						this.popover.actionFn(this.opts.prev);
-						this.popover.navedInitFocus = false;
-					}
-				} else {
-					this.setFocus(this.buttons.eq(index));
+				
+			},
+			required: function(val, boolVal){
+				this.inputElements.attr({'aria-required': ''+boolVal});
+				this.mirrorValidity();
+			},
+			parseValue: function(){
+				var value = this.inputElements.map(function(){
+					return $.prop(this, 'value');
+				}).get();
+				if(!this.options.splitInput){
+					value = value[0];
 				}
+				return parseVal[this.type](value, this.options);
 			},
-			next: function(){
-				var index = this.index + 1;
-				if(index >= this.buttons.length){
-					if(this.opts.next){
-						this.popover.navedInitFocus = 'first';
-						this.popover.actionFn(this.opts.next);
-						this.popover.navedInitFocus = false;
-					}
+			formatValue: function(val, noSplit){
+				return formatVal[this.type](val, noSplit === false ? false : this.options);
+			},
+			createOpts: ['readonly', 'title', 'disabled', 'tabindex', 'placeholder', 'value', 'required'],
+			placeholder: function(val){
+				var options = this.options;
+				options.placeholder = val;
+				var placeholder = val;
+				if(placeholderFormat[this.type]){
+					placeholder = placeholderFormat[this.type](val, this.options);
+				}
+				if(options.splitInput && typeof placeholder == 'object'){
+					$.each(this.splits, function(i, elem){
+						$.prop(elem, 'placeholder', placeholder[i]);
+					});
 				} else {
-					this.setFocus(this.buttons.eq(index));
+					this.element.prop('placeholder', placeholder);
 				}
 			},
-			ons: function(that){
-				this.element
-					.on({
-						'keydown': function(e){
-							var handled;
-							var key = e.keyCode;
-							if(e.ctrlKey){return;}
-							if(key == 36 || key == 33){
-								that.setFocus(that.buttons.eq(0));
-								handled = true;
-							} else if(key == 34 || key == 35){
-								that.setFocus(that.buttons.eq(that.buttons.length - 1));
-								handled = true;
-							} else if(key == 38 || key == 37){
-								that.prev();
-								handled = true;
-							} else if(key == 40 || key == 39){
-								that.next();
-								handled = true;
-							}
-							if(handled){
-								return false;
-							}
+			initDataList: function(){
+				var listTimer;
+				var that = this;
+				var updateList = function(){
+					$(that.orig)
+						.jProp('list')
+						.off('updateDatalist', updateList)
+						.on('updateDatalist', updateList)
+					;
+					clearTimeout(listTimer);
+					listTimer = setTimeout(function(){
+						if(that.list){
+							that.list();
 						}
-					})
-				;
-			}
-		};
-		
-		webshims.Grid = function (element, popover, opts){
-			this.element = $('tbody', element);
-			this.popover = popover;
-			this.opts = opts || {};
-			this.buttons = $('button:not(:disabled,.othermonth)', this.element);
-			
-			this.ons(this);
-			
-			this._initialFocus();
-			if(this.popover.openedByFocus){
-				this.popover.activeElement = this.activeButton;
-			}
-		};
-		
-		
-		
-		webshims.Grid.prototype = {
-			setFocus: _setFocus,
-			_initialFocus: _initialFocus,
-			
-			first: function(){
-				this.setFocus(this.buttons.eq(0));
+					}, 9);
+					
+				};
+				
+				$(this.orig).onTrigger('listdatalistchange', updateList);
 			},
-			last: function(){
-				this.setFocus(this.buttons.eq(this.buttons.length - 1));
+			getOptions: function(){
+				var options = {};
+				var datalist = $(this.orig).jProp('list');
+				datalist.find('option').each(function(){
+					options[$.prop(this, 'value')] = $.prop(this, 'label');
+				});
+				return [options, datalist.data('label')];
 			},
-			upPage: function(){
-				$('.ws-picker-header > button:not(:disabled)', this.popover.element).trigger('click');
+			list: function(val){
+				if(this.type == 'number' || this.type == 'time'){
+					this.element.attr('list', $.attr(this.orig, 'list'));
+				}
+				this.options.list = val;
+				this._propertyChange('list');
 			},
-			downPage: function(){
-				this.activeButton.filter(':not([data-action="changeInput"])').trigger('click');
+			_propertyChange: $.noop,
+			tabindex: function(val){
+				this.options.tabindex = val;
+				this.inputElements.prop('tabindex', this.options.tabindex);
+				$('button', this.buttonWrapper).prop('tabindex', this.options.tabindex);
 			},
-			ons: function(that){
-				this.element
-					.on({
-						'keydown': function(e){
-							var handled;
-							var key = e.keyCode;
-							
-							if(e.shiftKey){return;}
-							
-							if((e.ctrlKey && key == 40)){
-								handled = 'downPage';
-							} else if((e.ctrlKey && key == 38)){
-								handled = 'upPage';
-							} else if(key == 33 || (e.ctrlKey && key == 37)){
-								handled = 'prevPage';
-							} else if(key == 34 || (e.ctrlKey && key == 39)){
-								handled = 'nextPage';
-							} else if(e.keyCode == 36 || e.keyCode == 33){
-								handled = 'first';
-							} else if(e.keyCode == 35){
-								handled = 'last';
-							} else if(e.keyCode == 38){
-								handled = 'up';
-							} else if(e.keyCode == 37){
-								handled = 'prev';
-							} else if(e.keyCode == 40){
-								handled = 'down';
-							} else if(e.keyCode == 39){
-								handled = 'next';
-							}
-							if(handled){
-								that[handled]();
-								return false;
-							}
-						}
-					})
-				;
-			}
-		};
-		$.each({
-			prevPage: {get: 'last', action: 'prev'}, 
-			nextPage: {get: 'first', action: 'next'}
-		}, function(name, val){
-			webshims.Grid.prototype[name] = function(){
-				if(this.opts[val.action]){
-					this.popover.navedInitFocus = {
-						sel: 'button[data-id="'+ this.activeButton.attr('data-id') +'"]:not(:disabled,.othermonth)',
-						alt: val.get
-					};
-					this.popover.actionFn(this.opts[val.action]);
-					this.popover.navedInitFocus = false;
-				}
-			};
-		});
-		
-		$.each({
-			up: {traverse: 'prevAll', get: 'last', action: 'prev', reverse: true}, 
-			down: {traverse: 'nextAll', get: 'first', action: 'next'}
-		}, function(name, val){
-			webshims.Grid.prototype[name] = function(){
-				var cellIndex = this.activeButton.closest('td').prop('cellIndex');
-				var sel = 'td:nth-child('+(cellIndex + 1)+') button:not(:disabled,.othermonth)';
-				var button = this.activeButton.closest('tr')[val.traverse]();
-				
-				if(val.reverse){
-					button = $(button.get().reverse());
-				}
-				button = button.find(sel)[val.get]();
-				
-				if(!button[0]){
-					if(this.opts[val.action]){
-						this.popover.navedInitFocus = sel+':'+val.get;
-						this.popover.actionFn(this.opts[val.action]);
-						this.popover.navedInitFocus = false;
-					}
-				} else {
-					this.setFocus(button.eq(0));
-				}
-			};
-		});
-		
-		$.each({
-			prev: {traverse: 'prevAll',get: 'last', reverse: true}, 
-			next: {traverse: 'nextAll', get: 'first'}
-		}, function(name, val){
-			webshims.Grid.prototype[name] = function(){
-				var sel = 'button:not(:disabled,.othermonth)';
-				var button = this.activeButton.closest('td')[val.traverse]('td');
-				if(val.reverse){
-					button = $(button.get().reverse());
-				}
-				button = button.find(sel)[val.get]();
-				if(!button[0]){
-					button = this.activeButton.closest('tr')[val.traverse]('tr');
-					if(val.reverse){
-						button = $(button.get().reverse());
-					}
-					button = button.find(sel)[val.get]();
+			title: function(val){
+				if(!val && this.orig && $.attr(this.orig, 'title') == null){
+					val = null;
 				}
-				
-				if(!button[0]){
-					if(this.opts[name]){
-						this.popover.navedInitFocus = val.get;
-						this.popover.actionFn(this.opts[name]);
-						this.popover.navedInitFocus = false;
-					}
+				this.options.title = val;
+				if(val == null){
+					this.inputElements.removeAttr('title');
 				} else {
-					this.setFocus(button.eq(0));
+					this.inputElements.prop('title', this.options.title);
 				}
-			};
-		});
-		
-		picker.getWeek = function(date){
-			var onejan = new Date(date.getFullYear(),0,1);
-			return Math.ceil((((date - onejan) / 86400000) + onejan.getDay()+1)/7);
-		};
-		picker.getYearList = function(value, data){
-			var j, i, val, disabled, lis, prevDisabled, nextDisabled, classStr, classArray, start;
-			
-			
-			var size = data.options.size;
-			var max = data.options.max.split('-');
-			var min = data.options.min.split('-');
-			var currentValue = data.options.value.split('-');
-			var xthCorrect = 0;
-			var enabled = 0;
-			var str = '';
-			var rowNum = 0;
-			
-			if(data.options.useDecadeBase == 'max' && max[0]){
-				xthCorrect = 11 - (max[0] % 12);
-			} else if(data.options.useDecadeBase == 'min' && min[0]){
-				xthCorrect = 11 - (min[0] % 12);
 			}
-			
-			value = value[0] * 1;
-			start = value - ((value + xthCorrect) % (12 * size));
-			
-			
-			
-			for(j = 0; j < size; j++){
-				if(j){
-					start += 12;
-				}  else {
-					prevDisabled = picker.isInRange([start-1], max, min) ? {'data-action': 'setYearList','value': start-1} : false;
-				}
-				
-				str += '<div class="year-list picker-list ws-index-'+ j +'"><div class="ws-picker-header"><button disabled="disabled">'+ start +' – '+(start + 11)+'</button></div>';
-				lis = [];
-				for(i = 0; i < 12; i++){
-					val = start + i ;
-					classArray = [];
-					if( !picker.isInRange([val], max, min) ){
-						disabled = ' disabled=""';
-					} else {
-						disabled = '';
-						enabled++;
-					}
-					
-					if(val == today[0]){
-						classArray.push('this-value');
-					}
-					
-					if(currentValue[0] == val){
-						classArray.push('checked-value');
-					}
-					
-					classStr = classArray.length ? ' class="'+ (classArray.join(' ')) +'"' : '';
-					
-					if(i && !(i % 3)){
-						rowNum++;
-						lis.push('</tr><tr class="ws-row-'+ rowNum +'">');
-					}
-					lis.push('<td class="ws-item-'+ i +'" role="presentation"><button  data-id="year-'+ i +'" type="button"'+ disabled + classStr +' data-action="setMonthList" value="'+val+'" tabindex="-1" role="gridcell">'+val+'</button></td>');
-				}
-				if(j == size - 1){
-					nextDisabled = picker.isInRange([val+1], max, min) ? {'data-action': 'setYearList','value': val+1} : false;
-				}
-				str += '<div class="picker-grid"><table role="grid" aria-label="'+ start +' – '+(start + 11)+'"><tbody><tr class="ws-row-0">'+ (lis.join(''))+ '</tr></tbody></table></div></div>';
-			}
-			
-			return {
-				enabled: enabled,
-				main: str,
-				next: nextDisabled,
-				prev: prevDisabled,
-				type: 'Grid'
-			};
 		};
 		
 		
-		picker.getMonthList = function(value, data){
-			
-			var j, i, name, val, disabled, lis, fullyDisabled, prevDisabled, nextDisabled, classStr, classArray;
-			var o = data.options;
-			var size = o.size;
-			var max = o.max.split('-');
-			var min = o.min.split('-');
-			var currentValue = o.value.split('-');
-			var enabled = 0;
-			var rowNum = 0;
-			var str = '';
-			
-			value = value[0] - Math.floor((size - 1) / 2);
-			for(j = 0; j < size; j++){
-				if(j){
-					value++;
-				} else {
-					prevDisabled = picker.isInRange([value-1], max, min) ? {'data-action': 'setMonthList','value': value-1} : false;
-				}
-				if(j == size - 1){
-					nextDisabled = picker.isInRange([value+1], max, min) ? {'data-action': 'setMonthList','value': value+1} : false;
-				}
-				lis = [];
-				
-				if( !picker.isInRange([value, '01'], max, min) && !picker.isInRange([value, '12'], max, min)){
-					disabled = ' disabled=""';
-					fullyDisabled = true;
-				} else {
-					fullyDisabled = false;
-					disabled = '';
-				}
-				
-				if(o.minView >= 1){
-					disabled = ' disabled=""';
-				}
-				
-				str += '<div class="month-list picker-list ws-index-'+ j +'"><div class="ws-picker-header">';
-				
-				str += o.selectNav ? 
-					'<select data-action="setMonthList" class="year-select">'+ picker.createYearSelect(value, max, min).join('') +'</select>' : 
-					'<button data-action="setYearList"'+disabled+' value="'+ value +'" tabindex="-1">'+ value +'</button>';
-				str += '</div>';
-				
-				for(i = 0; i < 12; i++){
-					val = curCfg.date.monthkeys[i+1];
-					name = (curCfg.date[o.monthNames] || curCfg.date.monthNames)[i];
-					classArray = [];
-					if(fullyDisabled || !picker.isInRange([value, val], max, min) ){
-						disabled = ' disabled=""';
-					} else {
-						disabled = '';
-						enabled++;
-					}
-					
-					if(value == today[0] && today[1] == val){
-						classArray.push('this-value');
-					}
-					
-					if(currentValue[0] == value && currentValue[1] == val){
-						classArray.push('checked-value');
-					}
-					
-					classStr = (classArray.length) ? ' class="'+ (classArray.join(' ')) +'"' : '';
-					if(i && !(i % 3)){
-						rowNum++;
-						lis.push('</tr><tr class="ws-row-'+ rowNum +'">');
+		['readonly', 'disabled'].forEach(function(name){
+			var isDisabled = name == 'disabled';
+			wsWidgetProto[name] = function(val, boolVal){
+				if(this.options[name] != boolVal || !this._init){
+					this.options[name] = !!boolVal;
+					this.inputElements.prop(name, this.options[name]);
+					this.buttonWrapper[this.options[name] ? 'addClass' : 'removeClass']('ws-'+name);
+					if(isDisabled){
+						$('button', this.buttonWrapper).prop('disabled', this.options[name]);
 					}
-
-					lis.push('<td class="ws-item-'+ i +'" role="presentation"><button data-id="month-'+ i +'" type="button"'+ disabled + classStr +' data-action="'+ (data.type == 'month' ? 'changeInput' : 'setDayList' ) +'" value="'+value+'-'+val+'" tabindex="-1" role="gridcell" aria-label="'+ curCfg.date.monthNames[i] +'">'+name+'</button></td>');
-					
 				}
-				
-				str += '<div class="picker-grid"><table role="grid" aria-label="'+value+'"><tbody><tr class="ws-row-0">'+ (lis.join(''))+ '</tr></tbody></table></div></div>';
-			}
-			
-			return {
-				enabled: enabled,
-				main: str,
-				prev: prevDisabled,
-				next: nextDisabled,
-				type: 'Grid'
 			};
-		};
-		
-		
-		picker.getDayList = function(value, data){
-			
-			var j, i, k, day, nDay, name, val, disabled, lis,  prevDisabled, nextDisabled, addTr, week, rowNum;
-			
-			var lastMotnh, curMonth, otherMonth, dateArray, monthName, fullMonthName, buttonStr, date2, classArray;
-			var o = data.options;
-			var size = o.size;
-			var max = o.max.split('-');
-			var min = o.min.split('-');
-			var currentValue = o.value.split('-');
-			var monthNames = curCfg.date[o.monthNamesHead] || curCfg.date[o.monthNames] || curCfg.date.monthNames; 
-			var enabled = 0;
-			var str = [];
-			var date = new Date(value[0], value[1] - 1, 1);
-			
-			date.setMonth(date.getMonth()  - Math.floor((size - 1) / 2));
-			
-			for(j = 0;  j < size; j++){
-				date.setDate(1);
-				lastMotnh = date.getMonth();
-				rowNum = 0;
-				if(!j){
-					date2 = new Date(date.getTime());
-					date2.setDate(-1);
-					dateArray = getDateArray(date2);
-					prevDisabled = picker.isInRange(dateArray, max, min) ? {'data-action': 'setDayList','value': dateArray[0]+'-'+dateArray[1]} : false;
-				}
+		});
+		
+		var spinBtnProto = $.extend({}, wsWidgetProto, {
+			_create: function(){
+				var o = this.options;
+				var helper = createHelper(o.type);
 				
-				dateArray = getDateArray(date);
+				this.elemHelper = $('<input type="'+ o.type+'" />');
+				this.asNumber = helper.asNumber;
+				this.asValue = helper.asValue;
 				
-				str.push('<div class="day-list picker-list ws-index-'+ j +'"><div class="ws-picker-header">');
-				if( o.selectNav ){
-					monthName = ['<select data-action="setDayList" class="month-select" tabindex="0">'+ picker.createMonthSelect(dateArray, max, min, monthNames).join('') +'</select>', '<select data-action="setDayList" class="year-select" tabindex="0">'+ picker.createYearSelect(dateArray[0], max, min, '-'+dateArray[1]).join('') +'</select>'];
-					if(curCfg.date.showMonthAfterYear){
-						monthName.reverse();
-					}
-					str.push( monthName.join(' ') );
-				} 
+				wsWidgetProto._create.apply(this, arguments);
+				this._init = false;
 				
-				fullMonthName = [curCfg.date.monthNames[(dateArray[1] * 1) - 1], dateArray[0]];
-				monthName = [monthNames[(dateArray[1] * 1) - 1], dateArray[0]];
-				if(curCfg.date.showMonthAfterYear){
-					monthName.reverse();
-					fullMonthName.reverse();
-				}
+				this.buttonWrapper.html('<span unselectable="on" class="step-controls"><span class="step-up"></span><span class="step-down"></span></span>');
 				
-				if(!data.options.selectNav) {
-					str.push(  
-						'<button data-action="setMonthList"'+ (o.minView >= 2 ? ' disabled="" ' : '') +' value="'+ dateArray.date +'" tabindex="-1">'+ monthName.join(' ') +'</button>'
-					);
+				if(this.type == 'number'){
+					this.inputElements.attr('inputmode', 'numeric');
 				}
 				
 				
-				str.push('</div><div class="picker-grid"><table role="grid" aria-label="'+ fullMonthName.join(' ')  +'"><thead><tr>');
+				if(!o.min && typeof o.relMin == 'number'){
+					o.min = this.asValue(this.getRelNumber(o.relMin));
+					$.prop(this.orig, 'min', o.min);
+				}
 				
-				if(data.options.showWeek){
-					str.push('<th class="week-header">'+ curCfg.date.weekHeader +'</th>');
+				if(!o.max && typeof o.relMax == 'number'){
+					o.max = this.asValue(this.getRelNumber(o.relMax));
+					$.prop(this.orig, 'max', o.max);
 				}
-				for(k = curCfg.date.firstDay; k < curCfg.date.dayNamesShort.length; k++){
-					str.push('<th class="day-'+ k +'"><abbr title="'+ curCfg.date.dayNames[k] +'">'+ curCfg.date.dayNamesShort[k] +'</abbr></th>');
+				this._init = true;
+			},
+			createOpts: ['step', 'min', 'max', 'readonly', 'title', 'disabled', 'tabindex', 'placeholder', 'value', 'required'],
+			_addSplitInputs: function(){
+				if(!this.inputElements){
+					var create = splitInputs[this.type]._create();
+					this.splits = create.splits;
+					this.inputElements = $(create.elements).prependTo(this.element).filter('input');
 				}
-				k = curCfg.date.firstDay;
-				while(k--){
-					str.push('<th class="day-'+ k +'"><abbr title="'+ curCfg.date.dayNames[k] +'">'+ curCfg.date.dayNamesShort[k] +'</abbr></th>');
+			},
+			
+			getRelNumber: function(rel){
+				var start = steps[this.type].start || 0;
+				if(rel){
+					start += rel;
 				}
-				str.push('</tr></thead><tbody><tr class="ws-row-0">');
-				
-				if(data.options.showWeek) {
-					week = picker.getWeek(date);
-					str.push('<td class="week-cell">'+ week +'</td>');
+				return start;
+			},
+			addZero: addZero,
+			_setStartInRange: function(){
+				var start = this.getRelNumber(this.options.relDefaultValue);
+				if(!isNaN(this.minAsNumber) && start < this.minAsNumber){
+					start = this.minAsNumber;
+				} else if(!isNaN(this.maxAsNumber) && start > this.maxAsNumber){
+					start = this.maxAsNumber;
 				}
+				this.elemHelper.prop('valueAsNumber', start);
+				this.options.defValue = this.elemHelper.prop('value');
 				
-				for (i = 0; i < 99; i++) {
-					addTr = (i && !(i % 7));
-					curMonth = date.getMonth();
-					otherMonth = lastMotnh != curMonth;
-					day = date.getDay();
-					classArray = [];
-					
-					if(addTr && otherMonth ){
-						str.push('</tr>');
-						break;
-					}
-					if(addTr){
-						rowNum++;
-						str.push('</tr><tr class="ws-row-'+ rowNum +'">');
-						if(data.options.showWeek) {
-							week++;
-							str.push('<td class="week-cell">'+ week +'</td>');
-						}
-					}
-					
-					if(!i){
-						
-						if(day != curCfg.date.firstDay){
-							nDay = day - curCfg.date.firstDay;
-							if(nDay < 0){
-								nDay += 7;
-							}
-							date.setDate(date.getDate() - nDay);
-							day = date.getDay();
-							curMonth = date.getMonth();
-							otherMonth = lastMotnh != curMonth;
+			},
+			reorderInputs: function(){
+				if(splitInputs[this.type]){
+					var element = this.element;
+					splitInputs[this.type].sort(element);
+					setTimeout(function(){
+						var data = webshims.data(element);
+						if(data && data.shadowData){
+							data.shadowData.shadowFocusElement = element.find('input')[0] || element[0];
 						}
-					}
-					
-					dateArray = getDateArray(date);
-					buttonStr = '<td role="presentation" class="day-'+ day +'"><button data-id="day-'+ date.getDate() +'" role="gridcell" data-action="changeInput" value="'+ (dateArray.join('-')) +'"';
+					}, 9);
+				}
+			},
+			value: function(val){
+				
+				if(!this._init || this.options.value !== val){
+					this.valueAsNumber = this.asNumber(val);
+					this.options.value = val;
 					
-					if(otherMonth){
-						classArray.push('othermonth');
+					if(isNaN(this.valueAsNumber) || (!isNaN(this.minAsNumber) && this.valueAsNumber < this.minAsNumber) || (!isNaN(this.maxAsNumber) && this.valueAsNumber > this.maxAsNumber)){
+						this._setStartInRange();
 					} else {
-						classArray.push('day-'+date.getDate());
+						this.elemHelper.prop('value', val);
+						this.options.defValue = "";
 					}
 					
-					if(dateArray[0] == today[0] && today[1] == dateArray[1] && today[2] == dateArray[2]){
-						classArray.push('this-value');
-					}
-					
-					if(currentValue[0] == dateArray[0] && dateArray[1] == currentValue[1] && dateArray[2] == currentValue[2]){
-						classArray.push('checked-value');
-					}
-					
-					if(classArray.length){
-						buttonStr += ' class="'+ classArray.join(' ') +'"';
-					}
-					
-					if(!picker.isInRange(dateArray, max, min) || (data.options.disableDays && $.inArray(day, data.options.disableDays) != -1)){
-						buttonStr += ' disabled=""';
+					val = formatVal[this.type](val, this.options);
+					if(this.options.splitInput){
+						$.each(this.splits, function(i, elem){
+							$.prop(elem, 'value', val[i]);
+						});
+					} else {
+						this.element.prop('value', val);
 					}
-					
-					str.push(buttonStr+' tabindex="-1">'+ date.getDate() +'</button></td>');
-					
-					date.setDate(date.getDate() + 1);
-				}
-				str.push('</tbody></table></div></div>');
-				if(j == size - 1){
-					dateArray = getDateArray(date);
-					dateArray[2] = 1;
-					nextDisabled = picker.isInRange(dateArray, max, min) ? {'data-action': 'setDayList','value': dateArray.date} : false;
+					this._propertyChange('value');
+					this.mirrorValidity();
 				}
+			},
+			step: function(val){
+				var defStep = steps[this.type];
+				this.options.step = val;
+				this.elemHelper.prop('step', retDefault(val, defStep.step));
+				this.mirrorValidity();
 			}
-					
-			
-			return {
-				enabled: 9,
-				main: str.join(''),
-				prev: prevDisabled,
-				next: nextDisabled,
-				type: 'Grid'
-			};
-		};
+		});
 		
-		picker.isInRange = function(values, max, min){
-			var i;
-			var ret = true;
-			for(i = 0; i < values.length; i++){
-				
-				if(min[i] && min[i] > values[i]){
-					ret = false;
-					break;
-				} else if( !(min[i] && min[i] == values[i]) ){
-					break;
+		$.each({min: 1, max: -1}, function(name, factor){
+			var numName = name +'AsNumber';
+			spinBtnProto[name] = function(val){
+				this.elemHelper.prop(name, val);
+				this[numName] = this.asNumber(val);
+				if(this.valueAsNumber != null && (isNaN(this.valueAsNumber) || (!isNaN(this[numName]) && (this.valueAsNumber * factor) < (this[numName] * factor)))){
+					this._setStartInRange();
 				}
-			}
-			if(ret){
-				for(i = 0; i < values.length; i++){
-					
-					if((max[i] && max[i] < values[i])){
-						ret = false;
-						break;
-					} else if( !(max[i] && max[i] == values[i]) ){
-						break;
+				this.options[name] = val;
+				this._propertyChange(name);
+				this.mirrorValidity();
+			};
+		});
+		
+		$.fn.wsBaseWidget = function(opts){
+			opts = $.extend({}, opts);
+			return this.each(function(){
+				$.webshims.objectCreate(wsWidgetProto, {
+					element: {
+						value: $(this)
 					}
-				}
-			}
-			return ret;
+				}, opts);
+			});
 		};
 		
-		picker.createMonthSelect = function(value, max, min, monthNames){
-			if(!monthNames){
-				monthNames = curCfg.date.monthNames;
-			}
-			
-			var selected;
-			var i = 0;
-			var options = [];
-			var tempVal = value[1]-1;
-			for(; i < monthNames.length; i++){
-				selected = tempVal == i ? ' selected=""' : '';
-				if(selected || picker.isInRange([value[0], i+1], max, min)){
-					options.push('<option value="'+ value[0]+'-'+addZero(i+1) + '"'+selected+'>'+ monthNames[i] +'</option>');
-				}
+		$.fn.spinbtnUI = function(opts){
+			opts = $.extend({
+				monthNames: 'monthNames',
+				size: 1,
+				startView: 0
+			}, opts);
+			return this.each(function(){
+				$.webshims.objectCreate(spinBtnProto, {
+					element: {
+						value: $(this)
+					}
+				}, opts);
+			});
+		};
+	})();
+	
+	(function(){
+		var picker = {};
+
+		var loadPicker = function(type, name){
+			type = (type == 'color' ? 'color' : 'forms')+'-picker';
+			if(!loadPicker[name+'Loaded'+type]){
+				loadPicker[name+'Loaded'+type] = true;
+				webshims.ready(name, function(){
+					webshims.loader.loadList([type]);
+				});
 			}
-			return options;
+			return type;
 		};
+		options.addZero = addZero;
+		webshims.loader.addModule('forms-picker', {
+			noAutoCallback: true,
+			options: options
+		});
+		webshims.loader.addModule('color-picker', {
+			noAutoCallback: true, 
+			css: 'jpicker/jpicker.css',
+			options: options
+		});
 		
-		picker.createYearSelect = function(value, max, min, valueAdd){
-			
-			var temp;
-			var goUp = true;
-			var goDown = true;
-			var options = ['<option selected="">'+ value + '</option>'];
-			var i = 0;
-			if(!valueAdd){
-				valueAdd = '';
-			}
-			while(i < 8 && (goUp || goDown)){
-				i++;
-				temp = value-i;
-				if(goUp && picker.isInRange([temp], max, min)){
-					options.unshift('<option value="'+ (temp+valueAdd) +'">'+ temp +'</option>');
-				} else {
-					goUp = false;
-				}
-				temp = value + i;
-				if(goDown && picker.isInRange([temp], max, min)){
-					options.push('<option value="'+ (temp+valueAdd) +'">'+ temp +'</option>');
-				} else {
-					goDown = false;
-				}
+		picker._genericSetFocus = function(element, _noFocus){
+			element = $(element || this.activeButton);
+			if(!this.popover.openedByFocus && !_noFocus){
+				var that = this;
+				var setFocus = function(noTrigger){
+					clearTimeout(that.timer);
+					that.timer = setTimeout(function(){
+						if(element[0]){
+							element[0].focus();
+							if(noTrigger !== true && !element.is(':focus')){
+								setFocus(true);
+							}
+						}
+					}, that.popover.isVisible ? 99 : 360);
+				};
+				this.popover.activateElement(element);
+				setFocus();
 			}
-			return options;
 		};
-			
-		var actions = {
+		
+		picker._actions = {
 			changeInput: function(val, popover, data){
+				picker._actions.cancel(val, popover, data);
+				data.setChange(val);
+			},
+			cancel: function(val, popover, data){
 				popover.stopOpen = true;
 				data.element.getShadowFocusElement().focus();
 				setTimeout(function(){
 					popover.stopOpen = false;
 				}, 9);
 				popover.hide();
-				data.setChange(val);
 			}
 		};
 		
-		(function(){
-			var retNames = function(name){
-				return 'get'+name+'List';
-			};
-			var retSetNames = function(name){
-				return 'set'+name+'List';
-			};
-			var stops = {
-				date: 'Day',
-				week: 'Day',
-				month: 'Month'
-			};
-			
-			$.each({'setYearList' : ['Year', 'Month', 'Day'], 'setMonthList': ['Month', 'Day'], 'setDayList': ['Day']}, function(setName, names){
-				var getNames = names.map(retNames);
-				var setNames = names.map(retSetNames);
-				actions[setName] = function(val, popover, data, startAt){
-					val = ''+val;
-					var o = data.options;
-					var values = val.split('-');
-					if(!startAt){
-						startAt = 0;
-					}
-					$.each(getNames, function(i, item){
-						if(i >= startAt){
-							var content = picker[item](values, data);
-							
-							if( values.length < 2 || content.enabled > 1 || stops[data.type] === names[i]){
-								popover.element
-									.attr({'data-currentview': setNames[i]})
-									.addClass('ws-size-'+o.size)
-									.data('pickercontent', {
-										data: data,
-										content: content,
-										values: values
-									})
-								;
-								popover.bodyElement.html(content.main);
-								if(content.prev){
-									popover.prevElement
-										.attr(content.prev)
-										.prop({disabled: false})
-									;
-								} else {
-									popover.prevElement
-										.removeAttr('data-action')
-										.prop({disabled: true})
-									;
-								}
-								if(content.next){
-									popover.nextElement
-										.attr(content.next)
-										.prop({disabled: false})
-									;
-								} else {
-									popover.nextElement
-										.removeAttr('data-action')
-										.prop({disabled: true})
-									;
-								}
-								if(webshims[content.type]){
-									new webshims[content.type](popover.bodyElement.children(), popover, content);
-								}
-								popover.element.trigger('pickerchange');
-								return false;
-							}
-						}
-					});
-				};
-			});
-		})();
 		
 		picker.commonInit = function(data, popover){
-			var actionfn = function(e){
-				if(!$(this).is('.othermonth') || $(this).css('cursor') == 'pointer'){
-					popover.actionFn({
-						'data-action': $.attr(this, 'data-action'),
-						value: $(this).val() || $.attr(this, 'value')
-					});
-				}
-				return false;
-			};
-			var id = new Date().getTime();
-			var generateList = function(o, max, min){
-				var options = [];
-				var label = '';
-				var labelId = '';
-				o.options = data.getOptions() || {};
-				$('div.ws-options', popover.contentElement).remove();
-				$.each(o.options[0], function(val, label){
-					var disabled = picker.isInRange(val.split('-'), o.maxS, o.minS) ?
-						'' :
-						' disabled="" '
-					;
-					options.push('<li role="presentation"><button value="'+ val +'" '+disabled+' data-action="changeInput" tabindex="-1"  role="option">'+ (label || data.formatValue(val, false)) +'</button></li>');
-				});
-				if(options.length){
-					id++;
-					if(o.options[1]){
-						labelId = 'datalist-'+id;
-						label = '<h5 id="'+labelId+'">'+ o.options[1] +'</h5>';
-						labelId = ' aria-labelledbyid="'+ labelId +'" ';
-					}
-					new webshims.ListBox($('<div class="ws-options">'+label+'<ul role="listbox" '+ labelId +'>'+ options.join('') +'</div>').insertAfter(popover.bodyElement)[0], popover, {noFocus: true});
-				}
-			};
-			var updateContent = function(){
-				if(popover.isDirty){
-					var o = data.options;
-					o.maxS = o.max.split('-');
-					o.minS = o.min.split('-');
-					
-					$('button', popover.buttonRow).each(function(){
-						var text;
-						if($(this).is('.ws-empty')){
-							text = curCfg.date.clear;
-							if(!text){
-								text = formcfg[''].date.clear || 'clear';
-								webshims.warn("could not get clear text from form cfg");
-							}
-						} else if($(this).is('.ws-current')){
-							text = (curCfg[data.type] || {}).currentText;
-							if(!text){
-								text = (formcfg[''][[data.type]] || {}).currentText || 'current';
-								webshims.warn("could not get currentText from form cfg");
-							}
-							$.prop(this, 'disabled', !picker.isInRange(today[data.type].split('-'), o.maxS, o.minS));
-						}
-						if(text){
-							$(this).text(text).attr({'aria-label': text});
-							if(webshims.assumeARIA){
-								$.attr(this, 'aria-label', text);
-							}
-						}
-						
-					});
-					popover.nextElement.attr({'aria-label': curCfg.date.nextText});
-					$('> span', popover.nextElement).html(curCfg.date.nextText);
-					popover.prevElement.attr({'aria-label': curCfg.date.prevText});
-					$('> span', popover.prevElement).html(curCfg.date.prevText);
-					
-					generateList(o, o.maxS, o.minS);
-					
-				}
-				$('button.ws-empty', popover.buttonRow).prop('disabled', $.prop(data.orig, 'required'));
-				popover.isDirty = false;
-			};
-			
-			popover.actionFn = function(obj){
-				if(actions[obj['data-action']]){
-					actions[obj['data-action']](obj.value, popover, data, 0);
-				} else {
-					webshims.warn('no action for '+ obj['data-action']);
-				}
-			};
-			
-			popover.contentElement.html('<button class="ws-prev" tabindex="0"><span></span></button> <button class="ws-next" tabindex="0"><span></span></button><div class="ws-picker-body"></div><div class="ws-button-row"><button type="button" class="ws-current" data-action="changeInput" value="'+today[data.type]+'" tabindex="0"></button> <button type="button" data-action="changeInput" value="" class="ws-empty" tabindex="0"></button></div>');
-			popover.nextElement = $('button.ws-next', popover.contentElement);
-			popover.prevElement = $('button.ws-prev', popover.contentElement);
-			popover.bodyElement = $('div.ws-picker-body', popover.contentElement);
-			popover.buttonRow = $('div.ws-button-row', popover.contentElement);
+			var tabbable;
 			
 			popover.isDirty = true;
 			
-			popover.contentElement
-				.on('click', 'button[data-action]', actionfn)
-				.on('change', 'select[data-action]', actionfn)
-			;
-			
+			popover.element.on('updatepickercontent pickerchange', function(){
+				tabbable = false;
+			});
 			popover.contentElement.on({
 				keydown: function(e){
 					if(e.keyCode == 9){
-						var tabbable = $('[tabindex="0"]:not(:disabled)', this).filter(':visible');
+						if(!tabbable){
+							tabbable = $('input:not(:disabled), [tabindex="0"]:not(:disabled)', this).filter(':visible');
+						}
 						var index = tabbable.index(e.target);
 						if(e.shiftKey && index <= 0){
 							tabbable.last().focus();
@@ -2168,18 +1599,11 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				}
 			});
 			
-			$(data.options.orig).on('input', function(){
-				var currentView;
-				if(data.options.updateOnInput && popover.isVisible && data.options.value && (currentView = popover.element.attr('data-currentview'))){
-					actions[currentView]( data.options.value , popover, data, 0);
-				}
-			});
-			
 			data._propertyChange = (function(){
 				var timer;
 				var update = function(){
 					if(popover.isVisible){
-						updateContent();
+						popover.element.triggerHandler('updatepickercontent');
 					}
 				};
 				return function(prop){
@@ -2205,50 +1629,51 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 			popover.element.on({
 				wspopoverbeforeshow: function(){
 					data.element.triggerHandler('wsupdatevalue');
-					updateContent();
+					popover.element.triggerHandler('updatepickercontent');
 				}
 			});
 			
-			$(document).onTrigger('wslocalechange', data._propertyChange);
+			
+			$(data.orig).on('remove', function(e){
+				if(!e.originalEvent){
+					$(document).off('wslocalechange', data._propertyChange);
+				}
+			});
 		};
 		
+		
 		picker._common = function(data){
 			var popover = webshims.objectCreate(webshims.wsPopover, {}, {prepareFor: data.element});
 			var opener = $('<button type="button" class="ws-popover-opener"><span /></button>').appendTo(data.buttonWrapper);
 			var options = data.options;
-			var init = false;
 			
+			var showPickerContent = function(){
+				(picker[data.type].showPickerContent || picker.showPickerContent)(data, popover);
+			};
 			var show = function(){
+				var type = loadPicker(data.type, 'DOM');
 				if(!options.disabled && !options.readonly && !popover.isVisible){
-					if(!init){
-						picker.commonInit(data, popover);
-					}
-					
-					if(!init || data.options.restartView) {
-						actions.setYearList( options.defValue || options.value, popover, data, data.options.startView);
-					} else {
-						actions[popover.element.attr('data-currentview') || 'setYearList']( options.defValue || options.value, popover, data, 0);
-					}
-					
-					init = true;
+					webshims.ready(type, showPickerContent);
 					popover.show(data.element);
 				}
 			};
 			
 			options.containerElements.push(popover.element[0]);
 			
-			if(!options.startView){
-				options.startView = 0;
-			}
-			if(!options.minView){
-				options.minView = 0;
-			}
-			if(options.startView < options.minView){
-				options.minView = options.startView;
-				webshims.warn("wrong config for minView/startView.");
-			}
-			if(!options.size){
-				options.size = 1;
+			if(data.type != 'color'){
+				if(!options.startView){
+					options.startView = 0;
+				}
+				if(!options.minView){
+					options.minView = 0;
+				}
+				if(options.startView < options.minView){
+					options.startView = options.minView;
+					webshims.warn("wrong config for minView/startView.");
+				}
+				if(!options.size){
+					options.size = 1;
+				}
 			}
 			
 			popover.element
@@ -2275,10 +1700,15 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 			labelWidth(popover.element.children('div.ws-po-outerbox').attr({role: 'group'}), options.labels, true);
 			labelWidth(opener, options.labels, true);
 			
+			if(options.tabindex != null){
+				opener.attr({tabindex: options.tabindex});
+			}
+			
+			if(options.disabled){
+				opener.prop({disabled: true});
+			}
+			
 			opener
-				.attr({
-					'tabindex': options.labels.length ? 0 : '-1'
-				})
 				.on({
 					mousedown: function(){
 						stopPropagation.apply(this, arguments);
@@ -2323,10 +1753,51 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				});
 			})();
 			data.popover = popover;
+			data.opener = opener;
+			$(data.orig).on('remove', function(e){
+				if(!e.originalEvent){
+					opener.remove();
+					popover.element.remove();
+				}
+			});
+			
+			loadPicker(data.type, 'WINDOWLOAD');
 		};
 		
 		picker.month = picker._common;
-		picker.date = picker.month;
+		picker.date = picker._common;
+		picker.color = function(data){
+			var ret = picker._common.apply(this, arguments);
+			var alpha = $(data.orig).data('alphacontrol');
+			var colorIndicator = data.opener
+				.prepend('<span class="ws-color-indicator-bg"><span class="ws-color-indicator" /></span>')
+				.find('.ws-color-indicator')
+			;
+			var showColor = function(){
+				colorIndicator.css({backgroundColor: $.prop(this, 'value') || '#000'})
+			};
+			var showOpacity = (function(){
+				var timer;
+				var show = function(){
+					try {
+						var value = data.alpha.prop('valueAsNumber') / (data.alpha.prop('max') || 1);
+						if(!isNaN(value)){
+							colorIndicator.css({opacity: value});
+						}
+					} catch(er){}
+					
+				};
+				return function(e){
+					clearTimeout(timer);
+					timer = setTimeout(show, !e || e.type == 'change' ? 4: 40);
+				};
+			})();
+			data.alpha = (alpha) ? $('#'+alpha) : $([]);
+			
+			$(data.orig).on('wsupdatevalue change', showColor).each(showColor);
+			data.alpha.on('wsupdatevalue change input', showOpacity).each(showOpacity);
+			return ret;
+		};
 		
 		webshims.picker = picker;
 	})();
@@ -2347,6 +1818,7 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 			'max',
 			'step',
 			'title',
+			'required',
 			'placeholder'
 		];
 		
@@ -2355,11 +1827,11 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 			
 		$.each(copyProps.concat(copyAttrs), function(i, name){
 			var fnName = name.replace(/^data\-/, '');
-			webshims.onNodeNamesPropertyModify('input', name, function(val){
+			webshims.onNodeNamesPropertyModify('input', name, function(val, boolVal){
 				if(!stopCircular){
 					var shadowData = webshims.data(this, 'shadowData');
 					if(shadowData && shadowData.data && shadowData.nativeElement === this && shadowData.data[fnName]){
-						shadowData.data[fnName](val);
+						shadowData.data[fnName](val, boolVal);
 					}
 				}
 			});
@@ -2390,6 +1862,7 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 		var sizeInput = function(data){
 			var init;
 			var updateStyles = function(){
+				$(data.orig).removeClass('ws-important-hide');
 				$.style( data.orig, 'display', '' );
 				var hasButtons, marginR, marginL;
 				var correctWidth = 0.6;
@@ -2423,13 +1896,14 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 					data.element.outerWidth( $(data.orig).outerWidth() - correctWidth );
 				}
 				init = true;
-				$.style( data.orig, 'display', 'none' );
+				$(data.orig).addClass('ws-important-hide');
 			};
-			$(document).onTrigger('updateshadowdom', updateStyles);
+			data.element.onWSOff('updateshadowdom', updateStyles, true);
 		};
 		
 		
 		var implementType = function(){
+			
 			var type = $.prop(this, 'type');
 			
 			var i, opts, data, optsName, labels;
@@ -2484,7 +1958,7 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				data.shim.options.containerElements.push(data.shim.element[0]);
 				
 				labelWidth($(this).getShadowFocusElement(), labels);
-				$.attr(this, 'required', $.attr(this, 'required'));
+				
 				$(this).on('change', function(e){
 					if(!stopCircular){
 						data.shim.value($.prop(this, 'value'));
@@ -2543,18 +2017,13 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				
 				if(opts.calculateWidth){
 					sizeInput(data.shim);
+				} else {
+					$(this).css({display: 'none'});
 				}
-				$(this).css({display: 'none'});
 			}
+			
 		};
 		
-		if(!modernizrInputTypes.range || options.replaceUI){
-			extendType('range', {
-				_create: function(opts, set){
-					return $('<span />').insertAfter(opts.orig).rangeUI(opts).data('rangeUi');
-				}
-			});
-		}
 		
 		if(Modernizr.formvalidation){
 			['input', 'form'].forEach(function(name){
@@ -2571,12 +2040,20 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 			});
 		}
 		
+		if(!modernizrInputTypes.range || options.replaceUI){
+			extendType('range', {
+				_create: function(opts, set){
+					var data = $('<span />').insertAfter(opts.orig).rangeUI(opts).data('rangeUi');
+					return data;
+				}
+			});
+		}
 		
-		['number', 'time', 'month', 'date'].forEach(function(name){
-			if(!modernizrInputTypes[name] || options.replaceUI){
+		var isStupid = navigator.userAgent.indexOf('MSIE 10.0') != -1 && navigator.userAgent.indexOf('Touch') == -1;
+		['number', 'time', 'month', 'date', 'color'].forEach(function(name){
+			if(!modernizrInputTypes[name] || options.replaceUI || (name == 'number' && isStupid)){
 				extendType(name, {
 					_create: function(opts, set){
-						
 						if(opts.splitInput && !splitInputs[name]){
 							webshims.warn('splitInput not supported for '+ name);
 							opts.splitInput = false;
@@ -2584,11 +2061,12 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 						var markup = opts.splitInput ?
 								'<span class="ws-'+name+' ws-input" role="group"></span>' :
 								'<input class="ws-'+name+'" type="text" />';
-						var data = $(markup) //role="spinbutton"???
-							.insertAfter(opts.orig)
-							.spinbtnUI(opts)
-							.data('wsspinner')
-						;
+						var data = $(markup).insertAfter(opts.orig);
+						if(steps[name]){
+							data = data.spinbtnUI(opts).data('wsWidget'+name);
+						} else {
+							data = data.wsBaseWidget(opts).data('wsWidget'+name);
+						}
 						if(webshims.picker && webshims.picker[name]){
 							webshims.picker[name](data);
 						}