document class directive

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte

@@ -1 +1,70 @@
-TODO
+<script>
+	let language = "english";
+
+	const translations = {
+		english: {
+			tooltip: "Switch Languages",
+		},
+		latin: {
+			tooltip: "Itchsway Anguageslay",
+		}
+	};
+
+	function tooltip(node, text) {
+		const tooltip = document.createElement('div');
+		tooltip.textContent = text;
+
+		Object.assign(tooltip.style, {
+			position: 'absolute',
+			background: 'black',
+			color: 'white',
+			padding: '0.5em 1em',
+			fontSize: '12px',
+			pointerEvents: 'none',
+			transform: 'translate(5px, -50%)',
+			borderRadius: '2px',
+			transition: 'opacity 0.4s'
+		});
+
+		function position() {
+			const { top, right, bottom } = node.getBoundingClientRect();
+			tooltip.style.top = `${(top + bottom) / 2}px`;
+			tooltip.style.left = `${right}px`;
+		}
+
+		function append() {
+			document.body.appendChild(tooltip);
+			tooltip.style.opacity = 0;
+			setTimeout(() => tooltip.style.opacity = 1);
+			position();
+		}
+
+		function remove() {
+			tooltip.remove();
+		}
+
+		node.addEventListener('mouseenter', append);
+		node.addEventListener('mouseleave', remove);
+
+		return {
+			update(text) {
+				tooltip.textContent = text;
+				position();
+			},
+
+			destroy() {
+				tooltip.remove();
+				node.removeEventListener('mouseenter', append);
+				node.removeEventListener('mouseleave', remove);
+			}
+		};
+	}
+
+	function toggleLanguage() {
+		language = language === 'english' ? 'latin' : 'english'
+	}
+</script>
+
+<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
+	{language}
+</button>

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte

@@ -1 +1,70 @@
-TODO
+<script>
+	let language = "english";
+
+	const translations = {
+		english: {
+			tooltip: "Switch Languages",
+		},
+		latin: {
+			tooltip: "Itchsway Anguageslay",
+		}
+	};
+
+	function tooltip(node, text) {
+		const tooltip = document.createElement('div');
+		tooltip.textContent = text;
+
+		Object.assign(tooltip.style, {
+			position: 'absolute',
+			background: 'black',
+			color: 'white',
+			padding: '0.5em 1em',
+			fontSize: '12px',
+			pointerEvents: 'none',
+			transform: 'translate(5px, -50%)',
+			borderRadius: '2px',
+			transition: 'opacity 0.4s'
+		});
+
+		function position() {
+			const { top, right, bottom } = node.getBoundingClientRect();
+			tooltip.style.top = `${(top + bottom) / 2}px`;
+			tooltip.style.left = `${right}px`;
+		}
+
+		function append() {
+			document.body.appendChild(tooltip);
+			tooltip.style.opacity = 0;
+			setTimeout(() => tooltip.style.opacity = 1);
+			position();
+		}
+
+		function remove() {
+			tooltip.remove();
+		}
+
+		node.addEventListener('mouseenter', append);
+		node.addEventListener('mouseleave', remove);
+
+		return {
+			update(text) {
+				tooltip.textContent = text;
+				position();
+			},
+
+			destroy() {
+				tooltip.remove();
+				node.removeEventListener('mouseenter', append);
+				node.removeEventListener('mouseleave', remove);
+			}
+		};
+	}
+
+	function toggleLanguage() {
+		language = language === 'english' ? 'latin' : 'english'
+	}
+</script>
+
+<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
+	{language}
+</button>

site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md

@@ -2,4 +2,4 @@
 title: Adding parameters
 ---
 
-TODO example with Prism highlighting
+TODO come up with a better example

site/content/tutorial/13-classes/01-classes/app-a/App.svelte

