From a3c7e2f7a7ddac0f3d9c724aa3eaee58e0a2dafc Mon Sep 17 00:00:00 2001
From: Daniel Spitzer <dsp@tradeshift.com>
Date: Wed, 7 Nov 2018 13:29:23 +0100
Subject: [PATCH 1/6] [Docs] Fix `Colors` page

It couldn't really handle `rgba()` colors
---
 docs/src/xhtml/appendix/colors/colors.js | 12 ++++++------
 package-lock.json                        |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/src/xhtml/appendix/colors/colors.js b/docs/src/xhtml/appendix/colors/colors.js
index 3f89770e8..ee86642f3 100644
--- a/docs/src/xhtml/appendix/colors/colors.js
+++ b/docs/src/xhtml/appendix/colors/colors.js
@@ -9,7 +9,7 @@ ts.ui.ready(function rendercolors() {
 		var rule = rules[i];
 		var color = rule.selectorText.substring(5);
 		var rgb = rule.style.color;
-		var channels = rgb.match(/rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/);
+		var channels = rgb.match(/rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})/);
 		var row = color.split('-')[1];
 		colors[row] = colors[row] || {};
 		var hsl = rgbToHsl(channels[1], channels[2], channels[3]);
@@ -60,16 +60,16 @@ function rgbToHsl(r, g, b) {
 		}
 		h /= 6;
 	}
-	h = Math.floor(h * 360);
-	s = Math.floor(s * 100);
-	l = Math.floor(l * 100);
+	h = Math.round(h * 360);
+	s = Math.round(s * 100);
+	l = Math.round(l * 100);
 
-	return ['hsl(' + h + ', ' + s + ', ' + l + ')', h, s, l];
+	return ['hsl(' + h + ', ' + s + '%, ' + l + '%)', h, s, l];
 }
 
 // @see https://gist.github.com/sabman/1018593
 function rgbToHex(rgb) {
-	rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+	rgb = rgb.match(/rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})/);
 	function hex(x) {
 		return ('0' + parseInt(x).toString(16)).slice(-2);
 	}
diff --git a/package-lock.json b/package-lock.json
index 3a256370c..d44ba2b36 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@tradeshift/tradeshift-ui",
-  "version": "11.0.0-alpha.2",
+  "version": "11.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

From f8637269b91c9902a687625e6cd7f42992d54c4d Mon Sep 17 00:00:00 2001
From: Daniel Spitzer <dsp@tradeshift.com>
Date: Wed, 7 Nov 2018 13:34:13 +0100
Subject: [PATCH 2/6] [Docs] Update intro page icon colors

---
 docs/src/less/dox-page-intro.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/less/dox-page-intro.less b/docs/src/less/dox-page-intro.less
index 5b7098122..d81ca74ee 100644
--- a/docs/src/less/dox-page-intro.less
+++ b/docs/src/less/dox-page-intro.less
@@ -52,7 +52,7 @@
 			circle,
 			polygon,
 			path {
-				fill: @ts-green-lite;
+				fill: @ts-green;
 			}
 		}
 	}

From cf0b8a3a12183c6e7b747f1a97e6204cbb11a73f Mon Sep 17 00:00:00 2001
From: Daniel Spitzer <dsp@tradeshift.com>
Date: Wed, 7 Nov 2018 14:30:49 +0100
Subject: [PATCH 3/6] [Docs] Use valid JSON for `DoxApi` blocks

---
 docs/src/xhtml/components/bars/tabbar.xhtml   |  32 +-
 docs/src/xhtml/components/bars/toolbar.xhtml  | 152 +++++-----
 docs/src/xhtml/components/bars/topbar.xhtml   | 280 +++++++++---------
 .../src/xhtml/components/footer/actions.xhtml |  68 ++---
 .../components/footer/collabbutton.xhtml      |  10 +-
 .../components/footer/configbutton.xhtml      |  10 +-
 docs/src/xhtml/components/footer/index.xhtml  |  58 ++--
 docs/src/xhtml/components/modals/index.xhtml  |  78 ++---
 docs/src/xhtml/components/pager/index.xhtml   |  26 +-
 .../src/xhtml/components/table/building.xhtml |  28 +-
 .../xhtml/components/table/collaborate.xhtml  |  10 +-
 .../xhtml/components/table/configuring.xhtml  |  30 +-
 docs/src/xhtml/components/table/editing.xhtml |  50 ++--
 docs/src/xhtml/components/table/extras.xhtml  | 158 +++++-----
 .../xhtml/components/table/selecting.xhtml    |  54 ++--
 docs/src/xhtml/components/tags/tag.xhtml      |  74 ++---
 .../xhtml/components/userimages/index.xhtml   |  28 +-
 .../xhtml/components/userimages/json.xhtml    |  28 +-
 18 files changed, 587 insertions(+), 587 deletions(-)

