Merge branch 'master' into tooltip

author: jzaefferer <joern.zaefferer@gmail.com> 2010-04-08 23:03:35 +0200
committer: jzaefferer <joern.zaefferer@gmail.com> 2010-04-08 23:03:35 +0200
commit: 9230b7263b90dfc3fcb4a309b549332dee6dcba4 (patch)
tree: 9e8ea3844386b841b10c521ff3fe5ab0c4c1e43b /tests
parent: 1a89b6ee2f9f02fd92d9ec3ee663b7dd237d3d15 (diff)
parent: ffc29bba052e4bc8b84e4c2e16036140148b6f9c (diff)
download: jquery-ui-9230b7263b90dfc3fcb4a309b549332dee6dcba4.tar.gz
jquery-ui-9230b7263b90dfc3fcb4a309b549332dee6dcba4.zip
20 files changed, 674 insertions, 471 deletions
diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html
index df0979803..3badebda9 100644
--- a/tests/unit/accordion/accordion.html
+++ b/tests/unit/accordion/accordion.html
@@ -16,6 +16,20 @@
 	<script type="text/javascript" src="../../jquery.simulate.js"></script>
 	<script type="text/javascript" src="../testsuite.js"></script>
 
+	<script type="text/javascript">
+		$.ui.accordion.prototype.options.animated = false;
+
+		function state(accordion) {
+			var args = $.makeArray(arguments).slice(1);
+			var result = [];
+			$.each(args, function(i, n) {
+				result.push( accordion.find(".ui-accordion-content").eq(i).filter(function() {
+					return $(this).css("display") != "none"
+				}).length ? 1 : 0 );
+			});
+			same(args, result)
+		}
+	</script>
 	<script type="text/javascript" src="accordion_core.js"></script>
 	<script type="text/javascript" src="accordion_defaults.js"></script>
 	<script type="text/javascript" src="accordion_events.js"></script>
@@ -25,7 +39,7 @@
 	
 	<style>
 		#main { font-size: 10pt; font-family: 'trebuchet ms', verdana, arial; }
-		#navigation * { margin: 0; padding: 0; font-size: 12px; }
+		#list, #list1 *, #navigation, #navigation * { margin: 0; padding: 0; font-size: 12px; }
 	</style>
 </head>
 <body>
@@ -41,7 +55,7 @@
 	<div>
 		<div id="list1" class="foo">
 	        <a class="bar">There is one obvious advantage:</a>
-	        <div style="" class="foo">
+	        <div style="font-style: normal; " class="foo">
 	            <p>
 	                You've seen it coming!
 	                <br/>
@@ -51,7 +65,7 @@
 	            </p>
 	        </div>
 	        <a class="bar">Now that you've got...</a>
-	        <div style="" class="foo">
+	        <div style="font-style: normal; " class="foo">
 	            <p>
 	                your bear, you have to admit it!
 	                <br/>
@@ -62,7 +76,7 @@
 	            </p>
 	        </div>
 	        <a class="bar">Rent one bear, ...</a>
-	        <div style="" class="foo">
+	        <div style="font-style: normal; " class="foo">
 	            <p>
 	                get two for three beer.
 	            </p>
diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js
index 47d2509e6..2bef43149 100644
--- a/tests/unit/accordion/accordion_core.js
+++ b/tests/unit/accordion/accordion_core.js
@@ -5,17 +5,6 @@
 
 (function($) {
 
-$.ui.accordion.prototype.options.animated = false;
-
-function state(accordion) {
-	var args = $.makeArray(arguments).slice(1);
-	var result = [];
-	$.each(args, function(i, n) {
-		result.push( accordion.find(".ui-accordion-content").eq(i).is(":visible") ? 1 : 0 );
-	});
-	same(args, result)
-}
-
 module("accordion: core");
 
 test("handle click on header-descendant", function() {
diff --git a/tests/unit/accordion/accordion_methods.js b/tests/unit/accordion/accordion_methods.js
index d15a0b710..894d1f30c 100644
--- a/tests/unit/accordion/accordion_methods.js
+++ b/tests/unit/accordion/accordion_methods.js
@@ -3,15 +3,6 @@
  */
 (function($) {
 
-function state(accordion) {
-	var expected = $.makeArray(arguments).slice(1);
-	var actual = [];
-	$.each(expected, function(i, n) {
-		actual.push( accordion.find(".ui-accordion-content").eq(i).is(":visible") ? 1 : 0 );
-	});
-	same(actual, expected)
-}
-
 module("accordion: methods");
 
 test("init", function() {
@@ -112,8 +103,7 @@ test("activate, string expression", function() {
 	ac.accordion("activate", ":last");
 	state(ac, 0, 0, 1);
 });
-//[ 0, 1, 1 ] result: [ 0, 0, 1 ]
-//[   0,   1,   1] result: [   0,   0,   1]
+
 test("activate, jQuery or DOM element", function() {
 	var ac = $('#list1').accordion({ active: $("#list1 a:last") });
 	state(ac, 0, 0, 1);
@@ -124,7 +114,9 @@ test("activate, jQuery or DOM element", function() {
 });
 
 test("resize", function() {
-	var expected = $('#list1').accordion();
+	var expected = $('#list1').parent().height(300).end().accordion({
+		fillSpace: true
+	});
 	
 	var sizes = [];
 	expected.find(".ui-accordion-content").each(function() {
@@ -138,10 +130,15 @@ test("resize", function() {
 	expected.find(".ui-accordion-content").each(function() {
 		sizes2.push($(this).outerHeight());
 	});
-	same(sizes, sizes2);
+	same(sizes, [246, 246, 246]);
 	
-	expected.find(".ui-accordion-content:first").height(500)
-	var sizes3 = [];
+	expected.parent().height(500);
+	expected.accordion("resize");
+	var sizes2 = [];
+	expected.find(".ui-accordion-content").each(function() {
+		sizes2.push($(this).outerHeight());
+	});
+	same(sizes2, [446, 446, 446]);
 });
 
 })(jQuery);
diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/accordion_options.js
index cc7fc0369..e46795993 100644
--- a/tests/unit/accordion/accordion_options.js
+++ b/tests/unit/accordion/accordion_options.js
@@ -3,16 +3,6 @@
  */
 (function($) {
 
-function state(accordion) {
-	var expected = $.makeArray(arguments).slice(1);
-	var actual = [];
-	$.each(expected, function(i, n) {
-		actual.push( accordion.find(".ui-accordion-content").eq(i).is(":visible") ? 1 : 0 );
-	});
-	same(actual, expected)
-}
-
-
 module("accordion: options");
 
 test("{ active: first child }, default", function() {
diff --git a/tests/unit/autocomplete/autocomplete_events.js b/tests/unit/autocomplete/autocomplete_events.js
index ccbe66c1b..28a72145e 100644
--- a/tests/unit/autocomplete/autocomplete_events.js
+++ b/tests/unit/autocomplete/autocomplete_events.js
@@ -12,7 +12,7 @@ module("autocomplete: events", {
 var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
 
 test("all events", function() {
-	expect(11);
+	expect(12);
 	var ac = $("#autocomplete").autocomplete({
 		delay: 0,
 		source: data,
@@ -34,21 +34,38 @@ test("all events", function() {
 			same(event.type, "autocompleteselect");
 			same(ui.item, {label:"java", value:"java"});
 		},
-		change: function(event) {
+		change: function(event, ui) {
 			same(event.type, "autocompletechange");
+			same(ui.item, {label:"java", value:"java"});
 			same( $(".ui-menu:visible").length, 0 );
+			start();
 		}
 	});
 	stop();
-	ac.val("ja").keydown();
+	ac.focus().val("ja").keydown();
 	setTimeout(function() {
 		same( $(".ui-menu:visible").length, 1 );
 		ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
 		ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER });
-		start();
+		ac.blur();
 	}, 50);
 });
 
+test("change without selection", function() {
+	expect(2);
+	stop();
+	var ac = $("#autocomplete").autocomplete({
+		delay: 0,
+		source: data,
+		change: function(event, ui) {
+			same(event.type, "autocompletechange");
+			same(ui.item, null);
+			start();
+		}
+	});
+	ac.focus().val("ja").blur();
+});
+
 test("cancel search", function() {
 	expect(6);
 	var first = true;
diff --git a/tests/unit/autocomplete/autocomplete_options.js b/tests/unit/autocomplete/autocomplete_options.js
index 6639e9014..c5aa7c961 100644
--- a/tests/unit/autocomplete/autocomplete_options.js
+++ b/tests/unit/autocomplete/autocomplete_options.js
@@ -120,7 +120,7 @@ function source_test(source, async) {
 	}
 	if (async) {
 		stop();
-		setTimeout(result, 100);
+		$(document).one("ajaxStop", result);
 	} else {
 		result();
 	}
diff --git a/tests/unit/draggable/draggable.html b/tests/unit/draggable/draggable.html
index a48f3c092..050d37704 100644
--- a/tests/unit/draggable/draggable.html
+++ b/tests/unit/draggable/draggable.html
@@ -15,12 +15,15 @@
 	<script type="text/javascript" src="../../jquery.simulate.js"></script>
 	<script type="text/javascript" src="../testsuite.js"></script>
 
+	<!--
 	<script type="text/javascript" src="draggable_core.js"></script>
 	<script type="text/javascript" src="draggable_defaults.js"></script>
 	<script type="text/javascript" src="draggable_events.js"></script>
 	<script type="text/javascript" src="draggable_methods.js"></script>
 	<script type="text/javascript" src="draggable_options.js"></script>
 	<script type="text/javascript" src="draggable_tickets.js"></script>
+	-->
+	<script type="text/javascript">test("draggable", function() { ok(true, "disabled draggable testsuite"); });</script>
 </head>
 <body>
 
diff --git a/tests/unit/droppable/droppable.html b/tests/unit/droppable/droppable.html
index 9f2c14a1d..bc9a9d416 100644
--- a/tests/unit/droppable/droppable.html
+++ b/tests/unit/droppable/droppable.html
@@ -16,12 +16,15 @@
 	<script type="text/javascript" src="../../jquery.simulate.js"></script>
 	<script type="text/javascript" src="../testsuite.js"></script>
 	
+	<!--
 	<script type="text/javascript" src="droppable_core.js"></script>
 	<script type="text/javascript" src="droppable_defaults.js"></script>
 	<script type="text/javascript" src="droppable_events.js"></script>
 	<script type="text/javascript" src="droppable_methods.js"></script>
 	<script type="text/javascript" src="droppable_options.js"></script>
 	<script type="text/javascript" src="droppable_tickets.js"></script>
+	-->
+	<script type="text/javascript">test("droppable", function() { ok(true, "disabled droppable testsuite"); });</script>
 </head>
 <body>
 
diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html
index fe100d2aa..08c4c8798 100644
--- a/tests/unit/resizable/resizable.html
+++ b/tests/unit/resizable/resizable.html
@@ -17,12 +17,15 @@
 	<script type="text/javascript" src="../../jquery.simulate.js"></script>
 	<script type="text/javascript" src="../testsuite.js"></script>
 
+	<!--
 	<script type="text/javascript" src="resizable_core.js"></script>
 	<script type="text/javascript" src="resizable_defaults.js"></script>
 	<script type="text/javascript" src="resizable_events.js"></script>
 	<script type="text/javascript" src="resizable_methods.js"></script>
 	<script type="text/javascript" src="resizable_options.js"></script>
 	<script type="text/javascript" src="resizable_tickets.js"></script>
+	-->
+	<script type="text/javascript">test("resizable", function() { ok(true, "disabled resizable testsuite"); });</script>
 </head>
 <body>
 
diff --git a/tests/unit/selectable/selectable.html b/tests/unit/selectable/selectable.html
index 74a10584a..e71d20e22 100644
--- a/tests/unit/selectable/selectable.html
+++ b/tests/unit/selectable/selectable.html
@@ -15,12 +15,15 @@
 	<script type="text/javascript" src="../../jquery.simulate.js"></script>
 	<script type="text/javascript" src="../testsuite.js"></script>
 
+	<!--
 	<script type="text/javascript" src="selectable_core.js"></script>
 	<script type="text/javascript" src="selectable_defaults.js"></script>
 	<script type="text/javascript" src="selectable_events.js"></script>
 	<script type="text/javascript" src="selectable_methods.js"></script>
 	<script type="text/javascript" src="selectable_options.js"></script>
 	<script type="text/javascript" src="selectable_tickets.js"></script>
+	-->
+	<script type="text/javascript">test("selectable", function() { ok(true, "disabled selectable testsuite"); });</script>
 </head>
 <body>
 
diff --git a/tests/unit/slider/slider_options.js b/tests/unit/slider/slider_options.js
index cc36923b3..b9a766539 100644
--- a/tests/unit/slider/slider_options.js
+++ b/tests/unit/slider/slider_options.js
@@ -88,17 +88,50 @@ test("range", function() {
 	ok(false, "missing test - untested code is broken code.");
 });
 
+//spec: http://wiki.jqueryui.com/Slider#specs
+// value option/method: the value option is not restricted by min/max/step.
+// What is returned by the value method is restricted by min (>=), max (<=), and step (even multiple)
 test("step", function() {
 	var el = $('<div></div>').slider({
-		step: 10
+		min: 0,
+		value: 0,
+		step: 10,
+		max: 100,
 	});
-	equals( el.slider("value"), 0 )
+	equals( el.slider("value"), 0 );
+
 	el.slider("value", 1);
+	equals( el.slider("value"), 0 );
+
+	el.slider("value", 9);
 	equals( el.slider("value"), 10 );
-	el.slider("value", 10);
-	equals( el.slider("value"), 10 );
+
 	el.slider("value", 11);
+	equals( el.slider("value"), 10 );
+
+	el.slider("value", 19);
 	equals( el.slider("value"), 20 );
+
+el = $('<div></div>').slider({
+		min: 0,
+		value: 0,
+		step: 20,
+		max: 100,
+	});
+	el.slider("value", 0);
+
+	el.slider("option", "value", 1);
+	equals( el.slider("value"), 0 );
+
+	el.slider("option", "value", 9);
+	equals( el.slider("value"), 0 );
+
+	el.slider("option", "value", 11);
+	equals( el.slider("value"), 20 );
+
+	el.slider("option", "value", 19);
+	equals( el.slider("value"), 20 );
+
 	el.slider('destroy');
 });
 
diff --git a/tests/unit/sortable/sortable.html b/tests/unit/sortable/sortable.html
index 2a50f85a1..f956d6df0 100644
--- a/tests/unit/sortable/sortable.html
+++ b/tests/unit/sortable/sortable.html
@@ -15,12 +15,15 @@
 	<script type="text/javascript" src="../../jquery.simulate.js"></script>
 	<script type="text/javascript" src="../testsuite.js"></script>
 
+	<!--
 	<script type="text/javascript" src="sortable_core.js"></script>
 	<script type="text/javascript" src="sortable_defaults.js"></script>
 	<script type="text/javascript" src="sortable_events.js"></script>
 	<script type="text/javascript" src="sortable_methods.js"></script>
 	<script type="text/javascript" src="sortable_options.js"></script>
 	<script type="text/javascript" src="sortable_tickets.js"></script>
+	-->
+	<script type="text/javascript">test("sortable", function() { ok(true, "disabled sortable testsuite"); });</script>
 </head>
 <body>
 
diff --git a/tests/unit/tabs/tabs_core.js b/tests/unit/tabs/tabs_core.js
index 20ab2b1fd..652788bba 100644
--- a/tests/unit/tabs/tabs_core.js
+++ b/tests/unit/tabs/tabs_core.js
@@ -35,19 +35,21 @@ test('ajax', function() {
 		selected: 2,
 		load: function() {
 			// spinner: default spinner
-			equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed");
-			equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed");
-			el.tabs('destroy');
-			el.tabs({
-				selected: 2,
-				spinner: '<img src="spinner.gif" alt="">',
-				load: function() {
-					// spinner: image
-					equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed");
-					equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed");
-					start();
-				}
-			});			
+			setTimeout(function() {
+				equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed");
+				equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed");
+				el.tabs('destroy');
+				el.tabs({
+					selected: 2,
+					spinner: '<img src="spinner.gif" alt="">',
+					load: function() {
+						// spinner: image
+						equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed");
+						equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed");
+						start();
+					}
+				});
+			}, 1);
 		}
 	});
 	
diff --git a/tests/visual/button/button_performance.html b/tests/visual/button/button_performance.html
new file mode 100644
index 000000000..2d31c2f27
--- /dev/null
+++ b/tests/visual/button/button_performance.html
@@ -0,0 +1,552 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<title>Button Visual push: Default</title>
+	<link rel="stylesheet" href="../visual.css" type="text/css" />
+	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css">
+	<style type="text/css">
+		#toolbar { margin-top: 2em; padding:0.2em; }
+		#ops1, #ops2, #format, #mode { margin-right: 1em }
+	</style>
+	<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
+	<script type="text/javascript" src="../../../external/jquery.metadata.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		$("button").button();
+	});
+	</script>
+</head>
+<body>
+
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+<button>Simple button, only text</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+
+</body>
+</html>
diff --git a/tests/visual/compound/tabs_tooltips.html b/tests/visual/compound/tabs_tooltips.html
deleted file mode 100644
index 00046fe0d..000000000
--- a/tests/visual/compound/tabs_tooltips.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8" />
-	<title>Compound Visual Test : Tabs in Tabs</title>
-	<link rel="stylesheet" href="../visual.css" type="text/css" />
-	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css">
-	<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.tabs.js"></script>
-	<script type="text/javascript">
-	$(function() {
-		$("#tabs").tabs();
-		$("a").tooltip();
-	});
-	</script>
-</head>
-<body>
-
-<div id="tabs">
-	<ul>
-		<li><a href="#tabs-1" title="first tab tooltip">First</a></li>
-		<li><a href="#tabs-2" title="second tab tooltip">Second</a></li>
-	</ul>
-	<div id="tabs-1">
-		<a href="#" title="title content">label</a>
-	</div>
-	<div id="tabs-2">
-		<a href="#" title="other title content">other label</a>
-	</div>
-</div>
-
-</body>
-</html>
diff --git a/tests/visual/compound/widgets_in_dialog.html b/tests/visual/compound/widgets_in_dialog.html
index e2eb366b4..7551efd8d 100644
--- a/tests/visual/compound/widgets_in_dialog.html
+++ b/tests/visual/compound/widgets_in_dialog.html
@@ -20,11 +20,8 @@
 	<script type="text/javascript" src="../../../ui/jquery.ui.progressbar.js"></script>
 	<script type="text/javascript" src="../../../ui/jquery.ui.slider.js"></script>
 	<script type="text/javascript" src="../../../ui/jquery.ui.tabs.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("[title]").tooltip();
-		
 		$("#accordion").accordion();
 		$("#autocomplete").autocomplete({
 			source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]
@@ -53,7 +50,7 @@
 			width: 100,
 			height: 75,
 			modal: true
-		});
+		})
 	});
 	</script>
 </head>
@@ -79,11 +76,11 @@
 	<input id="datepicker">
 	<button>Another button</button>
 	<div>
-		<label for="progress">Progress: <input title="The progress we made so far" id="progress" /></label>
+		<label for="progress">Progress: <input id="progress" /></label>
 	</div>
 	<div id="progressbar">
 	</div>
-	<div id="slider" title="Sliding progress..."></div>
+	<div id="slider"></div>
 	<div id="tabs">
 		<ul>
 			<li><a href="#tabs-1">First</a></li>
diff --git a/tests/visual/index.html b/tests/visual/index.html
index 8f4810225..ad46ddf8d 100644
--- a/tests/visual/index.html
+++ b/tests/visual/index.html
@@ -20,7 +20,6 @@
 	<li><a href="compound/draggable_accordion.html">Draggable Accordion</a></li>
 	<li><a href="compound/sortable_accordion_sortable_tabs.html">Accordion within Tabs, both Sortable</a></li>
 	<li><a href="compound/tabs_tabs.html">Tabs contains Tabs</a></li>
-	<li><a href="compound/tabs_tooltips.html">Tabs with Tooltips</a></li>
 	<li><a href="compound/widgets_in_dialog.html">All Widgets within a Dialog</a></li>
 </ul>
 
@@ -44,7 +43,6 @@
 	<li><a href="progressbar/progressbar.html">Progressbar</a></li>
 	<li><a href="slider/slider.html">Slider</a></li>
 	<li><a href="tabs/tabs.html">Tabs</a></li>
-	<li><a href="tooltip/tooltip.html">Tooltip</a></li>
 </ul>
 
 </body>
diff --git a/tests/visual/tooltip/ajaxcontent.php b/tests/visual/tooltip/ajaxcontent.php
deleted file mode 100644
index a689a734d..000000000
--- a/tests/visual/tooltip/ajaxcontent.php
+++ /dev/null
@@ -1,2 +0,0 @@
-<?php sleep(1); ?>
-<strong>Hello</strong> world!
-\ No newline at end of file
diff --git a/tests/visual/tooltip/callout.html b/tests/visual/tooltip/callout.html
deleted file mode 100644
index 3ef694987..000000000
--- a/tests/visual/tooltip/callout.html
+++ /dev/null
@@ -1,213 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>Tooltip Visual Test: Default</title>
-	<link rel="stylesheet" href="../visual.css" type="text/css" />
-	<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
-	<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script>
-	<script type="text/javascript">
-	$.widget("ui.callout", {
-		_init: function() {
-			this.element.append('<div class="ui-tooltip-pointer ui-widget-content"><div class="ui-tooltip-pointer-inner" style="border-right-color:rgb(255, 255, 255)"></div></div>');
-		},
-		pointAt: function(target) {
-			target = $(target);
-			var tx = target.offset().left + target.width() / 2,
-				ty = target.offset().top + target.height() / 2,
-				dx = this.element.offset().left + this.element.width() / 2,
-				dy = this.element.offset().top + this.element.height() / 2;
-			function d(a, b) {
-				return a > b ? a - b : b - a;
-			}
-			this.element.attr("class", this.element.attr("class").replace(/(.+)ui-tooltip-arrow-..(.+)?/, "$1 $2"));
-			if (dx < tx && d(dx, tx) > d(dy, tx)) {
-				this.element.addClass("ui-tooltip-arrow-rc");
-			}
-			if (dx > tx && d(dx, tx) > d(dy, ty)) {
-				this.element.addClass("ui-tooltip-arrow-lc");
-			}
-			if (dy > ty && d(dx, tx) < d(dy, ty)) {
-				this.element.addClass("ui-tooltip-arrow-tc");
-			}
-			if (dy < ty && d(dx, tx) < d(dy, ty)) {
-				this.element.addClass("ui-tooltip-arrow-bc");
-			}
-			
-			// fix inner borders
-			$('.ui-tooltip-pointer-inner', this.element).each(function(){
-				var pt = $(this).parent().parent();
-				var bColor = pt.css('backgroundColor');
-				$(this).css({
-					borderLeftColor: '',
-					borderRightColor: '',
-					borderTopColor: '',
-					borderBottomColor: ''
-				});
-				if(pt.is('.ui-tooltip-arrow-rb,.ui-tooltip-arrow-rc,.ui-tooltip-arrow-rt')){ $(this).css('border-left-color', bColor); }
-				else if(pt.is('.ui-tooltip-arrow-br,.ui-tooltip-arrow-bc,.ui-tooltip-arrow-bl')){ $(this).css('border-top-color', bColor); }
-				else if(pt.is('.ui-tooltip-arrow-lb,.ui-tooltip-arrow-lc,.ui-tooltip-arrow-lt')){ $(this).css('border-right-color', bColor); }
-				else { $(this).css('border-bottom-color', bColor);  }
-			});
-		}
-	});
-		
-	$(function() {
-		$.ui.tooltip.prototype.options.show = function(event, ui) {
-			$(this).tooltip("widget").callout("pointAt", ui.target);
-		}
-		
-		function enable() {
-			// default
-			$("#context1, form input").tooltip();
-			
-			// custom class, replaces ui-widget-content
-			$("#context2").tooltip({
-				tooltipClass: "ui-widget-header"
-			});
-			$("#right1").tooltip({
-				tooltipClass: "ui-state-error"
-			});
-			
-			// synchronous content
-			$("#see-footnote").tooltip({
-				content: function() {
-					return $($(this).attr("href")).html();
-				}
-			});
-			// asynchronous content
-			$("#ajax").tooltip({
-				content: function(response) {
-					$.get("ajaxcontent.html", response);
-				}
-			});
-			
-			// custom position
-			$("#right2").tooltip({
-				position: {
-					my: "center top",
-					at: "center bottom",
-					offset: "0 10"
-				},
-				tooltipClass: "ui-state-highlight"
-			});
-			
-			$(".ui-tooltip").callout();
-		}
-		enable();
-		
-		$("#disable").toggle(function() {
-			$("*").tooltip("disable");
-		}, function() {
-			$("*").tooltip("enable");
-		});
-		$("#toggle").toggle(function() {
-			$("*").tooltip("destroy");
-		}, function() {
-			enable();
-		});
-	});
-	</script>
-	
-	<style>
-		.ui-tooltip .ui-tooltip-pointer,.ui-tooltip .ui-tooltip-pointer-inner { position:absolute; width:0; height:0; background:none; }
-
-		/*top*/
-		.ui-tooltip-arrow-tr .ui-tooltip-pointer,.ui-tooltip-arrow-tc .ui-tooltip-pointer,.ui-tooltip-arrow-tl .ui-tooltip-pointer { top:-14px; border-top:0; border-bottom-width:14px; }
-		.ui-tooltip-arrow-tr .ui-tooltip-pointer { border-left:18px dotted transparent; border-right:0; right:10px; }
-		.ui-tooltip-arrow-tc .ui-tooltip-pointer { border-left:10px dotted transparent; border-right:10px dotted transparent; left:50%; margin-left:-10px; }
-		.ui-tooltip-arrow-tl .ui-tooltip-pointer { border-left:0; border-right:18px dotted transparent; left:10px; }
-		.ui-tooltip-arrow-tr .ui-tooltip-pointer-inner,.ui-tooltip-arrow-tc .ui-tooltip-pointer-inner,.ui-tooltip-arrow-tl .ui-tooltip-pointer-inner { border-bottom:10px solid #fff; bottom:-14px; }
-		.ui-tooltip-arrow-tr .ui-tooltip-pointer-inner { border-left:12px dotted transparent; border-right:0; right:2px; }
-		.ui-tooltip-arrow-tc .ui-tooltip-pointer-inner { border-left:8px dotted transparent; border-right:8px dotted transparent; left:-8px; }
-		.ui-tooltip-arrow-tl .ui-tooltip-pointer-inner { border-left:0; border-right:12px dotted transparent; left:2px; }
-		
-		/*right*/
-		.ui-tooltip-arrow-rb .ui-tooltip-pointer,.ui-tooltip-arrow-rc .ui-tooltip-pointer,.ui-tooltip-arrow-rt .ui-tooltip-pointer { right:-14px; border-right:0; border-left-width:14px; }
-		.ui-tooltip-arrow-rb .ui-tooltip-pointer { border-bottom:0; border-top:18px dotted transparent; bottom:10px; }
-		.ui-tooltip-arrow-rc .ui-tooltip-pointer { border-bottom:10px dotted transparent; border-top:10px dotted transparent; bottom:50%; margin-bottom:-10px; }
-		.ui-tooltip-arrow-rt .ui-tooltip-pointer { border-bottom:18px dotted transparent; border-top:0; top:10px; }
-		.ui-tooltip-arrow-rb .ui-tooltip-pointer-inner,.ui-tooltip-arrow-rc .ui-tooltip-pointer-inner,.ui-tooltip-arrow-rt .ui-tooltip-pointer-inner { border-left:10px solid #fff; left:-14px; }
-		.ui-tooltip-arrow-rb .ui-tooltip-pointer-inner { border-bottom:0; border-top:12px dotted transparent; bottom:2px; }
-		.ui-tooltip-arrow-rc .ui-tooltip-pointer-inner { border-bottom:8px dotted transparent; border-top:8px dotted transparent; bottom:-8px; }
-		.ui-tooltip-arrow-rt .ui-tooltip-pointer-inner { border-bottom:12px dotted transparent; border-top:0; top:2px; }
-		
-		/*bottom*/
-		.ui-tooltip-arrow-br .ui-tooltip-pointer,.ui-tooltip-arrow-bc .ui-tooltip-pointer,.ui-tooltip-arrow-bl .ui-tooltip-pointer { bottom:-14px; border-bottom:0; border-top-width:14px; }
-		.ui-tooltip-arrow-br .ui-tooltip-pointer { border-left:18px dotted transparent; border-right:0; right:10px; }
-		.ui-tooltip-arrow-bc .ui-tooltip-pointer { border-left:10px dotted transparent; border-right:10px dotted transparent; left:50%; margin-left:-10px; }
-		.ui-tooltip-arrow-bl .ui-tooltip-pointer { border-left:0; border-right:18px dotted transparent; left:10px; }
-		.ui-tooltip-arrow-br .ui-tooltip-pointer-inner,.ui-tooltip-arrow-bc .ui-tooltip-pointer-inner,.ui-tooltip-arrow-bl .ui-tooltip-pointer-inner { border-top:10px solid #fff; top:-14px; }
-		.ui-tooltip-arrow-br .ui-tooltip-pointer-inner { border-left:12px dotted transparent; border-right:0; right:2px; }
-		.ui-tooltip-arrow-bc .ui-tooltip-pointer-inner { border-left:8px dotted transparent; border-right:8px dotted transparent; left:-8px; }
-		.ui-tooltip-arrow-bl .ui-tooltip-pointer-inner { border-left:0; border-right:12px dotted transparent; left:2px; }
-		
-		/*left*/
-		.ui-tooltip-arrow-lb .ui-tooltip-pointer,.ui-tooltip-arrow-lc .ui-tooltip-pointer,.ui-tooltip-arrow-lt .ui-tooltip-pointer { left:-14px; border-left:0; border-right-width:14px; }
-		.ui-tooltip-arrow-lb .ui-tooltip-pointer { border-bottom:0; border-top:18px dotted transparent; bottom:10px; }
-		.ui-tooltip-arrow-lc .ui-tooltip-pointer { border-bottom:10px dotted transparent; border-top:10px dotted transparent; bottom:50%; margin-bottom:-10px; }
-		.ui-tooltip-arrow-lt .ui-tooltip-pointer { border-bottom:18px dotted transparent; border-top:0; top:10px; }
-		.ui-tooltip-arrow-lb .ui-tooltip-pointer-inner,.ui-tooltip-arrow-lc .ui-tooltip-pointer-inner,.ui-tooltip-arrow-lt .ui-tooltip-pointer-inner { border-right:10px solid #fff; right:-14px; }
-		.ui-tooltip-arrow-lb .ui-tooltip-pointer-inner { border-bottom:0; border-top:12px dotted transparent; bottom:2px; }
-		.ui-tooltip-arrow-lc .ui-tooltip-pointer-inner { border-bottom:8px dotted transparent; border-top:8px dotted transparent; bottom:-8px; }
-	</style>
-</head>
-<body>
-
-<div style="width:300px">
-	<ul id="context1" class="ui-widget ui-widget-header">
-		<li><a href="#" title="Tooltip text 1">Anchor 1</a></li>
-		<li><a href="#" title="Tooltip text 2">Anchor 2</a></li>
-		<li><a href="#" title="Tooltip text 3">Anchor 3</a></li>
-		<li><a href="#" title="Tooltip text 4 more Tooltip text Tooltip text ">Anchor 4</a></li>
-		<li><a href="#" title="Tooltip text 5 more Tooltip text Tooltip text ">Anchor 5</a></li>
-		<li><a href="#" title="Tooltip text 6 more Tooltip text Tooltip text ">Anchor 6</a></li>
-	</ul>
-
-	<div id="right1" style="position: absolute; right: 1em" title="right aligned element">
-		collision detection should kick in around here
-	</div>
-	
-	<div style="margin: 2em 0">
-		<a id="see-footnote" href="#footnote">I'm a link to a footnote.</a>
-	</div>
-	
-	<div id="right2" style="position: absolute; right: 1em" title="right aligned element with custom position">
-		right aligned with custom position
-	</div>
-	
-	<div id="ajax" style="width: 100px;" class="ui-widget-content" title="never be seen">
-		gets its content via ajax
-	</div>
-	
-	<div id="context2" class="ui-widget ui-widget-content">
-		<span title="something" style="border:1px solid blue">span</span>
-		<div title="something else" style="border:1px solid red;">
-			div
-			<span title="something more" style="border:1px solid green;">nested span</span>
-		</div>
-	</div>
-	
-	<form style="margin: 2em 0;">
-		<div>
-			<label for="first">First Name:</label>
-			<input id="first" title="Your first name is optional" />
-		</div>
-		<div>
-			<label for="last">Last Name:</label>
-			<input id="last" title="Your last name is optional" />
-		</div>
-	</form>
-	
-	<div id="footnote">This is <strong>the</strong> footnote, including other elements</div>
-	
-	<button id="disable">Toggle disabled</button>
-	<button id="toggle">Toggle widget</button>
-</div>
-
-
-</body>
-</html>
diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html
deleted file mode 100644
index 3f1ae3878..000000000
--- a/tests/visual/tooltip/tooltip.html
+++ /dev/null
@@ -1,149 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>Tooltip Visual Test: Default</title>
-	<link rel="stylesheet" href="../visual.css" type="text/css" />
-	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css">
-	<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script>
-	<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
-	<script type="text/javascript">
-	$(function() {
-		$.fn.themeswitcher && $('<div/>').css({
-			position: "absolute",
-			right: 10,
-			top: 10
-		}).appendTo(document.body).themeswitcher();
-		
-		function enable() {
-			// default
-			$("#context1 a, form input, #childish").tooltip();
-			
-			// custom class, replaces ui-widget-content
-			$("#context2 [title]").tooltip({
-				tooltipClass: "ui-widget-header"
-			});
-			$("#right1").tooltip({
-				tooltipClass: "ui-state-error"
-			});
-			
-			// synchronous content
-			$("#see-footnote").tooltip({
-				content: function() {
-					return $($(this).attr("href")).html();
-				}
-			});
-			// asynchronous content
-			$("#ajax").tooltip({
-				content: function(response) {
-					$.get("ajaxcontent.php", response);
-					return "Loading...";
-				}
-			});
-			
-			// custom position
-			$("#right2").tooltip({
-				position: {
-					my: "center top",
-					at: "center bottom",
-					offset: "0 10"
-				},
-				tooltipClass: "ui-state-highlight"
-			});
-			
-			$("#button1").button().tooltip();
-			$("#button2").button({
-				icons: {
-					primary: "ui-icon-wrench"
-				}
-			}).tooltip();
-			$("#button3").button({
-				icons: {
-					primary: "ui-icon-wrench"
-				},
-				text: false
-			}).tooltip();
-		}
-		enable();
-		
-		$("#disable").toggle(function() {
-			$("*").tooltip("disable");
-		}, function() {
-			$("*").tooltip("enable");
-		});
-		$("#toggle").toggle(function() {
-			$("*").tooltip("destroy");
-		}, function() {
-			enable();
-		});
-	});
-	</script>
-</head>
-<body>
-
-<div style="width:300px">
-	<ul id="context1" class="ui-widget ui-widget-header">
-		<li><a href="#" title="Tooltip text 1">Anchor 1</a></li>
-		<li><a href="#" title="Tooltip text 2">Anchor 2</a></li>
-		<li><a href="#" title="Tooltip text 3">Anchor 3</a></li>
-		<li><a href="#" title="Tooltip text 4 more Tooltip text Tooltip text ">Anchor 4</a></li>
-		<li><a href="#" title="Tooltip text 5 more Tooltip text Tooltip text ">Anchor 5</a></li>
-		<li><a href="#" title="Tooltip text 6 more Tooltip text Tooltip text ">Anchor 6</a></li>
-	</ul>
-
-	<div id="right1" style="position: absolute; right: 1em" title="right aligned element">
-		collision detection should kick in around here
-	</div>
-	
-	<div style="margin: 2em 0">
-		<a id="see-footnote" href="#footnote">I'm a link to a footnote.</a>
-	</div>
-	
-	<div id="right2" style="position: absolute; right: 1em" title="right aligned element with custom position">
-		right aligned with custom position
-	</div>
-	
-	<div id="ajax" style="width: 100px;" class="ui-widget-content" title="never be seen">
-		gets its content via ajax
-	</div>
-	
-	<div id="context2" class="ui-widget ui-widget-content">
-		<span title="something" style="border:1px solid blue">span</span>
-		<div title="something else" style="border:1px solid red;">
-			div
-			<span title="something more" style="border:1px solid green;">nested span</span>
-		</div>
-	</div>
-	
-	<div id="childish" class="ui-widget ui-widget-content" style="margin: 2em 0; border: 1px solid black;" title="element with child elements">
-		Text in <strong>bold</strong>.
-	</div>
-	
-	<form style="margin: 2em 0;">
-		<div>
-			<label for="first">First Name:</label>
-			<input id="first" title="Your first name is optional" />
-		</div>
-		<div>
-			<label for="last">Last Name:</label>
-			<input id="last" title="Your last name is optional" />
-		</div>
-	</form>
-	
-	<button id="button1" title="Button Tooltip">Button Label</button>
-	<button id="button2" title="Icon Button">Button with Icon</button>
-	<button id="button3">Icon Only Button</button>
-	
-	<div id="footnote">This is <strong>the</strong> footnote, including other elements</div>
-	
-	<button id="disable">Toggle disabled</button>
-	<button id="toggle">Toggle widget</button>
-</div>
-
-
-</body>
-</html>
author	jzaefferer <joern.zaefferer@gmail.com>	2010-04-08 23:03:35 +0200
committer	jzaefferer <joern.zaefferer@gmail.com>	2010-04-08 23:03:35 +0200
commit	9230b7263b90dfc3fcb4a309b549332dee6dcba4 (patch)
tree	9e8ea3844386b841b10c521ff3fe5ab0c4c1e43b /tests
parent	1a89b6ee2f9f02fd92d9ec3ee663b7dd237d3d15 (diff)
parent	ffc29bba052e4bc8b84e4c2e16036140148b6f9c (diff)
download	jquery-ui-9230b7263b90dfc3fcb4a309b549332dee6dcba4.tar.gz jquery-ui-9230b7263b90dfc3fcb4a309b549332dee6dcba4.zip