@@ -0,0 +1,29 @@
+<script>
+	let current = 'foo';
+</script>
+
+<style>
+	button {
+		display: block;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
+
+<button
+	class="{current === 'foo' ? 'active' : ''}"
+	on:click="{() => current = 'foo'}"
+>foo</button>
+
+<button
+	class="{current === 'bar' ? 'active' : ''}"
+	on:click="{() => current = 'bar'}"
+>bar</button>
+
+<button
+	class="{current === 'baz' ? 'active' : ''}"
+	on:click="{() => current = 'baz'}"
+>baz</button>

site/content/tutorial/13-classes/01-classes/app-b/App.svelte

@@ -0,0 +1,29 @@
+<script>
+	let current = 'foo';
+</script>
+
+<style>
+	button {
+		display: block;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
+
+<button
+	class:active="{current === 'foo'}"
+	on:click="{() => current = 'foo'}"
+>foo</button>
+
+<button
+	class:active="{current === 'bar'}"
+	on:click="{() => current = 'bar'}"
+>bar</button>
+
+<button
+	class:active="{current === 'baz'}"
+	on:click="{() => current = 'baz'}"
+>baz</button>

site/content/tutorial/13-classes/01-classes/text.md

@@ -0,0 +1,23 @@
+---
+title: The class directive
+---
+
+Like any other attribute, you can specify classes with a JavaScript attribute, seen here:
+
+```html
+<button
+	class="{current === 'foo' ? 'active' : ''}"
+	on:click="{() => current = 'foo'}"
+>foo</button>
+```
+
+This is such a common pattern in UI development that Svelte includes a special directive to simplify it:
+
+```html
+<button
+	class:active="{current === 'foo'}"
+	on:click="{() => current = 'foo'}"
+>foo</button>
+```
+
+The `active` class is added to the element whenever the value of the expression is truthy, and removed when it's falsy.

site/content/tutorial/13-classes/02-class-shorthand/app-a/App.svelte

@@ -0,0 +1,18 @@
+<script>
+	let big = false;
+</script>
+
+<style>
+	.big {
+		font-size: 4em;
+	}
+</style>
+
+<label>
+	<input type=checkbox bind:checked={big}>
+	big
+</label>
+
+<div class:big={big}>
+	some {big ? 'big' : 'small'} text
+</div>

site/content/tutorial/13-classes/02-class-shorthand/app-b/App.svelte

@@ -0,0 +1,18 @@
+<script>
+	let big = false;
+</script>
+
+<style>
+	.big {
+		font-size: 4em;
+	}
+</style>
+
+<label>
+	<input type=checkbox bind:checked={big}>
+	big
+</label>
+
+<div class:big>
+	some {big ? 'big' : 'small'} text
+</div>

site/content/tutorial/13-classes/02-class-shorthand/text.md

@@ -0,0 +1,19 @@
+---
+title: Shorthand class directive
+---
+
+Often, the name of the class will be the same as the name of the value it depends on:
+
+```html
+<div class:big={big}>
+	<!-- ... -->
+</div>
+```
+
+In those cases we can use a shorthand form:
+
+```html
+<div class:big>
+	<!-- ... -->
+</div>
+```

site/content/tutorial/13-classes/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Classes"
+}

site/content/tutorial/99-todo/99-todo/text.md

@@ -125,8 +125,8 @@ Maybe lifecycle should go first, since we're using `onMount` in the `this` demo?
 
 ## class: directive
 
-* [ ] `class:foo={bar}`
+* [x] `class:foo={bar}`
-* [ ] `class:foo`
+* [x] `class:foo`
 
 
 ## Composition

site/package-lock.json

@@ -1579,7 +1579,7 @@
       "dev": true
     },
     "eslint-plugin-svelte3": {
-      "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#5fc4861d4b191649b0badf4f9a4c2470f08b237e",
+      "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#651d7e3695b1731251ab3a501d1067b561ede09f",
       "from": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#semver:*",
       "dev": true
     },