diff --git a/docs/src/xhtml/components/bars/tabbar.xhtml b/docs/src/xhtml/components/bars/tabbar.xhtml
index 91fda2108..902bdd28a 100644
--- a/docs/src/xhtml/components/bars/tabbar.xhtml
+++ b/docs/src/xhtml/components/bars/tabbar.xhtml
@@ -104,33 +104,33 @@
 						<div data-ts="DoxApi">
 							<script type="application/json">
 								{
-									name: "ts.ui.TabBarSpirit",
-									methods: [
+									"name": "ts.ui.TabBarSpirit",
+									"methods": [
 										{
-											name: "tabs",
-											args: "(array)",
-											desc: "Get or set the tabs."
+											"name": "tabs",
+											"args": "(array)",
+											"desc": "Get or set the tabs."
 										},
 										{
-											name: "buttons",
-											args: "(array)",
-											desc: "Get or set the buttons."
+											"name": "buttons",
+											"args": "(array)",
+											"desc": "Get or set the buttons."
 										},
 										{
-											name: "clear",
-											desc: "Clear all tabs and buttons."
+											"name": "clear",
+											"desc": "Clear all tabs and buttons."
 										},
 										{
-											name: "uncompact",
-											desc: "Don't collect multiple tertiary buttons in a menu. You can call `compact` to restore default behavior."
+											"name": "uncompact",
+											"desc": "Don't collect multiple tertiary buttons in a menu. You can call `compact` to restore default behavior."
 										},
 										{
-											name: "white",
-											desc: "Use [white](white) background for selected tab."
+											"name": "white",
+											"desc": "Use [white](white) background for selected tab."
 										},
 										{
-											name: "lite",
-											desc: "Use [light](lite) background for selected tab."
+											"name": "lite",
+											"desc": "Use [light](lite) background for selected tab."
 										}
 									]
 								}
diff --git a/docs/src/xhtml/components/bars/toolbar.xhtml b/docs/src/xhtml/components/bars/toolbar.xhtml
index 6c4c0f108..4540df541 100644
--- a/docs/src/xhtml/components/bars/toolbar.xhtml
+++ b/docs/src/xhtml/components/bars/toolbar.xhtml
@@ -134,53 +134,53 @@
 						<div data-ts="DoxApi">
 							<script type="application/json">
 								{
-									name: "ts.ui.SearchModel",
-									properties: [
+									"name": "ts.ui.SearchModel",
+									"properties": [
 										{
-											name: "value",
-											type: "string",
-											desc: "The search field value."
+											"name": "value",
+											"type": "string",
+											"desc": "The search field value."
 										},
 										{
-											name: "idletime",
-											type: "number",
-											desc: "Time before the user is considered idle."
+											"name": "idletime",
+											"type": "number",
+											"desc": "Time before the user is considered idle."
 										},
 										{
-											name: "info",
-											type: "string",
-											desc: "The placeholder and/or mouseover tooltip."
+											"name": "info",
+											"type": "string",
+											"desc": "The placeholder and/or mouseover tooltip."
 										},
 										{
-											name: "flex",
-											type: "number",
-											desc: "Fill the available width of the ToolBar. The value should be `1`."
+											"name": "flex",
+											"type": "number",
+											"desc": "Fill the available width of the ToolBar. The value should be `1`."
 										}
 									],
-									methods: [
+									"methods": [
 										{
-											name: "onsearch",
-											desc: "Called when the user presses ENTER."
+											"name": "onsearch",
+											"desc": "Called when the user presses ENTER."
 										},
 										{
-											name: "onidle",
-											desc: "Called when the user pauses typing."
+											"name": "onidle",
+											"desc": "Called when the user pauses typing."
 										},
 										{
-											name: "onfocus",
-											desc: "Called when the search field is focused."
+											"name": "onfocus",
+											"desc": "Called when the search field is focused."
 										},
 										{
-											name: "onblur",
-											desc: "Called when the search field gets blurred."
+											"name": "onblur",
+											"desc": "Called when the search field gets blurred."
 										},
 										{
-											name: "focus",
-											desc: "Focus the search field."
+											"name": "focus",
+											"desc": "Focus the search field."
 										},
 										{
-											name: "blur",
-											desc: "Blur the search field."
+											"name": "blur",
+											"desc": "Blur the search field."
 										}
 									]
 								}
@@ -192,59 +192,59 @@
 						<div data-ts="DoxApi">
 							<script type="application/json">
 								{
-									name: "ts.ui.ToolBar",
-									methods: [
+									"name": "ts.ui.ToolBar",
+									"methods": [
 										{
-											name: "title",
-											args: "(string)",
-											desc: "Get or set the title."
+											"name": "title",
+											"args": "(string)",
+											"desc": "Get or set the title."
 										},
 										{
-											name: "buttons",
-											args: "(array)",
-											desc: "Get or set the buttons."
+											"name": "buttons",
+											"args": "(array)",
+											"desc": "Get or set the buttons."
 										},
 										{
-											name: "search",
-											args: "(object)",
-											desc: "Get or set the search configuration."
+											"name": "search",
+											"args": "(object)",
+											"desc": "Get or set the search configuration."
 										},
 										{
-											name: "clear",
-											desc: "Delete title, buttons and search. Note that this will not hide the ToolBar, see below."
+											"name": "clear",
+											"desc": "Delete title, buttons and search. Note that this will not hide the ToolBar, see below."
 										},
 										{
-											name: "hide",
-											desc: "Hide the ToolBar. Once hidden, you can use `show` to show it again."
+											"name": "hide",
+											"desc": "Hide the ToolBar. Once hidden, you can use `show` to show it again."
 										},
 										{
-											name: "showClose",
-											args: "(function)",
-											desc: "Show closing `X` button with an optional callback."
+											"name": "showClose",
+											"args": "(function)",
+											"desc": "Show closing `X` button with an optional callback."
 										},
 										{
-											name: "hideClose",
-											desc: "Hide the closing `X` button."
+											"name": "hideClose",
+											"desc": "Hide the closing `X` button."
 										},
 										{
-											name: "green",
-											desc: "Change the general color scheme to [green](green)."
+											"name": "green",
+											"desc": "Change the general color scheme to [green](green)."
 										},
 										{
-											name: "blue",
-											desc: "Change the general color scheme to [blue](blue)."
+											"name": "blue",
+											"desc": "Change the general color scheme to [blue](blue)."
 										},
 										{
-											name: "purple",
-											desc: "Change the general color scheme to [purple](purple)."
+											"name": "purple",
+											"desc": "Change the general color scheme to [purple](purple)."
 										},
 										{
-											name: "dark",
-											desc: "Change the general color scheme to [dark](dark)"
+											"name": "dark",
+											"desc": "Change the general color scheme to [dark](dark)"
 										},
 										{
-											name: "lite",
-											desc: "Revert back to the [default](lite) color scheme."
+											"name": "lite",
+											"desc": "Revert back to the [default](lite) color scheme."
 										}
 									]
 								}
@@ -308,38 +308,38 @@
 						<div data-ts="DoxApi">
 							<script type="application/json">
 								{
-									name: "ts.ui.ToolBarSpirit",
-									methods: [
+									"name": "ts.ui.ToolBarSpirit",
+									"methods": [
 										{
-											name: "buttons",
-											args: "(array)",
-											desc: "Get or set the buttons."
+											"name": "buttons",
+											"args": "(array)",
+											"desc": "Get or set the buttons."
 										},
 										{
-											name: "search",
-											args: "(object)",
-											desc: "Get or set the search configuration."
+											"name": "search",
+											"args": "(object)",
+											"desc": "Get or set the search configuration."
 										},
 										{
-											name: "clear",
-											desc: "Delete title, buttons and search."
+											"name": "clear",
+											"desc": "Delete title, buttons and search."
 										},
 										{
-											name: "micro",
-											desc: "Shrink the ToolBar. You can call `macro` to grow it back again."
+											"name": "micro",
+											"desc": "Shrink the ToolBar. You can call `macro` to grow it back again."
 										},
 										{
-											name: "uncompact",
-											desc: "Don't collect multiple tertiary buttons in a menu. You can call `compact` to restore default behavior."
+											"name": "uncompact",
+											"desc": "Don't collect multiple tertiary buttons in a menu. You can call `compact` to restore default behavior."
 										},
 										{
-											name: "showClose",
-											args: "(function)",
-											desc: "Show closing `X` button with an optional callback."
+											"name": "showClose",
+											"args": "(function)",
+											"desc": "Show closing `X` button with an optional callback."
 										},
 										{
-											name: "hideClose",
-											desc: "Hide the closing `X` button."
+											"name": "hideClose",
+											"desc": "Hide the closing `X` button."
 										}
 									]
 								}
diff --git a/docs/src/xhtml/components/bars/topbar.xhtml b/docs/src/xhtml/components/bars/topbar.xhtml
index 56eded988..db9bc5320 100644
--- a/docs/src/xhtml/components/bars/topbar.xhtml
+++ b/docs/src/xhtml/components/bars/topbar.xhtml
@@ -178,56 +178,56 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.TabCollection",
-								properties: [
+								"name": "ts.ui.TabCollection",
+								"properties": [
 									{
-										name: "selectedIndex",
-										type: "number",
-										desc: "Get or set selected index."
+										"name": "selectedIndex",
+										"type": "number",
+										"desc": "Get or set selected index."
 									}
 								],
-								methods: [
+								"methods": [
 									{
-										name: "push",
-										args: "o1, o2, ...",
-										desc: "Add tab(s) to the end of the collection."
+										"name": "push",
+										"args": "o1, o2, ...",
+										"desc": "Add tab(s) to the end of the collection."
 									},
 									{
-										name: "unshift",
-										args: "o1, o2, ...",
-										desc: "Add tab(s) to the front of the collection."
+										"name": "unshift",
+										"args": "o1, o2, ...",
+										"desc": "Add tab(s) to the front of the collection."
 									},
 									{
-										name: "pop",
-										desc: "Remove and return the last tab."
+										"name": "pop",
+										"desc": "Remove and return the last tab."
 									},
 									{
-										name: "shift",
-										desc: "Remove and return the first tab."
+										"name": "shift",
+										"desc": "Remove and return the first tab."
 									},
 									{
-										name: "splice",
-										args: "i, d, o1, o2, ...",
-										desc: "Insert tab(s) at `i`, optionally deleting `d` amount of tabs."
+										"name": "splice",
+										"args": "i, d, o1, o2, ...",
+										"desc": "Insert tab(s) at `i`, optionally deleting `d` amount of tabs."
 									},
 									{
-										name: "get",
-										args: "string|number",
-										desc: "Get tab by `id` or numeric index."
+										"name": "get",
+										"args": "string|number",
+										"desc": "Get tab by `id` or numeric index."
 									},
 									{
-										name: "clear",
-										desc: "Remove all tabs."
+										"name": "clear",
+										"desc": "Remove all tabs."
 									},
 									{
-										name: "showNew",
-										args: "(function)",
-										desc: "Show New-Tab button with an onclick callback. Use `hideNew()` to hide the button."
+										"name": "showNew",
+										"args": "(function)",
+										"desc": "Show New-Tab button with an onclick callback. Use `hideNew()` to hide the button."
 									},
 									{
-										name: "onselect",
-										args: "number, number",
-										desc: "Open for implementation: Called whenever the selected index changes with two parameters `newindex` and `oldindex`."
+										"name": "onselect",
+										"args": "number, number",
+										"desc": "Open for implementation: Called whenever the selected index changes with two parameters `newindex` and `oldindex`."
 									}
 								]
 							}
@@ -236,46 +236,46 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.TabModel",
-								properties: [
+								"name": "ts.ui.TabModel",
+								"properties": [
 									{
-										name: "id",
-										type: "string",
-										desc: "Optional tab `id`."
+										"name": "id",
+										"type": "string",
+										"desc": "Optional tab `id`."
 									},
 									{
-										name: "label",
-										type: "string",
-										desc: "The tab label."
+										"name": "label",
+										"type": "string",
+										"desc": "The tab label."
 									},
 									{
-										name: "icon",
-										type: "string",
-										desc: "The tab icon."
+										"name": "icon",
+										"type": "string",
+										"desc": "The tab icon."
 									},
 									{
-										name: "selected",
-										type: "boolean",
-										desc: "Get or set selected status."
+										"name": "selected",
+										"type": "boolean",
+										"desc": "Get or set selected status."
 									},
 									{
-										name: "closeable",
-										type: "boolean",
-										desc: "Tab can be closed? See also `onclose`"
+										"name": "closeable",
+										"type": "boolean",
+										"desc": "Tab can be closed? See also `onclose`"
 									}
 								],
-								methods: [
+								"methods": [
 									{
-										name: "select",
-										desc: "Select the tab. This will unselect some other tab."
+										"name": "select",
+										"desc": "Select the tab. This will unselect some other tab."
 									},
 									{
-										name: "onselect",
-										desc: "Called whenever the tab gets selected."
+										"name": "onselect",
+										"desc": "Called whenever the tab gets selected."
 									},
 									{
-										name: "onclose",
-										desc: "Called whenever the tab gets closed."
+										"name": "onclose",
+										"desc": "Called whenever the tab gets closed."
 									}
 								]
 							}
@@ -406,7 +406,7 @@
 								{ label: 'Normal'},
 								[
 									{ label: 'Accept', type: 'ts-primary' },
-									{ label: 'Reject', type: 'ts-danger' }	
+									{ label: 'Reject', type: 'ts-danger' }
 								]
 							]);
 						</script>
@@ -427,39 +427,39 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 						{
-							name: "ts.ui.ButtonCollection",
-							methods: [
+							"name": "ts.ui.ButtonCollection",
+							"methods": [
 								{
-									name: "push",
-									args: "o1, o2, ...",
-									desc: "Add button(s) to the end of the collection."
+									"name": "push",
+									"args": "o1, o2, ...",
+									"desc": "Add button(s) to the end of the collection."
 								},
 								{
-									name: "unshift",
-									args: "o1, o2, ...",
-									desc: "Add button(s) to the front of the collection."
+									"name": "unshift",
+									"args": "o1, o2, ...",
+									"desc": "Add button(s) to the front of the collection."
 								},
 								{
-									name: "pop",
-									desc: "Remove and return the last button."
+									"name": "pop",
+									"desc": "Remove and return the last button."
 								},
 								{
-									name: "shift",
-									desc: "Remove and return the first button."
+									"name": "shift",
+									"desc": "Remove and return the first button."
 								},
 								{
-									name: "splice",
-									args: "i, d, o1, o2, ...",
-									desc: "Insert button(s) at `i`, optionally deleting `d` amount of buttons."
+									"name": "splice",
+									"args": "i, d, o1, o2, ...",
+									"desc": "Insert button(s) at `i`, optionally deleting `d` amount of buttons."
 								},
 								{
-									name: "get",
-									args: "string|number",
-									desc: "Get button by `id` or numeric index."
+									"name": "get",
+									"args": "string|number",
+									"desc": "Get button by `id` or numeric index."
 								},
 								{
-									name: "clear",
-									desc: "Remove all buttons."
+									"name": "clear",
+									"desc": "Remove all buttons."
 								}
 							]
 						}
@@ -468,68 +468,68 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.ButtonModel",
-								properties: [
+								"name": "ts.ui.ButtonModel",
+								"properties": [
 									{
-										name: "id",
-										type: "string",
-										desc: "Optional button `id`."
+										"name": "id",
+										"type": "string",
+										"desc": "Optional button `id`."
 									},
 									{
-										name: "label",
-										type: "string",
-										desc: "The buttons label."
+										"name": "label",
+										"type": "string",
+										"desc": "The buttons label."
 									},
 									{
-										name: "icon",
-										type: "string",
-										desc: "The button icon (label must be `null` or empty)."
+										"name": "icon",
+										"type": "string",
+										"desc": "The button icon (label must be `null` or empty)."
 									},
 									{
-										name: "info",
-										type: "string",
-										desc: "The button tooltip (hover text)."
+										"name": "info",
+										"type": "string",
+										"desc": "The button tooltip (hover text)."
 									},
 									{
-										name: "visible",
-										type: "boolean",
-										desc: "Button is visible?"
+										"name": "visible",
+										"type": "boolean",
+										"desc": "Button is visible?"
 									},
 									{
-										name: "disabled",
-										type: "boolean",
-										desc: "Button is disabled?"
+										"name": "disabled",
+										"type": "boolean",
+										"desc": "Button is disabled?"
 									}
 								],
-								methods: [
+								"methods": [
 									{
-										name: "onclick",
-										desc: "Called whenever the button gets clicked."
+										"name": "onclick",
+										"desc": "Called whenever the button gets clicked."
 									},
 									{
-										name: "busy",
-										args: "(string)",
-										desc: "Mark button busy with optional message."
+										"name": "busy",
+										"args": "(string)",
+										"desc": "Mark button busy with optional message."
 									},
 									{
-										name: "done",
-										desc: "Mark the button done (not busy)."
+										"name": "done",
+										"desc": "Mark the button done (not busy)."
 									},
 									{
-										name: "hide",
-										desc: "Hide the button."
+										"name": "hide",
+										"desc": "Hide the button."
 									},
 									{
-										name: "show",
-										desc: "Show the button."
+										"name": "show",
+										"desc": "Show the button."
 									},
 									{
-										name: "disable",
-										desc: "Disable the button."
+										"name": "disable",
+										"desc": "Disable the button."
 									},
 									{
-										name: "enable",
-										desc: "Enable the button."
+										"name": "enable",
+										"desc": "Enable the button."
 									}
 								]
 							}
@@ -593,56 +593,56 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.TopBar",
-								methods: [
+								"name": "ts.ui.TopBar",
+								"methods": [
 									{
-										name: "title",
-										args: "(string)",
-										desc: "Get or set the title."
+										"name": "title",
+										"args": "(string)",
+										"desc": "Get or set the title."
 									},
 									{
-										name: "tabs",
-										args: "(array)",
-										desc: "Get or set the tabs."
+										"name": "tabs",
+										"args": "(array)",
+										"desc": "Get or set the tabs."
 									},
 									{
-										name: "buttons",
-										args: "(array)",
-										desc: "Get or set the buttons."
+										"name": "buttons",
+										"args": "(array)",
+										"desc": "Get or set the buttons."
 									},
 									{
-										name: "showBack",
-										args: "(function)",
-										desc: "Show Back button with a callback. Use `hideBack` to hide the button."
+										"name": "showBack",
+										"args": "(function)",
+										"desc": "Show Back button with a callback. Use `hideBack` to hide the button."
 									},
 									{
-										name: "showNext",
-										args: "(function)",
-										desc: "Show Forward button with a callback. Use `hideNext` to hide the button."
+										"name": "showNext",
+										"args": "(function)",
+										"desc": "Show Forward button with a callback. Use `hideNext` to hide the button."
 									},
 									{
-										name: "clear",
-										desc: "Clear all tabs and buttons. Note that this will not hide the TopBar, see below."
+										"name": "clear",
+										"desc": "Clear all tabs and buttons. Note that this will not hide the TopBar, see below."
 									},
 									{
-										name: "hide",
-										desc: "Hide the TopBar. Once hidden, you can use `show` to show it again."
+										"name": "hide",
+										"desc": "Hide the TopBar. Once hidden, you can use `show` to show it again."
 									},
 									{
-										name: "green",
-										desc: "Change the general color scheme to [green](green)."
+										"name": "green",
+										"desc": "Change the general color scheme to [green](green)."
 									},
 									{
-										name: "blue",
-										desc: "Change the general color scheme to [blue](blue)."
+										"name": "blue",
+										"desc": "Change the general color scheme to [blue](blue)."
 									},
 									{
-										name: "purple",
-										desc: "Change the general color scheme to [purple](purple)."
+										"name": "purple",
+										"desc": "Change the general color scheme to [purple](purple)."
 									},
 									{
-										name: "dark",
-										desc: "Revert back to the [default](dark) color scheme."
+										"name": "dark",
+										"desc": "Revert back to the [default](dark) color scheme."
 									}
 								]
 							}
diff --git a/docs/src/xhtml/components/footer/actions.xhtml b/docs/src/xhtml/components/footer/actions.xhtml
index c77d6b315..6938a131e 100644
--- a/docs/src/xhtml/components/footer/actions.xhtml
+++ b/docs/src/xhtml/components/footer/actions.xhtml
@@ -117,21 +117,21 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.Footer",
-								methods: [
+								"name": "ts.ui.Footer",
+								"methods": [
 									{
-										name: 'status',
-										args: '(string)',
-										desc: 'Get or set the status message.'
+										"name": "status",
+										"args": "(string)",
+										"desc": "Get or set the status message."
 									},
 									{
-										name: 'linkable',
-										args: '(function)',
-										desc: 'Support links via Markdown with optional callback.'
+										"name": "linkable",
+										"args": "(function)",
+										"desc": "Support links via Markdown with optional callback."
 									},
 									{
-										name: 'unlinkable',
-										desc: 'Disable support for links in the status message.'
+										"name": "unlinkable",
+										"desc": "Disable support for links in the status message."
 									}
 								]
 							}
@@ -188,45 +188,45 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.CheckBoxModel",
-								properties: [
+								"name": "ts.ui.CheckBoxModel",
+								"properties": [
 									{
-										name: 'checked',
-										type: 'boolean',
-										desc: 'Checkbox is checked?'
+										"name": "checked",
+										"type": "boolean",
+										"desc": "Checkbox is checked?"
 									},
 									{
-										name: 'indeterminate',
-										type: 'boolean',
-										desc: 'Selection is indeterminate?'
+										"name": "indeterminate",
+										"type": "boolean",
+										"desc": "Selection is indeterminate?"
 									},
 									{
-										name: 'visible',
-										type: 'boolean',
-										desc: 'Checkbox is visible?'
+										"name": "visible",
+										"type": "boolean",
+										"desc": "Checkbox is visible?"
 									},
 									{
-										name: 'info',
-										type: 'string',
-										desc: 'The checkbox title (tooltip).'
-									},
+										"name": "info",
+										"type": "string",
+										"desc": "The checkbox title (tooltip)."
+									}
 								],
-								methods: [
+								"methods": [
 									{
-										name: 'check',
-										desc: 'Check that checkbox.'
+										"name": "check",
+										"desc": "Check that checkbox."
 									},
 									{
-										name: 'uncheck',
-										desc: 'Uncheck the checkbox.'
+										"name": "uncheck",
+										"desc": "Uncheck the checkbox."
 									},
 									{
-										name: 'hide',
-										desc: 'Hide the checkbox.'
+										"name": "hide",
+										"desc": "Hide the checkbox."
 									},
 									{
-										name: 'show',
-										desc: 'Show the (hidden) checkbox.'
+										"name": "show",
+										"desc": "Show the (hidden) checkbox."
 									}
 								]
 							}
diff --git a/docs/src/xhtml/components/footer/collabbutton.xhtml b/docs/src/xhtml/components/footer/collabbutton.xhtml
index 0e8c30195..2b7218811 100644
--- a/docs/src/xhtml/components/footer/collabbutton.xhtml
+++ b/docs/src/xhtml/components/footer/collabbutton.xhtml
@@ -40,12 +40,12 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.Footer",
-								methods: [
+								"name": "ts.ui.Footer",
+								"methods": [
 									{
-										name: 'collabbutton',
-										args: '(<Function|null>)',
-										desc: 'Get or set the collaboration button. Pass `null` to remove the whole button.'
+										"name": "collabbutton",
+										"args": "(<Function|null>)",
+										"desc": "Get or set the collaboration button. Pass `null` to remove the whole button."
 									}
 								]
 							}
diff --git a/docs/src/xhtml/components/footer/configbutton.xhtml b/docs/src/xhtml/components/footer/configbutton.xhtml
index 627649005..c2c477d58 100644
--- a/docs/src/xhtml/components/footer/configbutton.xhtml
+++ b/docs/src/xhtml/components/footer/configbutton.xhtml
@@ -40,12 +40,12 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.Footer",
-								methods: [
+								"name": "ts.ui.Footer",
+								"methods": [
 									{
-										name: 'configbutton',
-										args: '(<Function|null>)',
-										desc: 'Get or set the general purpose configuration button. Pass `null` to remove it.'
+										"name": "configbutton",
+										"args": "(<Function|null>)",
+										"desc": "Get or set the general purpose configuration button. Pass `null` to remove it."
 									}
 								]
 							}
diff --git a/docs/src/xhtml/components/footer/index.xhtml b/docs/src/xhtml/components/footer/index.xhtml
index 0b3b54fea..54000f81b 100644
--- a/docs/src/xhtml/components/footer/index.xhtml
+++ b/docs/src/xhtml/components/footer/index.xhtml
@@ -34,52 +34,52 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.Footer",
-								methods: [
+								"name": "ts.ui.Footer",
+								"methods": [
 									{
-										name: 'buttons',
-										args: '(Array<Object>)',
-										desc: 'Get or set the general purpose buttons.'
+										"name": "buttons",
+										"args": "(Array<Object>)",
+										"desc": "Get or set the general purpose buttons."
 									},
 									{
-										name: 'actions',
-										args: '(Array<Object>)',
-										desc: 'Get or set the actions to handle seleced objects of any kind.'
+										"name": "actions",
+										"args": "(Array<Object>)",
+										"desc": "Get or set the actions to handle seleced objects of any kind."
 									},
 									{
-										name: 'pager',
-										args: '(Object)',
-										desc: 'Get or set the Pager that paginates all the things.'
+										"name": "pager",
+										"args": "(Object)",
+										"desc": "Get or set the Pager that paginates all the things."
 									},
 									{
-										name: 'configbutton',
-										args: '(<Object>)',
-										desc: 'Get or set the general purpose configuration button.'
+										"name": "configbutton",
+										"args": "(<Object>)",
+										"desc": "Get or set the general purpose configuration button."
 									},
 									{
-										name: 'collabbutton',
-										args: '(<Object>)',
-										desc: 'Get or set the dedicated collaboration button.'
+										"name": "collabbutton",
+										"args": "(<Object>)",
+										"desc": "Get or set the dedicated collaboration button."
 									},
 									{
-										name: 'status',
-										args: '(string)',
-										desc: 'Get or set the status message.'
+										"name": "status",
+										"args": "(string)",
+										"desc": "Get or set the status message."
 									},
 									{
-										name: 'linkable',
-										args: '(function)',
-										desc: 'Support links in status message.'
+										"name": "linkable",
+										"args": "(function)",
+										"desc": "Support links in status message."
 									},
 									{
-										name: 'unlinkable',
-										desc: 'Disable links in status message.'
+										"name": "unlinkable",
+										"desc": "Disable links in status message."
 									},
 									{
-										name: 'checkbox',
-										args: '(<Object>)',
-										desc: 'Get or set the (selection) checkbox.'
-									},
+										"name": "checkbox",
+										"args": "(<Object>)",
+										"desc": "Get or set the (selection) checkbox."
+									}
 								]
 							}
 						</script>
diff --git a/docs/src/xhtml/components/modals/index.xhtml b/docs/src/xhtml/components/modals/index.xhtml
index 782824ade..b442aeb3e 100644
--- a/docs/src/xhtml/components/modals/index.xhtml
+++ b/docs/src/xhtml/components/modals/index.xhtml
@@ -254,76 +254,76 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.ModalSpirit",
-								methods: [
+								"name": "ts.ui.ModalSpirit",
+								"methods": [
 									{
-										name: "tabs",
-										args: "(array)",
-										desc: "Get or set the tabs."
+										"name": "tabs",
+										"args": "(array)",
+										"desc": "Get or set the tabs."
 									},
 									{
-										name: "buttons",
-										args: "(array)",
-										desc: "Get or set the buttons."
+										"name": "buttons",
+										"args": "(array)",
+										"desc": "Get or set the buttons."
 									},
 									{
-										name: "title",
-										args: "(array)",
-										desc: "Get or set the title."
+										"name": "title",
+										"args": "(array)",
+										"desc": "Get or set the title."
 									},
 									{
-										name: "open",
-										desc: "Open the Modal."
+										"name": "open",
+										"desc": "Open the Modal."
 									},
 									{
-										name: "close",
-										desc: "Close the Modal."
+										"name": "close",
+										"desc": "Close the Modal."
 									},
 									{
-										name: "busy",
-										desc: "Hide the content (while loading new content)."
+										"name": "busy",
+										"desc": "Hide the content (while loading new content)."
 									},
 									{
-										name: "done",
-										desc: "Show the content."
+										"name": "done",
+										"desc": "Show the content."
 									},
 									{
-										name: "spin",
-										desc: "Hide the content while showing a spinner."
+										"name": "spin",
+										"desc": "Hide the content while showing a spinner."
 									},
 									{
-										name: "stop",
-										desc: "Stop that spinner and show the content."
+										"name": "stop",
+										"desc": "Stop that spinner and show the content."
 									},
 									{
-										name: "status",
-										args: "string",
-										desc: "Show a message in the StatusBar."
+										"name": "status",
+										"args": "string",
+										"desc": "Show a message in the StatusBar."
 									},
 									{
-										name: "pager",
-										args: "object",
-										desc: "Get or set the [Pager](/#components/pager/) in the StatusBar."
+										"name": "pager",
+										"args": "object",
+										"desc": "Get or set the [Pager](/#components/pager/) in the StatusBar."
 									},
 									{
-										name: "reflex",
-										desc: "Run JS based layout, usually to center the `Main` vertically."
+										"name": "reflex",
+										"desc": "Run JS based layout, usually to center the `Main` vertically."
 									},
 									{
-										name: "onopen",
-										desc: "Called when the Modal is about to open"
+										"name": "onopen",
+										"desc": "Called when the Modal is about to open"
 									},
 									{
-										name: "onopened",
-										desc: "Called when the Modal is fully opened (animation done)"
+										"name": "onopened",
+										"desc": "Called when the Modal is fully opened (animation done)"
 									},
 									{
-										name: "onclose",
-										desc: "Called when the Modal is about to closed"
+										"name": "onclose",
+										"desc": "Called when the Modal is about to closed"
 									},
 									{
-										name: "onclosed",
-										desc: "Called when the Modal is fully closed (animation done)"
+										"name": "onclosed",
+										"desc": "Called when the Modal is fully closed (animation done)"
 									}
 								]
 							}
diff --git a/docs/src/xhtml/components/pager/index.xhtml b/docs/src/xhtml/components/pager/index.xhtml
index 516021b67..801bac8d8 100644
--- a/docs/src/xhtml/components/pager/index.xhtml
+++ b/docs/src/xhtml/components/pager/index.xhtml
@@ -42,24 +42,24 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.PagerSpirit",
-								properties: [
+								"name": "ts.ui.PagerSpirit",
+								"properties": [
 									{
-										name: "pages",
-										type: "number",
-										desc: "The total amount of pages."
+										"name": "pages",
+										"type": "number",
+										"desc": "The total amount of pages."
 									},
 									{
-										name: "page",
-										type: "number",
-										desc: "The current page index, zero based."
-									},
+										"name": "page",
+										"type": "number",
+										"desc": "The current page index, zero based."
+									}
 								],
-								methods: [
+								"methods": [
 									{
-										name: "onselect",
-										args: "number",
-										desc: "Called whenever a page is selected; and with the new index as argument."
+										"name": "onselect",
+										"args": "number",
+										"desc": "Called whenever a page is selected; and with the new index as argument."
 									}
 								]
 							}
diff --git a/docs/src/xhtml/components/table/building.xhtml b/docs/src/xhtml/components/table/building.xhtml
index 424430d0f..99e3a4697 100644
--- a/docs/src/xhtml/components/table/building.xhtml
+++ b/docs/src/xhtml/components/table/building.xhtml
@@ -181,27 +181,27 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.TableSpirit",
-								methods: [
+								"name": "ts.ui.TableSpirit",
+								"methods": [
 									{
-										name: "cols",
-										args: ["(array)"],
-										desc: "Set the columns. Omit the argument to get the columns."
+										"name": "cols",
+										"args": ["(array)"],
+										"desc": "Set the columns. Omit the argument to get the columns."
 									},
 									{
-										name: "rows",
-										args: ["(array)"],
-										desc: "Set the rows. Note that while you can get the rows back by omitting the argument, any changes are not persisted until you assign them back again."
+										"name": "rows",
+										"args": ["(array)"],
+										"desc": "Set the rows. Note that while you can get the rows back by omitting the argument, any changes are not persisted until you assign them back again."
 									},
 									{
-										name: "row",
-										args: ["number", "(object|array)"],
-										desc: "Update a single row by rowindex. You can omit the last argument to get the row, but changes are not persisted until you set it."
+										"name": "row",
+										"args": ["number", "(object|array)"],
+										"desc": "Update a single row by rowindex. You can omit the last argument to get the row, but changes are not persisted until you set it."
 									},
 									{
-										name: "cell",
-										args: ["number", "number", "(string|object)"],
-										desc: "Update a single cell by rowindex and cellindex. You can omit the last argument to get the cell, but see the note above."
+										"name": "cell",
+										"args": ["number", "number", "(string|object)"],
+										"desc": "Update a single cell by rowindex and cellindex. You can omit the last argument to get the cell, but see the note above."
 									}
 								]
 							}
diff --git a/docs/src/xhtml/components/table/collaborate.xhtml b/docs/src/xhtml/components/table/collaborate.xhtml
index 9a9f71bf1..2ffcb97fb 100644
--- a/docs/src/xhtml/components/table/collaborate.xhtml
+++ b/docs/src/xhtml/components/table/collaborate.xhtml
@@ -51,12 +51,12 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.TableSpirit",
-								methods: [
+								"name": "ts.ui.TableSpirit",
+								"methods": [
 									{
-										name: "collabbutton",
-										args: ["(function|null)"],
-										desc: "Show the collaboration button with given callback. Pass `null` to remove the button."
+										"name": "collabbutton",
+										"args": ["(function|null)"],
+										"desc": "Show the collaboration button with given callback. Pass `null` to remove the button."
 									}
 								]
 							}
diff --git a/docs/src/xhtml/components/table/configuring.xhtml b/docs/src/xhtml/components/table/configuring.xhtml
index 837ab203b..1e12d93c1 100644
--- a/docs/src/xhtml/components/table/configuring.xhtml
+++ b/docs/src/xhtml/components/table/configuring.xhtml
@@ -52,12 +52,12 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.TableSpirit",
-								methods: [
+								"name": "ts.ui.TableSpirit",
+								"methods": [
 									{
-										name: "configbutton",
-										args: ["(function)"],
-										desc: "Make the Table configurable with a callback for that button in the statusbar."
+										"name": "configbutton",
+										"args": ["(function)"],
+										"desc": "Make the Table configurable with a callback for that button in the statusbar."
 									}
 								]
 							}
@@ -66,22 +66,22 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.TableColModel",
-								properties: [
+								"name": "ts.ui.TableColModel",
+								"properties": [
 									{
-										name: 'visible',
-										type: 'boolean',
-										desc: 'The columns is visible?'
+										"name": "visible",
+										"type": "boolean",
+										"desc": "The columns is visible?"
 									}
 								],
-								methods: [
+								"methods": [
 									{
-										name: "hide",
-										desc: "Hide the column."
+										"name": "hide",
+										"desc": "Hide the column."
 									},
 									{
-										name: "show",
-										desc: "Show the column."
+										"name": "show",
+										"desc": "Show the column."
 									}
 								]
 							}
diff --git a/docs/src/xhtml/components/table/editing.xhtml b/docs/src/xhtml/components/table/editing.xhtml
index 417cafd00..a512394f7 100644
--- a/docs/src/xhtml/components/table/editing.xhtml
+++ b/docs/src/xhtml/components/table/editing.xhtml
@@ -246,46 +246,46 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.TableSpirit",
-								methods: [
+								"name": "ts.ui.TableSpirit",
+								"methods": [
 									{
-										name: "editable",
-										args: ["(function)"],
-										desc: "Make the Table editable with an optional callback that triggers whenever something is changed. The callback gets assigned to the Tables `onedit` method, see below."
+										"name": "editable",
+										"args": ["(function)"],
+										"desc": "Make the Table editable with an optional callback that triggers whenever something is changed. The callback gets assigned to the Tables `onedit` method, see below."
 									},
 									{
-										name: "onedit",
-										args: ["number", "number", "string", "string"],
-										desc: "Called whenever a cell changes value with arguments: rowindex, cellindex, newvalue, oldvalue."
+										"name": "onedit",
+										"args": ["number", "number", "string", "string"],
+										"desc": "Called whenever a cell changes value with arguments: rowindex, cellindex, newvalue, oldvalue."
 									},
 									{
-										name: "uneditable",
-										desc: "Make the Table not editable."
+										"name": "uneditable",
+										"desc": "Make the Table not editable."
 									},
 									{
-										name: "invalid",
-										args: ["number", "number"],
-										desc: "Mark the cell at given rowindex and cellindex invalid"
+										"name": "invalid",
+										"args": ["number", "number"],
+										"desc": "Mark the cell at given rowindex and cellindex invalid"
 									},
 									{
-										name: "valid",
-										args: ["number", "number"],
-										desc: "Mark the cell at given rowindex and cellindex valid. When you update the cell (see below), the cell automatically becomes valid."
+										"name": "valid",
+										"args": ["number", "number"],
+										"desc": "Mark the cell at given rowindex and cellindex valid. When you update the cell (see below), the cell automatically becomes valid."
 									},
 									{
-										name: "cell",
-										args: ["number", "number", "string|number|object"],
-										desc: "Update the cell at given rowindex and cellindex. Use the object argument (verbose syntax) to maintain both `text` and `value`."
+										"name": "cell",
+										"args": ["number", "number", "string|number|object"],
+										"desc": "Update the cell at given rowindex and cellindex. Use the object argument (verbose syntax) to maintain both `text` and `value`."
 									},
 									{
-										name: "focus",
-										args: ["number", "number"],
-										desc: "Focus the cell (textarea) at given rowindex and cellindex."
+										"name": "focus",
+										"args": ["number", "number"],
+										"desc": "Focus the cell (textarea) at given rowindex and cellindex."
 									},
 									{
-										name: "blur",
-										args: ["number", "number"],
-										desc: "Blur the cell at given rowindex and cellindex."
+										"name": "blur",
+										"args": ["number", "number"],
+										"desc": "Blur the cell at given rowindex and cellindex."
 									}
 								]
 							}
diff --git a/docs/src/xhtml/components/table/extras.xhtml b/docs/src/xhtml/components/table/extras.xhtml
index aca46c46c..013dd1fde 100644
--- a/docs/src/xhtml/components/table/extras.xhtml
+++ b/docs/src/xhtml/components/table/extras.xhtml
@@ -107,42 +107,42 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.ButtonModel",
-								properties: [
+								"name": "ts.ui.ButtonModel",
+								"properties": [
 									{
-										name: "label",
-										type: "string",
-										desc: "The buttons label."
+										"name": "label",
+										"type": "string",
+										"desc": "The buttons label."
 									},
 									{
-										name: "icon",
-										type: "string",
-										desc: 'The button icon (label must be `null` or empty string).'
+										"name": "icon",
+										"type": "string",
+										"desc": "The button icon (label must be `null` or empty string)."
 									},
 									{
-										name: "info",
-										type: "string",
-										desc: "The button tooltip (hover text)."
+										"name": "info",
+										"type": "string",
+										"desc": "The button tooltip (hover text)."
 									},
 									{
-										name: "visible",
-										type: "boolean",
-										desc: "Button is visible?"
+										"name": "visible",
+										"type": "boolean",
+										"desc": "Button is visible?"
 									},
 									{
-										name: "disabled",
-										type: "boolean",
-										desc: "Button is disabled?"
+										"name": "disabled",
+										"type": "boolean",
+										"desc": "Button is disabled?"
 									},
 									{
-										name: "name",
-										type: "string",
-										desc: "The button name. May be shared by mutliple buttons."
+										"name": "name",
+										"type": "string",
+										"desc": "The button name. May be shared by mutliple buttons."
 									},
 									{
-										name: "value",
-										type: "any",
-										desc: "The button value. We can assign anything here, but note that the value is (also) used for column sorting."
+										"name": "value",
+										"type": "any",
+										"desc": "The button value. We can assign anything here, but note that the value is (also) used for column sorting."
 									}
 								]
 							}
@@ -192,22 +192,22 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 						{
-							name: "ts.ui.IconModel",
-							properties: [
+							"name": "ts.ui.IconModel",
+							"properties": [
 								{
-									name: "type",
-									type: "string",
-									desc: "The CSS classname."
+									"name": "type",
+									"type": "string",
+									"desc": "The CSS classname."
 								},
 								{
-									name: "color",
-									type: "string",
-									desc: "The icon color."
+									"name": "color",
+									"type": "string",
+									"desc": "The icon color."
 								},
 								{
-									name: "value",
-									type: "string|number",
-									desc: "Used when sorting the column."
+									"name": "value",
+									"type": "string|number",
+									"desc": "Used when sorting the column."
 								}
 							]
 						}
@@ -260,37 +260,37 @@
 	        <div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.ImageModel",
-								properties: [
+								"name": "ts.ui.ImageModel",
+								"properties": [
 									{
-										name: "src",
-										type: "string",
-										desc: "The image URL."
+										"name": "src",
+										"type": "string",
+										"desc": "The image URL."
 									},
 									{
-										name: "alt",
-										type: "string",
-										desc: "Optional `alt` description."
+										"name": "alt",
+										"type": "string",
+										"desc": "Optional `alt` description."
 									},
 									{
-										name: "width",
-										type: "number",
-										desc: 'The image width.'
+										"name": "width",
+										"type": "number",
+										"desc": "The image width."
 									},
 									{
-										name: "height",
-										type: "number",
-										desc: "The image height."
+										"name": "height",
+										"type": "number",
+										"desc": "The image height."
 									},
 									{
-										name: "background",
-										type: "boolean",
-										desc: "Render as `background-image`?"
+										"name": "background",
+										"type": "boolean",
+										"desc": "Render as `background-image`?"
 									},
 									{
-										name: "value",
-										type: "string|number",
-										desc: "Used when sorting the column."
+										"name": "value",
+										"type": "string|number",
+										"desc": "Used when sorting the column."
 									}
 								]
 							}
@@ -346,22 +346,22 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 						{
-							name: "ts.ui.SwitchModel",
-							properties: [
+							"name": "ts.ui.SwitchModel",
+							"properties": [
 								{
-									name: "name",
-									type: "string",
-									desc: "The switch name. May be shared by mutliple switches."
+									"name": "name",
+									"type": "string",
+									"desc": "The switch name. May be shared by mutliple switches."
 								},
 								{
-									name: "value",
-									type: "any",
-									desc: "The switch value. We can assign anything here, but note that the value is (also) used for column sorting."
+									"name": "value",
+									"type": "any",
+									"desc": "The switch value. We can assign anything here, but note that the value is (also) used for column sorting."
 								},
 								{
-									name: "checked",
-									type: "boolean",
-									desc: "Switch is toggled on?."
+									"name": "checked",
+									"type": "boolean",
+									"desc": "Switch is toggled on?."
 								}
 							]
 						}
@@ -409,27 +409,27 @@
 	        <div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.UserImageModel",
-								properties: [
+								"name": "ts.ui.UserImageModel",
+								"properties": [
 									{
-										name: "name",
-										type: "string",
-										desc: "The users full name."
+										"name": "name",
+										"type": "string",
+										"desc": "The users full name."
 									},
 									{
-										name: "src",
-										type: "string",
-										desc: "Optional user photo or avatar."
+										"name": "src",
+										"type": "string",
+										"desc": "Optional user photo or avatar."
 									},
 									{
-										name: "size",
-										type: "number",
-										desc: 'The image width and height.'
+										"name": "size",
+										"type": "number",
+										"desc": "The image width and height."
 									},
 									{
-										name: "value",
-										type: "string|number",
-										desc: "Used when sorting the column."
+										"name": "value",
+										"type": "string|number",
+										"desc": "Used when sorting the column."
 									}
 								]
 							}
diff --git a/docs/src/xhtml/components/table/selecting.xhtml b/docs/src/xhtml/components/table/selecting.xhtml
index 620a9bafe..194e73ed4 100644
--- a/docs/src/xhtml/components/table/selecting.xhtml
+++ b/docs/src/xhtml/components/table/selecting.xhtml
@@ -161,50 +161,50 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.TableSpirit",
-								methods: [
+								"name": "ts.ui.TableSpirit",
+								"methods": [
 									{
-										name: "selectable",
-										args: ["(function)"],
-										desc: "Make the Table selectable with an optional callback."
+										"name": "selectable",
+										"args": ["(function)"],
+										"desc": "Make the Table selectable with an optional callback."
 									},
 									{
-										name: "unselectable",
-										desc: "Make the Table not selectable."
+										"name": "unselectable",
+										"desc": "Make the Table not selectable."
 									},
 									{
-										name: "select",
-										args: ["(number|array)"],
-										desc: "Select row at index(es). Omit the argument to select all rows."
+										"name": "select",
+										"args": ["(number|array)"],
+										"desc": "Select row at index(es). Omit the argument to select all rows."
 									},
 									{
-										name: "unselect",
-										args: ["(number|array)"],
-										desc: "Unselect row at index(es). Omit the argument to unselect all rows."
+										"name": "unselect",
+										"args": ["(number|array)"],
+										"desc": "Unselect row at index(es). Omit the argument to unselect all rows."
 									},
 									{
-										name: "toggle",
-										args: ["(number|array)"],
-										desc: "Toggle row at index(es). Omit the argument to toggle all rows."
+										"name": "toggle",
+										"args": ["(number|array)"],
+										"desc": "Toggle row at index(es). Omit the argument to toggle all rows."
 									},
 									{
-										name: "selected",
-										args: ["(number|array)"],
-										type: ["boolean|array"],
-										desc: "Test one or more indexes for selection. You can omit the argument to get all selected indexes."
+										"name": "selected",
+										"args": ["(number|array)"],
+										"type": ["boolean|array"],
+										"desc": "Test one or more indexes for selection. You can omit the argument to get all selected indexes."
 									},
 									{
-										name: "onselect",
-										args: ["array", "array"],
-										desc: "The callback that you would normally assign via `selectable()`."
+										"name": "onselect",
+										"args": ["array", "array"],
+										"desc": "The callback that you would normally assign via `selectable()`."
 									},
 									{
-										name: "onselectall",
-										desc: "If specified, this will be called when selecting everything.",
+										"name": "onselectall",
+										"desc": "If specified, this will be called when selecting everything."
 									},
 									{
-										name: "onunselectall",
-										desc: "If specified, this will be called when de-selecting everything."
+										"name": "onunselectall",
+										"desc": "If specified, this will be called when de-selecting everything."
 									}
 								]
 							}
diff --git a/docs/src/xhtml/components/tags/tag.xhtml b/docs/src/xhtml/components/tags/tag.xhtml
index d61abdd4e..c08eaace4 100644
--- a/docs/src/xhtml/components/tags/tag.xhtml
+++ b/docs/src/xhtml/components/tags/tag.xhtml
@@ -17,67 +17,67 @@
 			<div data-ts="DoxApi">
 				<script type="application/json">
 					{
-						name: "ts.ui.TagSpirit",
-						properties: [
+						"name": "ts.ui.TagSpirit",
+						"properties": [
 							{
-								name: "type",
-								type: "string",
-								desc: "The CSS classname."
+								"name": "type",
+								"type": "string",
+								"desc": "The CSS classname."
 							},
 							{
-								name: "icon",
-								type: "string|object",
-								desc: "The icon's classname as a string or a `ts.ui.UserImageModel`."
+								"name": "icon",
+								"type": "string|object",
+								"desc": "The icon's classname as a string or a `ts.ui.UserImageModel`."
 							},
 							{
-								name: "tabindex",
-								type: "number",
-								desc: "The `tabindex` of the tag."
+								"name": "tabindex",
+								"type": "number",
+								"desc": "The `tabindex` of the tag."
 							},
 							{
-								name: "data",
-								type: "(Map|Array|string)",
-								desc: "The `keys` and `values` of the tag or the only `key` as a string."
+								"name": "data",
+								"type": "(Map|Array|string)",
+								"desc": "The `keys` and `values` of the tag or the only `key` as a string."
 							},
 							{
-								name: "locked",
-								type: "boolean",
-								desc: "Tag is locked?"
+								"name": "locked",
+								"type": "boolean",
+								"desc": "Tag is locked?"
 							},
 							{
-								name: "deletable",
-								type: "boolean",
-								desc: "Tag is deletable? (only visually)"
+								"name": "deletable",
+								"type": "boolean",
+								"desc": "Tag is deletable? (only visually)"
 							},
 							{
-								name: "clickable",
-								type: "boolean",
-								desc: "Tag is clickable? (only visually)"
+								"name": "clickable",
+								"type": "boolean",
+								"desc": "Tag is clickable? (only visually)"
 							},
 							{
-								name: "onclick",
-								type: "(Function)",
-								desc: "Called whenever the tag gets clicked."
+								"name": "onclick",
+								"type": "(Function)",
+								"desc": "Called whenever the tag gets clicked."
 							},
 							{
-								name: "ondelete",
-								type: "(Function)",
-								desc: "Called whenever the tag gets deleted."
+								"name": "ondelete",
+								"type": "(Function)",
+								"desc": "Called whenever the tag gets deleted."
 							}
 						],
-						methods: [
+						"methods": [
 							{
-								name: "click",
-								desc: "Trigger a click on the tag if `onclick` is set."
+								"name": "click",
+								"desc": "Trigger a click on the tag if `onclick` is set."
 							},
 							{
-								name: "delete",
-								desc: "Trigger removal of tag from DOM and call `ondelete` if it's set."
+								"name": "delete",
+								"desc": "Trigger removal of tag from DOM and call `ondelete` if it's set."
 							},
 							{
-								name: "render",
-								args: ["object"],
-								desc: "Use the argument as a model, replacing the existing one, and re-render the tag."
+								"name": "render",
+								"args": ["object"],
+								"desc": "Use the argument as a model, replacing the existing one, and re-render the tag."
 							}
 						]
 					}
diff --git a/docs/src/xhtml/components/userimages/index.xhtml b/docs/src/xhtml/components/userimages/index.xhtml
index f2173e5d9..692dcf899 100644
--- a/docs/src/xhtml/components/userimages/index.xhtml
+++ b/docs/src/xhtml/components/userimages/index.xhtml
@@ -74,27 +74,27 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.UserImageModel",
-								properties: [
+								"name": "ts.ui.UserImageModel",
+								"properties": [
 									{
-										name: "name",
-										type: "string",
-										desc: "The user name. If no image exists, an image will be autogenerated based on this."
+										"name": "name",
+										"type": "string",
+										"desc": "The user name. If no image exists, an image will be autogenerated based on this."
 									},
 									{
-										name: "src",
-										type: "(string)",
-										desc: "User photo or avatar."
+										"name": "src",
+										"type": "(string)",
+										"desc": "User photo or avatar."
 									},
 									{
-										name: "size",
-										type: "(number)",
-										desc: "Image dimension. Zero implies default (44px)."
+										"name": "size",
+										"type": "(number)",
+										"desc": "Image dimension. Zero implies default (40px)."
 									},
 									{
-										name: "value",
-										type: "(string|number)",
-										desc: "Used for sorting (in the Table)."
+										"name": "value",
+										"type": "(string|number)",
+										"desc": "Used for sorting (in the Table)."
 									}
 								]
 							}
diff --git a/docs/src/xhtml/components/userimages/json.xhtml b/docs/src/xhtml/components/userimages/json.xhtml
index 324d67621..084912c9b 100644
--- a/docs/src/xhtml/components/userimages/json.xhtml
+++ b/docs/src/xhtml/components/userimages/json.xhtml
@@ -16,27 +16,27 @@
 					<div data-ts="DoxApi">
 						<script type="application/json">
 							{
-								name: "ts.ui.UserImageModel",
-								properties: [
+								"name": "ts.ui.UserImageModel",
+								"properties": [
 									{
-										name: "name",
-										type: "string",
-										desc: "The user name. If no image exists, an image will be autogenerated based on this."
+										"name": "name",
+										"type": "string",
+										"desc": "The user name. If no image exists, an image will be autogenerated based on this."
 									},
 									{
-										name: "src",
-										type: "(string)",
-										desc: "User photo or avatar."
+										"name": "src",
+										"type": "(string)",
+										"desc": "User photo or avatar."
 									},
 									{
-										name: "size",
-										type: "(number)",
-										desc: "Image dimension. Zero implies default (44px)."
+										"name": "size",
+										"type": "(number)",
+										"desc": "Image dimension. Zero implies default (40px)."
 									},
 									{
-										name: "value",
-										type: "(string|number)",
-										desc: "Used for sorting (in the Table)."
+										"name": "value",
+										"type": "(string|number)",
+										"desc": "Used for sorting (in the Table)."
 									}
 								]
 							}

From e578058b33db22e9a51a0574bb3cd86cb4371fed Mon Sep 17 00:00:00 2001
From: Daniel Spitzer <dsp@tradeshift.com>
Date: Wed, 7 Nov 2018 14:31:26 +0100
Subject: [PATCH 4/6] [Docs] Update some hardcoded px values to @ts-unit: 20px

---
 docs/src/xhtml/appendix/autofocus/index.xhtml       | 2 +-
 docs/src/xhtml/appendix/autolayout/index.xhtml      | 2 +-
 docs/src/xhtml/components/forms/custom-select.xhtml | 2 +-
 docs/src/xhtml/components/icons/list.xhtml          | 4 ++--
 docs/src/xhtml/components/times/langs.xhtml         | 2 +-
 docs/src/xhtml/screenshots/pages/asides.xhtml       | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/src/xhtml/appendix/autofocus/index.xhtml b/docs/src/xhtml/appendix/autofocus/index.xhtml
index b45ced040..787d69d26 100644
--- a/docs/src/xhtml/appendix/autofocus/index.xhtml
+++ b/docs/src/xhtml/appendix/autofocus/index.xhtml
@@ -12,7 +12,7 @@
 				padding: 0 4px;
 			}
 			article .ts-buttons {
-				margin-top: 44px;
+				margin-top: 40px;
 			}
 		</style>
 	</head>
diff --git a/docs/src/xhtml/appendix/autolayout/index.xhtml b/docs/src/xhtml/appendix/autolayout/index.xhtml
index f7704e4ce..38de06f45 100644
--- a/docs/src/xhtml/appendix/autolayout/index.xhtml
+++ b/docs/src/xhtml/appendix/autolayout/index.xhtml
@@ -14,7 +14,7 @@
 		</script>
 		<style>
 			.ts-form {
-				margin-top: -22px; /* hack for empty SPAN */
+				margin-top: -20px; /* hack for empty SPAN */
 			}
 			label > span {
 				font-weight: 300;
diff --git a/docs/src/xhtml/components/forms/custom-select.xhtml b/docs/src/xhtml/components/forms/custom-select.xhtml
index 507803e96..4e3a65be7 100644
--- a/docs/src/xhtml/components/forms/custom-select.xhtml
+++ b/docs/src/xhtml/components/forms/custom-select.xhtml
@@ -15,7 +15,7 @@
 	</script>
 	<style>
 		.user-container div {
-			margin: 11px;
+			margin: 10px;
 			cursor: pointer;
 		}
 	</style>
diff --git a/docs/src/xhtml/components/icons/list.xhtml b/docs/src/xhtml/components/icons/list.xhtml
index 876f67f5c..e564dc6e8 100644
--- a/docs/src/xhtml/components/icons/list.xhtml
+++ b/docs/src/xhtml/components/icons/list.xhtml
@@ -47,13 +47,13 @@
 							var table = ts.ui.get('#icons');
 							table.cols([
 								{
-									label: '11px',
+									label: '10px',
 									type: 'icons-size-tiny',
 									minwidth: ts.ui.UNIT * 3
 								},
 								{
 									// @ts-fontsize-icon
-									label: '22px',
+									label: '20px',
 									type: 'icons-size-std',
 									minwidth: ts.ui.UNIT * 3
 								},
diff --git a/docs/src/xhtml/components/times/langs.xhtml b/docs/src/xhtml/components/times/langs.xhtml
index 02c7f79d2..1b1d3a59c 100644
--- a/docs/src/xhtml/components/times/langs.xhtml
+++ b/docs/src/xhtml/components/times/langs.xhtml
@@ -5,7 +5,7 @@
 		<object data="tabs.xhtml"></object>
 		<style>
 			td {
-				padding: 2.25px 11px;
+				padding: 2.25px 10px;
 			}
 		</style>
 	</head>
diff --git a/docs/src/xhtml/screenshots/pages/asides.xhtml b/docs/src/xhtml/screenshots/pages/asides.xhtml
index 4c23de5a5..f9266ceed 100644
--- a/docs/src/xhtml/screenshots/pages/asides.xhtml
+++ b/docs/src/xhtml/screenshots/pages/asides.xhtml
@@ -14,7 +14,7 @@
 			margin-left: -160px;
 			background-color: rgb(253,254,213);
 			color: rgb(127,115,72);
-			padding: 22px;
+			padding: 20px;
 			border-radius: 3px;
 			box-shadow: 3px 3px 6px rgb(0,0,0,0.75);
 		}

From b32b5fa024d37da1f15faa876b181350da29faa8 Mon Sep 17 00:00:00 2001
From: Daniel Spitzer <dsp@tradeshift.com>
Date: Wed, 7 Nov 2018 14:35:11 +0100
Subject: [PATCH 5/6] [Colors] Use correct `@ts-green`

---
 src/runtime/less/ts-variables.less | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/runtime/less/ts-variables.less b/src/runtime/less/ts-variables.less
index 9512964fa..1288f39d1 100644
--- a/src/runtime/less/ts-variables.less
+++ b/src/runtime/less/ts-variables.less
@@ -81,9 +81,9 @@
 @ts-color-yellow-dark: darken(@ts-color-yellow, 10%);
 @ts-color-yellow-darker: darken(@ts-color-yellow, 15%);
 
-@ts-color-green-lightest: lighten(@ts-color-green, 50%);
-@ts-color-green-lighter: lighten(@ts-color-green, 35%);
-@ts-color-green-light: lighten(@ts-color-green, 20%);
+@ts-color-green-lightest: hsl(99, 59%, 90%);
+@ts-color-green-lighter: hsl(99, 60%, 81%);
+@ts-color-green-light: hsl(99, 61%, 63%);
 @ts-color-green-dark: darken(@ts-color-green, 10%);
 @ts-color-green-darker: darken(@ts-color-green, 15%);
 
@@ -147,7 +147,7 @@
 	green-text: @ts-color-white;
 	litegreen: @ts-color-green-lighter;
 	green-lite: @ts-color-green-light;
-	green: @ts-color-green;
+	green: average(@ts-color-green-light, @ts-color-green);
 	green-dark: @ts-color-green-dark;
 	green-darker: @ts-color-green-darker;
 	darkgreen: darken(@ts-color-green, 25%);
@@ -222,7 +222,7 @@
 @ts-green-text: @ts-colors[green-text];
 @ts-litegreen: @ts-colors[litegreen];
 @ts-green-lite: @ts-colors[green-lite];
-@ts-green: fade(@ts-colors[green], 4%);
+@ts-green: @ts-colors[green];
 @ts-green-dark: @ts-colors[green-dark];
 @ts-green-darker: @ts-colors[green-darker];
 @ts-darkgreen: @ts-colors[darkgreen];

From b250b41d3fac5c57103c9402d53b162be9c6d26c Mon Sep 17 00:00:00 2001
From: Daniel Spitzer <dsp@tradeshift.com>
Date: Wed, 7 Nov 2018 15:27:49 +0100
Subject: [PATCH 6/6] Release v11.0.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1d7192c7f..4bc0fa835 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tradeshift/tradeshift-ui",
-  "version": "11.0.1",
+  "version": "11.0.2",
   "description": "The Tradeshift UI Library & Framework",
   "homepage": "http://ui.tradeshift.com/",
   "bugs": {