diff --git a/.prettierignore b/.prettierignore
index 41c915fed..e37db73b2 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -8,8 +8,5 @@ package-lock.json
 /packages/lit-dev-content/_dev/
 /packages/lit-dev-content/_site/
 /packages/lit-dev-content/rollupout/
-# TODO(aomarks) Would be nice to format samples, but Prettier doesn't always do
-# a great job compared to our manual formatting.
-/packages/lit-dev-content/samples/
 
 .wireit
diff --git a/lit-dev.code-workspace b/lit-dev.code-workspace
index 70a44ab67..9b3af68c6 100644
--- a/lit-dev.code-workspace
+++ b/lit-dev.code-workspace
@@ -2,48 +2,48 @@
   "folders": [
     {
       "name": "lit-dev-content",
-      "path": "packages/lit-dev-content"
+      "path": "packages/lit-dev-content",
     },
     {
       "name": "lit-dev-tools-cjs",
-      "path": "packages/lit-dev-tools-cjs"
+      "path": "packages/lit-dev-tools-cjs",
     },
     {
       "name": "lit-dev-tools-esm",
-      "path": "packages/lit-dev-tools-esm"
+      "path": "packages/lit-dev-tools-esm",
     },
     {
       "name": "lit-dev-tests",
-      "path": "packages/lit-dev-tests"
+      "path": "packages/lit-dev-tests",
     },
     {
       "name": "lit-dev-api",
-      "path": "packages/lit-dev-api"
+      "path": "packages/lit-dev-api",
     },
     {
       "name": "lit-dev-server",
-      "path": "packages/lit-dev-server"
+      "path": "packages/lit-dev-server",
     },
     {
       "name": "lit-dev-discord-bot",
-      "path": "packages/lit-dev-discord-bot"
+      "path": "packages/lit-dev-discord-bot",
     },
     {
       "name": "lit.dev",
-      "path": "."
-    }
+      "path": ".",
+    },
   ],
   "settings": {
     "files.insertFinalNewline": true,
     "files.trimTrailingWhitespace": true,
     "[typescript]": {
-      "editor.defaultFormatter": "esbenp.prettier-vscode"
+      "editor.defaultFormatter": "esbenp.prettier-vscode",
     },
     "search.exclude": {
-      "api-data/*/repo": true
+      "api-data/*/repo": true,
     },
   },
   "extensions": {
-    "recommendations": ["esbenp.prettier-vscode"]
-  }
+    "recommendations": ["esbenp.prettier-vscode"],
+  },
 }
diff --git a/package-lock.json b/package-lock.json
index 8652c0cd7..4d271beba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
       ],
       "devDependencies": {
         "playground-elements": "^0.20.0",
-        "prettier": "^2.1.2",
+        "prettier": "^3.5.3",
         "typescript": "~4.7.4",
         "wireit": "^0.14.0"
       }
@@ -6963,13 +6963,15 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.7.1",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
       "license": "MIT",
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
       },
       "funding": {
         "url": "https://github.com/prettier/prettier?sponsor=1"
@@ -8982,7 +8984,7 @@
         "fast-glob": "^3.2.9",
         "lit-dev-server": "^0.0.0",
         "lit-dev-tools-cjs": "^0.0.0",
-        "prettier": "^2.3.2"
+        "prettier": "^3.5.3"
       }
     }
   }
diff --git a/package.json b/package.json
index d3d67555b..86a55232b 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
   },
   "devDependencies": {
     "playground-elements": "^0.20.0",
-    "prettier": "^2.1.2",
+    "prettier": "^3.5.3",
     "typescript": "~4.7.4",
     "wireit": "^0.14.0"
   }
diff --git a/packages/lit-dev-cloudbuild-cleanup/src/cleanup.ts b/packages/lit-dev-cloudbuild-cleanup/src/cleanup.ts
index c4bcbe5cc..ca7b5249a 100644
--- a/packages/lit-dev-cloudbuild-cleanup/src/cleanup.ts
+++ b/packages/lit-dev-cloudbuild-cleanup/src/cleanup.ts
@@ -39,7 +39,7 @@ async function main() {
   if (!PROJECT_ID || !REPO_NAME || !_DEPLOY_REGION) {
     console.log({PROJECT_ID, REPO_NAME, _DEPLOY_REGION});
     throw new Error(
-      'Missing one or more required environment variables: PROJECT_ID, REPO_NAME, _DEPLOY_REGION'
+      'Missing one or more required environment variables: PROJECT_ID, REPO_NAME, _DEPLOY_REGION',
     );
   }
 
@@ -98,7 +98,7 @@ async function main() {
       !rev.metadata.name
     ) {
       throw new Error(
-        `Found revision with missing necessary metadata: ${JSON.stringify(rev)}`
+        `Found revision with missing necessary metadata: ${JSON.stringify(rev)}`,
       );
     }
 
@@ -160,7 +160,7 @@ async function main() {
         } else if (!t.tag.startsWith('main')) {
           // Unrecognized tags are kept just in case
           console.log(
-            `Found unrecognized tag "${t.tag}". This will not be deleted.`
+            `Found unrecognized tag "${t.tag}". This will not be deleted.`,
           );
           revisionsToKeep.add(t.revisionName);
           return true;
diff --git a/packages/lit-dev-content/.eleventy.js b/packages/lit-dev-content/.eleventy.js
index 3e575cec1..eef15d50a 100644
--- a/packages/lit-dev-content/.eleventy.js
+++ b/packages/lit-dev-content/.eleventy.js
@@ -71,7 +71,7 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.addWatchTarget('../lit-dev-api/api-data/*/*.json');
   eleventyConfig.addWatchTarget(
-    '../lit-dev-content/samples/tutorials/**/tutorial.json'
+    '../lit-dev-content/samples/tutorials/**/tutorial.json',
   );
   eleventyConfig.addWatchTarget('../lit-dev-content/samples/tutorials/**/*.md');
   eleventyConfig.addWatchTarget('../lit-dev-content/rollupout/server/*');
@@ -119,14 +119,14 @@ ${content}
       Object.assign(new state.Token('div_open', 'div', 1), {
         attrs: [['class', `heading ${headingTag}`]],
         block: true,
-      })
+      }),
     );
     state.tokens.splice(
       idx + 4,
       0,
       Object.assign(new state.Token('div_close', 'div', -1), {
         block: true,
-      })
+      }),
     );
     linkAfterHeaderBase(slug, opts, state, idx + 1);
   };
@@ -165,16 +165,16 @@ ${content}
     function (url, latestVersion) {
       if (!latestVersion) {
         throw new Error(
-          `No latestVersion provided to 'removeLatestVersionFromUrl`
+          `No latestVersion provided to 'removeLatestVersionFromUrl`,
         );
       }
       if (!url.includes(`/${latestVersion}/`)) {
         throw new Error(
-          `'${url}' does not include the latestVersion versioned path segment`
+          `'${url}' does not include the latestVersion versioned path segment`,
         );
       }
       return url.replace(`/${latestVersion}/`, '/');
-    }
+    },
   );
 
   /**
@@ -191,11 +191,11 @@ ${content}
       }
       if (!latestVersion) {
         throw new Error(
-          `latestVersion not provided to 'fixUnversionedCrossLinks`
+          `latestVersion not provided to 'fixUnversionedCrossLinks`,
         );
       }
       return content.replaceAll(`/docs/${latestVersion}/`, '/docs/');
-    }
+    },
   );
 
   eleventyConfig.addFilter('removeExtension', function (url) {
@@ -446,7 +446,7 @@ ${content}
       if (location === undefined) {
         throw new Error(
           `Ambiguous symbol ${symbol}. ` +
-            `Options: ${locations.map((l) => l.anchor).join(', ')}`
+            `Options: ${locations.map((l) => l.anchor).join(', ')}`,
         );
       }
 
@@ -459,8 +459,8 @@ ${content}
     'api-v3',
     '/docs/v3/api',
     JSON.parse(
-      fsSync.readFileSync('../lit-dev-api/api-data/lit-3/symbols.json', 'utf8')
-    )
+      fsSync.readFileSync('../lit-dev-api/api-data/lit-3/symbols.json', 'utf8'),
+    ),
   );
 
   addApiShortcode(
@@ -468,8 +468,8 @@ ${content}
     '/docs/v2/api',
     // Don't use require() because of Node caching in watch mode.
     JSON.parse(
-      fsSync.readFileSync('../lit-dev-api/api-data/lit-2/symbols.json', 'utf8')
-    )
+      fsSync.readFileSync('../lit-dev-api/api-data/lit-2/symbols.json', 'utf8'),
+    ),
   );
 
   addApiShortcode(
@@ -478,9 +478,9 @@ ${content}
     JSON.parse(
       fsSync.readFileSync(
         '../lit-dev-api/api-data/lit-html-1/symbols.json',
-        'utf8'
-      )
-    )
+        'utf8',
+      ),
+    ),
   );
 
   addApiShortcode(
@@ -489,9 +489,9 @@ ${content}
     JSON.parse(
       fsSync.readFileSync(
         '../lit-dev-api/api-data/lit-element-2/symbols.json',
-        'utf8'
-      )
-    )
+        'utf8',
+      ),
+    ),
   );
 
   /**
@@ -520,7 +520,7 @@ ${content}
         `CleanCSS errors/warnings on file ${path}:\n\n${[
           ...result.errors,
           ...result.warnings,
-        ].join('\n')}`
+        ].join('\n')}`,
       );
     }
     return `<style>${result.styles}</style>`;
@@ -554,14 +554,14 @@ ${content}
   // Source: https://github.com/11ty/eleventy-base-blog/blob/master/.eleventy.js
   eleventyConfig.addFilter('readableDate', (dateObj) => {
     return luxon.DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat(
-      'LLL d, yyyy'
+      'LLL d, yyyy',
     );
   });
 
   // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
   eleventyConfig.addFilter('yyyymmdd', (dateObj) => {
     return luxon.DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat(
-      'yyyy-LL-dd'
+      'yyyy-LL-dd',
     );
   });
 
@@ -587,7 +587,7 @@ ${content}
           ENV.eleventyOutDir + '/docs/v3/introduction.html',
           ENV.eleventyOutDir + '/docs/v3/*/index.html',
         ],
-        {ignore: ENV.eleventyOutDir + '/docs/(v1|v2|v3)/index.html'}
+        {ignore: ENV.eleventyOutDir + '/docs/(v1|v2|v3)/index.html'},
       )
     ).filter(
       // TODO(aomarks) This is brittle, we need a way to annotate inside an md
@@ -595,7 +595,7 @@ ${content}
       (file) =>
         !file.includes('why-lit') &&
         !file.includes('getting-started') &&
-        !file.includes('browser-support')
+        !file.includes('browser-support'),
     );
     await Promise.all(emptyDocsIndexFiles.map((path) => fs.unlink(path)));
 
@@ -611,32 +611,32 @@ ${content}
       // immediately, instead of triggering an Eleventy build.
       await symlinkForce(
         path.join(__dirname, 'site', 'css'),
-        path.join(__dirname, ENV.eleventyOutDir, 'css')
+        path.join(__dirname, ENV.eleventyOutDir, 'css'),
       );
       await symlinkForce(
         path.join(__dirname, 'site', 'images'),
-        path.join(__dirname, ENV.eleventyOutDir, 'images')
+        path.join(__dirname, ENV.eleventyOutDir, 'images'),
       );
       await symlinkForce(
         path.join(__dirname, 'site', 'fonts'),
-        path.join(__dirname, ENV.eleventyOutDir, 'fonts')
+        path.join(__dirname, ENV.eleventyOutDir, 'fonts'),
       );
       await symlinkForce(
         path.join(__dirname, 'samples'),
-        path.join(__dirname, ENV.eleventyOutDir, 'samples')
+        path.join(__dirname, ENV.eleventyOutDir, 'samples'),
       );
 
       // Symlink lib -> _dev/js. This lets us directly reference tsc outputs in
       // dev mode, instead of the Rollup bundles we use for production.
       await symlinkForce(
         path.join(__dirname, 'lib'),
-        path.join(__dirname, ENV.eleventyOutDir, 'js')
+        path.join(__dirname, ENV.eleventyOutDir, 'js'),
       );
     } else {
       // Inline all Playground project files directly into their manifests, to
       // cut down on requests per project.
       await inlinePlaygroundFilesIntoManifests(
-        `${ENV.eleventyOutDir}/samples/**/project.json`
+        `${ENV.eleventyOutDir}/samples/**/project.json`,
       );
 
       // Pre-compress all outputs as .br and .gz files so the server can read
@@ -649,7 +649,7 @@ ${content}
       await fs.writeFile(
         path.join(ENV.eleventyOutDir, 'csp-inline-script-hashes.txt'),
         [...cspInlineScriptHashes].join('\n'),
-        'utf8'
+        'utf8',
       );
     }
   });
@@ -676,7 +676,7 @@ ${content}
   // In prod SSR should use the lit templates run through the minifier.
   if (!DEV) {
     componentModules = componentModules.map((componentPath) =>
-      componentPath.replace('lib/components', 'rollupout/server')
+      componentPath.replace('lib/components', 'rollupout/server'),
     );
   }
 
diff --git a/packages/lit-dev-content/samples/_check-code-helpers.ts b/packages/lit-dev-content/samples/_check-code-helpers.ts
index e819a6a96..002cffc6b 100644
--- a/packages/lit-dev-content/samples/_check-code-helpers.ts
+++ b/packages/lit-dev-content/samples/_check-code-helpers.ts
@@ -1,6 +1,8 @@
 import {PostDoc} from 'postdoc-lib';
 
-export const installCodeChecker = async (checkCode: () => Promise<{passed: boolean, message?: string}>) => {
+export const installCodeChecker = async (
+  checkCode: () => Promise<{passed: boolean; message?: string}>,
+) => {
   const postDoc = new PostDoc({
     messageTarget: window.top!,
     messageReceiver: window,
@@ -15,9 +17,9 @@ export const installCodeChecker = async (checkCode: () => Promise<{passed: boole
           postDoc.postMessage({status, message});
           break;
       }
-    }
+    },
   });
 
   await postDoc.handshake;
   postDoc.postMessage({status: 'READY'});
-}
\ No newline at end of file
+};
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/add-styles/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/add-styles/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/add-styles/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/add-styles/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/add-styles/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/add-styles/my-element.ts
index 9fc3fecd0..36f084a1c 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/add-styles/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/add-styles/my-element.ts
@@ -1,10 +1,11 @@
-import { html, LitElement, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
   render() {
-    return html`<p>I'm blue</p><div>I'm red</div>`;
+    return html`<p>I'm blue</p>
+      <div>I'm red</div>`;
   }
 
   static styles = css`
@@ -15,4 +16,4 @@ export class MyElement extends LitElement {
       color: red;
     }
   `;
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/input-or-textfield.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/input-or-textfield.ts
index 9078aee71..c9b34137e 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/input-or-textfield.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/input-or-textfield.ts
@@ -1,30 +1,26 @@
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { html as staticHTML, StaticValue } from 'lit/static-html.js';
+import {html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {html as staticHTML, StaticValue} from 'lit/static-html.js';
 
 @customElement('input-or-textfield')
 export class MyElement extends LitElement {
   // attribute is false because this is a value that can't be serialized to an
   // HTML attribute
-  @property({ attribute: false }) tagLiteral: StaticValue|null = null;
+  @property({attribute: false}) tagLiteral: StaticValue | null = null;
   @property() value = '';
 
   render() {
     return html`
-      ${
-        staticHTML`
+      ${staticHTML`
           <${this.tagLiteral}
             @input=${this.#onInput}
             .value=${this.value}></${this.tagLiteral}>
-        `
-      }
-      <div>
-        The value of the input is: ${this.value}
-      </div>
+        `}
+      <div>The value of the input is: ${this.value}</div>
     `;
   }
 
   #onInput(e: InputEvent) {
-    this.value = (e.target as (HTMLInputElement | HTMLTextAreaElement)).value;
+    this.value = (e.target as HTMLInputElement | HTMLTextAreaElement).value;
   }
 }
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/my-element.ts
index 8723151f8..86668941e 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/my-element.ts
@@ -1,6 +1,6 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { literal } from 'lit/static-html.js';
+import {css, html, LitElement} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {literal} from 'lit/static-html.js';
 import './input-or-textfield.js';
 
 @customElement('my-element')
@@ -14,37 +14,49 @@ export class MyElement extends LitElement {
         <div>
           <label>
             <input
-                type="radio"
-                name="selection"
-                @change=${this.#onChange}
-                value="input"
-                checked>
+              type="radio"
+              name="selection"
+              @change=${this.#onChange}
+              value="input"
+              checked
+            />
             input
           </label>
         </div>
         <div>
           <label>
             <input
-                type="radio"
-                name="selection"
-                @change=${this.#onChange}
-                value="textarea">
+              type="radio"
+              name="selection"
+              @change=${this.#onChange}
+              value="textarea"
+            />
             textarea
           </label>
         </div>
       </fieldset>
       <!-- /* playground-fold-end */ -->
       <input-or-textfield
-          value="this is the default value"
-          .tagLiteral=${this.tagLiteral}>
+        value="this is the default value"
+        .tagLiteral=${this.tagLiteral}
+      >
       </input-or-textfield>
     `;
   }
 
   #onChange(e: InputEvent) {
     const target = e.target as HTMLInputElement;
-    this.tagLiteral = target.value === 'input' ? literal`input` : literal`textarea`;
+    this.tagLiteral =
+      target.value === 'input' ? literal`input` : literal`textarea`;
   }
 
-  static styles = css`/* playground-fold */:host { font-family: sans-serif; } :host > * { margin-block: .5em; }/* playground-fold-end */`;
+  static styles = css`
+    /* playground-fold */
+    :host {
+      font-family: sans-serif;
+    }
+    :host > * {
+      margin-block: 0.5em;
+    } /* playground-fold-end */
+  `;
 }
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/my-element.ts
index e31973473..fea57fa24 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/my-element.ts
@@ -1,19 +1,19 @@
-import { html, LitElement, css } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import {html, LitElement, css} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
-  @state() counter = 0
+  @state() counter = 0;
 
   firstUpdated() {
-    setInterval(() =>  this.counter += 1 , 1000);
+    setInterval(() => (this.counter += 1), 1000);
   }
 
   render() {
     const classes = {
       red: this.counter % 2 === 0,
-      blue: this.counter % 2 === 1
+      blue: this.counter % 2 === 1,
     };
     return html`<p class=${classMap(classes)}>Hello!</p>`;
   }
@@ -26,4 +26,4 @@ export class MyElement extends LitElement {
       color: blue;
     }
   `;
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/my-element.ts
index 860091f41..5a2ab9e87 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
@@ -14,13 +14,18 @@ export class MyElement extends LitElement {
 
     return html`
       <button
-          @click=${() => {this.someBoolean = !this.someBoolean}}>
+        @click=${() => {
+          this.someBoolean = !this.someBoolean;
+        }}
+      >
         Toggle template
       </button>
       <div>This is an inline ternary conditional</div>
-      ${this.someBoolean ? html`<p>Some other text</p>` : html`<p>Some text</p>`}
+      ${this.someBoolean
+        ? html`<p>Some other text</p>`
+        : html`<p>Some text</p>`}
       <div>This is a variable conditional</div>
       ${someText}
     `;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/my-element.ts
index 8bd747eee..b003176c3 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/my-element.ts
@@ -1,6 +1,9 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { trustedStyles, type CSSStyleSheet } from './trusted-stringified-css-source.js';
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {
+  trustedStyles,
+  type CSSStyleSheet,
+} from './trusted-stringified-css-source.js';
 
 // Use constructable stylesheets on TRUSTED CSS strings to use them in a LitElement
 const styles = new CSSStyleSheet();
@@ -11,10 +14,6 @@ const styles = new CSSStyleSheet();
 export class MyElement extends LitElement {
   static styles = styles;
   render() {
-    return html`
-      <div>
-        This should be red!
-      </div>
-    `;
+    return html` <div>This should be red!</div> `;
   }
 }
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/trusted-stringified-css-source.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/trusted-stringified-css-source.ts
index fce4ea3be..9375f6e47 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/trusted-stringified-css-source.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/trusted-stringified-css-source.ts
@@ -5,7 +5,7 @@ export const trustedStyles = `
 `;
 
 // This may be needed for some older versions of TS
-export type CSSStyleSheet = typeof globalThis['CSSStyleSheet'] & {
+export type CSSStyleSheet = (typeof globalThis)['CSSStyleSheet'] & {
   replaceSync(cssText: string): void;
   replace(cssText: string): void;
 };
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/index.html
index 63ef6c4b2..18cbd2eb8 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/index.html
@@ -21,4 +21,4 @@
 </div>
 <div>
   <my-element></my-element>
-</div>
\ No newline at end of file
+</div>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/my-element.ts
index 6fac25d2d..177b8c074 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
@@ -15,4 +15,4 @@ export class MyElement extends LitElement {
   render() {
     return html`<p part="paragraph">This is in a shadow root!</p>`;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/index.html
index d0fdb30d1..fb29bb482 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element array='1,"2",3,4,"5"'></my-element>
\ No newline at end of file
+<my-element array='1,"2",3,4,"5"'></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/my-element.ts
index 40810f9c3..2cbe7942d 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/my-element.ts
@@ -1,5 +1,6 @@
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';import {ComplexAttributeConverter} from 'lit';
+import {html, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import {ComplexAttributeConverter} from 'lit';
 
 /**
  * Bidirectionally converts an array from an attribute to a property of the
@@ -17,17 +18,15 @@ export const arrayConverter: ComplexAttributeConverter<Array<unknown>> = {
     } catch {
       return [];
     }
-  }
+  },
 };
 
 @customElement('my-element')
 export class MyElement extends LitElement {
-  @property({ converter: arrayConverter, reflect: true })
-  array: Array<number|string> = [];
+  @property({converter: arrayConverter, reflect: true})
+  array: Array<number | string> = [];
 
   render() {
-    return this.array.map((item) =>
-      html`<div>${typeof item}: ${item}</div>`
-    );
+    return this.array.map((item) => html`<div>${typeof item}: ${item}</div>`);
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/game-player.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/game-player.ts
index fdfdab6a8..cf8d0f3e4 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/game-player.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/game-player.ts
@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
 
 export type ScoreEvent = CustomEvent<number>;
 
@@ -13,6 +13,8 @@ export class GamePlayer extends LitElement {
   }
 
   handleScore(points: number) {
-    this.dispatchEvent(new CustomEvent('score', { detail: points, bubbles: true }));
+    this.dispatchEvent(
+      new CustomEvent('score', {detail: points, bubbles: true}),
+    );
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/index.html
index 0e004d712..bffc611c4 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./score-board.js"></script>
 
-<score-board></score-board>
\ No newline at end of file
+<score-board></score-board>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/score-board.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/score-board.ts
index 6a8d3dd36..07a611d27 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/score-board.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/score-board.ts
@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
 import './game-player.js';
 import type {ScoreEvent} from './game-player.js';
 
@@ -12,9 +12,13 @@ export class ScoreBoard extends LitElement {
     return html`
       <h1>${this.playerOneScore} - ${this.playerTwoScore}</h1>
       <h2>Player 1</h2>
-      <game-player @score=${(e: ScoreEvent) => this.playerOneScore += e.detail}></game-player>
+      <game-player
+        @score=${(e: ScoreEvent) => (this.playerOneScore += e.detail)}
+      ></game-player>
       <h2>Player 2</h2>
-      <game-player @score=${(e: ScoreEvent) => this.playerTwoScore += e.detail}></game-player>
+      <game-player
+        @score=${(e: ScoreEvent) => (this.playerTwoScore += e.detail)}
+      ></game-player>
     `;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/hello-world.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/hello-world.ts
index b4f5ba4d5..51799b93b 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/hello-world.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/hello-world.ts
@@ -1,9 +1,9 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
 
 @customElement('hello-world')
 export class HelloWorld extends LitElement {
   render() {
     return html`<p>Hello, world!</p>`;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/index.html
index c53974764..be6dad253 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./hello-world.js"></script>
 
-<hello-world></hello-world>
\ No newline at end of file
+<hello-world></hello-world>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/my-element.ts
index 02705851a..437af20fc 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/index.html
index e44dfda1c..eac65a81c 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/index.html
@@ -1,5 +1,5 @@
 <script type="module" src="./my-pretty-input.js"></script>
 
 <my-pretty-input>
-  <input placeholder="Focus me">
+  <input placeholder="Focus me" />
 </my-pretty-input>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/my-pretty-input.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/my-pretty-input.ts
index 26ba98f12..96634823c 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/my-pretty-input.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/my-pretty-input.ts
@@ -1,5 +1,10 @@
-import { html, LitElement, css } from 'lit';
-import { customElement, property, queryAssignedElements, state } from 'lit/decorators.js';
+import {html, LitElement, css} from 'lit';
+import {
+  customElement,
+  property,
+  queryAssignedElements,
+  state,
+} from 'lit/decorators.js';
 
 @customElement('my-pretty-input')
 export class MyPrettyInput extends LitElement {
@@ -43,24 +48,28 @@ export class MyPrettyInput extends LitElement {
     // get the array of assigned elements and pick the first one
     const input = this.inputs[0];
 
-    input?.animate?.([
-      { 'transform': 'scale(1)', easing: 'ease-out' },
-      { 'transform': 'scale(2)', easing: 'ease-in' },
-      { 'transform': 'scale(1)' }
-    ],
-    1000);
+    input?.animate?.(
+      [
+        {transform: 'scale(1)', easing: 'ease-out'},
+        {transform: 'scale(2)', easing: 'ease-in'},
+        {transform: 'scale(1)'},
+      ],
+      1000,
+    );
   };
 
   #onInputBlur = () => {
     this.inputFocused = false;
     const input = this.inputs[0];
 
-    input?.animate?.([
-      { 'transform': 'scale(1)', easing: 'ease-out' },
-      { 'transform': 'scale(.75)', easing: 'ease-in' },
-      { 'transform': 'scale(1)' }
-    ],
-    1000);
+    input?.animate?.(
+      [
+        {transform: 'scale(1)', easing: 'ease-out'},
+        {transform: 'scale(.75)', easing: 'ease-in'},
+        {transform: 'scale(1)'},
+      ],
+      1000,
+    );
   };
 
   #clearListeners() {
@@ -72,7 +81,8 @@ export class MyPrettyInput extends LitElement {
     this.#lastInput = null;
   }
 
-  static styles = css`/* playground-fold */
+  static styles = css`
+    /* playground-fold */
     canvas {
       border: 1px solid black;
     }
@@ -81,5 +91,6 @@ export class MyPrettyInput extends LitElement {
       display: block;
       margin-block-start: 1em;
     }
-  /* playground-fold-end */`;
+    /* playground-fold-end */
+  `;
 }
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/my-element.ts
index 13e84b3a0..23f7b3f42 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/my-element.ts
@@ -1,12 +1,12 @@
-import { html, LitElement, css, PropertyValues } from 'lit';
-import { customElement, state, property, queryAsync } from 'lit/decorators.js';
+import {html, LitElement, css, PropertyValues} from 'lit';
+import {customElement, state, property, queryAsync} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
   @property({type: Boolean}) showCanvas = false;
   @state() private canvasText = 'Hello World!';
   // You can use any querySelector selector
-  @queryAsync('#canvasId') private canvasEl!: Promise<HTMLCanvasElement|null>;
+  @queryAsync('#canvasId') private canvasEl!: Promise<HTMLCanvasElement | null>;
 
   protected update(changed: PropertyValues<this>) {
     if (changed.has('showCanvas')) {
@@ -19,14 +19,14 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-      ${
-        this.showCanvas ?
-        html`<canvas id="canvasId"></canvas>` :
-        html`<button @click=${() => this.showCanvas = true}>Show Canvas</button>`
-      }
+      ${this.showCanvas
+        ? html`<canvas id="canvasId"></canvas>`
+        : html`<button @click=${() => (this.showCanvas = true)}>
+            Show Canvas
+          </button>`}
       <label>
         Enter text to draw in canvas:
-        <input @input=${this.handleInput} .value=${this.canvasText}>
+        <input @input=${this.handleInput} .value=${this.canvasText} />
       </label>
     `;
   }
@@ -40,22 +40,23 @@ export class MyElement extends LitElement {
       return;
     }
 
-    const ctx = canvasEl?.getContext("2d");
+    const ctx = canvasEl?.getContext('2d');
 
     if (!ctx) {
       return;
     }
 
     ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
-    ctx.font = "50px Arial";
-    ctx.fillText(this.canvasText,10,80);
+    ctx.font = '50px Arial';
+    ctx.fillText(this.canvasText, 10, 80);
   }
 
   private handleInput(event: Event) {
     this.setCanvasText((event.target as HTMLInputElement).value);
   }
 
-  static styles = css`/* playground-fold */
+  static styles = css`
+    /* playground-fold */
     canvas {
       border: 1px solid black;
     }
@@ -64,5 +65,6 @@ export class MyElement extends LitElement {
       display: block;
       margin-block-start: 1em;
     }
-  /* playground-fold-end */`;
+    /* playground-fold-end */
+  `;
 }
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query/my-element.ts
index 94f5b06af..141a000da 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement, css } from 'lit';
-import { customElement, state, query } from 'lit/decorators.js';
+import {html, LitElement, css} from 'lit';
+import {customElement, state, query} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
@@ -12,7 +12,7 @@ export class MyElement extends LitElement {
       <canvas id="canvasId"></canvas>
       <label>
         Enter text to draw in canvas:
-        <input @input=${this.handleInput} .value=${this.canvasText}>
+        <input @input=${this.handleInput} .value=${this.canvasText} />
       </label>
     `;
   }
@@ -20,15 +20,15 @@ export class MyElement extends LitElement {
   private setCanvasText(text: string) {
     this.canvasText = text;
     // Access the canvas element with this.canvasEl
-    const ctx = this.canvasEl.getContext("2d");
+    const ctx = this.canvasEl.getContext('2d');
 
     if (!ctx) {
       return;
     }
 
     ctx.clearRect(0, 0, this.canvasEl.width, this.canvasEl.height);
-    ctx.font = "50px Arial";
-    ctx.fillText(this.canvasText,10,80);
+    ctx.font = '50px Arial';
+    ctx.fillText(this.canvasText, 10, 80);
   }
 
   private handleInput(event: Event) {
@@ -40,7 +40,8 @@ export class MyElement extends LitElement {
     this.setCanvasText(this.canvasText);
   }
 
-  static styles = css`/* playground-fold */
+  static styles = css`
+    /* playground-fold */
     canvas {
       border: 1px solid black;
     }
@@ -49,5 +50,6 @@ export class MyElement extends LitElement {
       display: block;
       margin-block-start: 1em;
     }
-  /* playground-fold-end */`;
+    /* playground-fold-end */
+  `;
 }
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-ref/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-ref/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-ref/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-ref/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-ref/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-ref/my-element.ts
index 398013904..08ead3187 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-ref/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-ref/my-element.ts
@@ -1,6 +1,6 @@
-import { html, LitElement, css } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { ref, createRef } from 'lit/directives/ref.js';
+import {html, LitElement, css} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {ref, createRef} from 'lit/directives/ref.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
@@ -12,7 +12,7 @@ export class MyElement extends LitElement {
       <canvas id="canvasId" ${ref(this.canvasRef)}></canvas>
       <label>
         Enter text to draw in canvas:
-        <input @input=${this.handleInput} .value=${this.canvasText}>
+        <input @input=${this.handleInput} .value=${this.canvasText} />
       </label>
     `;
   }
@@ -23,15 +23,20 @@ export class MyElement extends LitElement {
     }
     this.canvasText = text;
     // Access the canvas element with this.canvasEl
-    const ctx = this.canvasRef.value.getContext("2d");
+    const ctx = this.canvasRef.value.getContext('2d');
 
     if (!ctx) {
       return;
     }
 
-    ctx.clearRect(0, 0, this.canvasRef.value.width, this.canvasRef.value.height);
-    ctx.font = "50px Arial";
-    ctx.fillText(this.canvasText,10,80);
+    ctx.clearRect(
+      0,
+      0,
+      this.canvasRef.value.width,
+      this.canvasRef.value.height,
+    );
+    ctx.font = '50px Arial';
+    ctx.fillText(this.canvasText, 10, 80);
   }
 
   private handleInput(event: Event) {
@@ -43,7 +48,8 @@ export class MyElement extends LitElement {
     this.setCanvasText(this.canvasText);
   }
 
-  static styles = css`/* playground-fold */
+  static styles = css`
+    /* playground-fold */
     canvas {
       border: 1px solid black;
     }
@@ -52,5 +58,6 @@ export class MyElement extends LitElement {
       display: block;
       margin-block-start: 1em;
     }
-  /* playground-fold-end */`;
+    /* playground-fold-end */
+  `;
 }
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/my-element.ts
index 33d8c1696..a04f3dcb9 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { customElement, query, state } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement, query, state} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/another-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/another-element.ts
index 05456dd5d..890008c27 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/another-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/another-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
 
 @customElement('another-element')
 export class AnotherElement extends LitElement {
@@ -9,4 +9,4 @@ export class AnotherElement extends LitElement {
       <div part="part-2">Part 2</div>
     `;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/index.html
index 09a583b4e..db7e424a3 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/index.html
@@ -9,4 +9,4 @@
   }
 </style>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/my-element.ts
index f13ab63c8..ed21a7250 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/my-element.ts
@@ -1,10 +1,12 @@
-import { html, LitElement, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
 import './another-element.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
   render() {
-    return html`<another-element exportparts="part-1, part-2:part-b"></another-element>`;
+    return html`<another-element
+      exportparts="part-1, part-2:part-b"
+    ></another-element>`;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/my-element.ts
index 61e34ff7a..17e73eee7 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/my-element.ts
@@ -1,5 +1,5 @@
-import { css, html, LitElement, PropertyValues } from 'lit';
-import { customElement, query, state } from 'lit/decorators.js';
+import {css, html, LitElement, PropertyValues} from 'lit';
+import {customElement, query, state} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
@@ -14,7 +14,8 @@ export class MyElement extends LitElement {
       <input
         ?disabled=${this.disabled}
         aria-label=${this.label}
-        .value=${this.value}>
+        .value=${this.value}
+      />
       <div>
         Renders to:
         <pre>${this.htmlText}</pre>
@@ -25,20 +26,26 @@ export class MyElement extends LitElement {
           disabled:
           <input
             type="checkbox"
-            @change=${(e: Event) => (this.disabled = (e.target as HTMLInputElement).checked)}
-            .checked=${this.disabled}>
+            @change=${(e: Event) =>
+              (this.disabled = (e.target as HTMLInputElement).checked)}
+            .checked=${this.disabled}
+          />
         </label>
         <label>
           aria-label:
           <input
-            @input=${(e: Event) => (this.label = (e.target as HTMLInputElement).value)}
-            .value=${this.label}>
+            @input=${(e: Event) =>
+              (this.label = (e.target as HTMLInputElement).value)}
+            .value=${this.label}
+          />
         </label>
         <label>
           value:
           <input
-            @input=${(e: Event) => (this.value = (e.target as HTMLInputElement).value)}
-            .value=${this.value}>
+            @input=${(e: Event) =>
+              (this.value = (e.target as HTMLInputElement).value)}
+            .value=${this.value}
+          />
         </label>
       </div>
       <!-- /* playground-fold-end */ -->
@@ -52,10 +59,10 @@ export class MyElement extends LitElement {
   }
 
   static styles = css`
-  /* playground-fold */
+    /* playground-fold */
     label {
       display: block;
     }
-  /* playground-fold-end */
+    /* playground-fold-end */
   `;
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/index.html
index f03ab07ca..3859cca22 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/index.html
@@ -1,4 +1,4 @@
 <script type="module" src="./my-element.js"></script>
 
 <p>Click either inside or outside this component with a box border</p>
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/my-element.ts
index 5f575d42e..92d236477 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement, isServer, css } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import {html, LitElement, isServer, css} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
@@ -7,8 +7,12 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-      ${!this.clickedOutside ? html`<p>Something was clicked INSIDE this component</p>` : ''}
-      ${this.clickedOutside ? html`<p>Something was clicked OUTSIDE this component</p>` : ''}
+      ${!this.clickedOutside
+        ? html`<p>Something was clicked INSIDE this component</p>`
+        : ''}
+      ${this.clickedOutside
+        ? html`<p>Something was clicked OUTSIDE this component</p>`
+        : ''}
     `;
   }
 
@@ -38,11 +42,13 @@ export class MyElement extends LitElement {
     this.clickedOutside = !path.includes(this);
   };
 
-  static styles = css`/* playground-fold */
+  static styles = css`
+    /* playground-fold */
 
     :host {
       display: inline-flex;
       border: 1px solid black;
     }
-    /* playground-fold-end */`;
-}
\ No newline at end of file
+    /* playground-fold-end */
+  `;
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/my-element.ts
index e961fc484..f69bb69aa 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement, isServer } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import {html, LitElement, isServer} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
@@ -8,7 +8,9 @@ export class MyElement extends LitElement {
   render() {
     return html`
       <button>Focus me!</button>
-      ${this.focusedWithin ? html`<p>Something in this component was focused</p>` : ''}
+      ${this.focusedWithin
+        ? html`<p>Something in this component was focused</p>`
+        : ''}
     `;
   }
 
@@ -30,4 +32,4 @@ export class MyElement extends LitElement {
   #onFocusout() {
     this.focusedWithin = false;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/my-element.js b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/my-element.js
index 952c50945..ae778504a 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/my-element.js
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/my-element.js
@@ -1,15 +1,11 @@
-import { html, LitElement } from 'lit';
-import styles from './styles.css' with { type: 'css' };
+import {html, LitElement} from 'lit';
+import styles from './styles.css' with {type: 'css'};
 
 export class MyElement extends LitElement {
   static styles = styles;
 
   render() {
-    return html`
-      <div>
-        This should be red!
-      </div>
-    `;
+    return html` <div>This should be red!</div> `;
   }
 }
 
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/another-component.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/another-component.ts
index 8e2671b95..30f7e44dd 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/another-component.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/another-component.ts
@@ -1,9 +1,9 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
 
 @customElement('another-component')
 export class AnotherComponent extends LitElement {
   render() {
     return html`<span>(I'm another component.)</span>`;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/hello-world.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/hello-world.ts
index de5f2dccf..703e9859a 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/hello-world.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/hello-world.ts
@@ -1,10 +1,10 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import './another-component.js'
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import './another-component.js';
 
 @customElement('hello-world')
 export class HelloWorld extends LitElement {
   render() {
     return html`Hello, world! <another-component></another-component>`;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/index.html
index c53974764..be6dad253 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./hello-world.js"></script>
 
-<hello-world></hello-world>
\ No newline at end of file
+<hello-world></hello-world>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/index.html
index 5b273eb5d..af12c60f1 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/index.html
@@ -18,4 +18,4 @@
 </div>
 <div>
   <my-element></my-element>
-</div>
\ No newline at end of file
+</div>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/my-element.ts
index f6ed8d2d6..d5e60dadf 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
@@ -14,4 +14,4 @@ export class MyElement extends LitElement {
   render() {
     return html`<p>This is in a shadow root!</p>`;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/id-card.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/id-card.ts
index b7a427e95..d7270029a 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/id-card.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/id-card.ts
@@ -1,20 +1,20 @@
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
 @customElement('id-card')
 export class IdCard extends LitElement {
   @property() name = '';
-  @property({ type: Number }) age = 0;
-  @property({ type: Boolean }) programmer = false;
+  @property({type: Number}) age = 0;
+  @property({type: Boolean}) programmer = false;
 
   render() {
     return html`
       <h3>${this.name}</h3>
       <p>Age: ${this.age}</p>
       <label>
-        <input disabled type="checkbox" ?checked=${this.programmer}>
+        <input disabled type="checkbox" ?checked=${this.programmer} />
         Programmer
       </label>
     `;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/index.html
index d5f0f24d5..f07c80f59 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-wallet.js"></script>
 
-<my-wallet></my-wallet>
\ No newline at end of file
+<my-wallet></my-wallet>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/my-wallet.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/my-wallet.ts
index 0159d6911..e97a5cb10 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/my-wallet.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/my-wallet.ts
@@ -1,12 +1,12 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
 import './id-card.js';
 
 @customElement('my-wallet')
 export class MyWallet extends LitElement {
   render() {
     return html`
-      <id-card .name=${"Steven"} .age=${27} ?programmer=${true}></id-card>
+      <id-card .name=${'Steven'} .age=${27} ?programmer=${true}></id-card>
     `;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/id-card.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/id-card.ts
index 0feccc9d3..29cc9a9a9 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/id-card.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/id-card.ts
@@ -1,30 +1,30 @@
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
 @customElement('id-card')
 export class IdCard extends LitElement {
   // Default attribute converter is string
   @property() name = '';
   // Number attribute converter converts attribtues to numbers
-  @property({ type: Number }) age = 0;
+  @property({type: Number}) age = 0;
   // Boolean attribute converter converts attribtues to boolean using
   // .hasAttribute(). NOTE: boolean-attribute="false" will result in `true`
-  @property({ type: Boolean }) programmer = false;
+  @property({type: Boolean}) programmer = false;
   // You can also specify the attribute name
-  @property({ type: Boolean, attribute: 'is-cool' }) isCool = false;
+  @property({type: Boolean, attribute: 'is-cool'}) isCool = false;
 
   render() {
     return html`
       <h3>${this.name}</h3>
       <p>Age: ${this.age}</p>
       <label style="display: block;">
-        <input disabled type="checkbox" ?checked=${this.programmer}>
+        <input disabled type="checkbox" ?checked=${this.programmer} />
         Programmer
       </label>
       <label>
-        <input disabled type="checkbox" ?checked=${this.isCool}>
+        <input disabled type="checkbox" ?checked=${this.isCool} />
         Is Cool
       </label>
     `;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/index.html
index d5f0f24d5..f07c80f59 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-wallet.js"></script>
 
-<my-wallet></my-wallet>
\ No newline at end of file
+<my-wallet></my-wallet>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/my-wallet.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/my-wallet.ts
index b88d3de0e..cacd8014d 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/my-wallet.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/my-wallet.ts
@@ -1,12 +1,17 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
 import './id-card.js';
 
 @customElement('my-wallet')
 export class MyWallet extends LitElement {
   render() {
     return html`
-      <id-card .name=${"Steven"} .age=${27} ?programmer=${true} .isCool=${true}></id-card>
+      <id-card
+        .name=${'Steven'}
+        .age=${27}
+        ?programmer=${true}
+        .isCool=${true}
+      ></id-card>
       <!-- It can also convert attributes into properties -->
       <id-card name="Elliott" age="30" programmer></id-card>
       <!--
@@ -16,4 +21,4 @@ export class MyWallet extends LitElement {
       <id-card name="Dan" age="35" programmer is-cool></id-card>
     `;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-state/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-state/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-state/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-state/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-state/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-state/my-element.ts
index d73ac0ef2..9f28f1909 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-state/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-state/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
@@ -14,18 +14,15 @@ export class MyElement extends LitElement {
 
   render() {
     const min = Math.floor(this._duration / 60000);
-    const sec = pad(min, Math.floor(this._duration / 1000 % 60));
-    const hun = pad(true, Math.floor(this._duration % 1000 / 10));
+    const sec = pad(min, Math.floor((this._duration / 1000) % 60));
+    const hun = pad(true, Math.floor((this._duration % 1000) / 10));
 
     return html`
+      <div>${min ? `${min}:${sec}.${hun}` : `${sec}.${hun}`}</div>
       <div>
-        ${min ? `${min}:${sec}.${hun}` : `${sec}.${hun}`}
-      </div>
-      <div>
-        ${this._isPlaying ?
-        html`<button @click=${this.pause}>Pause</button>` :
-        html`<button @click=${this.start}>Play</button>`
-      }
+        ${this._isPlaying
+          ? html`<button @click=${this.pause}>Pause</button>`
+          : html`<button @click=${this.start}>Play</button>`}
         <button @click=${this.reset}>Reset</button>
       </div>
     `;
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-update/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-update/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-update/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-update/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-update/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-update/my-element.ts
index c257cb284..115bfd78a 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-update/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-update/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement, PropertyValues } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import {html, LitElement, PropertyValues} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 import {live} from 'lit/directives/live.js';
 
 @customElement('my-element')
@@ -22,9 +22,7 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-      <div>
-        The string saved in localstorage is: ${this.savedString}
-      </div>
+      <div>The string saved in localstorage is: ${this.savedString}</div>
       ${this.#renderSavedStringControls()}
     `;
   }
@@ -41,6 +39,5 @@ export class MyElement extends LitElement {
       />
     `;
     /* playground-fold-end */
-
   }
 }
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-updated/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-updated/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-updated/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-updated/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-updated/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-updated/my-element.ts
index 7c2ce8b9b..8a0cf5657 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-updated/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-updated/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement, PropertyValues } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import {html, LitElement, PropertyValues} from 'lit';
+import {customElement, property, query} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
@@ -17,11 +17,11 @@ export class MyElement extends LitElement {
 
   #updateIframeContents(newContents: string) {
     const iframeDocument = this.iframeEl.contentDocument;
-      if (!iframeDocument) {
-        return;
-      }
+    if (!iframeDocument) {
+      return;
+    }
 
-      iframeDocument.querySelector('div')!.textContent = newContents;
+    iframeDocument.querySelector('div')!.textContent = newContents;
   }
 
   render() {
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-willupdate/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-willupdate/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-willupdate/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-willupdate/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-willupdate/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-willupdate/my-element.ts
index e01b45160..99b7790e3 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-willupdate/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-willupdate/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement, PropertyValues } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import {html, LitElement, PropertyValues} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
 import {live} from 'lit/directives/live.js';
 
 @customElement('my-element')
@@ -22,12 +22,8 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-      <div>
-        value of a: ${this.a}
-      </div>
-      <div>
-        value of double a: ${this.doubleA}
-      </div>
+      <div>value of a: ${this.a}</div>
+      <div>value of double a: ${this.doubleA}</div>
       ${this.#renderAControls()}
     `;
   }
@@ -35,14 +31,21 @@ export class MyElement extends LitElement {
   #renderAControls() {
     /* playground-fold */
     return html`
-      <input type="number" .valueAsNumber=${live(this.a)} @input=${(e: Event) => {
-        this.a = (e.target as HTMLInputElement).valueAsNumber;
-      }} />
-      <input type="number" .valueAsNumber=${live(this.doubleA)} @input=${(e: Event) => {
-        this.doubleA = (e.target as HTMLInputElement).valueAsNumber;
-      }} />
+      <input
+        type="number"
+        .valueAsNumber=${live(this.a)}
+        @input=${(e: Event) => {
+          this.a = (e.target as HTMLInputElement).valueAsNumber;
+        }}
+      />
+      <input
+        type="number"
+        .valueAsNumber=${live(this.doubleA)}
+        @input=${(e: Event) => {
+          this.doubleA = (e.target as HTMLInputElement).valueAsNumber;
+        }}
+      />
     `;
     /* playground-fold-end */
-
   }
 }
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/render-lists/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/render-lists/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/render-lists/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/render-lists/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/render-lists/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/render-lists/my-element.ts
index 3e87d606a..6fe152ec7 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/render-lists/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/render-lists/my-element.ts
@@ -1,19 +1,19 @@
 import {LitElement, html} from 'lit';
 import {customElement} from 'lit/decorators.js';
-import { map } from 'lit/directives/map.js';
+import {map} from 'lit/directives/map.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
   names = ['Chandler', 'Phoebe', 'Joey', 'Monica', 'Rachel', 'Ross'];
-  items = new Set(['Apple', 'Banana', 'Grape', 'Orange', 'Lime'])
+  items = new Set(['Apple', 'Banana', 'Grape', 'Orange', 'Lime']);
 
   render() {
     return html`
       <p>A list of names that include the letter "e" (rendering an Array)</p>
       <ul>
-      ${this.names
-        .filter((name) => name.match(/e/i))
-        .map((name) => html`<li>${name}</li>`)}
+        ${this.names
+          .filter((name) => name.match(/e/i))
+          .map((name) => html`<li>${name}</li>`)}
       </ul>
 
       <p>My unique fruits (rendering a Set)</p>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/repeat/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/repeat/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/repeat/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/repeat/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/repeat/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/repeat/my-element.ts
index 449c3537e..db9c55cc6 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/repeat/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/repeat/my-element.ts
@@ -6,10 +6,10 @@ import {repeat} from 'lit/directives/repeat.js';
 class MyElement extends LitElement {
   @state()
   tasks = [
-    { id: 'a', label: 'Learn Lit'},
-    { id: 'b', label: 'Feed the cat'},
-    { id: 'c', label: 'Go for a walk'},
-    { id: 'd', label: 'Take a nap'},
+    {id: 'a', label: 'Learn Lit'},
+    {id: 'b', label: 'Feed the cat'},
+    {id: 'c', label: 'Go for a walk'},
+    {id: 'd', label: 'Take a nap'},
   ];
 
   render() {
@@ -25,7 +25,7 @@ class MyElement extends LitElement {
             <li>
               <label><input type="checkbox" />${task.id}) ${task.label}</label>
             </li>
-          `
+          `,
         )}
       </ul>
     `;
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/rerender-array-change/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/rerender-array-change/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/rerender-array-change/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/rerender-array-change/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/rerender-array-change/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/rerender-array-change/my-element.ts
index dfb68d94d..7488ec21b 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/rerender-array-change/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/rerender-array-change/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
@@ -40,4 +40,4 @@ export class MyElement extends LitElement {
       this._newReferenceArray.length,
     ];
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/scope-styles/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/scope-styles/index.html
index f22bdd0aa..8af4dd342 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/scope-styles/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/scope-styles/index.html
@@ -1,4 +1,4 @@
 <script type="module" src="./my-element.js"></script>
 
 <my-element></my-element>
-<p>I'm also a p, but I'm not blue.</p>
\ No newline at end of file
+<p>I'm also a p, but I'm not blue.</p>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/scope-styles/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/scope-styles/my-element.ts
index 65dae1c97..3baaa141f 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/scope-styles/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/scope-styles/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
@@ -12,4 +12,4 @@ export class MyElement extends LitElement {
       color: blue;
     }
   `;
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-root-options/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-root-options/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-root-options/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-root-options/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-root-options/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-root-options/my-element.ts
index fd5901705..c2d048c04 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-root-options/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-root-options/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
@@ -15,7 +15,7 @@ export class MyElement extends LitElement {
         its shadow root thanks to <code>delegatesFocus: true</code>. Just try
         clicking on this text and see how the input is focused instead.
       </p>
-      <input placeholder="The first focusable element">
+      <input placeholder="The first focusable element" />
     `;
   }
 
@@ -25,4 +25,4 @@ export class MyElement extends LitElement {
       padding: 0.2em 0.4em;
     }
   `;
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-slotting/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-slotting/index.html
index 65640122b..1c8f32fd5 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-slotting/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-slotting/index.html
@@ -1,7 +1,10 @@
 <script type="module" src="./my-card.js"></script>
 
 <my-card>
-  <img slot="image" src="https://lit.dev/images/learn/tutorial_default_thumbnail.jpg">
+  <img
+    slot="image"
+    src="https://lit.dev/images/learn/tutorial_default_thumbnail.jpg"
+  />
 
   <h1 slot="title">Title</h1>
   <h2 slot="subtitle">Subtitle</h2>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-slotting/my-card.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-slotting/my-card.ts
index 6d4171e77..ed6204817 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-slotting/my-card.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-slotting/my-card.ts
@@ -1,9 +1,8 @@
-import { html, LitElement, css } from 'lit';
-import { customElement} from 'lit/decorators.js';
+import {html, LitElement, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
 
 @customElement('my-card')
 export class MyElement extends LitElement {
-
   render() {
     return html`
       <div id="vertical">
@@ -34,7 +33,8 @@ export class MyElement extends LitElement {
       margin: 0;
     }
 
-    #vertical, #content {
+    #vertical,
+    #content {
       display: flex;
       flex-direction: column;
     }
@@ -48,7 +48,7 @@ export class MyElement extends LitElement {
       max-height: 300px;
     }
 
-    [name="image"]::slotted(*) {
+    [name='image']::slotted(*) {
       aspect-ratio: 16/9;
       height: 100%;
       width: 100%;
@@ -56,13 +56,13 @@ export class MyElement extends LitElement {
       object-position: center center;
     }
 
-    [name="title"]::slotted(*) {
+    [name='title']::slotted(*) {
       font-size: 1.5em;
       font-weight: bold;
       margin-block-end: 0.5em;
     }
 
-    [name="subtitle"]::slotted(*) {
+    [name='subtitle']::slotted(*) {
       font-size: 1em;
       color: gray;
       margin-block-end: 1em;
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/another-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/another-element.ts
index 8da15f22c..c4991083c 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/another-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/another-element.ts
@@ -1,14 +1,15 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
 import {sharedStyles} from './shared-styles.js';
 
 @customElement('another-element')
 export class AnotherElement extends LitElement {
-  static styles = sharedStyles
+  static styles = sharedStyles;
 
   render() {
     return html`
-      This <code>&ltcode></code> element shares styles with the <code>&ltmy-element></code> element.
+      This <code>&ltcode></code> element shares styles with the
+      <code>&ltmy-element></code> element.
     `;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/index.html
index 239e0f7ef..ac766d1b0 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/index.html
@@ -2,4 +2,4 @@
 <script type="module" src="./another-element.js"></script>
 
 <my-element></my-element>
-<another-element></another-element>
\ No newline at end of file
+<another-element></another-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/my-element.ts
index a16e97136..ea77efc81 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/my-element.ts
@@ -1,19 +1,26 @@
-import { html, LitElement, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
 import {sharedStyles} from './shared-styles.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
-  static styles = [sharedStyles, css`
-    p code {
-      background-color: #faff00;
-    }
-  `]
+  static styles = [
+    sharedStyles,
+    css`
+      p code {
+        background-color: #faff00;
+      }
+    `,
+  ];
 
   render() {
     return html`
-      This <code>&ltcode></code> element shares styles with the <code>&ltanother-element></code> element.
-      <p>I am overriding the <code>&ltcode></code> element in this <code>&ltp></code> tag.</p>
+      This <code>&ltcode></code> element shares styles with the
+      <code>&ltanother-element></code> element.
+      <p>
+        I am overriding the <code>&ltcode></code> element in this
+        <code>&ltp></code> tag.
+      </p>
     `;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/project.json
index 1b3c94174..a4a69e477 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/project.json
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/project.json
@@ -8,4 +8,3 @@
   },
   "previewHeight": "150px"
 }
-
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/shared-styles.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/shared-styles.ts
index 1bf46d01b..36e2b02d9 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/shared-styles.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/shared-styles.ts
@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import {css} from 'lit';
 
 export const sharedStyles = css`
   :host {
@@ -14,4 +14,4 @@ export const sharedStyles = css`
     padding: 2px;
     border-radius: 3px;
   }
-`;
\ No newline at end of file
+`;
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signal-watcher/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signal-watcher/index.html
index 8585fa6eb..838c8e61e 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signal-watcher/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signal-watcher/index.html
@@ -2,4 +2,4 @@
 <script type="module" src="./my-element.js"></script>
 
 <my-element></my-element>
-<visual-logger></visual-logger>
\ No newline at end of file
+<visual-logger></visual-logger>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-computed/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-computed/index.html
index 8585fa6eb..838c8e61e 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-computed/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-computed/index.html
@@ -2,4 +2,4 @@
 <script type="module" src="./my-element.js"></script>
 
 <my-element></my-element>
-<visual-logger></visual-logger>
\ No newline at end of file
+<visual-logger></visual-logger>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-computed/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-computed/my-element.ts
index bbeb73ab6..f2a06d4ec 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-computed/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-computed/my-element.ts
@@ -24,4 +24,3 @@ export class MyElement extends SignalWatcher(LitElement) {
     count.set(count.get() + 1);
   }
 }
-
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-html-tag/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-html-tag/index.html
index 8585fa6eb..838c8e61e 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-html-tag/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-html-tag/index.html
@@ -2,4 +2,4 @@
 <script type="module" src="./my-element.js"></script>
 
 <my-element></my-element>
-<visual-logger></visual-logger>
\ No newline at end of file
+<visual-logger></visual-logger>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-share/game-player.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-share/game-player.ts
index 25d76e11e..db109551e 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-share/game-player.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-share/game-player.ts
@@ -1,6 +1,6 @@
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { playerOneScore, playerTwoScore } from './game-state.js';
+import {html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {playerOneScore, playerTwoScore} from './game-state.js';
 
 export type ScoreEvent = CustomEvent<number>;
 
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-share/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-share/index.html
index 0e004d712..bffc611c4 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-share/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-share/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./score-board.js"></script>
 
-<score-board></score-board>
\ No newline at end of file
+<score-board></score-board>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-share/score-board.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-share/score-board.ts
index acde5a21c..da390b087 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-share/score-board.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-share/score-board.ts
@@ -1,8 +1,8 @@
-import { LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
 import './game-player.js';
-import { SignalWatcher, html } from '@lit-labs/signals';
-import { playerOneScore, playerTwoScore } from './game-state.js';
+import {SignalWatcher, html} from '@lit-labs/signals';
+import {playerOneScore, playerTwoScore} from './game-state.js';
 
 @customElement('score-board')
 export class ScoreBoard extends SignalWatcher(LitElement) {
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-watch-directive/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-watch-directive/index.html
index 8585fa6eb..838c8e61e 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-watch-directive/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-watch-directive/index.html
@@ -2,4 +2,4 @@
 <script type="module" src="./my-element.js"></script>
 
 <my-element></my-element>
-<visual-logger></visual-logger>
\ No newline at end of file
+<visual-logger></visual-logger>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-watch-directive/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-watch-directive/my-element.ts
index 54ee9704d..470f811ae 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-watch-directive/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-watch-directive/my-element.ts
@@ -19,4 +19,3 @@ export class MyElement extends SignalWatcher(LitElement) {
     count.set(count.get() + 1);
   }
 }
-
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/styling-slotted/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/styling-slotted/my-element.ts
index 35cf74f90..c4ff17cce 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/styling-slotted/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/styling-slotted/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement, css } from 'lit';
-import { customElement} from 'lit/decorators.js';
+import {html, LitElement, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/index.html
index 201f62c87..2f9ab763d 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/index.html
@@ -1,4 +1,8 @@
-<style>:root { font-family: sans-serif; }</style>
+<style>
+  :root {
+    font-family: sans-serif;
+  }
+</style>
 <script type="module" src="./poke-dex.js"></script>
 
 <poke-dex></poke-dex>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/poke-dex.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/poke-dex.ts
index 1ea94acac..8b64fabc2 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/poke-dex.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/poke-dex.ts
@@ -1,7 +1,7 @@
-import { html, LitElement } from 'lit';
-import { customElement, state, query } from 'lit/decorators.js';
-import type { PokedexEntry } from './poke-types.js';
-import { Task } from '@lit/task';
+import {html, LitElement} from 'lit';
+import {customElement, state, query} from 'lit/decorators.js';
+import type {PokedexEntry} from './poke-types.js';
+import {Task} from '@lit/task';
 
 @customElement('poke-dex')
 export class MyElement extends LitElement {
@@ -12,34 +12,38 @@ export class MyElement extends LitElement {
   #pokemonTask = new Task(
     this,
     async ([pokemonId]) => {
-      const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`);
+      const response = await fetch(
+        `https://pokeapi.co/api/v2/pokemon/${pokemonId}`,
+      );
 
       if (!response.ok) {
         throw new Error(response.statusText);
       }
       return response.json() as Promise<PokedexEntry>;
     },
-    () => [this.pokemonId]
+    () => [this.pokemonId],
   );
 
-
   render() {
     return html`
       ${this.#renderControls()}
-      ${
-        this.#pokemonTask.render({
-          initial: () => html`<p>Enter a pokemon ID and click "Fetch"</p>`,
-          pending: () => html`<p>Loading ID ${this.pokemonId}...</p>`,
-          complete: (pokemon) => html`
-            <h2>${pokemon.name}</h2>
-            <p>Height: ${pokemon.height}</p>
-            <p>Weight: ${pokemon.weight}</p>
-            <p>Types: ${pokemon.types.map(({type}) => type.name).join(', ')}</p>
-            <audio controls ?autoplay=${this.autoplay} src=${pokemon.cries.latest}></audio>
-          `,
-          error: (error) => html`<p>Error fetching ID ${this.pokemonId}: ${error}</p>`,
-        })
-      }
+      ${this.#pokemonTask.render({
+        initial: () => html`<p>Enter a pokemon ID and click "Fetch"</p>`,
+        pending: () => html`<p>Loading ID ${this.pokemonId}...</p>`,
+        complete: (pokemon) => html`
+          <h2>${pokemon.name}</h2>
+          <p>Height: ${pokemon.height}</p>
+          <p>Weight: ${pokemon.weight}</p>
+          <p>Types: ${pokemon.types.map(({type}) => type.name).join(', ')}</p>
+          <audio
+            controls
+            ?autoplay=${this.autoplay}
+            src=${pokemon.cries.latest}
+          ></audio>
+        `,
+        error: (error) =>
+          html`<p>Error fetching ID ${this.pokemonId}: ${error}</p>`,
+      })}
     `;
   }
 
@@ -53,13 +57,23 @@ export class MyElement extends LitElement {
       <div>
         <label>
           Pokemon id number:
-          <input type="number" value=${this.pokemonId} @keypress=${this.#onKeypress} />
+          <input
+            type="number"
+            value=${this.pokemonId}
+            @keypress=${this.#onKeypress}
+          />
         </label>
         <button @click=${this.#updateId}>Fetch</button>
       </div>
       <label style="display: block;">
         Autoplay sound?
-        <input type="checkbox" @input=${() => {this.autoplay = !this.autoplay}} .checked=${this.autoplay} />
+        <input
+          type="checkbox"
+          @input=${() => {
+            this.autoplay = !this.autoplay;
+          }}
+          .checked=${this.autoplay}
+        />
       </label>
     `;
   }
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/poke-types.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/poke-types.ts
index dd315b6d7..3d23f414e 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/poke-types.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/poke-types.ts
@@ -3,7 +3,7 @@ export interface PokedexEntry {
   cries: {
     latest: string;
     legacy: string;
-  }
+  };
   height: number;
   weight: number;
   types: {type: {name: string}}[];
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/turn-off-shadow-dom/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/turn-off-shadow-dom/index.html
index fb0358064..1d6edd0df 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/turn-off-shadow-dom/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/turn-off-shadow-dom/index.html
@@ -1,7 +1,5 @@
 <script type="module" src="./my-element.js"></script>
 
-<style>
+<style></style>
 
-</style>
-
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/turn-off-shadow-dom/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/turn-off-shadow-dom/my-element.ts
index 60aee491b..72b458814 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/turn-off-shadow-dom/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/turn-off-shadow-dom/my-element.ts
@@ -1,5 +1,5 @@
-import { html, LitElement, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
@@ -10,7 +10,10 @@ export class MyElement extends LitElement {
   render() {
     return html`
       <p>This is not rendered in a shadow root</p>
-      <p>Styles from <code>index.html</code> will leak in and <code>static styles</code> do not apply</p>
+      <p>
+        Styles from <code>index.html</code> will leak in and
+        <code>static styles</code> do not apply
+      </p>
     `;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-html/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-html/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-html/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-html/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-html/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-html/my-element.ts
index 376ce32aa..3617202ef 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-html/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-html/my-element.ts
@@ -1,7 +1,7 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { renderLibrary } from './trusted-rendering-library.js';
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+import {renderLibrary} from './trusted-rendering-library.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-static/my-button.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-static/my-button.ts
index 0e3b5cd14..9b45c553d 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-static/my-button.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-static/my-button.ts
@@ -1,7 +1,12 @@
-import { html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { getTagName, getActiveAttribute, getClasses, getPluginStyles } from './trusted-rendering-library.js';
-import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
+import {html, LitElement} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {
+  getTagName,
+  getActiveAttribute,
+  getClasses,
+  getPluginStyles,
+} from './trusted-rendering-library.js';
+import {html as staticHtml, unsafeStatic} from 'lit/static-html.js';
 
 @customElement('my-button')
 export class MyButton extends LitElement {
@@ -13,20 +18,22 @@ export class MyButton extends LitElement {
     const activeAttribute = getActiveAttribute();
     const classes = getClasses();
 
-    return html`
-      ${staticHtml`
+    return html` ${staticHtml`
         <${unsafeStatic(tag)}
             tabindex="0"
             class=${unsafeStatic(classes)}
             ?${unsafeStatic(activeAttribute)}=${this.active}>
           <p>Hello static!</p>
-        </${unsafeStatic(tag)}>`
-      }
+        </${unsafeStatic(tag)}>`}
       <!-- /* playground-fold */ -->
       <fieldset>
         <legend>Toggle fancy button active state</legend>
         <label>
-          <input type="checkbox" @change=${this.#toggleActive} .checked=${this.active}>
+          <input
+            type="checkbox"
+            @change=${this.#toggleActive}
+            .checked=${this.active}
+          />
           Active
         </label>
       </fieldset>
@@ -35,10 +42,9 @@ export class MyButton extends LitElement {
 
   /* playground-fold */
   #toggleActive(e: InputEvent) {
-    this.active = (e.target as HTMLInputElement).checked
+    this.active = (e.target as HTMLInputElement).checked;
   }
 
-
   constructor() {
     super();
     (MyButton.styles as any).replaceSync(getPluginStyles());
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/my-element.ts
index 9a1cddb7d..7340838bd 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/my-element.ts
@@ -1,5 +1,5 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, query, state } from 'lit/decorators.js';
+import {css, html, LitElement} from 'lit';
+import {customElement, query, state} from 'lit/decorators.js';
 import {styleMap} from 'lit/directives/style-map.js';
 
 @customElement('my-element')
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/index.html
index 57a0c9aca..9a1b15c74 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/index.html
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/index.html
@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
\ No newline at end of file
+<my-element></my-element>
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/my-element.ts
index 8161cfaaf..dea9e13da 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/my-element.ts
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/my-element.ts
@@ -14,8 +14,9 @@ export class MyItems extends LitElement {
           have the lit-virtualizer element as a wrapper
         -->
         <lit-virtualizer
-            .items=${this.data}
-            .renderItem=${(i: {text: string}) => html`<li>${i.text}</li>`}>
+          .items=${this.data}
+          .renderItem=${(i: {text: string}) => html`<li>${i.text}</li>`}
+        >
         </lit-virtualizer>
       </ul>
     `;
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/with-logger.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/with-logger.json
index 20ba04f9a..802d336ab 100644
--- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/with-logger.json
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/with-logger.json
@@ -6,4 +6,4 @@
       "content": "import {LitElement, html, css} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport {SignalWatcher, signal, watch} from '@lit-labs/signals';\n\nconst log = signal<unknown[][]>([]);\n\nconst oldLog = window.console.log\nwindow.console.log = (...values: unknown[]) => {\n  log.set([...log.get(), values]);\n  oldLog(...values)\n};\n\nconst globalStyles = new CSSStyleSheet();\n\nglobalStyles.replaceSync(`body {\n  display: flex;\n}\n  \nbody > * {\n  flex: 1\n}`)\n\ndocument.adoptedStyleSheets.push(globalStyles);\n\n@customElement('visual-logger')\nexport class MyElement extends SignalWatcher(LitElement) {\n  render() {\n    return html`\n      <div id=\"log\">\n        <b>Log:</b>\n        <hr/>\n          ${log.get().toReversed().map(val => html`<p>${val.join(' ')}</p>`)}\n      </div>\n    `;\n  }\n  \n  static styles = css`\n    #log {\n      display: block;\n      max-height: 100dvh;\n    }\n      \n    p {\n      margin: 0;\n      font-family: monospace;\n    }\n  `;\n}"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/examples/async-task/index.html b/packages/lit-dev-content/samples/examples/async-task/index.html
index 8099c92be..c1262ffc1 100644
--- a/packages/lit-dev-content/samples/examples/async-task/index.html
+++ b/packages/lit-dev-content/samples/examples/async-task/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./npm-info.js"></script>
diff --git a/packages/lit-dev-content/samples/examples/async-task/npm-info.ts b/packages/lit-dev-content/samples/examples/async-task/npm-info.ts
index 5175f0b5f..8da47aeff 100644
--- a/packages/lit-dev-content/samples/examples/async-task/npm-info.ts
+++ b/packages/lit-dev-content/samples/examples/async-task/npm-info.ts
@@ -54,13 +54,13 @@ export class NpmInfo extends LitElement {
             <ul>
               ${map(
                 Object.entries(pkg['dist-tags']),
-                ([tag, version]) => html`<li><pre>${tag}: ${version}</pre></li>`
+                ([tag, version]) =>
+                  html`<li><pre>${tag}: ${version}</pre></li>`,
               )}
             </ul>
           `,
-          error: (e) => html`<span class="error">
-            Error: ${(e as Error).message}
-              </span>`,
+          error: (e) =>
+            html`<span class="error"> Error: ${(e as Error).message} </span>`,
         })}
       </div>
     `;
diff --git a/packages/lit-dev-content/samples/examples/async-task/npm.ts b/packages/lit-dev-content/samples/examples/async-task/npm.ts
index dc8311a73..57859d9a3 100644
--- a/packages/lit-dev-content/samples/examples/async-task/npm.ts
+++ b/packages/lit-dev-content/samples/examples/async-task/npm.ts
@@ -5,7 +5,7 @@ export interface NpmPackage {
 
 export const fetchPackageInfo = async (
   pkgName: string,
-  signal: AbortSignal
+  signal: AbortSignal,
 ): Promise<NpmPackage> => {
   // Artificial delay for demo purposes
   await new Promise((r) => setTimeout(r, 1000));
diff --git a/packages/lit-dev-content/samples/examples/context-basics/index.html b/packages/lit-dev-content/samples/examples/context-basics/index.html
index f67442dfe..6463c58f2 100644
--- a/packages/lit-dev-content/samples/examples/context-basics/index.html
+++ b/packages/lit-dev-content/samples/examples/context-basics/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <script type="module" src="./elements.js"></script>
 <style>
   :root {
@@ -11,17 +11,17 @@ <h3>Basic Context Example</h3>
   The <code>&lt;consumer-el></code> receives its data from
   <code>&lt;provider-el></code> without property drilling.
 </p>
-<hr>
+<hr />
 
 <provider-el>
   <consumer-el></consumer-el>
 </provider-el>
-<hr>
+<hr />
 
 <provider-el data="specified from attribute">
   <consumer-el></consumer-el>
 </provider-el>
-<hr>
+<hr />
 
 <p>
   Checkout our
diff --git a/packages/lit-dev-content/samples/examples/directive-async-append/index.html b/packages/lit-dev-content/samples/examples/directive-async-append/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/examples/directive-async-append/index.html
+++ b/packages/lit-dev-content/samples/examples/directive-async-append/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/examples/directive-async-append/my-element.ts b/packages/lit-dev-content/samples/examples/directive-async-append/my-element.ts
index 039c47be5..a7bedb929 100644
--- a/packages/lit-dev-content/samples/examples/directive-async-append/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/directive-async-append/my-element.ts
@@ -2,8 +2,8 @@ import {LitElement, html} from 'lit';
 import {customElement, state} from 'lit/decorators.js';
 import {asyncAppend} from 'lit/directives/async-append.js';
 
-async function *tossCoins(count: number) {
-  for (let i=0; i<count; i++) {
+async function* tossCoins(count: number) {
+  for (let i = 0; i < count; i++) {
     yield Math.random() > 0.5 ? 'Heads' : 'Tails';
     await new Promise((r) => setTimeout(r, 1000));
   }
@@ -11,12 +11,12 @@ async function *tossCoins(count: number) {
 
 @customElement('my-element')
 class MyElement extends LitElement {
-
   @state()
   private tosses = tossCoins(10);
 
   render() {
-    return html`
-      <ul>${asyncAppend(this.tosses, (v) => html`<li>${v}</li>`)}</ul>`;
+    return html` <ul>
+      ${asyncAppend(this.tosses, (v) => html`<li>${v}</li>`)}
+    </ul>`;
   }
 }
diff --git a/packages/lit-dev-content/samples/examples/directive-async-replace/index.html b/packages/lit-dev-content/samples/examples/directive-async-replace/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/examples/directive-async-replace/index.html
+++ b/packages/lit-dev-content/samples/examples/directive-async-replace/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/examples/directive-async-replace/my-element.ts b/packages/lit-dev-content/samples/examples/directive-async-replace/my-element.ts
index 9b8f33cf7..54c30dfc5 100644
--- a/packages/lit-dev-content/samples/examples/directive-async-replace/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/directive-async-replace/my-element.ts
@@ -2,7 +2,7 @@ import {LitElement, html} from 'lit';
 import {customElement, state} from 'lit/decorators.js';
 import {asyncReplace} from 'lit/directives/async-replace.js';
 
-async function *countDown(count: number) {
+async function* countDown(count: number) {
   while (count > 0) {
     yield count--;
     await new Promise((r) => setTimeout(r, 1000));
@@ -11,7 +11,6 @@ async function *countDown(count: number) {
 
 @customElement('my-element')
 class MyElement extends LitElement {
-
   @state()
   private timer = countDown(10);
 
diff --git a/packages/lit-dev-content/samples/examples/directive-cache/index.html b/packages/lit-dev-content/samples/examples/directive-cache/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/examples/directive-cache/index.html
+++ b/packages/lit-dev-content/samples/examples/directive-cache/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/examples/directive-cache/my-element.ts b/packages/lit-dev-content/samples/examples/directive-cache/my-element.ts
index daa6e64ca..3ee0b1748 100644
--- a/packages/lit-dev-content/samples/examples/directive-cache/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/directive-cache/my-element.ts
@@ -2,12 +2,11 @@ import {LitElement, html} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {cache} from 'lit/directives/cache.js';
 
-const view1 = () => html`View 1: <input value="edit me then toggle">`;
-const view2 = () => html`View 2: <input value="edit me then toggle">`;
+const view1 = () => html`View 1: <input value="edit me then toggle" />`;
+const view2 = () => html`View 2: <input value="edit me then toggle" />`;
 
 @customElement('my-element')
 export class MyElement extends LitElement {
-
   @property({type: Number})
   selectedView = 1;
 
@@ -15,12 +14,14 @@ export class MyElement extends LitElement {
     return html`
       <h3>cache directive example</h3>
 
-      <button @click=${this.toggleView}>Toggle View</button><hr>
+      <button @click=${this.toggleView}>Toggle View</button>
+      <hr />
 
-      Un-cached (DOM re-created when template re-rendered):<br>
-      ${this.selectedView == 1 ? view1() : view2()}<hr>
+      Un-cached (DOM re-created when template re-rendered):<br />
+      ${this.selectedView == 1 ? view1() : view2()}
+      <hr />
 
-      Cached (DOM cached and re-used when template re-rendered):<br>
+      Cached (DOM cached and re-used when template re-rendered):<br />
       ${cache(this.selectedView == 1 ? view1() : view2())}
     `;
   }
diff --git a/packages/lit-dev-content/samples/examples/directive-class-map/index.html b/packages/lit-dev-content/samples/examples/directive-class-map/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/examples/directive-class-map/index.html
+++ b/packages/lit-dev-content/samples/examples/directive-class-map/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/examples/directive-class-map/my-element.ts b/packages/lit-dev-content/samples/examples/directive-class-map/my-element.ts
index 0098c9539..1c4644e66 100644
--- a/packages/lit-dev-content/samples/examples/directive-class-map/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/directive-class-map/my-element.ts
@@ -4,7 +4,6 @@ import {classMap} from 'lit/directives/class-map.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
-
   static styles = css`
     .enabled {
       background: lightgreen;
@@ -27,19 +26,27 @@ export class MyElement extends LitElement {
     const classes = {
       enabled: this.enabled,
       hidden: this.hidden,
-      padded: true
+      padded: true,
     };
     return html`
       <h3>classMap directive example</h3>
 
       <div class=${classMap(classes)}>Classy text</div>
-      <hr>
+      <hr />
       <label>
-        <input type="checkbox" .checked=${this.enabled} @change=${this.toggleEnabled}>
+        <input
+          type="checkbox"
+          .checked=${this.enabled}
+          @change=${this.toggleEnabled}
+        />
         Enabled
       </label>
       <label>
-        <input type="checkbox" .checked=${this.hidden} @change=${this.toggleHidden}>
+        <input
+          type="checkbox"
+          .checked=${this.hidden}
+          @change=${this.toggleHidden}
+        />
         Hidden
       </label>
     `;
diff --git a/packages/lit-dev-content/samples/examples/directive-guard/calculate-sha.ts b/packages/lit-dev-content/samples/examples/directive-guard/calculate-sha.ts
index 94a72ff04..b529b2fbd 100644
--- a/packages/lit-dev-content/samples/examples/directive-guard/calculate-sha.ts
+++ b/packages/lit-dev-content/samples/examples/directive-guard/calculate-sha.ts
@@ -5,7 +5,9 @@ async function sha256(message: string) {
   const msgBuffer = new TextEncoder().encode(message);
   const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
   const hashArray = Array.from(new Uint8Array(hashBuffer));
-  const hashHex = hashArray.map(b => ('00' + b.toString(16)).slice(-2)).join('');
+  const hashHex = hashArray
+    .map((b) => ('00' + b.toString(16)).slice(-2))
+    .join('');
   // Add some artificial delay for demo purposes...
   await new Promise<void>((r) => setTimeout(() => r(), 1000));
   return hashHex;
@@ -13,4 +15,4 @@ async function sha256(message: string) {
 
 export const calculateSHA = (value: string) => {
   return until(sha256(value), 'Calculating sha...');
-}
+};
diff --git a/packages/lit-dev-content/samples/examples/directive-guard/index.html b/packages/lit-dev-content/samples/examples/directive-guard/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/examples/directive-guard/index.html
+++ b/packages/lit-dev-content/samples/examples/directive-guard/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/examples/directive-guard/my-element.ts b/packages/lit-dev-content/samples/examples/directive-guard/my-element.ts
index ca0461a70..f3736f206 100644
--- a/packages/lit-dev-content/samples/examples/directive-guard/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/directive-guard/my-element.ts
@@ -5,7 +5,6 @@ import {calculateSHA} from './calculate-sha.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
-
   @state()
   private value: string = 'test string';
 
@@ -19,15 +18,17 @@ export class MyElement extends LitElement {
     return html`
       <h3>guard directive example</h3>
 
-      <input id="value" .value=${this.value}>
-      <button @click=${this.updateValue}>Calculate</button><br>
+      <input id="value" .value=${this.value} />
+      <button @click=${this.updateValue}>Calculate</button><br />
 
       The SHA for '${this.value}' is:
       <div>${guard([this.value], () => calculateSHA(this.value))}</div>
-      <hr>
+      <hr />
 
-      Incrementing the counter does not recalculate SHA:<br>
-      <button @click=${this.incrementCounter}>Increment: ${this.counter}</button>
+      Incrementing the counter does not recalculate SHA:<br />
+      <button @click=${this.incrementCounter}>
+        Increment: ${this.counter}
+      </button>
     `;
   }
 
diff --git a/packages/lit-dev-content/samples/examples/directive-if-defined/index.html b/packages/lit-dev-content/samples/examples/directive-if-defined/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/examples/directive-if-defined/index.html
+++ b/packages/lit-dev-content/samples/examples/directive-if-defined/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/examples/directive-if-defined/my-element.ts b/packages/lit-dev-content/samples/examples/directive-if-defined/my-element.ts
index 87d5e933b..153b711f4 100644
--- a/packages/lit-dev-content/samples/examples/directive-if-defined/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/directive-if-defined/my-element.ts
@@ -3,16 +3,15 @@ import {customElement, state, query} from 'lit/decorators.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 
 const imageInfo = {
-  'beach': { domain: 'picsum.photos', id: 100 },
-  'river': { domain: 'picsum.photos', id: 1015 },
-  'canyon': { domain: 'picsum.photos', id: 1016 },
+  beach: {domain: 'picsum.photos', id: 100},
+  river: {domain: 'picsum.photos', id: 1015},
+  canyon: {domain: 'picsum.photos', id: 1016},
 };
 
 type ImageKey = keyof typeof imageInfo;
 
 @customElement('my-element')
 class MyElement extends LitElement {
-
   @state()
   private imageName: ImageKey = 'beach';
 
@@ -26,14 +25,20 @@ class MyElement extends LitElement {
     return html`
       <h3>ifDefined directive example</h3>
 
-      Type one of 'beach', 'river', or 'canyon':<br>
-      <input id="name" .value=${this.imageName} @input=${this.updateImage}><hr>
+      Type one of 'beach', 'river', or 'canyon':<br />
+      <input id="name" .value=${this.imageName} @input=${this.updateImage} />
+      <hr />
 
-      Using ifDefined (src removed when undefined):<br>
-      <img src="https://${ifDefined(info?.domain)}/id/${ifDefined(info?.id)}/200/200"><hr>
+      Using ifDefined (src removed when undefined):<br />
+      <img
+        src="https://${ifDefined(info?.domain)}/id/${ifDefined(
+          info?.id,
+        )}/200/200"
+      />
+      <hr />
 
-      Without ifDefined (will 404 when undefined):<br>
-      <img src="https://${info?.domain}/id/${info?.id}/200/200">
+      Without ifDefined (will 404 when undefined):<br />
+      <img src="https://${info?.domain}/id/${info?.id}/200/200" />
     `;
   }
 
diff --git a/packages/lit-dev-content/samples/examples/directive-live/index.html b/packages/lit-dev-content/samples/examples/directive-live/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/examples/directive-live/index.html
+++ b/packages/lit-dev-content/samples/examples/directive-live/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/examples/directive-live/my-element.ts b/packages/lit-dev-content/samples/examples/directive-live/my-element.ts
index 165ba2f2b..0b8e7595d 100644
--- a/packages/lit-dev-content/samples/examples/directive-live/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/directive-live/my-element.ts
@@ -4,7 +4,6 @@ import {live} from 'lit/directives/live.js';
 
 @customElement('my-element')
 class MyElement extends LitElement {
-
   @state()
   private data = {value: 'test'};
 
@@ -12,19 +11,23 @@ class MyElement extends LitElement {
   private input!: HTMLInputElement;
 
   render() {
-
     return html`
       <h3>live directive example</h3>
 
-      Set this value to the inputs below.<br>
-      <input id="value" .value=${this.data.value}>
-      <button @click=${this.commitValue}>Commit</button><hr>
+      Set this value to the inputs below.<br />
+      <input id="value" .value=${this.data.value} />
+      <button @click=${this.commitValue}>Commit</button>
+      <hr />
 
-      With live: will update if out of sync with last rendered value<br>
-      <input .value=${live(this.data.value)} placeholder="type here, click commit"><hr>
+      With live: will update if out of sync with last rendered value<br />
+      <input
+        .value=${live(this.data.value)}
+        placeholder="type here, click commit"
+      />
+      <hr />
 
-      Without live: will not update if out of sync with last rendered value<br>
-      <input .value=${this.data.value} placeholder="type here, click commit">
+      Without live: will not update if out of sync with last rendered value<br />
+      <input .value=${this.data.value} placeholder="type here, click commit" />
     `;
   }
 
diff --git a/packages/lit-dev-content/samples/examples/directive-ref/index.html b/packages/lit-dev-content/samples/examples/directive-ref/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/examples/directive-ref/index.html
+++ b/packages/lit-dev-content/samples/examples/directive-ref/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/examples/directive-ref/my-element.ts b/packages/lit-dev-content/samples/examples/directive-ref/my-element.ts
index f4c9172e3..0ac1b866b 100644
--- a/packages/lit-dev-content/samples/examples/directive-ref/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/directive-ref/my-element.ts
@@ -2,11 +2,13 @@ import {LitElement, html, css} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {ref, createRef} from 'lit/directives/ref.js';
 
-const loremIpsum = Array(100).fill(0).map(() => 'Lorem ipsum dolor sit amet.').join(' ');
+const loremIpsum = Array(100)
+  .fill(0)
+  .map(() => 'Lorem ipsum dolor sit amet.')
+  .join(' ');
 
 @customElement('my-element')
 export class MyElement extends LitElement {
-
   static styles = css`
     .scroll {
       height: 100px;
@@ -20,10 +22,11 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-      Passing ref directive a Ref object that will hold the element in .value:<br>
-      <input ${ref(this.inputRef)}>
+      Passing ref directive a Ref object that will hold the element in
+      .value:<br />
+      <input ${ref(this.inputRef)} />
 
-      <hr>
+      <hr />
 
       Passing ref directive a change callback
       <div class="scroll">
diff --git a/packages/lit-dev-content/samples/examples/directive-repeat/index.html b/packages/lit-dev-content/samples/examples/directive-repeat/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/examples/directive-repeat/index.html
+++ b/packages/lit-dev-content/samples/examples/directive-repeat/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/examples/directive-repeat/my-element.ts b/packages/lit-dev-content/samples/examples/directive-repeat/my-element.ts
index fe70722d3..dc7761c5f 100644
--- a/packages/lit-dev-content/samples/examples/directive-repeat/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/directive-repeat/my-element.ts
@@ -4,15 +4,14 @@ import {repeat} from 'lit/directives/repeat.js';
 
 @customElement('my-element')
 class MyElement extends LitElement {
-
   @state()
   private items = [
-    {id: 0, name: "Justin"},
-    {id: 1, name: "Steve"},
-    {id: 2, name: "Kevin"},
-    {id: 3, name: "Russell"},
-    {id: 4, name: "Liz"},
-    {id: 5, name: "Peter"},
+    {id: 0, name: 'Justin'},
+    {id: 1, name: 'Steve'},
+    {id: 2, name: 'Kevin'},
+    {id: 3, name: 'Russell'},
+    {id: 4, name: 'Liz'},
+    {id: 5, name: 'Peter'},
   ];
 
   render() {
@@ -20,24 +19,39 @@ class MyElement extends LitElement {
       <h3>repeat directive example</h3>
 
       <button @click=${() => this.sort(1)}>Sort ascending</button>
-      <button @click=${() => this.sort(-1)}>Sort descending</button><hr>
+      <button @click=${() => this.sort(-1)}>Sort descending</button>
+      <hr />
 
       With keying (DOM including checkbox state moves with items):
       <ul>
-        ${repeat(this.items, (item) => item.id, (item, index) => html`
-          <li>${index}: <label><input type="checkbox">${item.name}</label></li>`)}
-      </ul><hr>
+        ${repeat(
+          this.items,
+          (item) => item.id,
+          (item, index) =>
+            html` <li>
+              ${index}: <label><input type="checkbox" />${item.name}</label>
+            </li>`,
+        )}
+      </ul>
+      <hr />
 
-      Without keying (items are re-used in place, checkbox state does not change):
+      Without keying (items are re-used in place, checkbox state does not
+      change):
       <ul>
-        ${repeat(this.items, (item, index) => html`
-          <li>${index}: <label><input type="checkbox">${item.name}</label></li>`)}
+        ${repeat(
+          this.items,
+          (item, index) =>
+            html` <li>
+              ${index}: <label><input type="checkbox" />${item.name}</label>
+            </li>`,
+        )}
       </ul>
-
     `;
   }
 
   private sort(dir: number) {
-    this.items = [...this.items.sort((a, b) => a.name.localeCompare(b.name) * dir)];
+    this.items = [
+      ...this.items.sort((a, b) => a.name.localeCompare(b.name) * dir),
+    ];
   }
 }
diff --git a/packages/lit-dev-content/samples/examples/directive-style-map/index.html b/packages/lit-dev-content/samples/examples/directive-style-map/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/examples/directive-style-map/index.html
+++ b/packages/lit-dev-content/samples/examples/directive-style-map/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/examples/directive-style-map/my-element.ts b/packages/lit-dev-content/samples/examples/directive-style-map/my-element.ts
index 15d04e340..a0d5690da 100644
--- a/packages/lit-dev-content/samples/examples/directive-style-map/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/directive-style-map/my-element.ts
@@ -4,7 +4,6 @@ import {styleMap} from 'lit/directives/style-map.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
-
   @property({type: Boolean})
   enabled = true;
 
@@ -15,19 +14,27 @@ export class MyElement extends LitElement {
     const styles = {
       backgroundColor: this.enabled ? 'lightgreen' : 'transparent',
       opacity: this.hidden ? '0.2' : '1',
-      padding: '10px'
+      padding: '10px',
     };
     return html`
       <h3>styleMap directive example</h3>
 
       <p style=${styleMap(styles)}>Hello style!</p>
-      <hr>
+      <hr />
       <label>
-        <input type="checkbox" .checked=${this.enabled} @change=${this.toggleEnabled}>
+        <input
+          type="checkbox"
+          .checked=${this.enabled}
+          @change=${this.toggleEnabled}
+        />
         Enabled
       </label>
       <label>
-        <input type="checkbox" .checked=${this.hidden} @change=${this.toggleHidden}>
+        <input
+          type="checkbox"
+          .checked=${this.hidden}
+          @change=${this.toggleHidden}
+        />
         Hidden
       </label>
     `;
diff --git a/packages/lit-dev-content/samples/examples/directive-template-content/index.html b/packages/lit-dev-content/samples/examples/directive-template-content/index.html
index 557c74d07..c487c72a7 100644
--- a/packages/lit-dev-content/samples/examples/directive-template-content/index.html
+++ b/packages/lit-dev-content/samples/examples/directive-template-content/index.html
@@ -1,12 +1,14 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
 
 <template id="myContent">
   <h3>This is content stamped from an HTML &lt;template&gt;!</h3>
-  <img src="https://picsum.photos/id/429/200">
+  <img src="https://picsum.photos/id/429/200" />
 </template>
 
 <my-element></my-element>
diff --git a/packages/lit-dev-content/samples/examples/directive-template-content/my-element.ts b/packages/lit-dev-content/samples/examples/directive-template-content/my-element.ts
index 28a8f97d9..e8aaa7dff 100644
--- a/packages/lit-dev-content/samples/examples/directive-template-content/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/directive-template-content/my-element.ts
@@ -3,13 +3,14 @@ import {customElement} from 'lit/decorators.js';
 import {templateContent} from 'lit/directives/template-content.js';
 
 // <template> is located in index.html file
-const templateEl = document.querySelector('template#myContent') as HTMLTemplateElement;
+const templateEl = document.querySelector(
+  'template#myContent',
+) as HTMLTemplateElement;
 
 @customElement('my-element')
 class MyElement extends LitElement {
-
   render() {
-    return  html`
+    return html`
       <h3>templateContent directive example</h3>
       Here's some content from a template element:
       ${templateContent(templateEl)}
diff --git a/packages/lit-dev-content/samples/examples/directive-unsafe-html/index.html b/packages/lit-dev-content/samples/examples/directive-unsafe-html/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/examples/directive-unsafe-html/index.html
+++ b/packages/lit-dev-content/samples/examples/directive-unsafe-html/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/examples/directive-unsafe-html/my-element.ts b/packages/lit-dev-content/samples/examples/directive-unsafe-html/my-element.ts
index 40a575a9e..34f880dc2 100644
--- a/packages/lit-dev-content/samples/examples/directive-unsafe-html/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/directive-unsafe-html/my-element.ts
@@ -6,12 +6,10 @@ const markup = '<h3>Some HTML to render.</h3>';
 
 @customElement('my-element')
 class MyElement extends LitElement {
-
   render() {
     return html`
       <h3>unsafeHTML directive example</h3>
-      Look out, potentially unsafe HTML ahead:
-      ${unsafeHTML(markup)}
+      Look out, potentially unsafe HTML ahead: ${unsafeHTML(markup)}
     `;
   }
 }
diff --git a/packages/lit-dev-content/samples/examples/directive-unsafe-svg/index.html b/packages/lit-dev-content/samples/examples/directive-unsafe-svg/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/examples/directive-unsafe-svg/index.html
+++ b/packages/lit-dev-content/samples/examples/directive-unsafe-svg/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/examples/directive-unsafe-svg/my-element.ts b/packages/lit-dev-content/samples/examples/directive-unsafe-svg/my-element.ts
index 4ed7f488b..58a4b6061 100644
--- a/packages/lit-dev-content/samples/examples/directive-unsafe-svg/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/directive-unsafe-svg/my-element.ts
@@ -6,14 +6,19 @@ const svg = '<circle cx="50" cy="50" r="40" fill="red" />';
 
 @customElement('my-element')
 class MyElement extends LitElement {
-
   render() {
     return html`
       <h3>unsafeSVG directive example</h3>
       Look out, potentially unsafe SVG ahead:
-      <svg width="40" height="40" viewBox="0 0 100 100"
-        xmlns="http://www.w3.org/2000/svg" version="1.1">
+      <svg
+        width="40"
+        height="40"
+        viewBox="0 0 100 100"
+        xmlns="http://www.w3.org/2000/svg"
+        version="1.1"
+      >
         ${unsafeSVG(svg)}
-      </svg> `;
+      </svg>
+    `;
   }
 }
diff --git a/packages/lit-dev-content/samples/examples/directive-until/index.html b/packages/lit-dev-content/samples/examples/directive-until/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/examples/directive-until/index.html
+++ b/packages/lit-dev-content/samples/examples/directive-until/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/examples/directive-until/my-element.ts b/packages/lit-dev-content/samples/examples/directive-until/my-element.ts
index c50451122..2807b3eeb 100644
--- a/packages/lit-dev-content/samples/examples/directive-until/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/directive-until/my-element.ts
@@ -5,11 +5,10 @@ import {until} from 'lit/directives/until.js';
 const fetchData = async () => {
   await new Promise<void>((r) => setTimeout(() => r(), 2000));
   return 'Lorem Ipsum';
-}
+};
 
 @customElement('my-element')
 class MyElement extends LitElement {
-
   @state()
   private content: Promise<string> = fetchData();
 
diff --git a/packages/lit-dev-content/samples/examples/element-composition/index.html b/packages/lit-dev-content/samples/examples/element-composition/index.html
index 32dfee477..a7a3601a3 100644
--- a/packages/lit-dev-content/samples/examples/element-composition/index.html
+++ b/packages/lit-dev-content/samples/examples/element-composition/index.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="./my-page.js" type="module"></script>
-  <title>lit-element code sample</title>
-</head>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="./my-page.js" type="module"></script>
+    <title>lit-element code sample</title>
+  </head>
   <body>
     <my-page></my-page>
   </body>
diff --git a/packages/lit-dev-content/samples/examples/element-composition/my-article.ts b/packages/lit-dev-content/samples/examples/element-composition/my-article.ts
index 869aa1836..8020afc77 100644
--- a/packages/lit-dev-content/samples/examples/element-composition/my-article.ts
+++ b/packages/lit-dev-content/samples/examples/element-composition/my-article.ts
@@ -3,19 +3,18 @@ import {customElement} from 'lit/decorators.js';
 
 @customElement('my-article')
 class MyArticle extends LitElement {
-  static styles =
-    css`
-      article {
-        padding: 20px;
-        font-family: 'Open Sans', sans-serif;
-      }
-    `
+  static styles = css`
+    article {
+      padding: 20px;
+      font-family: 'Open Sans', sans-serif;
+    }
+  `;
   render() {
     return html`
       <article>
         <p>
-          Manage complexity by building large, complex components
-          out of smaller, simpler components that do one thing well.
+          Manage complexity by building large, complex components out of
+          smaller, simpler components that do one thing well.
         </p>
       </article>
     `;
diff --git a/packages/lit-dev-content/samples/examples/element-composition/my-footer.ts b/packages/lit-dev-content/samples/examples/element-composition/my-footer.ts
index 1fc3b6401..9fad6ec2a 100644
--- a/packages/lit-dev-content/samples/examples/element-composition/my-footer.ts
+++ b/packages/lit-dev-content/samples/examples/element-composition/my-footer.ts
@@ -3,23 +3,20 @@ import {customElement} from 'lit/decorators.js';
 
 @customElement('my-footer')
 class MyFooter extends LitElement {
-  static styles =
-    css`
-      :host {
-      	position: absolute;
-      	bottom: 0;
-      	left: 0;
-      	right: 0;
-      }
-      footer {
-      	display: flex;
-      	justify-content: center;
-        font-family: Manrope, sans-serif;
-      }
-    `;
+  static styles = css`
+    :host {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    footer {
+      display: flex;
+      justify-content: center;
+      font-family: Manrope, sans-serif;
+    }
+  `;
   render() {
-    return html`
-      <footer><p>THE END</p></footer>
-    `;
+    return html` <footer><p>THE END</p></footer> `;
   }
 }
diff --git a/packages/lit-dev-content/samples/examples/element-composition/my-header.ts b/packages/lit-dev-content/samples/examples/element-composition/my-header.ts
index 6b5736024..d9b4a2ecf 100644
--- a/packages/lit-dev-content/samples/examples/element-composition/my-header.ts
+++ b/packages/lit-dev-content/samples/examples/element-composition/my-header.ts
@@ -3,16 +3,13 @@ import {customElement} from 'lit/decorators.js';
 
 @customElement('my-header')
 class MyHeader extends LitElement {
-  static styles =
-    css`
-      h1 {
-        font-family: Manrope, sans-serif;
-        text-align: center;
-      }
-    `;
+  static styles = css`
+    h1 {
+      font-family: Manrope, sans-serif;
+      text-align: center;
+    }
+  `;
   render() {
-    return html`
-      <header><h1>Element composition</h1></header>
-    `;
+    return html` <header><h1>Element composition</h1></header> `;
   }
 }
diff --git a/packages/lit-dev-content/samples/examples/expressions/my-element.ts b/packages/lit-dev-content/samples/examples/expressions/my-element.ts
index 9831ef940..779fa997d 100644
--- a/packages/lit-dev-content/samples/examples/expressions/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/expressions/my-element.ts
@@ -1,5 +1,5 @@
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import {LitElement, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
 @customElement('my-element')
 class MyElement extends LitElement {
diff --git a/packages/lit-dev-content/samples/examples/full-component/index.html b/packages/lit-dev-content/samples/examples/full-component/index.html
index 45a5f2c8f..3d8e53ee1 100644
--- a/packages/lit-dev-content/samples/examples/full-component/index.html
+++ b/packages/lit-dev-content/samples/examples/full-component/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./my-element.js"></script>
   <style>
diff --git a/packages/lit-dev-content/samples/examples/full-component/my-element.ts b/packages/lit-dev-content/samples/examples/full-component/my-element.ts
index ee6629f0b..be1bc0642 100644
--- a/packages/lit-dev-content/samples/examples/full-component/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/full-component/my-element.ts
@@ -1,7 +1,7 @@
 import {LitElement, html, css} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 
-@customElement("my-element")
+@customElement('my-element')
 export class MyElement extends LitElement {
   // Styles are scoped to this element: they won't conflict with styles
   // on the main page or in other components. Styling API can be exposed
@@ -17,11 +17,10 @@ export class MyElement extends LitElement {
     }
   `;
 
-
   // Define reactive properties--updating a reactive property causes
   // the component to update.
-  @property() greeting = "Hello";
-  @property() planet = "World";
+  @property() greeting = 'Hello';
+  @property() planet = 'World';
 
   // The render() method is called any time reactive properties change.
   // Return HTML in a string template literal tagged with the `html`
@@ -40,6 +39,6 @@ export class MyElement extends LitElement {
   // Event handlers can update the state of @properties on the element
   // instance, causing it to re-render
   togglePlanet() {
-    this.planet = this.planet === "World" ? "Mars" : "World";
+    this.planet = this.planet === 'World' ? 'Mars' : 'World';
   }
 }
diff --git a/packages/lit-dev-content/samples/examples/get-update-complete/index.js b/packages/lit-dev-content/samples/examples/get-update-complete/index.js
index e5dfe24d2..d9fd49197 100644
--- a/packages/lit-dev-content/samples/examples/get-update-complete/index.js
+++ b/packages/lit-dev-content/samples/examples/get-update-complete/index.js
@@ -1,23 +1,21 @@
-import { LitElement, html, css } from 'lit-element';
+import {LitElement, html, css} from 'lit-element';
 
 class OuterElement extends LitElement {
   render() {
-    return html`
-      <inner-element></inner-element>
-    `;
+    return html` <inner-element></inner-element> `;
   }
 
   async firstUpdated() {
     const innerEl = this.shadowRoot.querySelector('inner-element');
-    console.log('awaiting inner updateComplete...')
+    console.log('awaiting inner updateComplete...');
 
     await innerEl.updateComplete;
-    console.log('inner updateComplete awaited!')
+    console.log('inner updateComplete awaited!');
   }
 
   _getUpdateComplete() {
     const innerEl = this.shadowRoot.querySelector('inner-element');
-    return Promise.all[this._updatePromise, innerEl.updateComplete];
+    return Promise.all[(this._updatePromise, innerEl.updateComplete)];
   }
 }
 
@@ -35,5 +33,5 @@ const outerEl = document.body.querySelector('outer-element');
 (async () => {
   console.log('awaiting outer updateComplete...');
   await outerEl.updateComplete;
-  console.log('outer updateComplete awaited!')
-})()
+  console.log('outer updateComplete awaited!');
+})();
diff --git a/packages/lit-dev-content/samples/examples/goo/goo-element.js b/packages/lit-dev-content/samples/examples/goo/goo-element.js
index 7a63b187a..d47b99402 100644
--- a/packages/lit-dev-content/samples/examples/goo/goo-element.js
+++ b/packages/lit-dev-content/samples/examples/goo/goo-element.js
@@ -1,24 +1,24 @@
-import { LitElement, html, css } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
+import {LitElement, html, css} from 'lit';
+import {styleMap} from 'lit/directives/style-map.js';
 
-import { styles } from './styles.css.js';
-import { SpringController2D } from './spring-controller.js';
-import { MouseController } from './mouse-controller.js';
+import {styles} from './styles.css.js';
+import {SpringController2D} from './spring-controller.js';
+import {MouseController} from './mouse-controller.js';
 
 const slow = {
   stiffness: 400,
   damping: 500,
-  mass: 10
+  mass: 10,
 };
 
 const fast = {
   stiffness: 1200,
-  damping: 400
+  damping: 400,
 };
 
 const positionStyle = ([x, y]) =>
   styleMap({
-    transform: `translate3d(${x}px,${y}px,0) translate3d(-50%,-50%,0)`
+    transform: `translate3d(${x}px,${y}px,0) translate3d(-50%,-50%,0)`,
   });
 
 /**
@@ -83,4 +83,4 @@ class GooElement extends LitElement {
     `;
   }
 }
-customElements.define("goo-element", GooElement);
+customElements.define('goo-element', GooElement);
diff --git a/packages/lit-dev-content/samples/examples/goo/index.html b/packages/lit-dev-content/samples/examples/goo/index.html
index 94a3555df..7ee920363 100644
--- a/packages/lit-dev-content/samples/examples/goo/index.html
+++ b/packages/lit-dev-content/samples/examples/goo/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <head>
   <script type="module" src="./goo-element.js"></script>
-  <link rel="stylesheet" href="./styles.css">
+  <link rel="stylesheet" href="./styles.css" />
 </head>
 <body>
   <goo-element></goo-element>
diff --git a/packages/lit-dev-content/samples/examples/goo/styles.css b/packages/lit-dev-content/samples/examples/goo/styles.css
index 7f5f78e35..4a3526a36 100644
--- a/packages/lit-dev-content/samples/examples/goo/styles.css
+++ b/packages/lit-dev-content/samples/examples/goo/styles.css
@@ -9,8 +9,19 @@ body,
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica,
-    ubuntu, roboto, noto, segoe ui, arial, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    avenir next,
+    avenir,
+    helvetica neue,
+    helvetica,
+    ubuntu,
+    roboto,
+    noto,
+    segoe ui,
+    arial,
+    sans-serif;
   background: transparent;
   user-select: none;
   cursor: default;
diff --git a/packages/lit-dev-content/samples/examples/goo/styles.css.js b/packages/lit-dev-content/samples/examples/goo/styles.css.js
index cc5c204e6..755a5ddee 100644
--- a/packages/lit-dev-content/samples/examples/goo/styles.css.js
+++ b/packages/lit-dev-content/samples/examples/goo/styles.css.js
@@ -1,78 +1,78 @@
 import {css} from 'lit';
 
 export const styles = css`
-    :host {
-      font-family: Arial, 'sans serif';
-      display: block;
-    }
-    .hooks-main {
-      width: 100%;
-      height: 100%;
-      background: lightblue;
-      overflow: hidden;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+  :host {
+    font-family: Arial, 'sans serif';
+    display: block;
+  }
+  .hooks-main {
+    width: 100%;
+    height: 100%;
+    background: lightblue;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-    .b1,
-    .b2,
-    .b3 {
-      position: absolute;
-      will-change: transform;
-      border-radius: 50%;
-      background: lightcoral;
-      box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-      opacity: 0.6;
-    }
+  .b1,
+  .b2,
+  .b3 {
+    position: absolute;
+    will-change: transform;
+    border-radius: 50%;
+    background: lightcoral;
+    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
+    opacity: 0.6;
+  }
 
-    .b1 {
-      width: 170px;
-      height: 170px;
-    }
+  .b1 {
+    width: 170px;
+    height: 170px;
+  }
 
-    .b2 {
-      width: 350px;
-      height: 350px;
-    }
+  .b2 {
+    width: 350px;
+    height: 350px;
+  }
 
-    .b3 {
-      width: 200px;
-      height: 200px;
-    }
+  .b3 {
+    width: 200px;
+    height: 200px;
+  }
 
-    .b1::after,
-    .b2::after,
-    .b3::after {
-      content: '';
-      position: absolute;
-      top: 50px;
-      left: 50px;
-      width: 50px;
-      height: 50px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.8);
-    }
+  .b1::after,
+  .b2::after,
+  .b3::after {
+    content: '';
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.8);
+  }
 
-    .b2::after {
-      top: 70px;
-      left: 70px;
-      width: 70px;
-      height: 70px;
-    }
+  .b2::after {
+    top: 70px;
+    left: 70px;
+    width: 70px;
+    height: 70px;
+  }
 
-    .b3::after {
-      top: 50px;
-      left: 50px;
-      width: 50px;
-      height: 50px;
-    }
+  .b3::after {
+    top: 50px;
+    left: 50px;
+    width: 50px;
+    height: 50px;
+  }
 
-    .hooks-filter {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      filter: url('#goo');
-      overflow: hidden;
-    }
-  `;
+  .hooks-filter {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    filter: url('#goo');
+    overflow: hidden;
+  }
+`;
diff --git a/packages/lit-dev-content/samples/examples/hello-world/index.html b/packages/lit-dev-content/samples/examples/hello-world/index.html
index 17c6af374..cc3a9e4ae 100644
--- a/packages/lit-dev-content/samples/examples/hello-world/index.html
+++ b/packages/lit-dev-content/samples/examples/hello-world/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./simple-greeting.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/examples/hello-world/simple-greeting.js b/packages/lit-dev-content/samples/examples/hello-world/simple-greeting.js
index a4141443a..59c1d5549 100644
--- a/packages/lit-dev-content/samples/examples/hello-world/simple-greeting.js
+++ b/packages/lit-dev-content/samples/examples/hello-world/simple-greeting.js
@@ -1,7 +1,11 @@
 import {html, css, LitElement} from 'lit';
 
 export class SimpleGreeting extends LitElement {
-  static styles = css`p { color: blue }`;
+  static styles = css`
+    p {
+      color: blue;
+    }
+  `;
 
   static properties = {
     name: {type: String},
diff --git a/packages/lit-dev-content/samples/examples/hello-world/simple-greeting.ts b/packages/lit-dev-content/samples/examples/hello-world/simple-greeting.ts
index 69a43a650..d543a7e70 100644
--- a/packages/lit-dev-content/samples/examples/hello-world/simple-greeting.ts
+++ b/packages/lit-dev-content/samples/examples/hello-world/simple-greeting.ts
@@ -3,7 +3,11 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('simple-greeting')
 export class SimpleGreeting extends LitElement {
-  static styles = css`p { color: blue }`;
+  static styles = css`
+    p {
+      color: blue;
+    }
+  `;
 
   @property()
   name = 'Somebody';
diff --git a/packages/lit-dev-content/samples/examples/list-separators/index.js b/packages/lit-dev-content/samples/examples/list-separators/index.js
index dbda0892b..0467c2cf0 100644
--- a/packages/lit-dev-content/samples/examples/list-separators/index.js
+++ b/packages/lit-dev-content/samples/examples/list-separators/index.js
@@ -2,14 +2,12 @@ import {html, render, nothing} from 'lit-html';
 
 const items = ['A', 'B', 'C', 'D'];
 
-const myTemplate = items =>
+const myTemplate = (items) =>
   items.map((item, i) => [
     // This is the value we want to render
-    html`
-      <span>${item}</span>
-    `,
+    html` <span>${item}</span> `,
     // This is the separator, or nothing for the last item
-    i < items.length - 1 ? ', ' : nothing
+    i < items.length - 1 ? ', ' : nothing,
   ]);
 
 render(myTemplate(items), document.body);
diff --git a/packages/lit-dev-content/samples/examples/motion-carousel/index.html b/packages/lit-dev-content/samples/examples/motion-carousel/index.html
index a9f69f589..7111c4aaa 100644
--- a/packages/lit-dev-content/samples/examples/motion-carousel/index.html
+++ b/packages/lit-dev-content/samples/examples/motion-carousel/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./motion-carousel.js"></script>
   <style>
diff --git a/packages/lit-dev-content/samples/examples/motion-grid/index.html b/packages/lit-dev-content/samples/examples/motion-grid/index.html
index 87c3c0e80..8cccdb60a 100644
--- a/packages/lit-dev-content/samples/examples/motion-grid/index.html
+++ b/packages/lit-dev-content/samples/examples/motion-grid/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./motion-grid.js"></script>
   <style>
diff --git a/packages/lit-dev-content/samples/examples/motion-grid/motion-grid.ts b/packages/lit-dev-content/samples/examples/motion-grid/motion-grid.ts
index 035683795..523ee1c6d 100644
--- a/packages/lit-dev-content/samples/examples/motion-grid/motion-grid.ts
+++ b/packages/lit-dev-content/samples/examples/motion-grid/motion-grid.ts
@@ -17,16 +17,17 @@ export class MotionGrid extends LitElement {
         class="container layout${this.layout}"
       >
         ${a.map(
-          (v, i) => html`<div
-            class="item${i}"
-            ${animate({
-              keyframeOptions: {
-                delay: (i * d) / (a.length * 2),
-                duration: d,
-                fill: 'both',
-              },
-            })}
-          ></div>`
+          (v, i) =>
+            html`<div
+              class="item${i}"
+              ${animate({
+                keyframeOptions: {
+                  delay: (i * d) / (a.length * 2),
+                  duration: d,
+                  fill: 'both',
+                },
+              })}
+            ></div>`,
         )}
       </section>
       <span class="message">click</span>`;
diff --git a/packages/lit-dev-content/samples/examples/motion-hero/index.html b/packages/lit-dev-content/samples/examples/motion-hero/index.html
index 86e1a4d98..a0e697d07 100644
--- a/packages/lit-dev-content/samples/examples/motion-hero/index.html
+++ b/packages/lit-dev-content/samples/examples/motion-hero/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./motion-hero.js"></script>
   <link
diff --git a/packages/lit-dev-content/samples/examples/motion-hero/motion-hero.ts b/packages/lit-dev-content/samples/examples/motion-hero/motion-hero.ts
index 232358f59..86f8fd55a 100644
--- a/packages/lit-dev-content/samples/examples/motion-hero/motion-hero.ts
+++ b/packages/lit-dev-content/samples/examples/motion-hero/motion-hero.ts
@@ -81,7 +81,7 @@ export class MotionHero extends LitElement {
                   <div>${i.summary}</div>
                 </div>
               </div>
-            </li>`
+            </li>`,
         )}
       </ul>
       ${this.detail
diff --git a/packages/lit-dev-content/samples/examples/motion-hero/support.ts b/packages/lit-dev-content/samples/examples/motion-hero/support.ts
index e26b8fdb2..3fbf8f110 100644
--- a/packages/lit-dev-content/samples/examples/motion-hero/support.ts
+++ b/packages/lit-dev-content/samples/examples/motion-hero/support.ts
@@ -62,4 +62,4 @@ export const data = [
   {id: 8, value: 'Cows', summary: 'Cows make good hamburgers.'},
 ];
 
-export type DataItem = typeof data[number];
+export type DataItem = (typeof data)[number];
diff --git a/packages/lit-dev-content/samples/examples/motion-in-out/index.html b/packages/lit-dev-content/samples/examples/motion-in-out/index.html
index 5ee9f5837..cb3e1fcc8 100644
--- a/packages/lit-dev-content/samples/examples/motion-in-out/index.html
+++ b/packages/lit-dev-content/samples/examples/motion-in-out/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./motion-lit.js"></script>
   <style>
diff --git a/packages/lit-dev-content/samples/examples/motion-in-out/motion-lit.ts b/packages/lit-dev-content/samples/examples/motion-in-out/motion-lit.ts
index 89f3b7ab0..3fbaad408 100644
--- a/packages/lit-dev-content/samples/examples/motion-in-out/motion-lit.ts
+++ b/packages/lit-dev-content/samples/examples/motion-in-out/motion-lit.ts
@@ -41,7 +41,7 @@ export class MotionLit extends LitElement {
               out: flyBelow,
             })}
             >${letter}</span
-          >`
+          >`,
       )}
     `;
   }
diff --git a/packages/lit-dev-content/samples/examples/motion-list/index.html b/packages/lit-dev-content/samples/examples/motion-list/index.html
index 1bf3e78c9..e6415a6c0 100644
--- a/packages/lit-dev-content/samples/examples/motion-list/index.html
+++ b/packages/lit-dev-content/samples/examples/motion-list/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./motion-list.js"></script>
   <style>
diff --git a/packages/lit-dev-content/samples/examples/motion-list/motion-list.ts b/packages/lit-dev-content/samples/examples/motion-list/motion-list.ts
index 544ec168a..8a048e9b5 100644
--- a/packages/lit-dev-content/samples/examples/motion-list/motion-list.ts
+++ b/packages/lit-dev-content/samples/examples/motion-list/motion-list.ts
@@ -48,7 +48,7 @@ export class MotionList extends LitElement {
               })}
             >
               ${item.value}
-            </li>`
+            </li>`,
         )}
       </ul>
     `;
diff --git a/packages/lit-dev-content/samples/examples/motion-simple/index.html b/packages/lit-dev-content/samples/examples/motion-simple/index.html
index 3c07ebe96..d123fc47b 100644
--- a/packages/lit-dev-content/samples/examples/motion-simple/index.html
+++ b/packages/lit-dev-content/samples/examples/motion-simple/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./motion-slide.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/examples/motion-todos/index.html b/packages/lit-dev-content/samples/examples/motion-todos/index.html
index 411406a16..0ea1e6432 100644
--- a/packages/lit-dev-content/samples/examples/motion-todos/index.html
+++ b/packages/lit-dev-content/samples/examples/motion-todos/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./motion-todos.js"></script>
   <link
diff --git a/packages/lit-dev-content/samples/examples/motion-todos/motion-todos.ts b/packages/lit-dev-content/samples/examples/motion-todos/motion-todos.ts
index ebbaff5ab..f121dd29a 100644
--- a/packages/lit-dev-content/samples/examples/motion-todos/motion-todos.ts
+++ b/packages/lit-dev-content/samples/examples/motion-todos/motion-todos.ts
@@ -21,7 +21,7 @@ const data = [
   {id: 7, value: 'BBQ!', completed: false},
 ];
 
-type DataItem = typeof data[number];
+type DataItem = (typeof data)[number];
 
 @customElement('motion-todos')
 export class MotionTodos extends LitElement {
@@ -70,41 +70,41 @@ export class MotionTodos extends LitElement {
       duration: 500,
       fill: 'both' as FillMode,
     };
-    const list = (completed = false) => html`<div
-      class="list ${classMap({completed})}"
-    >
-      <h3>${completed ? `Completed` : `Todos`}</h3>
-      <ul tabindex="-1">
-        ${repeat(
-          this.data.filter((item) =>
-            completed ? item.completed : !item.completed
-          ),
-          (item) => item.id,
-          (item) => html`<li
-            ${animate({
-              keyframeOptions,
-              in: flyBelow,
-              out: fadeOut,
-              stabilizeOut: true,
-              id: `${item.id}:${completed ? 'right' : 'left'}`,
-              inId: `${item.id}:${completed ? 'left' : 'right'}`,
-              skipInitial: true,
-            })}
-          >
-            <mwc-formfield label="${item.id}. ${item.value}"
-              ><mwc-checkbox
-                type="checkbox"
-                ?checked=${completed}
-                @change=${(e: Event) =>
-                  this.updateItem(item, (e.target! as Checkbox).checked)}
-              ></mwc-checkbox></mwc-formfield
-            ><button @click=${() => this.removeItem(item)}>
-              remove_circle_outline
-            </button>
-          </li>`
-        )}
-      </ul>
-    </div>`;
+    const list = (completed = false) =>
+      html`<div class="list ${classMap({completed})}">
+        <h3>${completed ? `Completed` : `Todos`}</h3>
+        <ul tabindex="-1">
+          ${repeat(
+            this.data.filter((item) =>
+              completed ? item.completed : !item.completed,
+            ),
+            (item) => item.id,
+            (item) =>
+              html`<li
+                ${animate({
+                  keyframeOptions,
+                  in: flyBelow,
+                  out: fadeOut,
+                  stabilizeOut: true,
+                  id: `${item.id}:${completed ? 'right' : 'left'}`,
+                  inId: `${item.id}:${completed ? 'left' : 'right'}`,
+                  skipInitial: true,
+                })}
+              >
+                <mwc-formfield label="${item.id}. ${item.value}"
+                  ><mwc-checkbox
+                    type="checkbox"
+                    ?checked=${completed}
+                    @change=${(e: Event) =>
+                      this.updateItem(item, (e.target! as Checkbox).checked)}
+                  ></mwc-checkbox></mwc-formfield
+                ><button @click=${() => this.removeItem(item)}>
+                  remove_circle_outline
+                </button>
+              </li>`,
+          )}
+        </ul>
+      </div>`;
     return html`
       <mwc-textfield outlined label="Enter a todo..."></mwc-textfield>
       <div class="controls">
diff --git a/packages/lit-dev-content/samples/examples/properties-basic/index.html b/packages/lit-dev-content/samples/examples/properties-basic/index.html
index fbb36214c..3a6cfa4e7 100644
--- a/packages/lit-dev-content/samples/examples/properties-basic/index.html
+++ b/packages/lit-dev-content/samples/examples/properties-basic/index.html
@@ -10,5 +10,6 @@
   </head>
   <body>
     <name-tag name="statically initialized"></name-tag>
-    <hr>
+    <hr />
   </body>
+</html>
diff --git a/packages/lit-dev-content/samples/examples/properties-basic/name-tag.ts b/packages/lit-dev-content/samples/examples/properties-basic/name-tag.ts
index 6a479c470..904712b02 100644
--- a/packages/lit-dev-content/samples/examples/properties-basic/name-tag.ts
+++ b/packages/lit-dev-content/samples/examples/properties-basic/name-tag.ts
@@ -1,4 +1,4 @@
-import { LitElement, html} from "lit";
+import {LitElement, html} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 
 @customElement('name-tag')
@@ -13,12 +13,10 @@ class NameTag extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'name-tag': NameTag
+    'name-tag': NameTag;
   }
 }
 
 const tag = document.createElement('name-tag');
 tag.name = 'dynamically created';
 document.body.appendChild(tag);
-
-
diff --git a/packages/lit-dev-content/samples/examples/properties-custom-converter/index.html b/packages/lit-dev-content/samples/examples/properties-custom-converter/index.html
index 75d23e9ec..54a6f0e94 100644
--- a/packages/lit-dev-content/samples/examples/properties-custom-converter/index.html
+++ b/packages/lit-dev-content/samples/examples/properties-custom-converter/index.html
@@ -1,16 +1,16 @@
 <!doctype html>
 <html>
-<head>
-  <script type="module" src="./my-element.js"></script>
-  <style>
-    body {
-      font-family: sans-serif'
-    }
-  </style>
-</head>
-<body>
-  <my-element></my-element>
-  <hr>
-  <my-element date="Oct 20 2021"></my-element>
-</body>
+  <head>
+    <script type="module" src="./my-element.js"></script>
+    <style>
+      body {
+        font-family: sans-serif'
+      }
+    </style>
+  </head>
+  <body>
+    <my-element></my-element>
+    <hr />
+    <my-element date="Oct 20 2021"></my-element>
+  </body>
 </html>
diff --git a/packages/lit-dev-content/samples/examples/properties-custom-converter/my-element.ts b/packages/lit-dev-content/samples/examples/properties-custom-converter/my-element.ts
index 82a8ffaac..789eb088c 100644
--- a/packages/lit-dev-content/samples/examples/properties-custom-converter/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/properties-custom-converter/my-element.ts
@@ -1,26 +1,24 @@
-import { LitElement, html} from "lit";
+import {LitElement, html} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 
 @customElement('my-element')
 class MyElement extends LitElement {
   @property({
     converter: (attrValue: string | null) => {
-      if (attrValue)
-        return new Date(attrValue);
-      else
-        return undefined;
-    }
+      if (attrValue) return new Date(attrValue);
+      else return undefined;
+    },
   })
   date?: Date;
 
   render() {
     return html`
       ${this.date
-        ? html`<p>Date is
+        ? html`<p>
+            Date is
             <span id="datefield">${this.date.toLocaleDateString()}</span>
           </p>`
-        : 'No date set'
-      }
+        : 'No date set'}
     `;
   }
 }
diff --git a/packages/lit-dev-content/samples/examples/properties-has-changed/date-display.ts b/packages/lit-dev-content/samples/examples/properties-has-changed/date-display.ts
index 55396e65e..60750b1e7 100644
--- a/packages/lit-dev-content/samples/examples/properties-has-changed/date-display.ts
+++ b/packages/lit-dev-content/samples/examples/properties-has-changed/date-display.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, PropertyValues} from "lit";
+import {LitElement, html, PropertyValues} from 'lit';
 import {customElement, property, query} from 'lit/decorators.js';
 import {isSameDate} from './date-utils.js';
 
@@ -9,7 +9,7 @@ class DateDisplay extends LitElement {
     // each Date is a new object
     hasChanged: (value?: Date, oldValue?: Date) => {
       return !isSameDate(value, oldValue);
-    }
+    },
   })
   date?: Date;
 
@@ -18,8 +18,8 @@ class DateDisplay extends LitElement {
 
   frames = [
     {backgroundColor: '#fff'},
-    {backgroundColor: '#324fff' },
-    {backgroundColor: '#fff'}
+    {backgroundColor: '#324fff'},
+    {backgroundColor: '#fff'},
   ];
 
   render() {
diff --git a/packages/lit-dev-content/samples/examples/properties-has-changed/date-utils.ts b/packages/lit-dev-content/samples/examples/properties-has-changed/date-utils.ts
index 5b0fa5f04..1350e8084 100644
--- a/packages/lit-dev-content/samples/examples/properties-has-changed/date-utils.ts
+++ b/packages/lit-dev-content/samples/examples/properties-has-changed/date-utils.ts
@@ -11,5 +11,9 @@ export function isSameDate(date1?: Date, date2?: Date) {
  * in the local time zone, given a UTC Date object as returned by input type="date".
  */
 export function localDateFromUTC(utcDate: Date) {
-  return new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate());
+  return new Date(
+    utcDate.getUTCFullYear(),
+    utcDate.getUTCMonth(),
+    utcDate.getUTCDate(),
+  );
 }
diff --git a/packages/lit-dev-content/samples/examples/properties-has-changed/index.html b/packages/lit-dev-content/samples/examples/properties-has-changed/index.html
index dbfd8e61c..9ffa79602 100644
--- a/packages/lit-dev-content/samples/examples/properties-has-changed/index.html
+++ b/packages/lit-dev-content/samples/examples/properties-has-changed/index.html
@@ -11,3 +11,4 @@
   <body>
     <my-element></my-element>
   </body>
+</html>
diff --git a/packages/lit-dev-content/samples/examples/properties-has-changed/my-element.ts b/packages/lit-dev-content/samples/examples/properties-has-changed/my-element.ts
index 2a7a9c1ea..3da956178 100644
--- a/packages/lit-dev-content/samples/examples/properties-has-changed/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/properties-has-changed/my-element.ts
@@ -1,17 +1,15 @@
-import { LitElement, html} from "lit";
+import {LitElement, html} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {localDateFromUTC} from './date-utils.js';
 import './date-display.js';
 
 @customElement('my-element')
 class MyElement extends LitElement {
-
   @property() date?: Date;
 
   render() {
     return html`
-      <p>Choose a date:
-      <input type="date" @change=${this._dateChanged}></p>
+      <p>Choose a date: <input type="date" @change=${this._dateChanged} /></p>
       <p><button @click=${this._chooseToday}>Choose Today</button></p>
       <p>Date chosen: <date-display .date=${this.date}></date-display></p>
     `;
@@ -28,4 +26,3 @@ class MyElement extends LitElement {
     this.date = new Date();
   }
 }
-
diff --git a/packages/lit-dev-content/samples/examples/react-basics/index.html b/packages/lit-dev-content/samples/examples/react-basics/index.html
index 8d3d61f7b..9ef8da474 100644
--- a/packages/lit-dev-content/samples/examples/react-basics/index.html
+++ b/packages/lit-dev-content/samples/examples/react-basics/index.html
@@ -4,5 +4,13 @@
 </head>
 <body>
   <div id="app"></div>
-  <p>Checkout our <a href="https://lit.dev/docs/frameworks/react/" target="_blank" rel="noopener noreferrer">React framework docs</a>!</p>
+  <p>
+    Checkout our
+    <a
+      href="https://lit.dev/docs/frameworks/react/"
+      target="_blank"
+      rel="noopener noreferrer"
+      >React framework docs</a
+    >!
+  </p>
 </body>
diff --git a/packages/lit-dev-content/samples/examples/react-litelement/index.html b/packages/lit-dev-content/samples/examples/react-litelement/index.html
index 38d008d08..669d20c73 100644
--- a/packages/lit-dev-content/samples/examples/react-litelement/index.html
+++ b/packages/lit-dev-content/samples/examples/react-litelement/index.html
@@ -2,7 +2,8 @@
 <head>
   <script type="module" src="./index.js"></script>
   <style>
-    h1, p {
+    h1,
+    p {
       font-family: Lato;
     }
 
diff --git a/packages/lit-dev-content/samples/examples/react-litelement/index.js b/packages/lit-dev-content/samples/examples/react-litelement/index.js
index a48e1d0d2..3a9644110 100644
--- a/packages/lit-dev-content/samples/examples/react-litelement/index.js
+++ b/packages/lit-dev-content/samples/examples/react-litelement/index.js
@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import { render } from 'react-dom';
+import React, {Component} from 'react';
+import {render} from 'react-dom';
 
 import 'chessboard-element';
 
@@ -22,11 +22,13 @@ class App extends Component {
           position="start"
           orientation={this.state.flipped ? 'black' : 'white'}
           draggable-pieces
-          ref={(e) => this.state.board = e}>
-        </chess-board>
+          ref={(e) => (this.state.board = e)}
+        ></chess-board>
         <button onClick={() => this.state.board.flip()}>Flip Board</button>
         <button onClick={() => this.state.board.clear()}>Clear Board</button>
-        <button onClick={() => this.state.board.setPosition('start')}>Start Position</button>
+        <button onClick={() => this.state.board.setPosition('start')}>
+          Start Position
+        </button>
       </div>
     );
   }
diff --git a/packages/lit-dev-content/samples/examples/repeating-and-conditional/my-element.ts b/packages/lit-dev-content/samples/examples/repeating-and-conditional/my-element.ts
index 05a771214..eaf19f9ea 100644
--- a/packages/lit-dev-content/samples/examples/repeating-and-conditional/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/repeating-and-conditional/my-element.ts
@@ -13,12 +13,7 @@ export class MyElement extends LitElement {
     return html`
       <p>Render a list:</p>
       <ul>
-        ${this.list.map(
-          (item, index) =>
-            html`
-              <li>${index}: ${item}</li>
-            `
-        )}
+        ${this.list.map((item, index) => html` <li>${index}: ${item}</li> `)}
       </ul>
     `;
   }
diff --git a/packages/lit-dev-content/samples/examples/signals/index.html b/packages/lit-dev-content/samples/examples/signals/index.html
index a7fe990bf..ef2da8a82 100644
--- a/packages/lit-dev-content/samples/examples/signals/index.html
+++ b/packages/lit-dev-content/samples/examples/signals/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./shared-counter.js"></script>
diff --git a/packages/lit-dev-content/samples/examples/signals/shared-counter.ts b/packages/lit-dev-content/samples/examples/signals/shared-counter.ts
index 28c8affa4..f0ee3e60b 100644
--- a/packages/lit-dev-content/samples/examples/signals/shared-counter.ts
+++ b/packages/lit-dev-content/samples/examples/signals/shared-counter.ts
@@ -16,7 +16,7 @@ export class SharedCounterComponent extends SignalWatcher(LitElement) {
     }
 
     button {
-      background: lightgreen
+      background: lightgreen;
     }
   `;
 
diff --git a/packages/lit-dev-content/samples/examples/slotting-children/index.html b/packages/lit-dev-content/samples/examples/slotting-children/index.html
index 6e5117c2f..10417e81c 100644
--- a/packages/lit-dev-content/samples/examples/slotting-children/index.html
+++ b/packages/lit-dev-content/samples/examples/slotting-children/index.html
@@ -1,19 +1,19 @@
 <!doctype html>
 <html>
-<head>
-  <script type="module" src="./my-element.js"></script>
-</head>
-<body>
-  <p>Use the <code>slot</code> element to render children</p>
-  <my-element>
-    <p>Render me</p>
-  </my-element>
+  <head>
+    <script type="module" src="./my-element.js"></script>
+  </head>
+  <body>
+    <p>Use the <code>slot</code> element to render children</p>
+    <my-element>
+      <p>Render me</p>
+    </my-element>
 
-  <p>Arbitarily many  children may populate a single slot</p>
-  <my-element>
-    <p>Render me</p>
-    <p>Me too</p>
-    <p>Me three</p>
-  </my-element>
-</body>
+    <p>Arbitarily many children may populate a single slot</p>
+    <my-element>
+      <p>Render me</p>
+      <p>Me too</p>
+      <p>Me three</p>
+    </my-element>
+  </body>
 </html>
diff --git a/packages/lit-dev-content/samples/examples/slotting-children/my-element.ts b/packages/lit-dev-content/samples/examples/slotting-children/my-element.ts
index d9108ebd9..178c242dd 100644
--- a/packages/lit-dev-content/samples/examples/slotting-children/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/slotting-children/my-element.ts
@@ -1,15 +1,14 @@
-import { LitElement, css, html } from "lit";
+import {LitElement, css, html} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 @customElement('my-element')
 class MyElement extends LitElement {
-  static styles =
-    css`
-      ::slotted(*) {
-        border: 1px solid blue;
-      	padding: 6px;
-      }
-    `;
+  static styles = css`
+    ::slotted(*) {
+      border: 1px solid blue;
+      padding: 6px;
+    }
+  `;
   render() {
     return html`
       <div>
diff --git a/packages/lit-dev-content/samples/examples/template-composition/index.html b/packages/lit-dev-content/samples/examples/template-composition/index.html
index 4066d9089..62a1609f8 100644
--- a/packages/lit-dev-content/samples/examples/template-composition/index.html
+++ b/packages/lit-dev-content/samples/examples/template-composition/index.html
@@ -1,9 +1,9 @@
 <!doctype html>
 <html>
-<head>
-  <script type="module" src="./my-page.js"></script>
-</head>
-<body>
-  <my-page></my-page>
-</body>
+  <head>
+    <script type="module" src="./my-page.js"></script>
+  </head>
+  <body>
+    <my-page></my-page>
+  </body>
 </html>
diff --git a/packages/lit-dev-content/samples/examples/template-composition/my-page.ts b/packages/lit-dev-content/samples/examples/template-composition/my-page.ts
index b8cd86c19..cbddb50b4 100644
--- a/packages/lit-dev-content/samples/examples/template-composition/my-page.ts
+++ b/packages/lit-dev-content/samples/examples/template-composition/my-page.ts
@@ -1,16 +1,14 @@
 import {LitElement, html} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 
-
 @customElement('my-page')
 class MyPage extends LitElement {
-
   @property({attribute: false})
   article = {
     title: 'Template composition',
     text: `Defining partial templates as instance methods
            breaks the template into manageable pieces—and
-           allows a subclass to override individual parts of the template.`
+           allows a subclass to override individual parts of the template.`,
   };
 
   headerTemplate() {
@@ -22,9 +20,6 @@ class MyPage extends LitElement {
   }
 
   render() {
-    return html`
-      ${this.headerTemplate()}
-      ${this.articleTemplate()}
-    `;
+    return html` ${this.headerTemplate()} ${this.articleTemplate()} `;
   }
 }
diff --git a/packages/lit-dev-content/samples/examples/templates-conditional/my-element.ts b/packages/lit-dev-content/samples/examples/templates-conditional/my-element.ts
index 57ebce387..df2272d3f 100644
--- a/packages/lit-dev-content/samples/examples/templates-conditional/my-element.ts
+++ b/packages/lit-dev-content/samples/examples/templates-conditional/my-element.ts
@@ -10,13 +10,15 @@ export class MyElement extends LitElement {
     return html`
       <p>Render content conditionally:</p>
       ${this.condition
-        ? html`
-            <p>Render some HTML if condition is true.</p>
-          `
-        : html`
-            <p>Render some other HTML if condition is false.</p>
-          `}
-      <button @click=${() => {this.condition = !this.condition}}>Toggle condition</button>
+        ? html` <p>Render some HTML if condition is true.</p> `
+        : html` <p>Render some other HTML if condition is false.</p> `}
+      <button
+        @click=${() => {
+          this.condition = !this.condition;
+        }}
+      >
+        Toggle condition
+      </button>
     `;
   }
 }
diff --git a/packages/lit-dev-content/samples/properties/attributereflect/index.html b/packages/lit-dev-content/samples/properties/attributereflect/index.html
index 592a3498c..41f96e093 100644
--- a/packages/lit-dev-content/samples/properties/attributereflect/index.html
+++ b/packages/lit-dev-content/samples/properties/attributereflect/index.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>lit-element code sample</title>
-  <script type="module" src="my-element.js"></script>
-</head>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>lit-element code sample</title>
+    <script type="module" src="my-element.js"></script>
+  </head>
   <body>
     <my-element></my-element>
   </body>
diff --git a/packages/lit-dev-content/samples/properties/attributereflect/my-element.ts b/packages/lit-dev-content/samples/properties/attributereflect/my-element.ts
index 0a693ce68..2cdad06f4 100644
--- a/packages/lit-dev-content/samples/properties/attributereflect/my-element.ts
+++ b/packages/lit-dev-content/samples/properties/attributereflect/my-element.ts
@@ -3,10 +3,10 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('my-element')
 class MyElement extends LitElement {
-  /* playground-fold */ 
+  /* playground-fold */
   static styles = css`
     :host {
-      display: inline-block; 
+      display: inline-block;
       padding: 4px;
     }
     :host([active]) {
@@ -15,30 +15,44 @@ class MyElement extends LitElement {
     :host([variant]) {
       outline: 4px solid green;
     }
-    :host([variant="special"]) {
-      border-radius: 8px; border: 4px solid red;
-    }`;
-  /* playground-fold-end */  
+    :host([variant='special']) {
+      border-radius: 8px;
+      border: 4px solid red;
+    }
+  `;
+  /* playground-fold-end */
   @property({type: Boolean, reflect: true})
   active: boolean = false;
 
   @property({reflect: true, useDefault: true} as PropertyDeclaration)
-  variant = 'normal'; 
+  variant = 'normal';
 
   render() {
     return html`
-      <div><label>active: <input type="checkbox"
-        .value="${this.active}"
-        @change="${(e: {target: HTMLInputElement}) => 
-          this.active = e.target.checked}">
-        ${this.active}
-      </label></div>
-      <div><label>variant: <input type="checkbox"
-        .value="${this.variant === 'special'}"
-        @change="${(e: {target: HTMLInputElement}) => 
-          this.variant = e.target.checked ? 'special' : 'normal'}">
-        ${this.variant}
-      </label></div>
+      <div>
+        <label
+          >active:
+          <input
+            type="checkbox"
+            .value="${this.active}"
+            @change="${(e: {target: HTMLInputElement}) =>
+              (this.active = e.target.checked)}"
+          />
+          ${this.active}
+        </label>
+      </div>
+      <div>
+        <label
+          >variant:
+          <input
+            type="checkbox"
+            .value="${this.variant === 'special'}"
+            @change="${(e: {target: HTMLInputElement}) =>
+              (this.variant = e.target.checked ? 'special' : 'normal')}"
+          />
+          ${this.variant}
+        </label>
+      </div>
     `;
   }
 }
diff --git a/packages/lit-dev-content/samples/properties/haschanged/index.html b/packages/lit-dev-content/samples/properties/haschanged/index.html
index 592a3498c..41f96e093 100644
--- a/packages/lit-dev-content/samples/properties/haschanged/index.html
+++ b/packages/lit-dev-content/samples/properties/haschanged/index.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>lit-element code sample</title>
-  <script type="module" src="my-element.js"></script>
-</head>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>lit-element code sample</title>
+    <script type="module" src="my-element.js"></script>
+  </head>
   <body>
     <my-element></my-element>
   </body>
diff --git a/packages/lit-dev-content/samples/tutorials/CONTRIBUTING.md b/packages/lit-dev-content/samples/tutorials/CONTRIBUTING.md
index f8bfc8696..df9a5eaab 100644
--- a/packages/lit-dev-content/samples/tutorials/CONTRIBUTING.md
+++ b/packages/lit-dev-content/samples/tutorials/CONTRIBUTING.md
@@ -7,81 +7,85 @@ Lit tutorials are a way to provide a guided, interactive learning experience to
 <details>
   <summary>Create a directory in <code>/packages/lit-dev-content/samples/tutorials/</code></summary>
 
-* This directory name is also going to be a part of the URL e.g. `https://lit.dev/tutorials/tutorial-name`
+- This directory name is also going to be a part of the URL e.g. `https://lit.dev/tutorials/tutorial-name`
 </details>
 
 <details>
   <summary>In that directory create a <code>tutorial.json</code></summary>
 
-* See format in following section.
+- See format in following section.
 </details>
 
 <details>
   <summary>Create a <code>description.md</code> in that directory that describes the tutorial</summary>
 
-* This will show up in the card catalog
-* This file can be empty, but must exist
+- This will show up in the card catalog
+- This file can be empty, but must exist
 </details>
 
 <details>
   <summary>Create a directory for each step in your tutorial</summary>
 
-* Directory names must start from `00/` and increase numerically as a 2 digit number e.g. `01/` will follow `00/`
+- Directory names must start from `00/` and increase numerically as a 2 digit number e.g. `01/` will follow `00/`
 </details>
 
 <details>
   <summary>If <code>hasAfter: true</code> in tutorial.json the step must have <code>before/</code> and <code>after/</code> subdirectories</summary>
 
-* `before/` holds the playground project for what is first presented to the user
-* `after/` holds the playground project for when the user clicks the `solve` button.
-  * If `noSolve` is `true` for this step's metadata in `tutorial.json`, then the `solve` will not be shown for the step, and the `after/` folder is not required.
-  * If `hasAfter` is `false` or `undefined` for this step's metadata in `tutorial.json`, then the `after/` directory is optional and the solving the step will load the next step's `before/` directory
-</details>
+- `before/` holds the playground project for what is first presented to the user
+- `after/` holds the playground project for when the user clicks the `solve` button.
+  - If `noSolve` is `true` for this step's metadata in `tutorial.json`, then the `solve` will not be shown for the step, and the `after/` folder is not required.
+  - If `hasAfter` is `false` or `undefined` for this step's metadata in `tutorial.json`, then the `after/` directory is optional and the solving the step will load the next step's `before/` directory
+  </details>
 
 <details>
   <summary>If <code>checkable: true</code> in tutorial.json add code checking</summary>
 
-* create a `_check-code.js` file in the `before/` directory
-* In your `project.json`
-  * set your `"extends"` field to `"/samples/checkable-tutorial-base.json"`
-    * e.g. `"extends": "/samples/checkable-tutorial-base.json"`
-  * add the code-checking file as a `hidden` file to the step's `project.json`.
-    * e.g. `"_check-code.js": { "hidden": true }`
-* import the new file in `index.html`
-  * e.g.
+- create a `_check-code.js` file in the `before/` directory
+- In your `project.json`
+  - set your `"extends"` field to `"/samples/checkable-tutorial-base.json"`
+    - e.g. `"extends": "/samples/checkable-tutorial-base.json"`
+  - add the code-checking file as a `hidden` file to the step's `project.json`.
+    - e.g. `"_check-code.js": { "hidden": true }`
+- import the new file in `index.html`
+  - e.g.
+
 ```html
 <head>
-  <!-- playground-fold --><script type="module" src="./_check-code.js"></script><!-- playground-fold-end -->
+  <!-- playground-fold -->
+  <script type="module" src="./_check-code.js"></script>
+  <!-- playground-fold-end -->
 
   <script type="module" src="./my-element.js"></script>
 </head>
 ```
-* Install the code checker from `'./_check-code-helpers.js'` and pass it an async callback that returns an object of type `{passed: boolean, message?: string}`
-* See [Code Checking](#code-checking) for more details
+
+- Install the code checker from `'./_check-code-helpers.js'` and pass it an async callback that returns an object of type `{passed: boolean, message?: string}`
+- See [Code Checking](#code-checking) for more details
 </details>
 
 <details>
   <summary>Create a playground project for that step's before and after sections</summary>
 
-* See [playground-elements](https://github.com/google/playground-elements#option-2-json-configuration) docs for playground project authoring.
+- See [playground-elements](https://github.com/google/playground-elements#option-2-json-configuration) docs for playground project authoring.
 </details>
 
 <details>
   <summary>Create a directory with the same tutorial name in <code>/packages/lit-dev-content/site/tutorials/content/</code></summary>
 
-* This will hold the step instructions markdown files.
+- This will hold the step instructions markdown files.
 </details>
 
 <details>
   <summary>For step <code>xy/</code> create a markdown file named <code>xy.md</code> in the <code>content/</code> directory</summary>
 
-* These are the instructinos for each step. See the Step Instruction Authoring section for more info.
+- These are the instructinos for each step. See the Step Instruction Authoring section for more info.
 </details>
 
 <details>
   <summary>Add your tutorial to the catalog by including the tutorial directory name in <code>/packages/lit-dev-content/site/tutorials/tutorials.11tydata.js</code></summary>
 
-* For example, if you want to add the tutorial directory `tutorial-name` to the catalog, invoke the `loadTutorialData` function. e.g.
+- For example, if you want to add the tutorial directory `tutorial-name` to the catalog, invoke the `loadTutorialData` function. e.g.
 
 ```js
 const tutorials = await Promise.all([
@@ -90,6 +94,7 @@ const tutorials = await Promise.all([
   ...
 ]);
 ```
+
 </details>
 
 ## tutorial.json Format
@@ -103,7 +108,7 @@ interface TutorialManifest {
   difficulty: '' | 'Beginner' | 'Intermediate' | 'Advanced';
   // The size of the card in the catalog NOTE: you may have to
   // trigger `npm run dev` to make this change reflect
-  size: 'tiny'|'small'|'medium'|'large';
+  size: 'tiny' | 'small' | 'medium' | 'large';
   // Approximate duration in minutes of the tutorial to be
   // displayed on the catalog card. Set to 0 if you don't
   // want to display a duration
@@ -135,7 +140,7 @@ interface TutorialManifest {
     // Whether or not the step is code checkable. see the `Code Checking`
     // section below for more details.
     checkable?: boolean;
-  }[]
+  }[];
 }
 ```
 
@@ -189,48 +194,25 @@ customElements.define('my-element', MyElement);
 You can also insert an aside in your instructions by using the following format:
 
 ```html
-{% aside "positive" %}
-
-The first line is always a bolded header.
-
-Make sure to do `this`!
-
-{% endaside %}
-
-{% aside "warn" "no-header" %}
-
-The `no-header` will make sure that this line is not bolded.
-
-Beware of `this`!
-
-{% endaside %}
-
-{% aside "negative" %}
-
-Make sure NOT to do `this`!
-
-The following non-header lines here make sense to explain the assertion in
-the header line above.
-
-{% endaside %}
-
-{% aside "info" %}
-
-Check out more info [in this docs section](/docs/templates/expressions/#well-formed-html).
-
-{% endaside %}
+{% aside "positive" %} The first line is always a bolded header. Make sure to do
+`this`! {% endaside %} {% aside "warn" "no-header" %} The `no-header` will make
+sure that this line is not bolded. Beware of `this`! {% endaside %} {% aside
+"negative" %} Make sure NOT to do `this`! The following non-header lines here
+make sense to explain the assertion in the header line above. {% endaside %} {%
+aside "info" %} Check out more info [in this docs
+section](/docs/templates/expressions/#well-formed-html). {% endaside %}
 ```
 
-*Note:* markdown will only be parsed as markdown if there is an empty line
+_Note:_ markdown will only be parsed as markdown if there is an empty line
 between the text and the HTML tag.
 
 The available asides are:
 
-* `positive`
-* `warn`
-* `negative`
-* `info`
-* `labs`
+- `positive`
+- `warn`
+- `negative`
+- `info`
+- `labs`
 
 ## Code Checking
 
@@ -257,23 +239,26 @@ Additionally make sure your `project.json` extends from `/samples/checkable-tuto
   }
 }
 ```
+
 </details>
 
 Next, import this new file into your `index.html` file. And feel free to add the `<!-- playground-hide(-end) -->` comments to hide the import.
 
-
 <details open>
   <summary>example: <code>index.html</code></summary>
 
 ```html
 <head>
-  <!-- playground-hide --><script type="module" src="./_check-code.js"></script><!-- playground-hide-end -->
+  <!-- playground-hide -->
+  <script type="module" src="./_check-code.js"></script>
+  <!-- playground-hide-end -->
   <script type="module" src="./my-element.js"></script>
 </head>
 <body>
   <my-element name="User"></my-element>
 </body>
 ```
+
 </details>
 
 In your `_check-code.js` file, import and call `installCodeChecker` from the hidden `'./_check-code-helpers.js'` file which is injected by playground elements in `checkable-tutorial-base.json`.
@@ -310,6 +295,7 @@ installCodeChecker(async () => {
   return {passed, message};
 });
 ```
+
 </details>
 
 ## Good tutorial Habits
@@ -317,28 +303,28 @@ installCodeChecker(async () => {
 <details>
   <summary>The first step should describe to the user what they are going to learn in the tutorial</summary>
 
-* Code can be an empty `index.html` or a quick view at the final product.
+- Code can be an empty `index.html` or a quick view at the final product.
 </details>
 
 <details>
   <summary>Last step should have an action for the user to follow up what they just learned</summary>
 
-* links to other tutorials
-* links to next section of docs
+- links to other tutorials
+- links to next section of docs
 </details>
 
 <details>
   <summary>You're on the docs site, link out to relevant documentation</summary>
 
-* Teach the user how to empower themselves if they get stuck!
+- Teach the user how to empower themselves if they get stuck!
 </details>
 
 <details>
   <summary>Determine if you're making a good use of a user's time</summary>
 
-* Take the tutorial yourself
-* Time each step
-* Add about 30 seconds to a minute to you time for the final time approximation.
-* After you've added it all up, look at the total time and ask yourself if a user would like to go through that time commitment for what they learn
-* Cut extraneous content
+- Take the tutorial yourself
+- Time each step
+- Add about 30 seconds to a minute to you time for the final time approximation.
+- After you've added it all up, look at the total time and ask yourself if a user would like to go through that time commitment for what they learn
+- Cut extraneous content
 </details>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/00/after/comment-card.ts b/packages/lit-dev-content/samples/tutorials/async-directive/00/after/comment-card.ts
index ede697df9..b9da7497f 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/00/after/comment-card.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/00/after/comment-card.ts
@@ -4,7 +4,6 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('comment-card')
 export class CommentCard extends LitElement {
-
   static styles = css`
     :host {
       border: 1px solid #666;
@@ -42,7 +41,7 @@ export class CommentCard extends LitElement {
 
   render() {
     return html`
-      <img class="avatar" src=${this.avatar}>
+      <img class="avatar" src=${this.avatar} />
       <div class="body">
         <div class="header">
           <span class="subject">${this.subject}</span>
@@ -52,5 +51,4 @@ export class CommentCard extends LitElement {
       </div>
     `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/00/after/index.html b/packages/lit-dev-content/samples/tutorials/async-directive/00/after/index.html
index 1a203705f..a88cf6f9b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/00/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/00/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./time-ago-example.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/00/after/time-ago-example.ts b/packages/lit-dev-content/samples/tutorials/async-directive/00/after/time-ago-example.ts
index e079be0e6..d0aedccf9 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/00/after/time-ago-example.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/00/after/time-ago-example.ts
@@ -10,9 +10,10 @@ const timeNow = new Date();
 
 @customElement('time-ago-example')
 export class TimeAgoExample extends LitElement {
-
   static styles = css`
-    hr { margin: 20px 0; }
+    hr {
+      margin: 20px 0;
+    }
   `;
 
   @property() chosenTime = new Date('2020-03-10');
@@ -21,17 +22,23 @@ export class TimeAgoExample extends LitElement {
   render() {
     return html`
       <p>This page was rendered ${timeAgo(timeNow)}.</p>
-      <hr>
+      <hr />
 
       Select your last vacation:
-      <input type="date" .valueAsDate=${this.chosenTime} @change=${this.updateTime}>
+      <input
+        type="date"
+        .valueAsDate=${this.chosenTime}
+        @change=${this.updateTime}
+      />
       <p>Your last vacation was ${timeAgo(this.chosenTime)}.</p>
-      <hr>
-
-      <comment-card user="litdeveloper"
-                    time=${timeAgo(timeNow)}
-                    subject="Just tried AsyncDirectives!"
-                    content="I just tried out these AsyncDirectives in Lit and they're pretty powerful!">
+      <hr />
+
+      <comment-card
+        user="litdeveloper"
+        time=${timeAgo(timeNow)}
+        subject="Just tried AsyncDirectives!"
+        content="I just tried out these AsyncDirectives in Lit and they're pretty powerful!"
+      >
       </comment-card>
     `;
   }
@@ -41,6 +48,5 @@ export class TimeAgoExample extends LitElement {
     const target = event.target as HTMLInputElement;
     this.chosenTime = target.valueAsDate!;
   }
-
 }
 /* playground-hide-end */
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/00/after/time-ago.ts b/packages/lit-dev-content/samples/tutorials/async-directive/00/after/time-ago.ts
index 549cde68f..72234c621 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/00/after/time-ago.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/00/after/time-ago.ts
@@ -3,7 +3,6 @@ import {AsyncDirective} from 'lit/async-directive.js';
 import {format} from 'timeago.js';
 
 class TimeAgoDirective extends AsyncDirective {
-
   timer: number | undefined;
   time!: Date;
 
@@ -39,7 +38,6 @@ class TimeAgoDirective extends AsyncDirective {
   reconnected() {
     this.ensureTimerStarted();
   }
-
 }
 
 export const timeAgo = directive(TimeAgoDirective);
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/00/before/comment-card.ts b/packages/lit-dev-content/samples/tutorials/async-directive/00/before/comment-card.ts
index ede697df9..b9da7497f 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/00/before/comment-card.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/00/before/comment-card.ts
@@ -4,7 +4,6 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('comment-card')
 export class CommentCard extends LitElement {
-
   static styles = css`
     :host {
       border: 1px solid #666;
@@ -42,7 +41,7 @@ export class CommentCard extends LitElement {
 
   render() {
     return html`
-      <img class="avatar" src=${this.avatar}>
+      <img class="avatar" src=${this.avatar} />
       <div class="body">
         <div class="header">
           <span class="subject">${this.subject}</span>
@@ -52,5 +51,4 @@ export class CommentCard extends LitElement {
       </div>
     `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/00/before/index.html b/packages/lit-dev-content/samples/tutorials/async-directive/00/before/index.html
index 1a203705f..a88cf6f9b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/00/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/00/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./time-ago-example.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/00/before/time-ago-example.ts b/packages/lit-dev-content/samples/tutorials/async-directive/00/before/time-ago-example.ts
index e079be0e6..d0aedccf9 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/00/before/time-ago-example.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/00/before/time-ago-example.ts
@@ -10,9 +10,10 @@ const timeNow = new Date();
 
 @customElement('time-ago-example')
 export class TimeAgoExample extends LitElement {
-
   static styles = css`
-    hr { margin: 20px 0; }
+    hr {
+      margin: 20px 0;
+    }
   `;
 
   @property() chosenTime = new Date('2020-03-10');
@@ -21,17 +22,23 @@ export class TimeAgoExample extends LitElement {
   render() {
     return html`
       <p>This page was rendered ${timeAgo(timeNow)}.</p>
-      <hr>
+      <hr />
 
       Select your last vacation:
-      <input type="date" .valueAsDate=${this.chosenTime} @change=${this.updateTime}>
+      <input
+        type="date"
+        .valueAsDate=${this.chosenTime}
+        @change=${this.updateTime}
+      />
       <p>Your last vacation was ${timeAgo(this.chosenTime)}.</p>
-      <hr>
-
-      <comment-card user="litdeveloper"
-                    time=${timeAgo(timeNow)}
-                    subject="Just tried AsyncDirectives!"
-                    content="I just tried out these AsyncDirectives in Lit and they're pretty powerful!">
+      <hr />
+
+      <comment-card
+        user="litdeveloper"
+        time=${timeAgo(timeNow)}
+        subject="Just tried AsyncDirectives!"
+        content="I just tried out these AsyncDirectives in Lit and they're pretty powerful!"
+      >
       </comment-card>
     `;
   }
@@ -41,6 +48,5 @@ export class TimeAgoExample extends LitElement {
     const target = event.target as HTMLInputElement;
     this.chosenTime = target.valueAsDate!;
   }
-
 }
 /* playground-hide-end */
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/00/before/time-ago.ts b/packages/lit-dev-content/samples/tutorials/async-directive/00/before/time-ago.ts
index 549cde68f..72234c621 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/00/before/time-ago.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/00/before/time-ago.ts
@@ -3,7 +3,6 @@ import {AsyncDirective} from 'lit/async-directive.js';
 import {format} from 'timeago.js';
 
 class TimeAgoDirective extends AsyncDirective {
-
   timer: number | undefined;
   time!: Date;
 
@@ -39,7 +38,6 @@ class TimeAgoDirective extends AsyncDirective {
   reconnected() {
     this.ensureTimerStarted();
   }
-
 }
 
 export const timeAgo = directive(TimeAgoDirective);
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/01/after/index.html b/packages/lit-dev-content/samples/tutorials/async-directive/01/after/index.html
index d0d11473e..76722b3cf 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/01/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/01/after/index.html
@@ -1,5 +1,3 @@
-<!DOCTYPE html>
-<head>
-</head>
-<body>
-</body>
+<!doctype html>
+<head> </head>
+<body></body>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/01/after/time-ago.ts b/packages/lit-dev-content/samples/tutorials/async-directive/01/after/time-ago.ts
index 1f4c822d1..3e633ceb9 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/01/after/time-ago.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/01/after/time-ago.ts
@@ -1,11 +1,9 @@
 import {directive, Directive} from 'lit/directive.js';
 
 class TimeAgoDirective extends Directive {
-
   render(time: Date) {
     return time.toDateString();
   }
-
 }
 
 export const timeAgo = directive(TimeAgoDirective);
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/01/before/index.html b/packages/lit-dev-content/samples/tutorials/async-directive/01/before/index.html
index d0d11473e..76722b3cf 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/01/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/01/before/index.html
@@ -1,5 +1,3 @@
-<!DOCTYPE html>
-<head>
-</head>
-<body>
-</body>
+<!doctype html>
+<head> </head>
+<body></body>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/02/after/index.html b/packages/lit-dev-content/samples/tutorials/async-directive/02/after/index.html
index 1a203705f..a88cf6f9b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/02/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/02/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./time-ago-example.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/02/after/time-ago-example.ts b/packages/lit-dev-content/samples/tutorials/async-directive/02/after/time-ago-example.ts
index 35fdaaa83..43631b106 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/02/after/time-ago-example.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/02/after/time-ago-example.ts
@@ -7,11 +7,7 @@ const timeCreated = new Date();
 
 @customElement('time-ago-example')
 export class TimeAgoExample extends LitElement {
-
   render() {
-    return html`
-      <p>This page was rendered ${timeAgo(timeCreated)}.</p>
-    `;
+    return html` <p>This page was rendered ${timeAgo(timeCreated)}.</p> `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/02/after/time-ago.ts b/packages/lit-dev-content/samples/tutorials/async-directive/02/after/time-ago.ts
index 1f4c822d1..3e633ceb9 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/02/after/time-ago.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/02/after/time-ago.ts
@@ -1,11 +1,9 @@
 import {directive, Directive} from 'lit/directive.js';
 
 class TimeAgoDirective extends Directive {
-
   render(time: Date) {
     return time.toDateString();
   }
-
 }
 
 export const timeAgo = directive(TimeAgoDirective);
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/02/before/index.html b/packages/lit-dev-content/samples/tutorials/async-directive/02/before/index.html
index 1a203705f..a88cf6f9b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/02/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/02/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./time-ago-example.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/02/before/time-ago-example.ts b/packages/lit-dev-content/samples/tutorials/async-directive/02/before/time-ago-example.ts
index 9ad8d8db1..92f49f254 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/02/before/time-ago-example.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/02/before/time-ago-example.ts
@@ -3,11 +3,7 @@ import {customElement} from 'lit/decorators.js';
 
 @customElement('time-ago-example')
 export class TimeAgoExample extends LitElement {
-
   render() {
-    return html`
-      <p>This page was rendered.</p>
-    `;
+    return html` <p>This page was rendered.</p> `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/02/before/time-ago.ts b/packages/lit-dev-content/samples/tutorials/async-directive/02/before/time-ago.ts
index 1f4c822d1..3e633ceb9 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/02/before/time-ago.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/02/before/time-ago.ts
@@ -1,11 +1,9 @@
 import {directive, Directive} from 'lit/directive.js';
 
 class TimeAgoDirective extends Directive {
-
   render(time: Date) {
     return time.toDateString();
   }
-
 }
 
 export const timeAgo = directive(TimeAgoDirective);
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/03/before/index.html b/packages/lit-dev-content/samples/tutorials/async-directive/03/before/index.html
index 1a203705f..a88cf6f9b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/03/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/03/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./time-ago-example.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/03/before/time-ago-example.ts b/packages/lit-dev-content/samples/tutorials/async-directive/03/before/time-ago-example.ts
index 35fdaaa83..43631b106 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/03/before/time-ago-example.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/03/before/time-ago-example.ts
@@ -7,11 +7,7 @@ const timeCreated = new Date();
 
 @customElement('time-ago-example')
 export class TimeAgoExample extends LitElement {
-
   render() {
-    return html`
-      <p>This page was rendered ${timeAgo(timeCreated)}.</p>
-    `;
+    return html` <p>This page was rendered ${timeAgo(timeCreated)}.</p> `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/03/before/time-ago.ts b/packages/lit-dev-content/samples/tutorials/async-directive/03/before/time-ago.ts
index 1f4c822d1..3e633ceb9 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/03/before/time-ago.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/03/before/time-ago.ts
@@ -1,11 +1,9 @@
 import {directive, Directive} from 'lit/directive.js';
 
 class TimeAgoDirective extends Directive {
-
   render(time: Date) {
     return time.toDateString();
   }
-
 }
 
 export const timeAgo = directive(TimeAgoDirective);
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/04/before/index.html b/packages/lit-dev-content/samples/tutorials/async-directive/04/before/index.html
index 1a203705f..a88cf6f9b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/04/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/04/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./time-ago-example.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/04/before/time-ago-example.ts b/packages/lit-dev-content/samples/tutorials/async-directive/04/before/time-ago-example.ts
index 35fdaaa83..43631b106 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/04/before/time-ago-example.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/04/before/time-ago-example.ts
@@ -7,11 +7,7 @@ const timeCreated = new Date();
 
 @customElement('time-ago-example')
 export class TimeAgoExample extends LitElement {
-
   render() {
-    return html`
-      <p>This page was rendered ${timeAgo(timeCreated)}.</p>
-    `;
+    return html` <p>This page was rendered ${timeAgo(timeCreated)}.</p> `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/04/before/time-ago.ts b/packages/lit-dev-content/samples/tutorials/async-directive/04/before/time-ago.ts
index 245d7ac23..03cd170af 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/04/before/time-ago.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/04/before/time-ago.ts
@@ -2,11 +2,9 @@ import {format} from 'timeago.js';
 import {directive, Directive} from 'lit/directive.js';
 
 class TimeAgoDirective extends Directive {
-
   render(time: Date) {
     return format(time);
   }
-
 }
 
 export const timeAgo = directive(TimeAgoDirective);
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/05/before/index.html b/packages/lit-dev-content/samples/tutorials/async-directive/05/before/index.html
index 1a203705f..a88cf6f9b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/05/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/05/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./time-ago-example.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/05/before/time-ago-example.ts b/packages/lit-dev-content/samples/tutorials/async-directive/05/before/time-ago-example.ts
index 35fdaaa83..43631b106 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/05/before/time-ago-example.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/05/before/time-ago-example.ts
@@ -7,11 +7,7 @@ const timeCreated = new Date();
 
 @customElement('time-ago-example')
 export class TimeAgoExample extends LitElement {
-
   render() {
-    return html`
-      <p>This page was rendered ${timeAgo(timeCreated)}.</p>
-    `;
+    return html` <p>This page was rendered ${timeAgo(timeCreated)}.</p> `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/05/before/time-ago.ts b/packages/lit-dev-content/samples/tutorials/async-directive/05/before/time-ago.ts
index f0f0a7778..d84434fad 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/05/before/time-ago.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/05/before/time-ago.ts
@@ -2,11 +2,9 @@ import {format} from 'timeago.js';
 import {directive, AsyncDirective} from 'lit/async-directive.js';
 
 class TimeAgoDirective extends AsyncDirective {
-
   render(time: Date) {
     return format(time);
   }
-
 }
 
 export const timeAgo = directive(TimeAgoDirective);
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/06/before/index.html b/packages/lit-dev-content/samples/tutorials/async-directive/06/before/index.html
index 1a203705f..a88cf6f9b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/06/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/06/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./time-ago-example.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/06/before/time-ago-example.ts b/packages/lit-dev-content/samples/tutorials/async-directive/06/before/time-ago-example.ts
index 35fdaaa83..43631b106 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/06/before/time-ago-example.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/06/before/time-ago-example.ts
@@ -7,11 +7,7 @@ const timeCreated = new Date();
 
 @customElement('time-ago-example')
 export class TimeAgoExample extends LitElement {
-
   render() {
-    return html`
-      <p>This page was rendered ${timeAgo(timeCreated)}.</p>
-    `;
+    return html` <p>This page was rendered ${timeAgo(timeCreated)}.</p> `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/06/before/time-ago.ts b/packages/lit-dev-content/samples/tutorials/async-directive/06/before/time-ago.ts
index e6f4b03ea..e49296144 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/06/before/time-ago.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/06/before/time-ago.ts
@@ -3,7 +3,6 @@ import {directive, AsyncDirective} from 'lit/async-directive.js';
 import {Part, DirectiveParameters} from 'lit/directive.js';
 
 class TimeAgoDirective extends AsyncDirective {
-
   timer: number | undefined;
 
   render(time: Date) {
@@ -24,7 +23,6 @@ class TimeAgoDirective extends AsyncDirective {
       }, 1000);
     }
   }
-
 }
 
 export const timeAgo = directive(TimeAgoDirective);
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/07/after/index.html b/packages/lit-dev-content/samples/tutorials/async-directive/07/after/index.html
index 1a203705f..a88cf6f9b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/07/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/07/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./time-ago-example.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/07/after/time-ago-example.ts b/packages/lit-dev-content/samples/tutorials/async-directive/07/after/time-ago-example.ts
index 35fdaaa83..43631b106 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/07/after/time-ago-example.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/07/after/time-ago-example.ts
@@ -7,11 +7,7 @@ const timeCreated = new Date();
 
 @customElement('time-ago-example')
 export class TimeAgoExample extends LitElement {
-
   render() {
-    return html`
-      <p>This page was rendered ${timeAgo(timeCreated)}.</p>
-    `;
+    return html` <p>This page was rendered ${timeAgo(timeCreated)}.</p> `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/07/after/time-ago.ts b/packages/lit-dev-content/samples/tutorials/async-directive/07/after/time-ago.ts
index b0b7ded79..40072e29b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/07/after/time-ago.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/07/after/time-ago.ts
@@ -3,7 +3,6 @@ import {directive, AsyncDirective} from 'lit/async-directive.js';
 import type {Part, DirectiveParameters} from 'lit/directive.js';
 
 class TimeAgoDirective extends AsyncDirective {
-
   timer: number | undefined;
   time!: Date;
 
@@ -39,7 +38,6 @@ class TimeAgoDirective extends AsyncDirective {
   reconnected() {
     this.ensureTimerStarted();
   }
-
 }
 
 export const timeAgo = directive(TimeAgoDirective);
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/07/before/index.html b/packages/lit-dev-content/samples/tutorials/async-directive/07/before/index.html
index 1a203705f..a88cf6f9b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/07/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/07/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./time-ago-example.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/07/before/time-ago-example.ts b/packages/lit-dev-content/samples/tutorials/async-directive/07/before/time-ago-example.ts
index 35fdaaa83..43631b106 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/07/before/time-ago-example.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/07/before/time-ago-example.ts
@@ -7,11 +7,7 @@ const timeCreated = new Date();
 
 @customElement('time-ago-example')
 export class TimeAgoExample extends LitElement {
-
   render() {
-    return html`
-      <p>This page was rendered ${timeAgo(timeCreated)}.</p>
-    `;
+    return html` <p>This page was rendered ${timeAgo(timeCreated)}.</p> `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/07/before/time-ago.ts b/packages/lit-dev-content/samples/tutorials/async-directive/07/before/time-ago.ts
index 19e40703c..0e265f575 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/07/before/time-ago.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/07/before/time-ago.ts
@@ -3,7 +3,6 @@ import {directive, AsyncDirective} from 'lit/async-directive.js';
 import type {Part, DirectiveParameters} from 'lit/directive.js';
 
 class TimeAgoDirective extends AsyncDirective {
-
   timer: number | undefined;
   time!: Date;
 
@@ -26,7 +25,6 @@ class TimeAgoDirective extends AsyncDirective {
       }, 1000);
     }
   }
-
 }
 
 export const timeAgo = directive(TimeAgoDirective);
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/08/after/index.html b/packages/lit-dev-content/samples/tutorials/async-directive/08/after/index.html
index 1a203705f..a88cf6f9b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/08/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/08/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./time-ago-example.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/08/after/time-ago-example.ts b/packages/lit-dev-content/samples/tutorials/async-directive/08/after/time-ago-example.ts
index fe589670f..0a8327c76 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/08/after/time-ago-example.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/08/after/time-ago-example.ts
@@ -7,7 +7,6 @@ const timeCreated = new Date();
 
 @customElement('time-ago-example')
 export class TimeAgoExample extends LitElement {
-
   render() {
     return html`
       <p @click=${this.handleClick}>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/08/after/time-ago.ts b/packages/lit-dev-content/samples/tutorials/async-directive/08/after/time-ago.ts
index ad28e98f7..8edadc7a9 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/08/after/time-ago.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/08/after/time-ago.ts
@@ -3,7 +3,6 @@ import {directive, AsyncDirective} from 'lit/async-directive.js';
 import type {Part, DirectiveParameters} from 'lit/directive.js';
 
 class TimeAgoDirective extends AsyncDirective {
-
   timer: number | undefined;
   time!: Date;
 
@@ -41,7 +40,6 @@ class TimeAgoDirective extends AsyncDirective {
   reconnected() {
     this.ensureTimerStarted();
   }
-
 }
 
 export const timeAgo = directive(TimeAgoDirective);
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/08/before/index.html b/packages/lit-dev-content/samples/tutorials/async-directive/08/before/index.html
index 1a203705f..a88cf6f9b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/08/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/08/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./time-ago-example.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/08/before/time-ago-example.ts b/packages/lit-dev-content/samples/tutorials/async-directive/08/before/time-ago-example.ts
index 35fdaaa83..43631b106 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/08/before/time-ago-example.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/08/before/time-ago-example.ts
@@ -7,11 +7,7 @@ const timeCreated = new Date();
 
 @customElement('time-ago-example')
 export class TimeAgoExample extends LitElement {
-
   render() {
-    return html`
-      <p>This page was rendered ${timeAgo(timeCreated)}.</p>
-    `;
+    return html` <p>This page was rendered ${timeAgo(timeCreated)}.</p> `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/08/before/time-ago.ts b/packages/lit-dev-content/samples/tutorials/async-directive/08/before/time-ago.ts
index b0b7ded79..40072e29b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/08/before/time-ago.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/08/before/time-ago.ts
@@ -3,7 +3,6 @@ import {directive, AsyncDirective} from 'lit/async-directive.js';
 import type {Part, DirectiveParameters} from 'lit/directive.js';
 
 class TimeAgoDirective extends AsyncDirective {
-
   timer: number | undefined;
   time!: Date;
 
@@ -39,7 +38,6 @@ class TimeAgoDirective extends AsyncDirective {
   reconnected() {
     this.ensureTimerStarted();
   }
-
 }
 
 export const timeAgo = directive(TimeAgoDirective);
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/09/after/comment-card.ts b/packages/lit-dev-content/samples/tutorials/async-directive/09/after/comment-card.ts
index 196646436..aa4993f7b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/09/after/comment-card.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/09/after/comment-card.ts
@@ -3,7 +3,6 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('comment-card')
 export class CommentCard extends LitElement {
-
   static styles = css`
     :host {
       border: 1px solid #666;
@@ -41,7 +40,7 @@ export class CommentCard extends LitElement {
 
   render() {
     return html`
-      <img class="avatar" src=${this.avatar}>
+      <img class="avatar" src=${this.avatar} />
       <div class="body">
         <div class="header">
           <span class="subject">${this.subject}</span>
@@ -51,5 +50,4 @@ export class CommentCard extends LitElement {
       </div>
     `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/09/after/index.html b/packages/lit-dev-content/samples/tutorials/async-directive/09/after/index.html
index 1a203705f..a88cf6f9b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/09/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/09/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./time-ago-example.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/09/after/time-ago-example.ts b/packages/lit-dev-content/samples/tutorials/async-directive/09/after/time-ago-example.ts
index f44c5545b..4f92adb2c 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/09/after/time-ago-example.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/09/after/time-ago-example.ts
@@ -8,17 +8,17 @@ const timeCreated = new Date();
 
 @customElement('time-ago-example')
 export class TimeAgoExample extends LitElement {
-
   render() {
     return html`
       <p>This page was rendered ${timeAgo(timeCreated)}.</p>
 
-      <comment-card user="litdeveloper"
-                time=${timeAgo(timeCreated)}
-                subject="Just tried AsyncDirectives!"
-                content="Cool stuff, they're really powerful!">
+      <comment-card
+        user="litdeveloper"
+        time=${timeAgo(timeCreated)}
+        subject="Just tried AsyncDirectives!"
+        content="Cool stuff, they're really powerful!"
+      >
       </comment-card>
     `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/09/after/time-ago.ts b/packages/lit-dev-content/samples/tutorials/async-directive/09/after/time-ago.ts
index b0b7ded79..40072e29b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/09/after/time-ago.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/09/after/time-ago.ts
@@ -3,7 +3,6 @@ import {directive, AsyncDirective} from 'lit/async-directive.js';
 import type {Part, DirectiveParameters} from 'lit/directive.js';
 
 class TimeAgoDirective extends AsyncDirective {
-
   timer: number | undefined;
   time!: Date;
 
@@ -39,7 +38,6 @@ class TimeAgoDirective extends AsyncDirective {
   reconnected() {
     this.ensureTimerStarted();
   }
-
 }
 
 export const timeAgo = directive(TimeAgoDirective);
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/09/before/comment-card.ts b/packages/lit-dev-content/samples/tutorials/async-directive/09/before/comment-card.ts
index beb809bba..4cd5b0e8c 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/09/before/comment-card.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/09/before/comment-card.ts
@@ -3,7 +3,6 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('comment-card')
 export class CommentCard extends LitElement {
-
   static styles = css`
     :host {
       border: 1px solid #666;
@@ -40,7 +39,7 @@ export class CommentCard extends LitElement {
 
   render() {
     return html`
-      <img class="avatar" src=${this.avatar}>
+      <img class="avatar" src=${this.avatar} />
       <div class="body">
         <div class="header">
           <span class="subject">${this.subject}</span>
@@ -50,5 +49,4 @@ export class CommentCard extends LitElement {
       </div>
     `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/09/before/index.html b/packages/lit-dev-content/samples/tutorials/async-directive/09/before/index.html
index 1a203705f..a88cf6f9b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/09/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/09/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <script type="module" src="./time-ago-example.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/09/before/time-ago-example.ts b/packages/lit-dev-content/samples/tutorials/async-directive/09/before/time-ago-example.ts
index 5e9c80754..3639cb6bd 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/09/before/time-ago-example.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/09/before/time-ago-example.ts
@@ -8,11 +8,7 @@ const timeCreated = new Date();
 
 @customElement('time-ago-example')
 export class TimeAgoExample extends LitElement {
-
   render() {
-    return html`
-      <p>This page was rendered ${timeAgo(timeCreated)}.</p>
-    `;
+    return html` <p>This page was rendered ${timeAgo(timeCreated)}.</p> `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/09/before/time-ago.ts b/packages/lit-dev-content/samples/tutorials/async-directive/09/before/time-ago.ts
index b0b7ded79..40072e29b 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/09/before/time-ago.ts
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/09/before/time-ago.ts
@@ -3,7 +3,6 @@ import {directive, AsyncDirective} from 'lit/async-directive.js';
 import type {Part, DirectiveParameters} from 'lit/directive.js';
 
 class TimeAgoDirective extends AsyncDirective {
-
   timer: number | undefined;
   time!: Date;
 
@@ -39,7 +38,6 @@ class TimeAgoDirective extends AsyncDirective {
   reconnected() {
     this.ensureTimerStarted();
   }
-
 }
 
 export const timeAgo = directive(TimeAgoDirective);
diff --git a/packages/lit-dev-content/samples/tutorials/async-directive/tutorial.json b/packages/lit-dev-content/samples/tutorials/async-directive/tutorial.json
index 8058bb598..c5281f157 100644
--- a/packages/lit-dev-content/samples/tutorials/async-directive/tutorial.json
+++ b/packages/lit-dev-content/samples/tutorials/async-directive/tutorial.json
@@ -43,4 +43,4 @@
       "hasAfter": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/00/before/index.html b/packages/lit-dev-content/samples/tutorials/carousel/00/before/index.html
index c2e9418e2..f3e71f064 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/00/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/carousel/00/before/index.html
@@ -2,12 +2,12 @@
 
 <h2>motion-carousel</h2>
 <motion-carousel id="carousel">
-  <img src="https://picsum.photos/seed/1/200">
-  <img src="https://picsum.photos/seed/2/200">
-  <img src="https://picsum.photos/seed/3/200">
-  <img src="https://picsum.photos/seed/4/200">
-  <img src="https://picsum.photos/seed/5/200">
-  <img src="https://picsum.photos/seed/6/200">
+  <img src="https://picsum.photos/seed/1/200" />
+  <img src="https://picsum.photos/seed/2/200" />
+  <img src="https://picsum.photos/seed/3/200" />
+  <img src="https://picsum.photos/seed/4/200" />
+  <img src="https://picsum.photos/seed/5/200" />
+  <img src="https://picsum.photos/seed/6/200" />
 </motion-carousel>
 
 <style>
@@ -28,4 +28,3 @@ <h2>motion-carousel</h2>
     display: none;
   }
 </style>
-
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/00/before/motion-carousel.ts b/packages/lit-dev-content/samples/tutorials/carousel/00/before/motion-carousel.ts
index 57afba6fb..78ea241e3 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/00/before/motion-carousel.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/00/before/motion-carousel.ts
@@ -31,15 +31,16 @@ export class MotionCarousel extends LitElement {
 
   render() {
     const p = this.selectedInternal;
-    const s = (this.selectedInternal =
-      this.hasValidSelected() ? this.selected : this.selectedInternal);
+    const s = (this.selectedInternal = this.hasValidSelected()
+      ? this.selected
+      : this.selectedInternal);
     const shouldMove = this.hasUpdated && s !== p;
     const atStart = p === 0;
     const toStart = s === 0;
     const atEnd = p === this.maxSelected;
     const toEnd = s == this.maxSelected;
-    const shouldAdvance = shouldMove &&
-      (atEnd ? toStart : atStart ? !toEnd : s > p);
+    const shouldAdvance =
+      shouldMove && (atEnd ? toStart : atStart ? !toEnd : s > p);
     const delta = (shouldMove ? Number(shouldAdvance) || -1 : 0) * 100;
     this.left -= delta;
     const animateLeft = `${this.left}%`;
@@ -49,30 +50,41 @@ export class MotionCarousel extends LitElement {
     const indicatorLeft = `${w * s}%`;
     const indicatorWidth = `${w}%`;
     return html`
-      <div class="fit"
+      <div
+        class="fit"
         ${animate()}
         @click=${this.clickHandler}
-        style=${styleMap({left: animateLeft})}>
-        <div class="fit" style=${
-          shouldMove ? styleMap({left: previousLeft}) : noChange
-        }>
+        style=${styleMap({left: animateLeft})}
+      >
+        <div
+          class="fit"
+          style=${shouldMove ? styleMap({left: previousLeft}) : noChange}
+        >
           <slot name="previous"></slot>
         </div>
-        <div class="fit selected" style=${
-          shouldMove ? styleMap({left: selectedLeft}) : noChange
-        }>
+        <div
+          class="fit selected"
+          style=${shouldMove ? styleMap({left: selectedLeft}) : noChange}
+        >
           <slot name="selected"></slot>
         </div>
       </div>
-      <div class="bar"><div class="indicator"
+      <div class="bar">
+        <div
+          class="indicator"
           ${animate()}
-          style=${styleMap({left: indicatorLeft, width: indicatorWidth})}></div></div>
+          style=${styleMap({left: indicatorLeft, width: indicatorWidth})}
+        ></div>
+      </div>
     `;
   }
 
   private previous = -1;
   protected async updated(changedProperties: PropertyValues) {
-    if ((changedProperties.has('selected') || this.previous === -1) && this.hasValidSelected()) {
+    if (
+      (changedProperties.has('selected') || this.previous === -1) &&
+      this.hasValidSelected()
+    ) {
       this.updateSlots();
       this.previous = this.selected;
     }
@@ -90,10 +102,12 @@ export class MotionCarousel extends LitElement {
   private clickHandler(e: MouseEvent) {
     const i = this.selected + (Number(!e.shiftKey) || -1);
     this.selected = i > this.maxSelected ? 0 : i < 0 ? this.maxSelected : i;
-    const change = new CustomEvent('change',
-      {detail: this.selected, bubbles: true, composed: true});
+    const change = new CustomEvent('change', {
+      detail: this.selected,
+      bubbles: true,
+      composed: true,
+    });
     this.dispatchEvent(change);
   }
-
 }
 /* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/00/before/styles.ts b/packages/lit-dev-content/samples/tutorials/carousel/00/before/styles.ts
index 70d0be0c8..813c13507 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/00/before/styles.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/00/before/styles.ts
@@ -48,6 +48,7 @@ export const styles = css`
     width: 8px;
     border-radius: 8px;
     background: #eee;
-  }`;
+  }
+`;
 
 /* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/01/before/index.html b/packages/lit-dev-content/samples/tutorials/carousel/01/before/index.html
index c2e9418e2..f3e71f064 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/01/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/carousel/01/before/index.html
@@ -2,12 +2,12 @@
 
 <h2>motion-carousel</h2>
 <motion-carousel id="carousel">
-  <img src="https://picsum.photos/seed/1/200">
-  <img src="https://picsum.photos/seed/2/200">
-  <img src="https://picsum.photos/seed/3/200">
-  <img src="https://picsum.photos/seed/4/200">
-  <img src="https://picsum.photos/seed/5/200">
-  <img src="https://picsum.photos/seed/6/200">
+  <img src="https://picsum.photos/seed/1/200" />
+  <img src="https://picsum.photos/seed/2/200" />
+  <img src="https://picsum.photos/seed/3/200" />
+  <img src="https://picsum.photos/seed/4/200" />
+  <img src="https://picsum.photos/seed/5/200" />
+  <img src="https://picsum.photos/seed/6/200" />
 </motion-carousel>
 
 <style>
@@ -28,4 +28,3 @@ <h2>motion-carousel</h2>
     display: none;
   }
 </style>
-
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/01/before/motion-carousel.ts b/packages/lit-dev-content/samples/tutorials/carousel/01/before/motion-carousel.ts
index 4bd8916f2..486977d51 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/01/before/motion-carousel.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/01/before/motion-carousel.ts
@@ -7,11 +7,6 @@ export class MotionCarousel extends LitElement {
   static styles = styles;
 
   render() {
-    return html`
-      <div class="fit">
-
-      </div>
-    `;
+    return html` <div class="fit"></div> `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/02/before/index.html b/packages/lit-dev-content/samples/tutorials/carousel/02/before/index.html
index c2e9418e2..f3e71f064 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/02/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/carousel/02/before/index.html
@@ -2,12 +2,12 @@
 
 <h2>motion-carousel</h2>
 <motion-carousel id="carousel">
-  <img src="https://picsum.photos/seed/1/200">
-  <img src="https://picsum.photos/seed/2/200">
-  <img src="https://picsum.photos/seed/3/200">
-  <img src="https://picsum.photos/seed/4/200">
-  <img src="https://picsum.photos/seed/5/200">
-  <img src="https://picsum.photos/seed/6/200">
+  <img src="https://picsum.photos/seed/1/200" />
+  <img src="https://picsum.photos/seed/2/200" />
+  <img src="https://picsum.photos/seed/3/200" />
+  <img src="https://picsum.photos/seed/4/200" />
+  <img src="https://picsum.photos/seed/5/200" />
+  <img src="https://picsum.photos/seed/6/200" />
 </motion-carousel>
 
 <style>
@@ -28,4 +28,3 @@ <h2>motion-carousel</h2>
     display: none;
   }
 </style>
-
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/02/before/motion-carousel.ts b/packages/lit-dev-content/samples/tutorials/carousel/02/before/motion-carousel.ts
index 8e3d42b08..3a875e7d0 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/02/before/motion-carousel.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/02/before/motion-carousel.ts
@@ -13,5 +13,4 @@ export class MotionCarousel extends LitElement {
       </div>
     `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/02/before/styles.ts b/packages/lit-dev-content/samples/tutorials/carousel/02/before/styles.ts
index 682eb8e1f..382d0d657 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/02/before/styles.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/02/before/styles.ts
@@ -23,4 +23,5 @@ export const styles = css`
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-  }`;
+  }
+`;
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/03/before/index.html b/packages/lit-dev-content/samples/tutorials/carousel/03/before/index.html
index c2e9418e2..f3e71f064 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/03/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/carousel/03/before/index.html
@@ -2,12 +2,12 @@
 
 <h2>motion-carousel</h2>
 <motion-carousel id="carousel">
-  <img src="https://picsum.photos/seed/1/200">
-  <img src="https://picsum.photos/seed/2/200">
-  <img src="https://picsum.photos/seed/3/200">
-  <img src="https://picsum.photos/seed/4/200">
-  <img src="https://picsum.photos/seed/5/200">
-  <img src="https://picsum.photos/seed/6/200">
+  <img src="https://picsum.photos/seed/1/200" />
+  <img src="https://picsum.photos/seed/2/200" />
+  <img src="https://picsum.photos/seed/3/200" />
+  <img src="https://picsum.photos/seed/4/200" />
+  <img src="https://picsum.photos/seed/5/200" />
+  <img src="https://picsum.photos/seed/6/200" />
 </motion-carousel>
 
 <style>
@@ -28,4 +28,3 @@ <h2>motion-carousel</h2>
     display: none;
   }
 </style>
-
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/03/before/motion-carousel.ts b/packages/lit-dev-content/samples/tutorials/carousel/03/before/motion-carousel.ts
index cf8d5733b..20ccdf540 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/03/before/motion-carousel.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/03/before/motion-carousel.ts
@@ -28,5 +28,4 @@ export class MotionCarousel extends LitElement {
       </div>
     `;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/03/before/styles.ts b/packages/lit-dev-content/samples/tutorials/carousel/03/before/styles.ts
index 682eb8e1f..382d0d657 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/03/before/styles.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/03/before/styles.ts
@@ -23,4 +23,5 @@ export const styles = css`
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-  }`;
+  }
+`;
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/04/before/index.html b/packages/lit-dev-content/samples/tutorials/carousel/04/before/index.html
index c2e9418e2..f3e71f064 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/04/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/carousel/04/before/index.html
@@ -2,12 +2,12 @@
 
 <h2>motion-carousel</h2>
 <motion-carousel id="carousel">
-  <img src="https://picsum.photos/seed/1/200">
-  <img src="https://picsum.photos/seed/2/200">
-  <img src="https://picsum.photos/seed/3/200">
-  <img src="https://picsum.photos/seed/4/200">
-  <img src="https://picsum.photos/seed/5/200">
-  <img src="https://picsum.photos/seed/6/200">
+  <img src="https://picsum.photos/seed/1/200" />
+  <img src="https://picsum.photos/seed/2/200" />
+  <img src="https://picsum.photos/seed/3/200" />
+  <img src="https://picsum.photos/seed/4/200" />
+  <img src="https://picsum.photos/seed/5/200" />
+  <img src="https://picsum.photos/seed/6/200" />
 </motion-carousel>
 
 <style>
@@ -28,4 +28,3 @@ <h2>motion-carousel</h2>
     display: none;
   }
 </style>
-
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/04/before/motion-carousel.ts b/packages/lit-dev-content/samples/tutorials/carousel/04/before/motion-carousel.ts
index 9bff21012..052314141 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/04/before/motion-carousel.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/04/before/motion-carousel.ts
@@ -41,5 +41,4 @@ export class MotionCarousel extends LitElement {
     this.children[this.previous]?.removeAttribute('slot');
     this.children[this.selected]?.setAttribute('slot', 'selected');
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/04/before/styles.ts b/packages/lit-dev-content/samples/tutorials/carousel/04/before/styles.ts
index 682eb8e1f..382d0d657 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/04/before/styles.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/04/before/styles.ts
@@ -23,4 +23,5 @@ export const styles = css`
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-  }`;
+  }
+`;
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/05/before/index.html b/packages/lit-dev-content/samples/tutorials/carousel/05/before/index.html
index c2e9418e2..f3e71f064 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/05/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/carousel/05/before/index.html
@@ -2,12 +2,12 @@
 
 <h2>motion-carousel</h2>
 <motion-carousel id="carousel">
-  <img src="https://picsum.photos/seed/1/200">
-  <img src="https://picsum.photos/seed/2/200">
-  <img src="https://picsum.photos/seed/3/200">
-  <img src="https://picsum.photos/seed/4/200">
-  <img src="https://picsum.photos/seed/5/200">
-  <img src="https://picsum.photos/seed/6/200">
+  <img src="https://picsum.photos/seed/1/200" />
+  <img src="https://picsum.photos/seed/2/200" />
+  <img src="https://picsum.photos/seed/3/200" />
+  <img src="https://picsum.photos/seed/4/200" />
+  <img src="https://picsum.photos/seed/5/200" />
+  <img src="https://picsum.photos/seed/6/200" />
 </motion-carousel>
 
 <style>
@@ -28,4 +28,3 @@ <h2>motion-carousel</h2>
     display: none;
   }
 </style>
-
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/05/before/motion-carousel.ts b/packages/lit-dev-content/samples/tutorials/carousel/05/before/motion-carousel.ts
index 275c89788..f64cab38b 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/05/before/motion-carousel.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/05/before/motion-carousel.ts
@@ -32,8 +32,11 @@ export class MotionCarousel extends LitElement {
   private clickHandler(e: MouseEvent) {
     const i = this.selected + (Number(!e.shiftKey) || -1);
     this.selected = i > this.maxSelected ? 0 : i < 0 ? this.maxSelected : i;
-    const change = new CustomEvent('change',
-      {detail: this.selected, bubbles: true, composed: true});
+    const change = new CustomEvent('change', {
+      detail: this.selected,
+      bubbles: true,
+      composed: true,
+    });
     this.dispatchEvent(change);
   }
 
@@ -49,5 +52,4 @@ export class MotionCarousel extends LitElement {
     this.children[this.previous]?.removeAttribute('slot');
     this.children[this.selected]?.setAttribute('slot', 'selected');
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/05/before/styles.ts b/packages/lit-dev-content/samples/tutorials/carousel/05/before/styles.ts
index 682eb8e1f..382d0d657 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/05/before/styles.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/05/before/styles.ts
@@ -23,4 +23,5 @@ export const styles = css`
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-  }`;
+  }
+`;
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/06/before/index.html b/packages/lit-dev-content/samples/tutorials/carousel/06/before/index.html
index c2e9418e2..f3e71f064 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/06/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/carousel/06/before/index.html
@@ -2,12 +2,12 @@
 
 <h2>motion-carousel</h2>
 <motion-carousel id="carousel">
-  <img src="https://picsum.photos/seed/1/200">
-  <img src="https://picsum.photos/seed/2/200">
-  <img src="https://picsum.photos/seed/3/200">
-  <img src="https://picsum.photos/seed/4/200">
-  <img src="https://picsum.photos/seed/5/200">
-  <img src="https://picsum.photos/seed/6/200">
+  <img src="https://picsum.photos/seed/1/200" />
+  <img src="https://picsum.photos/seed/2/200" />
+  <img src="https://picsum.photos/seed/3/200" />
+  <img src="https://picsum.photos/seed/4/200" />
+  <img src="https://picsum.photos/seed/5/200" />
+  <img src="https://picsum.photos/seed/6/200" />
 </motion-carousel>
 
 <style>
@@ -28,4 +28,3 @@ <h2>motion-carousel</h2>
     display: none;
   }
 </style>
-
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/06/before/motion-carousel.ts b/packages/lit-dev-content/samples/tutorials/carousel/06/before/motion-carousel.ts
index 4124b942f..bdb532da1 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/06/before/motion-carousel.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/06/before/motion-carousel.ts
@@ -27,7 +27,8 @@ export class MotionCarousel extends LitElement {
     const selectedLeft = ``;
     const previousLeft = ``;
     return html`
-      <div class="fit"
+      <div
+        class="fit"
         @click=${this.clickHandler}
         style=${styleMap({left: animateLeft})}
       >
@@ -44,8 +45,11 @@ export class MotionCarousel extends LitElement {
   private clickHandler(e: MouseEvent) {
     const i = this.selected + (Number(!e.shiftKey) || -1);
     this.selected = i > this.maxSelected ? 0 : i < 0 ? this.maxSelected : i;
-    const change = new CustomEvent('change',
-      {detail: this.selected, bubbles: true, composed: true});
+    const change = new CustomEvent('change', {
+      detail: this.selected,
+      bubbles: true,
+      composed: true,
+    });
     this.dispatchEvent(change);
   }
 
@@ -61,5 +65,4 @@ export class MotionCarousel extends LitElement {
     this.children[this.previous]?.removeAttribute('slot');
     this.children[this.selected]?.setAttribute('slot', 'selected');
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/06/before/styles.ts b/packages/lit-dev-content/samples/tutorials/carousel/06/before/styles.ts
index 5bcd9c622..80800d228 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/06/before/styles.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/06/before/styles.ts
@@ -27,4 +27,5 @@ export const styles = css`
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-  }`;
+  }
+`;
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/07/after/index.html b/packages/lit-dev-content/samples/tutorials/carousel/07/after/index.html
index c2e9418e2..f3e71f064 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/07/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/carousel/07/after/index.html
@@ -2,12 +2,12 @@
 
 <h2>motion-carousel</h2>
 <motion-carousel id="carousel">
-  <img src="https://picsum.photos/seed/1/200">
-  <img src="https://picsum.photos/seed/2/200">
-  <img src="https://picsum.photos/seed/3/200">
-  <img src="https://picsum.photos/seed/4/200">
-  <img src="https://picsum.photos/seed/5/200">
-  <img src="https://picsum.photos/seed/6/200">
+  <img src="https://picsum.photos/seed/1/200" />
+  <img src="https://picsum.photos/seed/2/200" />
+  <img src="https://picsum.photos/seed/3/200" />
+  <img src="https://picsum.photos/seed/4/200" />
+  <img src="https://picsum.photos/seed/5/200" />
+  <img src="https://picsum.photos/seed/6/200" />
 </motion-carousel>
 
 <style>
@@ -28,4 +28,3 @@ <h2>motion-carousel</h2>
     display: none;
   }
 </style>
-
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/07/after/motion-carousel.ts b/packages/lit-dev-content/samples/tutorials/carousel/07/after/motion-carousel.ts
index b4d00d644..1f6a4151c 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/07/after/motion-carousel.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/07/after/motion-carousel.ts
@@ -27,22 +27,24 @@ export class MotionCarousel extends LitElement {
   private left = 0;
   render() {
     const p = this.selectedInternal;
-    const s = (this.selectedInternal =
-      this.hasValidSelected() ? this.selected : this.selectedInternal);
+    const s = (this.selectedInternal = this.hasValidSelected()
+      ? this.selected
+      : this.selectedInternal);
     const shouldMove = this.hasUpdated && s !== p;
     const atStart = p === 0;
     const toStart = s === 0;
     const atEnd = p === this.maxSelected;
     const toEnd = s === this.maxSelected;
-    const shouldAdvance = shouldMove &&
-      (atEnd ? toStart : atStart ? !toEnd : s > p);
+    const shouldAdvance =
+      shouldMove && (atEnd ? toStart : atStart ? !toEnd : s > p);
     const delta = (shouldMove ? Number(shouldAdvance) || -1 : 0) * 100;
     this.left -= delta;
     const animateLeft = `${this.left}%`;
     const selectedLeft = `${-this.left}%`;
     const previousLeft = `${-this.left - delta}%`;
     return html`
-      <div class="fit"
+      <div
+        class="fit"
         @click=${this.clickHandler}
         style=${styleMap({left: animateLeft})}
       >
@@ -59,8 +61,11 @@ export class MotionCarousel extends LitElement {
   private clickHandler(e: MouseEvent) {
     const i = this.selected + (Number(!e.shiftKey) || -1);
     this.selected = i > this.maxSelected ? 0 : i < 0 ? this.maxSelected : i;
-    const change = new CustomEvent('change',
-      {detail: this.selected, bubbles: true, composed: true});
+    const change = new CustomEvent('change', {
+      detail: this.selected,
+      bubbles: true,
+      composed: true,
+    });
     this.dispatchEvent(change);
   }
 
@@ -80,5 +85,4 @@ export class MotionCarousel extends LitElement {
     this.children[this.previous]?.setAttribute('slot', 'previous');
     this.children[this.selected]?.setAttribute('slot', 'selected');
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/07/after/styles.ts b/packages/lit-dev-content/samples/tutorials/carousel/07/after/styles.ts
index 5bcd9c622..80800d228 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/07/after/styles.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/07/after/styles.ts
@@ -27,4 +27,5 @@ export const styles = css`
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-  }`;
+  }
+`;
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/07/before/index.html b/packages/lit-dev-content/samples/tutorials/carousel/07/before/index.html
index c2e9418e2..f3e71f064 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/07/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/carousel/07/before/index.html
@@ -2,12 +2,12 @@
 
 <h2>motion-carousel</h2>
 <motion-carousel id="carousel">
-  <img src="https://picsum.photos/seed/1/200">
-  <img src="https://picsum.photos/seed/2/200">
-  <img src="https://picsum.photos/seed/3/200">
-  <img src="https://picsum.photos/seed/4/200">
-  <img src="https://picsum.photos/seed/5/200">
-  <img src="https://picsum.photos/seed/6/200">
+  <img src="https://picsum.photos/seed/1/200" />
+  <img src="https://picsum.photos/seed/2/200" />
+  <img src="https://picsum.photos/seed/3/200" />
+  <img src="https://picsum.photos/seed/4/200" />
+  <img src="https://picsum.photos/seed/5/200" />
+  <img src="https://picsum.photos/seed/6/200" />
 </motion-carousel>
 
 <style>
@@ -28,4 +28,3 @@ <h2>motion-carousel</h2>
     display: none;
   }
 </style>
-
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/07/before/motion-carousel.ts b/packages/lit-dev-content/samples/tutorials/carousel/07/before/motion-carousel.ts
index fb5348e93..1c5357f49 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/07/before/motion-carousel.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/07/before/motion-carousel.ts
@@ -33,7 +33,8 @@ export class MotionCarousel extends LitElement {
     const selectedLeft = ``;
     const previousLeft = ``;
     return html`
-      <div class="fit"
+      <div
+        class="fit"
         @click=${this.clickHandler}
         style=${styleMap({left: animateLeft})}
       >
@@ -50,8 +51,11 @@ export class MotionCarousel extends LitElement {
   private clickHandler(e: MouseEvent) {
     const i = this.selected + (Number(!e.shiftKey) || -1);
     this.selected = i > this.maxSelected ? 0 : i < 0 ? this.maxSelected : i;
-    const change = new CustomEvent('change',
-      {detail: this.selected, bubbles: true, composed: true});
+    const change = new CustomEvent('change', {
+      detail: this.selected,
+      bubbles: true,
+      composed: true,
+    });
     this.dispatchEvent(change);
   }
 
@@ -71,5 +75,4 @@ export class MotionCarousel extends LitElement {
     this.children[this.previous]?.setAttribute('slot', 'previous');
     this.children[this.selected]?.setAttribute('slot', 'selected');
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/07/before/styles.ts b/packages/lit-dev-content/samples/tutorials/carousel/07/before/styles.ts
index 5bcd9c622..80800d228 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/07/before/styles.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/07/before/styles.ts
@@ -27,4 +27,5 @@ export const styles = css`
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-  }`;
+  }
+`;
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/08/after/index.html b/packages/lit-dev-content/samples/tutorials/carousel/08/after/index.html
index c2e9418e2..f3e71f064 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/08/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/carousel/08/after/index.html
@@ -2,12 +2,12 @@
 
 <h2>motion-carousel</h2>
 <motion-carousel id="carousel">
-  <img src="https://picsum.photos/seed/1/200">
-  <img src="https://picsum.photos/seed/2/200">
-  <img src="https://picsum.photos/seed/3/200">
-  <img src="https://picsum.photos/seed/4/200">
-  <img src="https://picsum.photos/seed/5/200">
-  <img src="https://picsum.photos/seed/6/200">
+  <img src="https://picsum.photos/seed/1/200" />
+  <img src="https://picsum.photos/seed/2/200" />
+  <img src="https://picsum.photos/seed/3/200" />
+  <img src="https://picsum.photos/seed/4/200" />
+  <img src="https://picsum.photos/seed/5/200" />
+  <img src="https://picsum.photos/seed/6/200" />
 </motion-carousel>
 
 <style>
@@ -28,4 +28,3 @@ <h2>motion-carousel</h2>
     display: none;
   }
 </style>
-
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/08/after/motion-carousel.ts b/packages/lit-dev-content/samples/tutorials/carousel/08/after/motion-carousel.ts
index 255d43004..5a60fcb71 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/08/after/motion-carousel.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/08/after/motion-carousel.ts
@@ -30,15 +30,16 @@ export class MotionCarousel extends LitElement {
 
   render() {
     const p = this.selectedInternal;
-    const s = (this.selectedInternal =
-      this.hasValidSelected() ? this.selected : this.selectedInternal);
+    const s = (this.selectedInternal = this.hasValidSelected()
+      ? this.selected
+      : this.selectedInternal);
     const shouldMove = this.hasUpdated && s !== p;
     const atStart = p === 0;
     const toStart = s === 0;
     const atEnd = p === this.maxSelected;
     const toEnd = s === this.maxSelected;
-    const shouldAdvance = shouldMove &&
-      (atEnd ? toStart : atStart ? !toEnd : s > p);
+    const shouldAdvance =
+      shouldMove && (atEnd ? toStart : atStart ? !toEnd : s > p);
     const delta = (shouldMove ? Number(shouldAdvance) || -1 : 0) * 100;
     this.left -= delta;
     const animateLeft = `${this.left}%`;
@@ -48,30 +49,41 @@ export class MotionCarousel extends LitElement {
     const indicatorLeft = `${w * s}%`;
     const indicatorWidth = `${w}%`;
     return html`
-      <div class="fit"
+      <div
+        class="fit"
         ${animate()}
         @click=${this.clickHandler}
-        style=${styleMap({left: animateLeft})}>
-        <div class="fit" style=${
-          shouldMove ? styleMap({left: previousLeft}) : noChange
-        }>
+        style=${styleMap({left: animateLeft})}
+      >
+        <div
+          class="fit"
+          style=${shouldMove ? styleMap({left: previousLeft}) : noChange}
+        >
           <slot name="previous"></slot>
         </div>
-        <div class="fit selected" style=${
-          shouldMove ? styleMap({left: selectedLeft}) : noChange
-        }>
+        <div
+          class="fit selected"
+          style=${shouldMove ? styleMap({left: selectedLeft}) : noChange}
+        >
           <slot name="selected"></slot>
         </div>
       </div>
-      <div class="bar"><div class="indicator"
+      <div class="bar">
+        <div
+          class="indicator"
           ${animate()}
-          style=${styleMap({left: indicatorLeft, width: indicatorWidth})}></div></div>
+          style=${styleMap({left: indicatorLeft, width: indicatorWidth})}
+        ></div>
+      </div>
     `;
   }
 
   private previous = -1;
   protected async updated(changedProperties: PropertyValues) {
-    if ((changedProperties.has('selected') || this.previous === -1) && this.hasValidSelected()) {
+    if (
+      (changedProperties.has('selected') || this.previous === -1) &&
+      this.hasValidSelected()
+    ) {
       this.updateSlots();
       this.previous = this.selected;
     }
@@ -89,9 +101,11 @@ export class MotionCarousel extends LitElement {
   private clickHandler(e: MouseEvent) {
     const i = this.selected + (Number(!e.shiftKey) || -1);
     this.selected = i > this.maxSelected ? 0 : i < 0 ? this.maxSelected : i;
-    const change = new CustomEvent('change',
-      {detail: this.selected, bubbles: true, composed: true});
+    const change = new CustomEvent('change', {
+      detail: this.selected,
+      bubbles: true,
+      composed: true,
+    });
     this.dispatchEvent(change);
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/08/after/styles.ts b/packages/lit-dev-content/samples/tutorials/carousel/08/after/styles.ts
index 5fbdfe12f..763bbf38d 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/08/after/styles.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/08/after/styles.ts
@@ -47,4 +47,5 @@ export const styles = css`
     width: 8px;
     border-radius: 8px;
     background: #eee;
-  }`;
+  }
+`;
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/08/before/index.html b/packages/lit-dev-content/samples/tutorials/carousel/08/before/index.html
index c2e9418e2..f3e71f064 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/08/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/carousel/08/before/index.html
@@ -2,12 +2,12 @@
 
 <h2>motion-carousel</h2>
 <motion-carousel id="carousel">
-  <img src="https://picsum.photos/seed/1/200">
-  <img src="https://picsum.photos/seed/2/200">
-  <img src="https://picsum.photos/seed/3/200">
-  <img src="https://picsum.photos/seed/4/200">
-  <img src="https://picsum.photos/seed/5/200">
-  <img src="https://picsum.photos/seed/6/200">
+  <img src="https://picsum.photos/seed/1/200" />
+  <img src="https://picsum.photos/seed/2/200" />
+  <img src="https://picsum.photos/seed/3/200" />
+  <img src="https://picsum.photos/seed/4/200" />
+  <img src="https://picsum.photos/seed/5/200" />
+  <img src="https://picsum.photos/seed/6/200" />
 </motion-carousel>
 
 <style>
@@ -28,4 +28,3 @@ <h2>motion-carousel</h2>
     display: none;
   }
 </style>
-
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/08/before/motion-carousel.ts b/packages/lit-dev-content/samples/tutorials/carousel/08/before/motion-carousel.ts
index f616dcc72..a81e26e9d 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/08/before/motion-carousel.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/08/before/motion-carousel.ts
@@ -29,15 +29,16 @@ export class MotionCarousel extends LitElement {
 
   render() {
     const p = this.selectedInternal;
-    const s = (this.selectedInternal =
-      this.hasValidSelected() ? this.selected : this.selectedInternal);
+    const s = (this.selectedInternal = this.hasValidSelected()
+      ? this.selected
+      : this.selectedInternal);
     const shouldMove = this.hasUpdated && s !== p;
     const atStart = p === 0;
     const toStart = s === 0;
     const atEnd = p === this.maxSelected;
     const toEnd = s === this.maxSelected;
-    const shouldAdvance = shouldMove &&
-      (atEnd ? toStart : atStart ? !toEnd : s > p);
+    const shouldAdvance =
+      shouldMove && (atEnd ? toStart : atStart ? !toEnd : s > p);
     const delta = (shouldMove ? Number(shouldAdvance) || -1 : 0) * 100;
     this.left -= delta;
     const animateLeft = `${this.left}%`;
@@ -47,28 +48,39 @@ export class MotionCarousel extends LitElement {
     const indicatorLeft = `${w * s}%`;
     const indicatorWidth = `${w}%`;
     return html`
-      <div class="fit"
+      <div
+        class="fit"
         @click=${this.clickHandler}
-        style=${styleMap({left: animateLeft})}>
-        <div class="fit" style=${
-          shouldMove ? styleMap({left: previousLeft}) : noChange
-        }>
+        style=${styleMap({left: animateLeft})}
+      >
+        <div
+          class="fit"
+          style=${shouldMove ? styleMap({left: previousLeft}) : noChange}
+        >
           <slot name="previous"></slot>
         </div>
-        <div class="fit selected" style=${
-          shouldMove ? styleMap({left: selectedLeft}) : noChange
-        }>
+        <div
+          class="fit selected"
+          style=${shouldMove ? styleMap({left: selectedLeft}) : noChange}
+        >
           <slot name="selected"></slot>
         </div>
       </div>
-      <div class="bar"><div class="indicator"
-          style=${styleMap({left: indicatorLeft, width: indicatorWidth})}></div></div>
+      <div class="bar">
+        <div
+          class="indicator"
+          style=${styleMap({left: indicatorLeft, width: indicatorWidth})}
+        ></div>
+      </div>
     `;
   }
 
   private previous = -1;
   protected async updated(changedProperties: PropertyValues) {
-    if ((changedProperties.has('selected') || this.previous === -1) && this.hasValidSelected()) {
+    if (
+      (changedProperties.has('selected') || this.previous === -1) &&
+      this.hasValidSelected()
+    ) {
       this.updateSlots();
       this.previous = this.selected;
     }
@@ -86,9 +98,11 @@ export class MotionCarousel extends LitElement {
   private clickHandler(e: MouseEvent) {
     const i = this.selected + (Number(!e.shiftKey) || -1);
     this.selected = i > this.maxSelected ? 0 : i < 0 ? this.maxSelected : i;
-    const change = new CustomEvent('change',
-      {detail: this.selected, bubbles: true, composed: true});
+    const change = new CustomEvent('change', {
+      detail: this.selected,
+      bubbles: true,
+      composed: true,
+    });
     this.dispatchEvent(change);
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/08/before/styles.ts b/packages/lit-dev-content/samples/tutorials/carousel/08/before/styles.ts
index 5fbdfe12f..763bbf38d 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/08/before/styles.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/08/before/styles.ts
@@ -47,4 +47,5 @@ export const styles = css`
     width: 8px;
     border-radius: 8px;
     background: #eee;
-  }`;
+  }
+`;
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/09/before/index.html b/packages/lit-dev-content/samples/tutorials/carousel/09/before/index.html
index c2e9418e2..f3e71f064 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/09/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/carousel/09/before/index.html
@@ -2,12 +2,12 @@
 
 <h2>motion-carousel</h2>
 <motion-carousel id="carousel">
-  <img src="https://picsum.photos/seed/1/200">
-  <img src="https://picsum.photos/seed/2/200">
-  <img src="https://picsum.photos/seed/3/200">
-  <img src="https://picsum.photos/seed/4/200">
-  <img src="https://picsum.photos/seed/5/200">
-  <img src="https://picsum.photos/seed/6/200">
+  <img src="https://picsum.photos/seed/1/200" />
+  <img src="https://picsum.photos/seed/2/200" />
+  <img src="https://picsum.photos/seed/3/200" />
+  <img src="https://picsum.photos/seed/4/200" />
+  <img src="https://picsum.photos/seed/5/200" />
+  <img src="https://picsum.photos/seed/6/200" />
 </motion-carousel>
 
 <style>
@@ -28,4 +28,3 @@ <h2>motion-carousel</h2>
     display: none;
   }
 </style>
-
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/09/before/motion-carousel.ts b/packages/lit-dev-content/samples/tutorials/carousel/09/before/motion-carousel.ts
index 255d43004..5a60fcb71 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/09/before/motion-carousel.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/09/before/motion-carousel.ts
@@ -30,15 +30,16 @@ export class MotionCarousel extends LitElement {
 
   render() {
     const p = this.selectedInternal;
-    const s = (this.selectedInternal =
-      this.hasValidSelected() ? this.selected : this.selectedInternal);
+    const s = (this.selectedInternal = this.hasValidSelected()
+      ? this.selected
+      : this.selectedInternal);
     const shouldMove = this.hasUpdated && s !== p;
     const atStart = p === 0;
     const toStart = s === 0;
     const atEnd = p === this.maxSelected;
     const toEnd = s === this.maxSelected;
-    const shouldAdvance = shouldMove &&
-      (atEnd ? toStart : atStart ? !toEnd : s > p);
+    const shouldAdvance =
+      shouldMove && (atEnd ? toStart : atStart ? !toEnd : s > p);
     const delta = (shouldMove ? Number(shouldAdvance) || -1 : 0) * 100;
     this.left -= delta;
     const animateLeft = `${this.left}%`;
@@ -48,30 +49,41 @@ export class MotionCarousel extends LitElement {
     const indicatorLeft = `${w * s}%`;
     const indicatorWidth = `${w}%`;
     return html`
-      <div class="fit"
+      <div
+        class="fit"
         ${animate()}
         @click=${this.clickHandler}
-        style=${styleMap({left: animateLeft})}>
-        <div class="fit" style=${
-          shouldMove ? styleMap({left: previousLeft}) : noChange
-        }>
+        style=${styleMap({left: animateLeft})}
+      >
+        <div
+          class="fit"
+          style=${shouldMove ? styleMap({left: previousLeft}) : noChange}
+        >
           <slot name="previous"></slot>
         </div>
-        <div class="fit selected" style=${
-          shouldMove ? styleMap({left: selectedLeft}) : noChange
-        }>
+        <div
+          class="fit selected"
+          style=${shouldMove ? styleMap({left: selectedLeft}) : noChange}
+        >
           <slot name="selected"></slot>
         </div>
       </div>
-      <div class="bar"><div class="indicator"
+      <div class="bar">
+        <div
+          class="indicator"
           ${animate()}
-          style=${styleMap({left: indicatorLeft, width: indicatorWidth})}></div></div>
+          style=${styleMap({left: indicatorLeft, width: indicatorWidth})}
+        ></div>
+      </div>
     `;
   }
 
   private previous = -1;
   protected async updated(changedProperties: PropertyValues) {
-    if ((changedProperties.has('selected') || this.previous === -1) && this.hasValidSelected()) {
+    if (
+      (changedProperties.has('selected') || this.previous === -1) &&
+      this.hasValidSelected()
+    ) {
       this.updateSlots();
       this.previous = this.selected;
     }
@@ -89,9 +101,11 @@ export class MotionCarousel extends LitElement {
   private clickHandler(e: MouseEvent) {
     const i = this.selected + (Number(!e.shiftKey) || -1);
     this.selected = i > this.maxSelected ? 0 : i < 0 ? this.maxSelected : i;
-    const change = new CustomEvent('change',
-      {detail: this.selected, bubbles: true, composed: true});
+    const change = new CustomEvent('change', {
+      detail: this.selected,
+      bubbles: true,
+      composed: true,
+    });
     this.dispatchEvent(change);
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/09/before/styles.ts b/packages/lit-dev-content/samples/tutorials/carousel/09/before/styles.ts
index dc93397ce..93684d419 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/09/before/styles.ts
+++ b/packages/lit-dev-content/samples/tutorials/carousel/09/before/styles.ts
@@ -48,5 +48,6 @@ export const styles = css`
     width: 8px;
     border-radius: 8px;
     background: #eee;
-  }`;
+  }
+`;
 /* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/carousel-base.json b/packages/lit-dev-content/samples/tutorials/carousel/carousel-base.json
index 06fea0648..c9efedbf2 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/carousel-base.json
+++ b/packages/lit-dev-content/samples/tutorials/carousel/carousel-base.json
@@ -1,6 +1,9 @@
 {
-    "extends": "/samples/base.json",
-    "files": {
-      "package.json": {"hidden": true, "content": "{\"dependencies\":{\"@lit-labs/motion\":\"^1.0.2\"}}"}
+  "extends": "/samples/base.json",
+  "files": {
+    "package.json": {
+      "hidden": true,
+      "content": "{\"dependencies\":{\"@lit-labs/motion\":\"^1.0.2\"}}"
     }
   }
+}
diff --git a/packages/lit-dev-content/samples/tutorials/carousel/tutorial.json b/packages/lit-dev-content/samples/tutorials/carousel/tutorial.json
index bf372effe..c2c0031bc 100644
--- a/packages/lit-dev-content/samples/tutorials/carousel/tutorial.json
+++ b/packages/lit-dev-content/samples/tutorials/carousel/tutorial.json
@@ -41,4 +41,4 @@
       "noSolve": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/after/date-converter.ts b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/after/date-converter.ts
index 379cef836..b5f4fd541 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/after/date-converter.ts
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/after/date-converter.ts
@@ -6,5 +6,5 @@ export const dateConverter: ComplexAttributeConverter<Date> = {
   },
   fromAttribute: (value: string) => {
     return new Date(value);
-  }
+  },
 };
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/after/date-display.ts b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/after/date-display.ts
index 87ca11644..98e717194 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/after/date-display.ts
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/after/date-display.ts
@@ -9,8 +9,12 @@ export class DateDisplay extends LitElement {
 
   render() {
     const locale = 'en-US';
-    const options: Intl.DateTimeFormatOptions =
-        {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
+    const options: Intl.DateTimeFormatOptions = {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    };
     return html`
       <p>The given date is: ${this.date.toLocaleDateString(locale, options)}</p>
     `;
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/after/index.html b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/after/index.html
index 0116f7209..abe294fce 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <script type="module" src="./date-display.js"></script>
@@ -7,4 +7,4 @@
     <h1>With a custom attribute converter:</h1>
     <date-display date="05/05/22"></date-display>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/before/date-display.ts b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/before/date-display.ts
index eaef57c61..9891f3479 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/before/date-display.ts
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/before/date-display.ts
@@ -8,8 +8,12 @@ export class DateDisplay extends LitElement {
 
   render() {
     const locale = 'en-US';
-    const options: Intl.DateTimeFormatOptions =
-        {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
+    const options: Intl.DateTimeFormatOptions = {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    };
     return html`
       <p>The given date is: ${this.date.toLocaleDateString(locale, options)}</p>
     `;
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/before/index.html b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/before/index.html
index 2373df6f4..089c7cdc1 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/00/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <script type="module" src="./date-display.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/_check-code.js b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/_check-code.js
index 7361f9116..af415eb53 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/_check-code.js
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/_check-code.js
@@ -27,8 +27,10 @@ installCodeChecker(async () => {
     passed = false;
   }
 
-  message = passed ? `'dateStr' is now a reactive property that accepts strings!` : message;
+  message = passed
+    ? `'dateStr' is now a reactive property that accepts strings!`
+    : message;
 
   window.location.reload();
   return {passed, message};
-});
\ No newline at end of file
+});
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/date-display.ts b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/date-display.ts
index eaef57c61..9891f3479 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/date-display.ts
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/date-display.ts
@@ -8,8 +8,12 @@ export class DateDisplay extends LitElement {
 
   render() {
     const locale = 'en-US';
-    const options: Intl.DateTimeFormatOptions =
-        {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
+    const options: Intl.DateTimeFormatOptions = {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    };
     return html`
       <p>The given date is: ${this.date.toLocaleDateString(locale, options)}</p>
     `;
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/index.html b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/index.html
index 364af6e2f..d948af78b 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/index.html
@@ -1,8 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <script type="module" src="./date-display.js"></script>
-    <!-- playground-hide --><script type="module" src="./_check-code.js"></script><!-- playground-hide-end -->
+    <!-- playground-hide -->
+    <script type="module" src="./_check-code.js"></script>
+    <!-- playground-hide-end -->
   </head>
   <body>
     <date-display></date-display>
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/project.json b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/project.json
index d35e3109d..0eb25d5dc 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/project.json
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/project.json
@@ -5,4 +5,4 @@
     "date-display.ts": {"selected": true},
     "_check-code.js": {"hidden": true}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/after/date-display.ts b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/after/date-display.ts
index ad82d2417..2d66f83c5 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/after/date-display.ts
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/after/date-display.ts
@@ -17,8 +17,12 @@ export class DateDisplay extends LitElement {
 
   render() {
     const locale = 'en-US';
-    const options: Intl.DateTimeFormatOptions =
-        {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
+    const options: Intl.DateTimeFormatOptions = {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    };
     return html`
       <p>The given date is: ${this.date.toLocaleDateString(locale, options)}</p>
     `;
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/after/index.html b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/after/index.html
index b682997e7..33ce37692 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <script type="module" src="./date-display.js"></script>
@@ -6,4 +6,4 @@
   <body>
     <date-display date-str="05/05/22"></date-display>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/after/project.json b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/after/project.json
index cd8aa880d..9b2c4237f 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/after/project.json
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/after/project.json
@@ -4,4 +4,4 @@
     "date-display.ts": {},
     "index.html": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/before/date-display.ts b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/before/date-display.ts
index e98d3f615..719be8855 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/before/date-display.ts
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/before/date-display.ts
@@ -11,8 +11,12 @@ export class DateDisplay extends LitElement {
 
   render() {
     const locale = 'en-US';
-    const options: Intl.DateTimeFormatOptions =
-        {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
+    const options: Intl.DateTimeFormatOptions = {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    };
     return html`
       <p>The given date is: ${this.date.toLocaleDateString(locale, options)}</p>
     `;
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/before/index.html b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/before/index.html
index 226e223d9..3fe83a011 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <script type="module" src="./date-display.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/before/project.json b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/before/project.json
index 87b5a13df..027bf86af 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/before/project.json
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/before/project.json
@@ -4,4 +4,4 @@
     "index.html": {"selected": true},
     "date-display.ts": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/03/before/date-display.ts b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/03/before/date-display.ts
index ad82d2417..2d66f83c5 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/03/before/date-display.ts
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/03/before/date-display.ts
@@ -17,8 +17,12 @@ export class DateDisplay extends LitElement {
 
   render() {
     const locale = 'en-US';
-    const options: Intl.DateTimeFormatOptions =
-        {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
+    const options: Intl.DateTimeFormatOptions = {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    };
     return html`
       <p>The given date is: ${this.date.toLocaleDateString(locale, options)}</p>
     `;
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/03/before/index.html b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/03/before/index.html
index b682997e7..33ce37692 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/03/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/03/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <script type="module" src="./date-display.js"></script>
@@ -6,4 +6,4 @@
   <body>
     <date-display date-str="05/05/22"></date-display>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/03/before/project.json b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/03/before/project.json
index 90e0ac266..7f0dba876 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/03/before/project.json
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/03/before/project.json
@@ -5,4 +5,4 @@
     "date-converter.ts": {"selected": true},
     "index.html": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/date-converter.ts b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/date-converter.ts
index 0bd5e4c6d..1c00469aa 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/date-converter.ts
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/date-converter.ts
@@ -1,12 +1,14 @@
 import type {ComplexAttributeConverter} from 'lit';
 
-export const dateConverter = (locale: string): ComplexAttributeConverter<Date> => {
+export const dateConverter = (
+  locale: string,
+): ComplexAttributeConverter<Date> => {
   return {
     toAttribute: (date: Date) => {
       return date.toLocaleDateString(locale);
     },
     fromAttribute: (value: string) => {
       return new Date(value);
-    }
-  }
+    },
+  };
 };
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/date-display.ts b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/date-display.ts
index ad82d2417..2d66f83c5 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/date-display.ts
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/date-display.ts
@@ -17,8 +17,12 @@ export class DateDisplay extends LitElement {
 
   render() {
     const locale = 'en-US';
-    const options: Intl.DateTimeFormatOptions =
-        {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
+    const options: Intl.DateTimeFormatOptions = {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    };
     return html`
       <p>The given date is: ${this.date.toLocaleDateString(locale, options)}</p>
     `;
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/index.html b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/index.html
index b682997e7..33ce37692 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <script type="module" src="./date-display.js"></script>
@@ -6,4 +6,4 @@
   <body>
     <date-display date-str="05/05/22"></date-display>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/project.json b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/project.json
index 4a1ed0306..7fe6cf7cd 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/project.json
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/project.json
@@ -5,4 +5,4 @@
     "date-converter.ts": {},
     "index.html": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/date-converter.ts b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/date-converter.ts
index 0bd5e4c6d..1c00469aa 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/date-converter.ts
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/date-converter.ts
@@ -1,12 +1,14 @@
 import type {ComplexAttributeConverter} from 'lit';
 
-export const dateConverter = (locale: string): ComplexAttributeConverter<Date> => {
+export const dateConverter = (
+  locale: string,
+): ComplexAttributeConverter<Date> => {
   return {
     toAttribute: (date: Date) => {
       return date.toLocaleDateString(locale);
     },
     fromAttribute: (value: string) => {
       return new Date(value);
-    }
-  }
+    },
+  };
 };
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/date-display.ts b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/date-display.ts
index c8ad42bf3..1ed679a6a 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/date-display.ts
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/date-display.ts
@@ -9,8 +9,12 @@ export class DateDisplay extends LitElement {
 
   render() {
     const locale = 'en-US';
-    const options: Intl.DateTimeFormatOptions =
-        {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
+    const options: Intl.DateTimeFormatOptions = {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    };
     return html`
       <p>The given date is: ${this.date.toLocaleDateString(locale, options)}</p>
     `;
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/index.html b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/index.html
index 850110749..b4af0f3d4 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <script type="module" src="./date-display.js"></script>
@@ -6,4 +6,4 @@
   <body>
     <date-display date="05/05/22"></date-display>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/project.json b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/project.json
index ba7a0863c..86b846e86 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/project.json
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/project.json
@@ -5,4 +5,4 @@
     "date-converter.ts": {},
     "index.html": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/description.md b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/description.md
index f5e859ecb..f19aa5f1d 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/description.md
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/description.md
@@ -1 +1 @@
-Properties sometimes don't map nicely to string attributes. Learn how to write your own attribute converters to simplify your markup in Lit!
\ No newline at end of file
+Properties sometimes don't map nicely to string attributes. Learn how to write your own attribute converters to simplify your markup in Lit!
diff --git a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/tutorial.json b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/tutorial.json
index 341416b77..cc15464a0 100644
--- a/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/tutorial.json
+++ b/packages/lit-dev-content/samples/tutorials/custom-attribute-converter/tutorial.json
@@ -29,4 +29,4 @@
       "noSolve": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/00/after/index.html b/packages/lit-dev-content/samples/tutorials/intro-to-lit/00/after/index.html
index 10a64e854..a90f1528f 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/00/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/00/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/00/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/intro-to-lit/00/after/my-element.ts
index cecbd390f..063e1f676 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/00/after/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/00/after/my-element.ts
@@ -8,9 +8,8 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-    <p>Welcome to the Lit tutorial!</p>
-    <p>This is the ${this.version} code.</p>
+      <p>Welcome to the Lit tutorial!</p>
+      <p>This is the ${this.version} code.</p>
     `;
   }
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/00/before/index.html b/packages/lit-dev-content/samples/tutorials/intro-to-lit/00/before/index.html
index 10a64e854..a90f1528f 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/00/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/00/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/00/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/intro-to-lit/00/before/my-element.ts
index 12892356a..c195c2c23 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/00/before/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/00/before/my-element.ts
@@ -8,8 +8,8 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-    <p>Welcome to the Lit tutorial!</p>
-    <p>This is the ${this.version} code.</p>
+      <p>Welcome to the Lit tutorial!</p>
+      <p>This is the ${this.version} code.</p>
     `;
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/01/after/index.html b/packages/lit-dev-content/samples/tutorials/intro-to-lit/01/after/index.html
index 0a0700d95..cb248f112 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/01/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/01/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/01/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/intro-to-lit/01/after/my-element.ts
index e0860c810..32795ef9b 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/01/after/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/01/after/my-element.ts
@@ -4,8 +4,6 @@ import {customElement} from 'lit/decorators.js';
 @customElement('my-element')
 export class MyElement extends LitElement {
   render() {
-    return html`
-      <p>Hello world! From my-element.</p>
-    `;
+    return html` <p>Hello world! From my-element.</p> `;
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/01/before/index.html b/packages/lit-dev-content/samples/tutorials/intro-to-lit/01/before/index.html
index 192ce1b86..52e561def 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/01/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/01/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/02/after/index.html b/packages/lit-dev-content/samples/tutorials/intro-to-lit/02/after/index.html
index 10a64e854..a90f1528f 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/02/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/02/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/02/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/intro-to-lit/02/after/my-element.ts
index 3e23a6c1f..20a091758 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/02/after/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/02/after/my-element.ts
@@ -7,8 +7,6 @@ export class MyElement extends LitElement {
   message: string = 'Hello again.';
 
   render() {
-    return html`
-      <p>${this.message}</p>
-    `;
+    return html` <p>${this.message}</p> `;
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/02/before/index.html b/packages/lit-dev-content/samples/tutorials/intro-to-lit/02/before/index.html
index 10a64e854..a90f1528f 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/02/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/02/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/02/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/intro-to-lit/02/before/my-element.ts
index aa768bdc9..1b3be4ec3 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/02/before/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/02/before/my-element.ts
@@ -3,11 +3,9 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
-// TODO: Add a reactive property
+  // TODO: Add a reactive property
 
   render() {
-    return html`
-      <p>TODO: Add an expression</p>
-    `;
+    return html` <p>TODO: Add an expression</p> `;
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/03/after/index.html b/packages/lit-dev-content/samples/tutorials/intro-to-lit/03/after/index.html
index 2d5ae7c4c..f10b6d073 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/03/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/03/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="name-tag.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/03/after/name-tag.ts b/packages/lit-dev-content/samples/tutorials/intro-to-lit/03/after/name-tag.ts
index b47f54db9..c0ffea273 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/03/after/name-tag.ts
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/03/after/name-tag.ts
@@ -9,7 +9,7 @@ export class NameTag extends LitElement {
   render() {
     return html`
       <p>Hello, ${this.name}</p>
-      <input @input=${this.changeName} placeholder="Enter your name">
+      <input @input=${this.changeName} placeholder="Enter your name" />
     `;
   }
 
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/03/before/index.html b/packages/lit-dev-content/samples/tutorials/intro-to-lit/03/before/index.html
index 2d5ae7c4c..f10b6d073 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/03/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/03/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="name-tag.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/03/before/name-tag.ts b/packages/lit-dev-content/samples/tutorials/intro-to-lit/03/before/name-tag.ts
index 51fb63617..e01f3532e 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/03/before/name-tag.ts
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/03/before/name-tag.ts
@@ -10,7 +10,7 @@ export class NameTag extends LitElement {
     // TODO: Add declarative event listener to input.
     return html`
       <p>Hello, ${this.name}</p>
-      <input placeholder="Enter your name">
+      <input placeholder="Enter your name" />
     `;
   }
 
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/04/after/index.html b/packages/lit-dev-content/samples/tutorials/intro-to-lit/04/after/index.html
index ed7654da1..aae62213b 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/04/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/04/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="more-expressions.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/04/after/more-expressions.ts b/packages/lit-dev-content/samples/tutorials/intro-to-lit/04/after/more-expressions.ts
index 17691e2d5..2393f8afc 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/04/after/more-expressions.ts
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/04/after/more-expressions.ts
@@ -9,9 +9,12 @@ export class MoreExpressions extends LitElement {
   render() {
     return html`
       <div>
-        <input type="text" ?disabled=${!this.checked} value="Hello there.">
+        <input type="text" ?disabled=${!this.checked} value="Hello there." />
       </div>
-      <label><input type="checkbox" @change=${this.setChecked}> Enable editing</label>
+      <label
+        ><input type="checkbox" @change=${this.setChecked} /> Enable
+        editing</label
+      >
     `;
   }
 
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/04/before/index.html b/packages/lit-dev-content/samples/tutorials/intro-to-lit/04/before/index.html
index ed7654da1..aae62213b 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/04/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/04/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="more-expressions.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/04/before/more-expressions.ts b/packages/lit-dev-content/samples/tutorials/intro-to-lit/04/before/more-expressions.ts
index 33fed4a3f..c916e401e 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/04/before/more-expressions.ts
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/04/before/more-expressions.ts
@@ -9,10 +9,13 @@ export class MoreExpressions extends LitElement {
   render() {
     return html`
       <div>
-         <!-- TODO: Add expression to input. -->
-         <input type="text" value="Hello there.">
+        <!-- TODO: Add expression to input. -->
+        <input type="text" value="Hello there." />
       </div>
-      <label><input type="checkbox" @change=${this.setChecked}> Enable editing</label>
+      <label
+        ><input type="checkbox" @change=${this.setChecked} /> Enable
+        editing</label
+      >
     `;
   }
 
@@ -20,4 +23,3 @@ export class MoreExpressions extends LitElement {
     this.checked = (event.target as HTMLInputElement).checked;
   }
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/05/after/index.html b/packages/lit-dev-content/samples/tutorials/intro-to-lit/05/after/index.html
index 50458222b..fb755e5d0 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/05/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/05/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="todo-list.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/05/after/todo-list.ts b/packages/lit-dev-content/samples/tutorials/intro-to-lit/05/after/todo-list.ts
index 87f535ed9..423ab5623 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/05/after/todo-list.ts
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/05/after/todo-list.ts
@@ -5,18 +5,17 @@ import {customElement, state, query} from 'lit/decorators.js';
 export class ToDoList extends LitElement {
   @state()
   private _listItems = [
-    { text: 'Start Lit tutorial', completed: true },
-    { text: 'Make to-do list', completed: false }
+    {text: 'Start Lit tutorial', completed: true},
+    {text: 'Make to-do list', completed: false},
   ];
 
   render() {
     return html`
       <h2>To Do</h2>
       <ul>
-        ${this._listItems.map((item) =>
-          html`<li>${item.text}</li>`)}
+        ${this._listItems.map((item) => html`<li>${item.text}</li>`)}
       </ul>
-      <input id="newitem" aria-label="New item">
+      <input id="newitem" aria-label="New item" />
       <button @click=${this.addToDo}>Add</button>
     `;
   }
@@ -25,9 +24,10 @@ export class ToDoList extends LitElement {
   input!: HTMLInputElement;
 
   addToDo() {
-    this._listItems = [...this._listItems,
-        {text: this.input.value, completed: false}];
+    this._listItems = [
+      ...this._listItems,
+      {text: this.input.value, completed: false},
+    ];
     this.input.value = '';
   }
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/05/before/index.html b/packages/lit-dev-content/samples/tutorials/intro-to-lit/05/before/index.html
index 50458222b..fb755e5d0 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/05/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/05/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="todo-list.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/05/before/todo-list.ts b/packages/lit-dev-content/samples/tutorials/intro-to-lit/05/before/todo-list.ts
index 66bc899d8..28c603711 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/05/before/todo-list.ts
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/05/before/todo-list.ts
@@ -5,23 +5,21 @@ import {customElement, state, query} from 'lit/decorators.js';
 export class ToDoList extends LitElement {
   @state()
   private _listItems = [
-    { text: 'Start Lit tutorial', completed: true },
-    { text: 'Make to-do list', completed: false }
+    {text: 'Start Lit tutorial', completed: true},
+    {text: 'Make to-do list', completed: false},
   ];
 
   render() {
     return html`
       <h2>To Do</h2>
       <ul>
-         <!-- TODO: Render list items. -->
+        <!-- TODO: Render list items. -->
       </ul>
-      <input id="newitem" aria-label="New item">
+      <input id="newitem" aria-label="New item" />
       <button @click=${this.addToDo}>Add</button>
     `;
   }
 
   // TODO: Add click handler.
-  addToDo() {
-  }
+  addToDo() {}
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/after/index.html b/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/after/index.html
index 50458222b..fb755e5d0 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="todo-list.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/after/todo-list.ts b/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/after/todo-list.ts
index 2ee50026a..f42c3d11b 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/after/todo-list.ts
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/after/todo-list.ts
@@ -2,9 +2,9 @@ import {LitElement, html, css} from 'lit';
 import {customElement, state, query} from 'lit/decorators.js';
 
 type ToDoItem = {
-  text: string,
-  completed: boolean
-}
+  text: string;
+  completed: boolean;
+};
 
 @customElement('todo-list')
 export class ToDoList extends LitElement {
@@ -17,24 +17,25 @@ export class ToDoList extends LitElement {
 
   @state()
   private _listItems = [
-    { text: 'Make to-do list', completed: true },
-    { text: 'Add some styles', completed: true }
+    {text: 'Make to-do list', completed: true},
+    {text: 'Add some styles', completed: true},
   ];
 
   render() {
     return html`
       <h2>To Do</h2>
       <ul>
-        ${this._listItems.map((item) =>
-          html`
-            <li
-                class=${item.completed ? 'completed' : ''}
-                @click=${() => this.toggleCompleted(item)}>
+        ${this._listItems.map(
+          (item) =>
+            html` <li
+              class=${item.completed ? 'completed' : ''}
+              @click=${() => this.toggleCompleted(item)}
+            >
               ${item.text}
-            </li>`
+            </li>`,
         )}
       </ul>
-      <input id="newitem" aria-label="New item">
+      <input id="newitem" aria-label="New item" />
       <button @click=${this.addToDo}>Add</button>
     `;
   }
@@ -48,8 +49,10 @@ export class ToDoList extends LitElement {
   input!: HTMLInputElement;
 
   addToDo() {
-    this._listItems = [...this._listItems,
-        {text: this.input.value, completed: false}];
+    this._listItems = [
+      ...this._listItems,
+      {text: this.input.value, completed: false},
+    ];
     this.input.value = '';
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/before/index.html b/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/before/index.html
index 50458222b..fb755e5d0 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="todo-list.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/before/todo-list.js b/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/before/todo-list.js
index 43e5de1d0..79482744d 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/before/todo-list.js
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/before/todo-list.js
@@ -20,15 +20,13 @@ export class ToDoList extends LitElement {
       <h2>To Do</h2>
       <ul>
         ${this._listItems.map(
-          (item) => html`
-            <li
-                class="TODO"
-                @click=${() => this.toggleCompleted(item)}>
+          (item) =>
+            html` <li class="TODO" @click=${() => this.toggleCompleted(item)}>
               ${item.text}
-            </li>`
+            </li>`,
         )}
       </ul>
-      <input id="newitem" aria-label="New item">
+      <input id="newitem" aria-label="New item" />
       <button @click=${this.addToDo}>Add</button>
     `;
   }
@@ -43,8 +41,10 @@ export class ToDoList extends LitElement {
   }
 
   addToDo() {
-    this._listItems = [...this._listItems,
-        {text: this.input.value, completed: false}];
+    this._listItems = [
+      ...this._listItems,
+      {text: this.input.value, completed: false},
+    ];
     this.input.value = '';
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/before/todo-list.ts b/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/before/todo-list.ts
index d90cbbd79..52a8023e9 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/before/todo-list.ts
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/06/before/todo-list.ts
@@ -2,35 +2,32 @@ import {LitElement, html, css} from 'lit';
 import {customElement, state, query} from 'lit/decorators.js';
 
 type ToDoItem = {
-  text: string,
-  completed: boolean
-}
+  text: string;
+  completed: boolean;
+};
 
 @customElement('todo-list')
 export class ToDoList extends LitElement {
-
   // TODO: Add styles here
 
   @state()
   private _listItems = [
-    { text: 'Make to-do list', completed: true },
-    { text: 'Add some styles', completed: false }
+    {text: 'Make to-do list', completed: true},
+    {text: 'Add some styles', completed: false},
   ];
 
   render() {
     return html`
       <h2>To Do</h2>
       <ul>
-        ${this._listItems.map((item) =>
-          html`
-            <li
-                class="TODO"
-                @click=${() => this.toggleCompleted(item)}>
+        ${this._listItems.map(
+          (item) =>
+            html` <li class="TODO" @click=${() => this.toggleCompleted(item)}>
               ${item.text}
-            </li>`
+            </li>`,
         )}
       </ul>
-      <input id="newitem" aria-label="New item">
+      <input id="newitem" aria-label="New item" />
       <button @click=${this.addToDo}>Add</button>
     `;
   }
@@ -44,9 +41,10 @@ export class ToDoList extends LitElement {
   input!: HTMLInputElement;
 
   addToDo() {
-    this._listItems = [...this._listItems,
-        {text: this.input.value, completed: false}];
+    this._listItems = [
+      ...this._listItems,
+      {text: this.input.value, completed: false},
+    ];
     this.input.value = '';
   }
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/07/after/index.html b/packages/lit-dev-content/samples/tutorials/intro-to-lit/07/after/index.html
index 50458222b..fb755e5d0 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/07/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/07/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="todo-list.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/07/after/todo-list.ts b/packages/lit-dev-content/samples/tutorials/intro-to-lit/07/after/todo-list.ts
index 5f719deb2..64fcd12f4 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/07/after/todo-list.ts
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/07/after/todo-list.ts
@@ -2,8 +2,8 @@ import {LitElement, html, css} from 'lit';
 import {customElement, state, property, query} from 'lit/decorators.js';
 
 type ToDoItem = {
-  text: string,
-  completed: boolean
+  text: string;
+  completed: boolean;
 };
 
 @customElement('todo-list')
@@ -17,8 +17,8 @@ export class ToDoList extends LitElement {
 
   @state()
   private _listItems = [
-  { text: 'Make to-do list', completed: true },
-    { text: 'Complete Lit tutorial', completed: false }
+    {text: 'Make to-do list', completed: true},
+    {text: 'Complete Lit tutorial', completed: false},
   ];
   @property()
   hideCompleted = false;
@@ -29,35 +29,32 @@ export class ToDoList extends LitElement {
       : this._listItems;
     const todos = html`
       <ul>
-        ${items.map((item) =>
-            html`
-              <li
-                  class=${item.completed ? 'completed' : ''}
-                  @click=${() => this.toggleCompleted(item)}>
-                ${item.text}
-              </li>`
+        ${items.map(
+          (item) =>
+            html` <li
+              class=${item.completed ? 'completed' : ''}
+              @click=${() => this.toggleCompleted(item)}
+            >
+              ${item.text}
+            </li>`,
         )}
       </ul>
     `;
-    const caughtUpMessage = html`
-      <p>
-      You're all caught up!
-      </p>
-    `;
-    const todosOrMessage = items.length > 0
-      ? todos
-      : caughtUpMessage;
+    const caughtUpMessage = html` <p>You're all caught up!</p> `;
+    const todosOrMessage = items.length > 0 ? todos : caughtUpMessage;
 
     return html`
       <h2>To Do</h2>
       ${todosOrMessage}
-      <input id="newitem" aria-label="New item">
+      <input id="newitem" aria-label="New item" />
       <button @click=${this.addToDo}>Add</button>
-      <br>
+      <br />
       <label>
-        <input type="checkbox"
+        <input
+          type="checkbox"
           @change=${this.setHideCompleted}
-          ?checked=${this.hideCompleted}>
+          ?checked=${this.hideCompleted}
+        />
         Hide completed
       </label>
     `;
@@ -76,9 +73,10 @@ export class ToDoList extends LitElement {
   input!: HTMLInputElement;
 
   addToDo() {
-    this._listItems = [...this._listItems,
-        {text: this.input.value, completed: false}];
+    this._listItems = [
+      ...this._listItems,
+      {text: this.input.value, completed: false},
+    ];
     this.input.value = '';
   }
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/07/before/index.html b/packages/lit-dev-content/samples/tutorials/intro-to-lit/07/before/index.html
index 50458222b..fb755e5d0 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/07/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/07/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="todo-list.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/07/before/todo-list.ts b/packages/lit-dev-content/samples/tutorials/intro-to-lit/07/before/todo-list.ts
index fa5a09bc7..e2ccfe5c6 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/07/before/todo-list.ts
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/07/before/todo-list.ts
@@ -2,8 +2,8 @@ import {LitElement, html, css} from 'lit';
 import {customElement, state, property, query} from 'lit/decorators.js';
 
 type ToDoItem = {
-  text: string,
-  completed: boolean
+  text: string;
+  completed: boolean;
 };
 
 @customElement('todo-list')
@@ -17,8 +17,8 @@ export class ToDoList extends LitElement {
 
   @state()
   private _listItems = [
-    { text: 'Make to-do list', completed: true },
-    { text: 'Complete Lit tutorial', completed: false }
+    {text: 'Make to-do list', completed: true},
+    {text: 'Complete Lit tutorial', completed: false},
   ];
   @property()
   hideCompleted = false;
@@ -28,13 +28,14 @@ export class ToDoList extends LitElement {
     const items = this._listItems;
     const todos = html`
       <ul>
-        ${items.map((item) =>
-          html`
-            <li
-                class=${item.completed ? 'completed' : ''}
-                @click=${() => this.toggleCompleted(item)}>
+        ${items.map(
+          (item) =>
+            html` <li
+              class=${item.completed ? 'completed' : ''}
+              @click=${() => this.toggleCompleted(item)}
+            >
               ${item.text}
-            </li>`
+            </li>`,
         )}
       </ul>
     `;
@@ -43,17 +44,17 @@ export class ToDoList extends LitElement {
       <h2>To Do</h2>
       <!-- TODO: Update expression. -->
       ${todos}
-      <input id="newitem" aria-label="New item">
+      <input id="newitem" aria-label="New item" />
       <button @click=${this.addToDo}>Add</button>
-      <br>
+      <br />
       <label>
-        <input type="checkbox"
+        <input
+          type="checkbox"
           @change=${this.setHideCompleted}
-          ?checked=${this.hideCompleted}>
+          ?checked=${this.hideCompleted}
+        />
         Hide completed
       </label>
-
-
     `;
   }
 
@@ -70,9 +71,10 @@ export class ToDoList extends LitElement {
   input!: HTMLInputElement;
 
   addToDo() {
-    this._listItems = [...this._listItems,
-        {text: this.input.value, completed: false}];
+    this._listItems = [
+      ...this._listItems,
+      {text: this.input.value, completed: false},
+    ];
     this.input.value = '';
   }
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/description.md b/packages/lit-dev-content/samples/tutorials/intro-to-lit/description.md
index a379164a0..6a2f624a5 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/description.md
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/description.md
@@ -1 +1 @@
-New to Lit? Start here to learn the ropes and make your first LitElement.
\ No newline at end of file
+New to Lit? Start here to learn the ropes and make your first LitElement.
diff --git a/packages/lit-dev-content/samples/tutorials/intro-to-lit/tutorial.json b/packages/lit-dev-content/samples/tutorials/intro-to-lit/tutorial.json
index 42895b4a9..e777c0417 100644
--- a/packages/lit-dev-content/samples/tutorials/intro-to-lit/tutorial.json
+++ b/packages/lit-dev-content/samples/tutorials/intro-to-lit/tutorial.json
@@ -39,4 +39,4 @@
       "hasAfter": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/00/before/index.html b/packages/lit-dev-content/samples/tutorials/reactivity/00/before/index.html
index 10a64e854..a90f1528f 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/00/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/00/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/01/after/index.html b/packages/lit-dev-content/samples/tutorials/reactivity/01/after/index.html
index 10a64e854..a90f1528f 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/01/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/01/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/01/before/index.html b/packages/lit-dev-content/samples/tutorials/reactivity/01/before/index.html
index 10a64e854..a90f1528f 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/01/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/01/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/01/before/my-element.js b/packages/lit-dev-content/samples/tutorials/reactivity/01/before/my-element.js
index 8c17c852c..3b339d216 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/01/before/my-element.js
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/01/before/my-element.js
@@ -1,7 +1,6 @@
 import {LitElement, html} from 'lit';
 
 export class MyElement extends LitElement {
-
   constructor() {
     super();
     this.result = '';
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/02/after/index.html b/packages/lit-dev-content/samples/tutorials/reactivity/02/after/index.html
index bae8a42a5..b3372e57e 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/02/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/02/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/02/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/reactivity/02/after/my-element.ts
index 099cbbfe0..9c6609792 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/02/after/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/02/after/my-element.ts
@@ -9,14 +9,16 @@ export class MyElement extends LitElement {
 
   removeItem(item: string) {
     const indexToRemove = this.groceries.indexOf(item);
-    this.groceries =
-        this.groceries.filter((_, i) => i !== indexToRemove);
+    this.groceries = this.groceries.filter((_, i) => i !== indexToRemove);
   }
 
   render() {
     return html`
-      ${map(this.groceries, (item) =>
-        html`<button @click=${() => this.removeItem(item)}>x</button>  ${item}<br>`
+      ${map(
+        this.groceries,
+        (item) =>
+          html`<button @click=${() => this.removeItem(item)}>x</button>
+            ${item}<br />`,
       )}
     `;
   }
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/02/before/index.html b/packages/lit-dev-content/samples/tutorials/reactivity/02/before/index.html
index bae8a42a5..b3372e57e 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/02/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/02/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/02/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/reactivity/02/before/my-element.ts
index 7ad02e33d..9b9380657 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/02/before/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/02/before/my-element.ts
@@ -14,8 +14,11 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-      ${map(this.groceries, (item) =>
-        html`<button @click=${() => this.removeItem(item)}>x</button> ${item}<br>`
+      ${map(
+        this.groceries,
+        (item) =>
+          html`<button @click=${() => this.removeItem(item)}>x</button>
+            ${item}<br />`,
       )}
     `;
   }
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/03/after/index.html b/packages/lit-dev-content/samples/tutorials/reactivity/03/after/index.html
index bae8a42a5..b3372e57e 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/03/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/03/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/03/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/reactivity/03/after/my-element.ts
index e693374b0..977ee86e4 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/03/after/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/03/after/my-element.ts
@@ -32,20 +32,26 @@ export class MyElement extends LitElement {
 
   render() {
     this._renderCount++;
-    const keyframeOptions = { duration: this.duration };
+    const keyframeOptions = {duration: this.duration};
 
     return html`
       <p>
         <button @click=${() => (this.big = !this.big)}>Animate</button>
       </p>
       <p>
-        <label>Speed <select @change=${this.setDuration}>
-          <option value="250" selected>Fast</option>
-          <option value="1500">Slow</option>
-        </select></label>
+        <label
+          >Speed
+          <select @change=${this.setDuration}>
+            <option value="250" selected>Fast</option>
+            <option value="1500">Slow</option>
+          </select></label
+        >
         Render count: ${this._renderCount}
       </p>
-      <p class="bar ${classMap({big: this.big})}" ${animate({keyframeOptions})}></p>
+      <p
+        class="bar ${classMap({big: this.big})}"
+        ${animate({keyframeOptions})}
+      ></p>
     `;
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/03/before/index.html b/packages/lit-dev-content/samples/tutorials/reactivity/03/before/index.html
index bae8a42a5..b3372e57e 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/03/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/03/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/03/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/reactivity/03/before/my-element.ts
index 489c12bf0..d99a6096a 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/03/before/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/03/before/my-element.ts
@@ -26,23 +26,28 @@ export class MyElement extends LitElement {
     this.duration = Number.parseInt(v);
   }
 
-
   render() {
     this._renderCount++;
-    const keyframeOptions = { duration: this.duration };
+    const keyframeOptions = {duration: this.duration};
 
     return html`
       <p>
         <button @click=${() => (this.big = !this.big)}>Animate</button>
       </p>
       <p>
-        <label>Speed <select @change=${this.setDuration}>
-          <option value="250" selected>Fast</option>
-          <option value="1500">Slow</option>
-        </select></label>
+        <label
+          >Speed
+          <select @change=${this.setDuration}>
+            <option value="250" selected>Fast</option>
+            <option value="1500">Slow</option>
+          </select></label
+        >
         Render count: ${this._renderCount}
       </p>
-      <p class="bar ${classMap({big: this.big})}" ${animate({keyframeOptions})}></p>
+      <p
+        class="bar ${classMap({big: this.big})}"
+        ${animate({keyframeOptions})}
+      ></p>
     `;
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/04/after/index.html b/packages/lit-dev-content/samples/tutorials/reactivity/04/after/index.html
index bae8a42a5..b3372e57e 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/04/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/04/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/04/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/reactivity/04/after/my-element.ts
index cd08ede5f..9a431bd55 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/04/after/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/04/after/my-element.ts
@@ -27,8 +27,14 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-      <label>Forward: <input id="forward" @input=${this.onInput} .value=${this.forward}></label>
-      <label>Backward: <input id="backward" @input=${this.onInput} .value=${this.backward}></label>
+      <label
+        >Forward:
+        <input id="forward" @input=${this.onInput} .value=${this.forward}
+      /></label>
+      <label
+        >Backward:
+        <input id="backward" @input=${this.onInput} .value=${this.backward}
+      /></label>
       <div>Forward text: ${this.forward}</div>
       <div>Backward text: ${this.backward}</div>
     `;
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/04/after/project.json b/packages/lit-dev-content/samples/tutorials/reactivity/04/after/project.json
index 1bb0dc080..13e14bf80 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/04/after/project.json
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/04/after/project.json
@@ -6,4 +6,4 @@
       "selected": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/04/before/index.html b/packages/lit-dev-content/samples/tutorials/reactivity/04/before/index.html
index bae8a42a5..b3372e57e 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/04/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/04/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/04/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/reactivity/04/before/my-element.ts
index 983e4f28c..c56bbd7b9 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/04/before/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/04/before/my-element.ts
@@ -17,8 +17,14 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-      <label>Forward: <input id="forward" @input=${this.onInput} .value=${this.forward}></label>
-      <label>Backward: <input id="backward" @input=${this.onInput} .value=${this.backward}></label>
+      <label
+        >Forward:
+        <input id="forward" @input=${this.onInput} .value=${this.forward}
+      /></label>
+      <label
+        >Backward:
+        <input id="backward" @input=${this.onInput} .value=${this.backward}
+      /></label>
       <div>Forward text: ${this.forward}</div>
       <div>Backward text: ${this.backward}</div>
     `;
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/04/before/project.json b/packages/lit-dev-content/samples/tutorials/reactivity/04/before/project.json
index 1bb0dc080..13e14bf80 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/04/before/project.json
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/04/before/project.json
@@ -6,4 +6,4 @@
       "selected": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/05/after/index.html b/packages/lit-dev-content/samples/tutorials/reactivity/05/after/index.html
index bae8a42a5..b3372e57e 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/05/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/05/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/05/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/reactivity/05/after/my-element.ts
index 8b6ab5209..9e93351cf 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/05/after/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/05/after/my-element.ts
@@ -22,10 +22,10 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-      <button @click=${() => this._showMessage = !this._showMessage}>Click me</button>
-      <div id="message" ?hidden=${!this._showMessage}>
-        TADA
-      </div>
+      <button @click=${() => (this._showMessage = !this._showMessage)}>
+        Click me
+      </button>
+      <div id="message" ?hidden=${!this._showMessage}>TADA</div>
     `;
   }
 
@@ -33,13 +33,16 @@ export class MyElement extends LitElement {
     if (changedProperties.has('_showMessage')) {
       const final = this._message.getBoundingClientRect().width;
       const starting = 0 - final;
-      this._message.animate([
-        { transform: `translateX(${starting}px)` },
-        { transform: `translateX(0)` }
-      ], {
-        duration: 500,
-        easing: 'ease-out',
-      });
+      this._message.animate(
+        [
+          {transform: `translateX(${starting}px)`},
+          {transform: `translateX(0)`},
+        ],
+        {
+          duration: 500,
+          easing: 'ease-out',
+        },
+      );
     }
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/05/before/index.html b/packages/lit-dev-content/samples/tutorials/reactivity/05/before/index.html
index bae8a42a5..b3372e57e 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/05/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/05/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/05/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/reactivity/05/before/my-element.ts
index c2c368c30..8ccd6bf1c 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/05/before/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/05/before/my-element.ts
@@ -22,10 +22,10 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-      <button @click=${() => this._showMessage = !this._showMessage}>Click me</button>
-      <div id="message" ?hidden=${!this._showMessage}>
-        TADA
-      </div>
+      <button @click=${() => (this._showMessage = !this._showMessage)}>
+        Click me
+      </button>
+      <div id="message" ?hidden=${!this._showMessage}>TADA</div>
     `;
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/06/before/bye-element.ts b/packages/lit-dev-content/samples/tutorials/reactivity/06/before/bye-element.ts
index ce04d984a..23ecefe48 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/06/before/bye-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/06/before/bye-element.ts
@@ -22,10 +22,10 @@ export class ByeElement extends LitElement {
 
   render() {
     return html`
-      <button @click=${() => this._showMessage = !this._showMessage}>Click me</button>
-      <div id="message" ?hidden=${!this._showMessage}>
-        That's all folks!
-      </div>
+      <button @click=${() => (this._showMessage = !this._showMessage)}>
+        Click me
+      </button>
+      <div id="message" ?hidden=${!this._showMessage}>That's all folks!</div>
     `;
   }
 
@@ -33,13 +33,16 @@ export class ByeElement extends LitElement {
     if (changedProperties.has('_showMessage')) {
       const rect = this._message.getBoundingClientRect();
       const startingX = 0 - rect.width;
-      this._message.animate([
-        { transform: `translateX(${startingX}px) scale(0.1)` },
-        { transform: `translateX(0) translateY(0) scale(1)` }
-      ], {
-        duration: 500,
-        easing: 'ease-out',
-      });
+      this._message.animate(
+        [
+          {transform: `translateX(${startingX}px) scale(0.1)`},
+          {transform: `translateX(0) translateY(0) scale(1)`},
+        ],
+        {
+          duration: 500,
+          easing: 'ease-out',
+        },
+      );
     }
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/06/before/index.html b/packages/lit-dev-content/samples/tutorials/reactivity/06/before/index.html
index 2218840d8..782ad5fce 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/06/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/06/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="bye-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/reactivity/tutorial.json b/packages/lit-dev-content/samples/tutorials/reactivity/tutorial.json
index 51802c637..af689389f 100644
--- a/packages/lit-dev-content/samples/tutorials/reactivity/tutorial.json
+++ b/packages/lit-dev-content/samples/tutorials/reactivity/tutorial.json
@@ -35,4 +35,4 @@
       "noSolve": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/00/before/index.html b/packages/lit-dev-content/samples/tutorials/svg-templates/00/before/index.html
index 7e65eea35..8728e4c2c 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/00/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/00/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <style>
@@ -28,12 +28,12 @@
     </style>
     <script type="module" src="repeat-pattern.js"></script>
     <script type="module">
-      const body = document.querySelector("body");
-      const pattern = document.querySelector("repeat-pattern");
+      const body = document.querySelector('body');
+      const pattern = document.querySelector('repeat-pattern');
 
       function onChars(e) {
         if (!(e.target instanceof HTMLInputElement)) return;
-        pattern.chars = e.target.value
+        pattern.chars = e.target.value;
       }
 
       function onNumPrints(e) {
@@ -48,37 +48,37 @@
 
       function onBackgroundColor(e) {
         if (!(e.target instanceof HTMLInputElement)) return;
-        body.style.setProperty("--background-color", e.target.value);
+        body.style.setProperty('--background-color', e.target.value);
       }
 
       function onStrokeColor(e) {
         if (!(e.target instanceof HTMLInputElement)) return;
-        body.style.setProperty("--stroke-color", e.target.value);
+        body.style.setProperty('--stroke-color', e.target.value);
       }
 
       function onTextColor(e) {
         if (!(e.target instanceof HTMLInputElement)) return;
-        body.style.setProperty("--font-color", e.target.value);
+        body.style.setProperty('--font-color', e.target.value);
       }
 
-      const inputs = document.querySelectorAll("input")
-      inputs[0].addEventListener("input", onChars);
-      inputs[1].addEventListener("input", onNumPrints);
-      inputs[2].addEventListener("input", onRotationOffset);
-      inputs[3].addEventListener("input", onBackgroundColor);
-      inputs[4].addEventListener("input", onStrokeColor);
-      inputs[5].addEventListener("input", onTextColor);
+      const inputs = document.querySelectorAll('input');
+      inputs[0].addEventListener('input', onChars);
+      inputs[1].addEventListener('input', onNumPrints);
+      inputs[2].addEventListener('input', onRotationOffset);
+      inputs[3].addEventListener('input', onBackgroundColor);
+      inputs[4].addEventListener('input', onStrokeColor);
+      inputs[5].addEventListener('input', onTextColor);
     </script>
   </head>
   <body>
     <repeat-pattern chars="T" num-prints="8"></repeat-pattern>
     <div class="knobs">
-      <input value="T">
-      <input type="range" min="2" max="29" value="8">
-      <input type="range" min="0" max="360" value="0">
-      <input type="color" value="#7acbf1">
-      <input type="color" value="#e3a7b2">
-      <input type="color" value="#ffffff">
+      <input value="T" />
+      <input type="range" min="2" max="29" value="8" />
+      <input type="range" min="0" max="360" value="0" />
+      <input type="color" value="#7acbf1" />
+      <input type="color" value="#e3a7b2" />
+      <input type="color" value="#ffffff" />
     </div>
   </body>
 </html>
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/00/before/repeat-pattern.ts b/packages/lit-dev-content/samples/tutorials/svg-templates/00/before/repeat-pattern.ts
index eef65b28d..df359b622 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/00/before/repeat-pattern.ts
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/00/before/repeat-pattern.ts
@@ -1,9 +1,8 @@
-import type {SVGTemplateResult} from "lit";
+import type {SVGTemplateResult} from 'lit';
 
 import {LitElement, html, svg, css} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 
-
 const themeCSS = css`
   .background {
     fill: var(--background-color, #000000);
@@ -98,23 +97,20 @@ const createRepeatPattern = () => svg`
 export class RepeatPattern extends LitElement {
   static styles = [svgCSS, themeCSS];
 
-  @property({type: String}) chars = "lit";
-  @property({type: Number, attribute: "num-prints"}) numPrints = 7;
+  @property({type: String}) chars = 'lit';
+  @property({type: Number, attribute: 'num-prints'}) numPrints = 7;
   @property({
     type: Number,
-    attribute: "rotation-offset",
-  }) rotationOffset = 0;
+    attribute: 'rotation-offset',
+  })
+  rotationOffset = 0;
 
   render() {
     return html`
       <svg>
         <defs>
-          ${createTileBoundary()}
-          ${createElement(this.chars)}
-          ${createMotif(
-            this.numPrints,
-            this.rotationOffset,
-          )}
+          ${createTileBoundary()} ${createElement(this.chars)}
+          ${createMotif(this.numPrints, this.rotationOffset)}
           ${createRepeatPattern()}
         </defs>
 
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/01/before/index.html b/packages/lit-dev-content/samples/tutorials/svg-templates/01/before/index.html
index 619946069..03a7590fe 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/01/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/01/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="repeat-pattern.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/01/before/repeat-pattern.ts b/packages/lit-dev-content/samples/tutorials/svg-templates/01/before/repeat-pattern.ts
index 483af10c3..7d7b92982 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/01/before/repeat-pattern.ts
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/01/before/repeat-pattern.ts
@@ -1,11 +1,11 @@
-import type { SVGTemplateResult } from "lit";
+import type {SVGTemplateResult} from 'lit';
 
-import { LitElement, html, svg } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import {LitElement, html, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
 @customElement('repeat-pattern')
-export class RepeatPattern extends LitElement {        
-    render() {
-        return html`<svg height="100%" width="100%"></svg>`;
-    }
-}
\ No newline at end of file
+export class RepeatPattern extends LitElement {
+  render() {
+    return html`<svg height="100%" width="100%"></svg>`;
+  }
+}
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/02/before/index.html b/packages/lit-dev-content/samples/tutorials/svg-templates/02/before/index.html
index 619946069..03a7590fe 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/02/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/02/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="repeat-pattern.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/02/before/repeat-pattern.ts b/packages/lit-dev-content/samples/tutorials/svg-templates/02/before/repeat-pattern.ts
index 5e9531398..46443a1ed 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/02/before/repeat-pattern.ts
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/02/before/repeat-pattern.ts
@@ -1,7 +1,7 @@
-import type { SVGTemplateResult } from "lit";
+import type {SVGTemplateResult} from 'lit';
 
-import { LitElement, html, svg } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import {LitElement, html, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
 const createElement = (chars: string): SVGTemplateResult => svg`
   <text
@@ -13,14 +13,12 @@ const createElement = (chars: string): SVGTemplateResult => svg`
 `;
 
 @customElement('repeat-pattern')
-export class RepeatPattern extends LitElement {    
-  @property({type: String}) chars = "lit";
-  
+export class RepeatPattern extends LitElement {
+  @property({type: String}) chars = 'lit';
+
   render() {
     return html`
-      <svg height="100%" width="100%">
-        ${createElement(this.chars)}
-      </svg>
+      <svg height="100%" width="100%">${createElement(this.chars)}</svg>
     `;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/03/before/index.html b/packages/lit-dev-content/samples/tutorials/svg-templates/03/before/index.html
index 619946069..03a7590fe 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/03/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/03/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="repeat-pattern.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/03/before/repeat-pattern.ts b/packages/lit-dev-content/samples/tutorials/svg-templates/03/before/repeat-pattern.ts
index 9bdf0ee1b..364aa1088 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/03/before/repeat-pattern.ts
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/03/before/repeat-pattern.ts
@@ -1,7 +1,7 @@
-import type { SVGTemplateResult } from "lit";
+import type {SVGTemplateResult} from 'lit';
 
-import { LitElement, html, svg } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import {LitElement, html, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
 const createElement = (chars: string): SVGTemplateResult => svg`
   <text
@@ -36,23 +36,19 @@ const createMotif = (
 
 @customElement('repeat-pattern')
 export class RepeatPattern extends LitElement {
-  @property({type: String}) chars = "lit";
-  @property({type: Number, attribute: "num-prints"}) numPrints = 7;
+  @property({type: String}) chars = 'lit';
+  @property({type: Number, attribute: 'num-prints'}) numPrints = 7;
   @property({
     type: Number,
-    attribute: "rotation-offset",
-  }) rotationOffset = 0;
+    attribute: 'rotation-offset',
+  })
+  rotationOffset = 0;
 
   render() {
     return html`
       <svg height="100%" width="100%">
-        <defs>
-          ${createElement(this.chars)}
-        </defs>
-        ${createMotif(
-          this.numPrints,
-          this.rotationOffset,
-        )}
+        <defs>${createElement(this.chars)}</defs>
+        ${createMotif(this.numPrints, this.rotationOffset)}
       </svg>
     `;
   }
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/04/before/index.html b/packages/lit-dev-content/samples/tutorials/svg-templates/04/before/index.html
index 619946069..03a7590fe 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/04/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/04/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="repeat-pattern.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/04/before/repeat-pattern.ts b/packages/lit-dev-content/samples/tutorials/svg-templates/04/before/repeat-pattern.ts
index 446479639..efd81bb97 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/04/before/repeat-pattern.ts
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/04/before/repeat-pattern.ts
@@ -1,4 +1,4 @@
-import type {SVGTemplateResult} from "lit";
+import type {SVGTemplateResult} from 'lit';
 
 import {LitElement, html, svg} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
@@ -58,26 +58,23 @@ const createTile = () => svg`
 
 @customElement('repeat-pattern')
 export class RepeatPattern extends LitElement {
-  @property({type: String}) chars = "lit";
-  @property({type: Number, attribute: "num-prints"}) numPrints = 7;
+  @property({type: String}) chars = 'lit';
+  @property({type: Number, attribute: 'num-prints'}) numPrints = 7;
   @property({
     type: Number,
-    attribute: "rotation-offset",
-  }) rotationOffset = 0;
+    attribute: 'rotation-offset',
+  })
+  rotationOffset = 0;
 
   render() {
     return html`
       <svg height="100%" width="100%">
         <defs>
-          ${createTileBoundary()}
-          ${createElement(this.chars)}
-          ${createMotif(
-            this.numPrints,
-            this.rotationOffset,
-          )}
+          ${createTileBoundary()} ${createElement(this.chars)}
+          ${createMotif(this.numPrints, this.rotationOffset)}
         </defs>
-            ${createTile()}
+        ${createTile()}
       </svg>
     `;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/05/after/index.html b/packages/lit-dev-content/samples/tutorials/svg-templates/05/after/index.html
index eca2d5cb3..5e0e1b944 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/05/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/05/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <style>
@@ -11,7 +11,7 @@
         height: 100vh;
         width: 100vw;
       }
-      
+
       :root {
         --background-color: #000000;
         --font-color: #ffffff;
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/05/after/repeat-pattern.ts b/packages/lit-dev-content/samples/tutorials/svg-templates/05/after/repeat-pattern.ts
index eef65b28d..df359b622 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/05/after/repeat-pattern.ts
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/05/after/repeat-pattern.ts
@@ -1,9 +1,8 @@
-import type {SVGTemplateResult} from "lit";
+import type {SVGTemplateResult} from 'lit';
 
 import {LitElement, html, svg, css} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 
-
 const themeCSS = css`
   .background {
     fill: var(--background-color, #000000);
@@ -98,23 +97,20 @@ const createRepeatPattern = () => svg`
 export class RepeatPattern extends LitElement {
   static styles = [svgCSS, themeCSS];
 
-  @property({type: String}) chars = "lit";
-  @property({type: Number, attribute: "num-prints"}) numPrints = 7;
+  @property({type: String}) chars = 'lit';
+  @property({type: Number, attribute: 'num-prints'}) numPrints = 7;
   @property({
     type: Number,
-    attribute: "rotation-offset",
-  }) rotationOffset = 0;
+    attribute: 'rotation-offset',
+  })
+  rotationOffset = 0;
 
   render() {
     return html`
       <svg>
         <defs>
-          ${createTileBoundary()}
-          ${createElement(this.chars)}
-          ${createMotif(
-            this.numPrints,
-            this.rotationOffset,
-          )}
+          ${createTileBoundary()} ${createElement(this.chars)}
+          ${createMotif(this.numPrints, this.rotationOffset)}
           ${createRepeatPattern()}
         </defs>
 
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/05/before/index.html b/packages/lit-dev-content/samples/tutorials/svg-templates/05/before/index.html
index 619946069..03a7590fe 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/05/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/05/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="repeat-pattern.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/05/before/repeat-pattern.ts b/packages/lit-dev-content/samples/tutorials/svg-templates/05/before/repeat-pattern.ts
index 7e0c14c2b..39d371817 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/05/before/repeat-pattern.ts
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/05/before/repeat-pattern.ts
@@ -1,4 +1,4 @@
-import type {SVGTemplateResult} from "lit";
+import type {SVGTemplateResult} from 'lit';
 
 import {LitElement, html, svg} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
@@ -70,26 +70,23 @@ const createRepeatPattern = () => svg`
 
 @customElement('repeat-pattern')
 export class RepeatPattern extends LitElement {
-  @property({type: String}) chars = "lit";
-  @property({type: Number, attribute: "num-prints"}) numPrints = 7;
+  @property({type: String}) chars = 'lit';
+  @property({type: Number, attribute: 'num-prints'}) numPrints = 7;
   @property({
     type: Number,
-    attribute: "rotation-offset",
-  }) rotationOffset = 0;
+    attribute: 'rotation-offset',
+  })
+  rotationOffset = 0;
 
   render() {
     return html`
       <svg height="100%" width="100%">
         <defs>
-          ${createTileBoundary()}
-          ${createElement(this.chars)}
-          ${createMotif(
-            this.numPrints,
-            this.rotationOffset,
-          )}
+          ${createTileBoundary()} ${createElement(this.chars)}
+          ${createMotif(this.numPrints, this.rotationOffset)}
           ${createRepeatPattern()}
         </defs>
-    
+
         <rect fill="#ffffff" height="100%" width="100%"></rect>
         <rect fill="url(#repeat-pattern)" height="100%" width="100%"></rect>
       </svg>
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/06/before/index.html b/packages/lit-dev-content/samples/tutorials/svg-templates/06/before/index.html
index b00d5ffda..56378f8b2 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/06/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/06/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <style>
@@ -28,12 +28,12 @@
     </style>
     <script type="module" src="repeat-pattern.js"></script>
     <script type="module">
-      const body = document.querySelector("body");
-      const pattern = document.querySelector("repeat-pattern");
+      const body = document.querySelector('body');
+      const pattern = document.querySelector('repeat-pattern');
 
       function onChars(e) {
         if (!(e.target instanceof HTMLInputElement)) return;
-        pattern.chars = e.target.value
+        pattern.chars = e.target.value;
       }
 
       function onNumPrints(e) {
@@ -48,37 +48,37 @@
 
       function onBackgroundColor(e) {
         if (!(e.target instanceof HTMLInputElement)) return;
-        body.style.setProperty("--background-color", e.target.value);
+        body.style.setProperty('--background-color', e.target.value);
       }
 
       function onStrokeColor(e) {
         if (!(e.target instanceof HTMLInputElement)) return;
-        body.style.setProperty("--stroke-color", e.target.value);
+        body.style.setProperty('--stroke-color', e.target.value);
       }
 
       function onTextColor(e) {
         if (!(e.target instanceof HTMLInputElement)) return;
-        body.style.setProperty("--font-color", e.target.value);
+        body.style.setProperty('--font-color', e.target.value);
       }
 
-      const inputs = document.querySelectorAll("input")
-      inputs[0].addEventListener("input", onChars);
-      inputs[1].addEventListener("input", onNumPrints);
-      inputs[2].addEventListener("input", onRotationOffset);
-      inputs[3].addEventListener("input", onBackgroundColor);
-      inputs[4].addEventListener("input", onStrokeColor);
-      inputs[5].addEventListener("input", onTextColor);
+      const inputs = document.querySelectorAll('input');
+      inputs[0].addEventListener('input', onChars);
+      inputs[1].addEventListener('input', onNumPrints);
+      inputs[2].addEventListener('input', onRotationOffset);
+      inputs[3].addEventListener('input', onBackgroundColor);
+      inputs[4].addEventListener('input', onStrokeColor);
+      inputs[5].addEventListener('input', onTextColor);
     </script>
   </head>
   <body>
     <repeat-pattern chars="lit" num-prints="7"></repeat-pattern>
     <div class="knobs">
-      <input value="lit">
-      <input type="range" min="2" max="29" value="8">
-      <input type="range" min="0" max="360" value="0">
-      <input type="color" value="#000000">
-      <input type="color" value="#7acbf1">
-      <input type="color" value="#ffffff">
+      <input value="lit" />
+      <input type="range" min="2" max="29" value="8" />
+      <input type="range" min="0" max="360" value="0" />
+      <input type="color" value="#000000" />
+      <input type="color" value="#7acbf1" />
+      <input type="color" value="#ffffff" />
     </div>
   </body>
 </html>
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/06/before/repeat-pattern.ts b/packages/lit-dev-content/samples/tutorials/svg-templates/06/before/repeat-pattern.ts
index eef65b28d..df359b622 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/06/before/repeat-pattern.ts
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/06/before/repeat-pattern.ts
@@ -1,9 +1,8 @@
-import type {SVGTemplateResult} from "lit";
+import type {SVGTemplateResult} from 'lit';
 
 import {LitElement, html, svg, css} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 
-
 const themeCSS = css`
   .background {
     fill: var(--background-color, #000000);
@@ -98,23 +97,20 @@ const createRepeatPattern = () => svg`
 export class RepeatPattern extends LitElement {
   static styles = [svgCSS, themeCSS];
 
-  @property({type: String}) chars = "lit";
-  @property({type: Number, attribute: "num-prints"}) numPrints = 7;
+  @property({type: String}) chars = 'lit';
+  @property({type: Number, attribute: 'num-prints'}) numPrints = 7;
   @property({
     type: Number,
-    attribute: "rotation-offset",
-  }) rotationOffset = 0;
+    attribute: 'rotation-offset',
+  })
+  rotationOffset = 0;
 
   render() {
     return html`
       <svg>
         <defs>
-          ${createTileBoundary()}
-          ${createElement(this.chars)}
-          ${createMotif(
-            this.numPrints,
-            this.rotationOffset,
-          )}
+          ${createTileBoundary()} ${createElement(this.chars)}
+          ${createMotif(this.numPrints, this.rotationOffset)}
           ${createRepeatPattern()}
         </defs>
 
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/description.md b/packages/lit-dev-content/samples/tutorials/svg-templates/description.md
index 98cad6731..49ab09346 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/description.md
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/description.md
@@ -1 +1 @@
-Learn how to create visually expressive components with Lit and SVG.
\ No newline at end of file
+Learn how to create visually expressive components with Lit and SVG.
diff --git a/packages/lit-dev-content/samples/tutorials/svg-templates/tutorial.json b/packages/lit-dev-content/samples/tutorials/svg-templates/tutorial.json
index 9e688ed1d..9fb338df5 100644
--- a/packages/lit-dev-content/samples/tutorials/svg-templates/tutorial.json
+++ b/packages/lit-dev-content/samples/tutorials/svg-templates/tutorial.json
@@ -37,4 +37,4 @@
       "noSolve": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/00/before/index.html b/packages/lit-dev-content/samples/tutorials/tooltip/00/before/index.html
index c5a6d7260..e2b82ac7a 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/00/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/00/before/index.html
@@ -1,12 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <style>
     body {
       font-family: sans-serif;
     }
   </style>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-  rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
   <script type="module" src="./my-content.js"></script>
 </head>
 <body>
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/00/before/my-content.ts b/packages/lit-dev-content/samples/tutorials/tooltip/00/before/my-content.ts
index 9776243c3..570d0e2c4 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/00/before/my-content.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/00/before/my-content.ts
@@ -20,7 +20,8 @@ export class MyContent extends LitElement {
       right: 16px;
     }
 
-    .container, #greeting {
+    .container,
+    #greeting {
       display: inline-flex;
       align-items: center;
     }
@@ -40,16 +41,21 @@ export class MyContent extends LitElement {
   render() {
     return html`
       <h3>Welcome</h3>
-      <p>Who are you?
+      <p>
+        Who are you?
         <span class="container">
-          <input .value=${this.name} @input=${this._inputChange}>
+          <input .value=${this.name} @input=${this._inputChange} />
           <span class="icon">help_outline</span>
         </span>
         <simple-tooltip>Enter your name...</simple-tooltip>
       </p>
       <p>
-        <span id="greeting">Hello, ${this.name}! <span class="icon">info_outline</span></span>
-        <simple-tooltip>${this.name}, there's coffee available in the lounge.</simple-tooltip>
+        <span id="greeting"
+          >Hello, ${this.name}! <span class="icon">info_outline</span></span
+        >
+        <simple-tooltip
+          >${this.name}, there's coffee available in the lounge.</simple-tooltip
+        >
       </p>
 
       <h3>Some boxes hinted with tooltips</h3>
@@ -59,7 +65,9 @@ export class MyContent extends LitElement {
         <div class="box">2</div>
         <simple-tooltip>This is box 2.</simple-tooltip>
         <div class="box right">3</div>
-        <simple-tooltip>This is box 3 and it's way off on its own.</simple-tooltip>
+        <simple-tooltip
+          >This is box 3 and it's way off on its own.</simple-tooltip
+        >
       </section>
     `;
   }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/00/before/project.json b/packages/lit-dev-content/samples/tutorials/tooltip/00/before/project.json
index eb2884d3e..a064d3e71 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/00/before/project.json
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/00/before/project.json
@@ -1,7 +1,7 @@
 {
   "extends": "../../tooltip-base.json",
   "files": {
-    "simple-tooltip.ts": {"hidden":true},
+    "simple-tooltip.ts": {"hidden": true},
     "my-content.ts": {"selected": true},
     "index.html": {"hidden": true}
   }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/00/before/simple-tooltip.ts b/packages/lit-dev-content/samples/tutorials/tooltip/00/before/simple-tooltip.ts
index a23eb80e5..82422fd33 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/00/before/simple-tooltip.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/00/before/simple-tooltip.ts
@@ -13,7 +13,6 @@ const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
 
 @customElement('simple-tooltip')
 export class SimpleTooltip extends LitElement {
-
   // Lazy creation
   static lazy(target: Element, callback: (target: SimpleTooltip) => void) {
     const createTooltip = () => {
@@ -22,11 +21,13 @@ export class SimpleTooltip extends LitElement {
       target.parentNode!.insertBefore(tooltip, target.nextSibling);
       tooltip.show();
       // We only need to create the tooltip once, so ignore all future events.
-      enterEvents.forEach(
-        (eventName) => target.removeEventListener(eventName, createTooltip));
+      enterEvents.forEach((eventName) =>
+        target.removeEventListener(eventName, createTooltip),
+      );
     };
-    enterEvents.forEach(
-      (eventName) => target.addEventListener(eventName, createTooltip));
+    enterEvents.forEach((eventName) =>
+      target.addEventListener(eventName, createTooltip),
+    );
   }
 
   static styles = css`
@@ -44,7 +45,7 @@ export class SimpleTooltip extends LitElement {
       opacity: 0;
       transform: scale(0.75);
       transition: opacity, transform;
-      transition-duration:  0.33s;
+      transition-duration: 0.33s;
     }
 
     :host([showing]) {
@@ -76,20 +77,24 @@ export class SimpleTooltip extends LitElement {
   }
 
   // Target for which to show tooltip
-  _target: Element|null = null;
+  _target: Element | null = null;
   get target() {
     return this._target;
   }
-  set target(target: Element|null) {
+  set target(target: Element | null) {
     // Remove events from existing target
     if (this.target) {
-      enterEvents.forEach(name => this.target!.removeEventListener(name, this.show));
-      leaveEvents.forEach(name => this.target!.removeEventListener(name, this.hide));
+      enterEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.show),
+      );
+      leaveEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.hide),
+      );
     }
     if (target) {
       // Add events to new target
-      enterEvents.forEach(name => target!.addEventListener(name, this.show));
-      leaveEvents.forEach(name => target!.addEventListener(name, this.hide));
+      enterEvents.forEach((name) => target!.addEventListener(name, this.show));
+      leaveEvents.forEach((name) => target!.addEventListener(name, this.hide));
     }
     this._target = target;
   }
@@ -101,9 +106,9 @@ export class SimpleTooltip extends LitElement {
       middleware: [
         offset(this.offset),
         shift(),
-        autoPlacement({allowedPlacements: ['top', 'bottom']})
+        autoPlacement({allowedPlacements: ['top', 'bottom']}),
       ],
-    }).then(({x, y}: {x: number, y: number}) => {
+    }).then(({x, y}: {x: number; y: number}) => {
       this.style.left = `${x}px`;
       this.style.top = `${y}px`;
     });
@@ -123,7 +128,6 @@ export class SimpleTooltip extends LitElement {
   render() {
     return html`<slot></slot>`;
   }
-
 }
 
 class TooltipDirective extends Directive {
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/01/before/index.html b/packages/lit-dev-content/samples/tutorials/tooltip/01/before/index.html
index c5a6d7260..e2b82ac7a 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/01/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/01/before/index.html
@@ -1,12 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <style>
     body {
       font-family: sans-serif;
     }
   </style>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-  rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
   <script type="module" src="./my-content.js"></script>
 </head>
 <body>
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/01/before/my-content.ts b/packages/lit-dev-content/samples/tutorials/tooltip/01/before/my-content.ts
index 9776243c3..570d0e2c4 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/01/before/my-content.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/01/before/my-content.ts
@@ -20,7 +20,8 @@ export class MyContent extends LitElement {
       right: 16px;
     }
 
-    .container, #greeting {
+    .container,
+    #greeting {
       display: inline-flex;
       align-items: center;
     }
@@ -40,16 +41,21 @@ export class MyContent extends LitElement {
   render() {
     return html`
       <h3>Welcome</h3>
-      <p>Who are you?
+      <p>
+        Who are you?
         <span class="container">
-          <input .value=${this.name} @input=${this._inputChange}>
+          <input .value=${this.name} @input=${this._inputChange} />
           <span class="icon">help_outline</span>
         </span>
         <simple-tooltip>Enter your name...</simple-tooltip>
       </p>
       <p>
-        <span id="greeting">Hello, ${this.name}! <span class="icon">info_outline</span></span>
-        <simple-tooltip>${this.name}, there's coffee available in the lounge.</simple-tooltip>
+        <span id="greeting"
+          >Hello, ${this.name}! <span class="icon">info_outline</span></span
+        >
+        <simple-tooltip
+          >${this.name}, there's coffee available in the lounge.</simple-tooltip
+        >
       </p>
 
       <h3>Some boxes hinted with tooltips</h3>
@@ -59,7 +65,9 @@ export class MyContent extends LitElement {
         <div class="box">2</div>
         <simple-tooltip>This is box 2.</simple-tooltip>
         <div class="box right">3</div>
-        <simple-tooltip>This is box 3 and it's way off on its own.</simple-tooltip>
+        <simple-tooltip
+          >This is box 3 and it's way off on its own.</simple-tooltip
+        >
       </section>
     `;
   }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/01/before/simple-tooltip.ts b/packages/lit-dev-content/samples/tutorials/tooltip/01/before/simple-tooltip.ts
index 4a0df9026..56357f900 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/01/before/simple-tooltip.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/01/before/simple-tooltip.ts
@@ -3,7 +3,6 @@ import {customElement} from 'lit/decorators.js';
 
 @customElement('simple-tooltip')
 export class SimpleTooltip extends LitElement {
-
   static styles = css`
     :host {
     }
@@ -12,6 +11,4 @@ export class SimpleTooltip extends LitElement {
   render() {
     return html`<slot></slot>`;
   }
-
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/02/before/index.html b/packages/lit-dev-content/samples/tutorials/tooltip/02/before/index.html
index c5a6d7260..e2b82ac7a 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/02/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/02/before/index.html
@@ -1,12 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <style>
     body {
       font-family: sans-serif;
     }
   </style>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-  rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
   <script type="module" src="./my-content.js"></script>
 </head>
 <body>
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/02/before/my-content.ts b/packages/lit-dev-content/samples/tutorials/tooltip/02/before/my-content.ts
index 9776243c3..570d0e2c4 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/02/before/my-content.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/02/before/my-content.ts
@@ -20,7 +20,8 @@ export class MyContent extends LitElement {
       right: 16px;
     }
 
-    .container, #greeting {
+    .container,
+    #greeting {
       display: inline-flex;
       align-items: center;
     }
@@ -40,16 +41,21 @@ export class MyContent extends LitElement {
   render() {
     return html`
       <h3>Welcome</h3>
-      <p>Who are you?
+      <p>
+        Who are you?
         <span class="container">
-          <input .value=${this.name} @input=${this._inputChange}>
+          <input .value=${this.name} @input=${this._inputChange} />
           <span class="icon">help_outline</span>
         </span>
         <simple-tooltip>Enter your name...</simple-tooltip>
       </p>
       <p>
-        <span id="greeting">Hello, ${this.name}! <span class="icon">info_outline</span></span>
-        <simple-tooltip>${this.name}, there's coffee available in the lounge.</simple-tooltip>
+        <span id="greeting"
+          >Hello, ${this.name}! <span class="icon">info_outline</span></span
+        >
+        <simple-tooltip
+          >${this.name}, there's coffee available in the lounge.</simple-tooltip
+        >
       </p>
 
       <h3>Some boxes hinted with tooltips</h3>
@@ -59,7 +65,9 @@ export class MyContent extends LitElement {
         <div class="box">2</div>
         <simple-tooltip>This is box 2.</simple-tooltip>
         <div class="box right">3</div>
-        <simple-tooltip>This is box 3 and it's way off on its own.</simple-tooltip>
+        <simple-tooltip
+          >This is box 3 and it's way off on its own.</simple-tooltip
+        >
       </section>
     `;
   }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/02/before/simple-tooltip.ts b/packages/lit-dev-content/samples/tutorials/tooltip/02/before/simple-tooltip.ts
index bd52dd99a..a04727343 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/02/before/simple-tooltip.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/02/before/simple-tooltip.ts
@@ -3,7 +3,6 @@ import {customElement} from 'lit/decorators.js';
 
 @customElement('simple-tooltip')
 export class SimpleTooltip extends LitElement {
-
   static styles = css`
     :host {
       display: inline-block;
@@ -19,5 +18,4 @@ export class SimpleTooltip extends LitElement {
   render() {
     return html`<slot></slot>`;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/03/before/index.html b/packages/lit-dev-content/samples/tutorials/tooltip/03/before/index.html
index c5a6d7260..e2b82ac7a 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/03/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/03/before/index.html
@@ -1,12 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <style>
     body {
       font-family: sans-serif;
     }
   </style>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-  rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
   <script type="module" src="./my-content.js"></script>
 </head>
 <body>
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/03/before/my-content.ts b/packages/lit-dev-content/samples/tutorials/tooltip/03/before/my-content.ts
index 9776243c3..570d0e2c4 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/03/before/my-content.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/03/before/my-content.ts
@@ -20,7 +20,8 @@ export class MyContent extends LitElement {
       right: 16px;
     }
 
-    .container, #greeting {
+    .container,
+    #greeting {
       display: inline-flex;
       align-items: center;
     }
@@ -40,16 +41,21 @@ export class MyContent extends LitElement {
   render() {
     return html`
       <h3>Welcome</h3>
-      <p>Who are you?
+      <p>
+        Who are you?
         <span class="container">
-          <input .value=${this.name} @input=${this._inputChange}>
+          <input .value=${this.name} @input=${this._inputChange} />
           <span class="icon">help_outline</span>
         </span>
         <simple-tooltip>Enter your name...</simple-tooltip>
       </p>
       <p>
-        <span id="greeting">Hello, ${this.name}! <span class="icon">info_outline</span></span>
-        <simple-tooltip>${this.name}, there's coffee available in the lounge.</simple-tooltip>
+        <span id="greeting"
+          >Hello, ${this.name}! <span class="icon">info_outline</span></span
+        >
+        <simple-tooltip
+          >${this.name}, there's coffee available in the lounge.</simple-tooltip
+        >
       </p>
 
       <h3>Some boxes hinted with tooltips</h3>
@@ -59,7 +65,9 @@ export class MyContent extends LitElement {
         <div class="box">2</div>
         <simple-tooltip>This is box 2.</simple-tooltip>
         <div class="box right">3</div>
-        <simple-tooltip>This is box 3 and it's way off on its own.</simple-tooltip>
+        <simple-tooltip
+          >This is box 3 and it's way off on its own.</simple-tooltip
+        >
       </section>
     `;
   }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/03/before/simple-tooltip.ts b/packages/lit-dev-content/samples/tutorials/tooltip/03/before/simple-tooltip.ts
index 248827219..23d7335f5 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/03/before/simple-tooltip.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/03/before/simple-tooltip.ts
@@ -3,7 +3,6 @@ import {customElement} from 'lit/decorators.js';
 
 @customElement('simple-tooltip')
 export class SimpleTooltip extends LitElement {
-
   static styles = css`
     :host {
       display: inline-block;
@@ -32,5 +31,4 @@ export class SimpleTooltip extends LitElement {
   hide = () => {
     this.style.display = 'none';
   };
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/04/before/index.html b/packages/lit-dev-content/samples/tutorials/tooltip/04/before/index.html
index c5a6d7260..e2b82ac7a 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/04/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/04/before/index.html
@@ -1,12 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <style>
     body {
       font-family: sans-serif;
     }
   </style>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-  rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
   <script type="module" src="./my-content.js"></script>
 </head>
 <body>
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/04/before/my-content.ts b/packages/lit-dev-content/samples/tutorials/tooltip/04/before/my-content.ts
index 9776243c3..570d0e2c4 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/04/before/my-content.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/04/before/my-content.ts
@@ -20,7 +20,8 @@ export class MyContent extends LitElement {
       right: 16px;
     }
 
-    .container, #greeting {
+    .container,
+    #greeting {
       display: inline-flex;
       align-items: center;
     }
@@ -40,16 +41,21 @@ export class MyContent extends LitElement {
   render() {
     return html`
       <h3>Welcome</h3>
-      <p>Who are you?
+      <p>
+        Who are you?
         <span class="container">
-          <input .value=${this.name} @input=${this._inputChange}>
+          <input .value=${this.name} @input=${this._inputChange} />
           <span class="icon">help_outline</span>
         </span>
         <simple-tooltip>Enter your name...</simple-tooltip>
       </p>
       <p>
-        <span id="greeting">Hello, ${this.name}! <span class="icon">info_outline</span></span>
-        <simple-tooltip>${this.name}, there's coffee available in the lounge.</simple-tooltip>
+        <span id="greeting"
+          >Hello, ${this.name}! <span class="icon">info_outline</span></span
+        >
+        <simple-tooltip
+          >${this.name}, there's coffee available in the lounge.</simple-tooltip
+        >
       </p>
 
       <h3>Some boxes hinted with tooltips</h3>
@@ -59,7 +65,9 @@ export class MyContent extends LitElement {
         <div class="box">2</div>
         <simple-tooltip>This is box 2.</simple-tooltip>
         <div class="box right">3</div>
-        <simple-tooltip>This is box 3 and it's way off on its own.</simple-tooltip>
+        <simple-tooltip
+          >This is box 3 and it's way off on its own.</simple-tooltip
+        >
       </section>
     `;
   }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/04/before/simple-tooltip.ts b/packages/lit-dev-content/samples/tutorials/tooltip/04/before/simple-tooltip.ts
index cf4b88b82..6cf9af361 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/04/before/simple-tooltip.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/04/before/simple-tooltip.ts
@@ -7,7 +7,6 @@ const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
 
 @customElement('simple-tooltip')
 export class SimpleTooltip extends LitElement {
-
   static styles = css`
     :host {
       display: inline-block;
@@ -21,21 +20,25 @@ export class SimpleTooltip extends LitElement {
   `;
 
   // Target for which to show tooltip
-  _target: Element|null = null;
+  _target: Element | null = null;
 
   get target() {
     return this._target;
   }
-  set target(target: Element|null) {
+  set target(target: Element | null) {
     // Remove events from existing target
     if (this.target) {
-      enterEvents.forEach(name => this.target!.removeEventListener(name, this.show));
-      leaveEvents.forEach(name => this.target!.removeEventListener(name, this.hide));
+      enterEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.show),
+      );
+      leaveEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.hide),
+      );
     }
     if (target) {
       // Add events to new target
-      enterEvents.forEach(name => target!.addEventListener(name, this.show));
-      leaveEvents.forEach(name => target!.addEventListener(name, this.hide));
+      enterEvents.forEach((name) => target!.addEventListener(name, this.show));
+      leaveEvents.forEach((name) => target!.addEventListener(name, this.hide));
     }
     this._target = target;
   }
@@ -58,5 +61,4 @@ export class SimpleTooltip extends LitElement {
   hide = () => {
     this.style.display = 'none';
   };
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/05/before/index.html b/packages/lit-dev-content/samples/tutorials/tooltip/05/before/index.html
index d48acadae..bf3abd69b 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/05/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/05/before/index.html
@@ -1,12 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <style>
     body {
       font-family: sans-serif;
     }
   </style>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-  rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
 
   <script type="module" src="./my-content.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/05/before/my-content.ts b/packages/lit-dev-content/samples/tutorials/tooltip/05/before/my-content.ts
index 9776243c3..570d0e2c4 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/05/before/my-content.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/05/before/my-content.ts
@@ -20,7 +20,8 @@ export class MyContent extends LitElement {
       right: 16px;
     }
 
-    .container, #greeting {
+    .container,
+    #greeting {
       display: inline-flex;
       align-items: center;
     }
@@ -40,16 +41,21 @@ export class MyContent extends LitElement {
   render() {
     return html`
       <h3>Welcome</h3>
-      <p>Who are you?
+      <p>
+        Who are you?
         <span class="container">
-          <input .value=${this.name} @input=${this._inputChange}>
+          <input .value=${this.name} @input=${this._inputChange} />
           <span class="icon">help_outline</span>
         </span>
         <simple-tooltip>Enter your name...</simple-tooltip>
       </p>
       <p>
-        <span id="greeting">Hello, ${this.name}! <span class="icon">info_outline</span></span>
-        <simple-tooltip>${this.name}, there's coffee available in the lounge.</simple-tooltip>
+        <span id="greeting"
+          >Hello, ${this.name}! <span class="icon">info_outline</span></span
+        >
+        <simple-tooltip
+          >${this.name}, there's coffee available in the lounge.</simple-tooltip
+        >
       </p>
 
       <h3>Some boxes hinted with tooltips</h3>
@@ -59,7 +65,9 @@ export class MyContent extends LitElement {
         <div class="box">2</div>
         <simple-tooltip>This is box 2.</simple-tooltip>
         <div class="box right">3</div>
-        <simple-tooltip>This is box 3 and it's way off on its own.</simple-tooltip>
+        <simple-tooltip
+          >This is box 3 and it's way off on its own.</simple-tooltip
+        >
       </section>
     `;
   }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/05/before/simple-tooltip.ts b/packages/lit-dev-content/samples/tutorials/tooltip/05/before/simple-tooltip.ts
index 1f9a3cea5..25a0518ce 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/05/before/simple-tooltip.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/05/before/simple-tooltip.ts
@@ -7,7 +7,6 @@ const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
 
 @customElement('simple-tooltip')
 export class SimpleTooltip extends LitElement {
-
   static styles = css`
     :host {
       display: inline-block;
@@ -24,25 +23,25 @@ export class SimpleTooltip extends LitElement {
   @property({type: Number})
   offset = 4;
 
-  _target: Element|null = null;
+  _target: Element | null = null;
 
   get target() {
     return this._target;
   }
-  set target(target: Element|null) {
+  set target(target: Element | null) {
     // Remove events from existing target
     if (this.target) {
-      enterEvents.forEach(name =>
-        this.target!.removeEventListener(name, this.show));
-      leaveEvents.forEach(name =>
-        this.target!.removeEventListener(name, this.hide));
+      enterEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.show),
+      );
+      leaveEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.hide),
+      );
     }
     // Add events to new target
     if (target) {
-      enterEvents.forEach(name =>
-        target!.addEventListener(name, this.show));
-      leaveEvents.forEach(name =>
-        target!.addEventListener(name, this.hide));
+      enterEvents.forEach((name) => target!.addEventListener(name, this.show));
+      leaveEvents.forEach((name) => target!.addEventListener(name, this.hide));
     }
     this._target = target;
   }
@@ -63,10 +62,9 @@ export class SimpleTooltip extends LitElement {
     const {x, y, height} = this.target!.getBoundingClientRect();
     this.style.left = `${x}px`;
     this.style.top = `${y + height + this.offset}px`;
-  }
+  };
 
   hide = () => {
     this.style.display = 'none';
   };
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/06/before/index.html b/packages/lit-dev-content/samples/tutorials/tooltip/06/before/index.html
index d48acadae..bf3abd69b 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/06/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/06/before/index.html
@@ -1,12 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <style>
     body {
       font-family: sans-serif;
     }
   </style>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-  rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
 
   <script type="module" src="./my-content.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/06/before/my-content.ts b/packages/lit-dev-content/samples/tutorials/tooltip/06/before/my-content.ts
index 9776243c3..570d0e2c4 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/06/before/my-content.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/06/before/my-content.ts
@@ -20,7 +20,8 @@ export class MyContent extends LitElement {
       right: 16px;
     }
 
-    .container, #greeting {
+    .container,
+    #greeting {
       display: inline-flex;
       align-items: center;
     }
@@ -40,16 +41,21 @@ export class MyContent extends LitElement {
   render() {
     return html`
       <h3>Welcome</h3>
-      <p>Who are you?
+      <p>
+        Who are you?
         <span class="container">
-          <input .value=${this.name} @input=${this._inputChange}>
+          <input .value=${this.name} @input=${this._inputChange} />
           <span class="icon">help_outline</span>
         </span>
         <simple-tooltip>Enter your name...</simple-tooltip>
       </p>
       <p>
-        <span id="greeting">Hello, ${this.name}! <span class="icon">info_outline</span></span>
-        <simple-tooltip>${this.name}, there's coffee available in the lounge.</simple-tooltip>
+        <span id="greeting"
+          >Hello, ${this.name}! <span class="icon">info_outline</span></span
+        >
+        <simple-tooltip
+          >${this.name}, there's coffee available in the lounge.</simple-tooltip
+        >
       </p>
 
       <h3>Some boxes hinted with tooltips</h3>
@@ -59,7 +65,9 @@ export class MyContent extends LitElement {
         <div class="box">2</div>
         <simple-tooltip>This is box 2.</simple-tooltip>
         <div class="box right">3</div>
-        <simple-tooltip>This is box 3 and it's way off on its own.</simple-tooltip>
+        <simple-tooltip
+          >This is box 3 and it's way off on its own.</simple-tooltip
+        >
       </section>
     `;
   }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/06/before/simple-tooltip.ts b/packages/lit-dev-content/samples/tutorials/tooltip/06/before/simple-tooltip.ts
index 7862e325c..12a79963a 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/06/before/simple-tooltip.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/06/before/simple-tooltip.ts
@@ -9,7 +9,6 @@ const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
 
 @customElement('simple-tooltip')
 export class SimpleTooltip extends LitElement {
-
   static styles = css`
     :host {
       display: inline-block;
@@ -25,25 +24,25 @@ export class SimpleTooltip extends LitElement {
   @property({type: Number})
   offset = 4;
 
-  _target: Element|null = null;
+  _target: Element | null = null;
 
   get target() {
     return this._target;
   }
-  set target(target: Element|null) {
+  set target(target: Element | null) {
     // Remove events from existing target
     if (this.target) {
-      enterEvents.forEach(name =>
-        this.target!.removeEventListener(name, this.show));
-      leaveEvents.forEach(name =>
-        this.target!.removeEventListener(name, this.hide));
+      enterEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.show),
+      );
+      leaveEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.hide),
+      );
     }
     // Add events to new target
     if (target) {
-      enterEvents.forEach(name =>
-        target!.addEventListener(name, this.show));
-      leaveEvents.forEach(name =>
-        target!.addEventListener(name, this.hide));
+      enterEvents.forEach((name) => target!.addEventListener(name, this.show));
+      leaveEvents.forEach((name) => target!.addEventListener(name, this.hide));
     }
     this._target = target;
   }
@@ -66,16 +65,15 @@ export class SimpleTooltip extends LitElement {
       middleware: [
         offset(this.offset),
         shift(),
-        autoPlacement({allowedPlacements: ['top', 'bottom']})
+        autoPlacement({allowedPlacements: ['top', 'bottom']}),
       ],
-    }).then(({x, y}: {x: number, y: number}) => {
+    }).then(({x, y}: {x: number; y: number}) => {
       this.style.left = `${x}px`;
       this.style.top = `${y}px`;
     });
-  }
+  };
 
   hide = () => {
     this.style.display = 'none';
   };
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/07/after/index.html b/packages/lit-dev-content/samples/tutorials/tooltip/07/after/index.html
index d48acadae..bf3abd69b 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/07/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/07/after/index.html
@@ -1,12 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <style>
     body {
       font-family: sans-serif;
     }
   </style>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-  rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
 
   <script type="module" src="./my-content.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/07/after/my-content.ts b/packages/lit-dev-content/samples/tutorials/tooltip/07/after/my-content.ts
index a5ba6dd9c..ba384043a 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/07/after/my-content.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/07/after/my-content.ts
@@ -21,7 +21,8 @@ export class MyContent extends LitElement {
       right: 16px;
     }
 
-    .container, #greeting {
+    .container,
+    #greeting {
       display: inline-flex;
       align-items: center;
     }
@@ -32,7 +33,6 @@ export class MyContent extends LitElement {
       margin: 0 0.25em;
       cursor: pointer;
     }
-
   `;
 
   @property()
@@ -42,15 +42,18 @@ export class MyContent extends LitElement {
   render() {
     return html`
       <h3>Welcome</h3>
-      <p>Who are you?
+      <p>
+        Who are you?
         <span class="container">
-          <input .value=${this.name} @input=${this._inputChange}>
+          <input .value=${this.name} @input=${this._inputChange} />
           <span class="icon">help_outline</span>
         </span>
         <simple-tooltip>Enter your name...</simple-tooltip>
       </p>
       <p>
-        <span id="greeting">Hello, ${this.name}! <span class="icon">info_outline</span></span>
+        <span id="greeting"
+          >Hello, ${this.name}! <span class="icon">info_outline</span></span
+        >
       </p>
 
       <h3>Some boxes hinted with tooltips</h3>
@@ -60,7 +63,9 @@ export class MyContent extends LitElement {
         <div class="box">2</div>
         <simple-tooltip>This is box 2.</simple-tooltip>
         <div class="box right">3</div>
-        <simple-tooltip>This is box 3 and it's way off on its own.</simple-tooltip>
+        <simple-tooltip
+          >This is box 3 and it's way off on its own.</simple-tooltip
+        >
       </section>
     `;
   }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/07/after/simple-tooltip.ts b/packages/lit-dev-content/samples/tutorials/tooltip/07/after/simple-tooltip.ts
index 2ca0969f5..94ca53fb7 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/07/after/simple-tooltip.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/07/after/simple-tooltip.ts
@@ -8,7 +8,6 @@ const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
 
 @customElement('simple-tooltip')
 export class SimpleTooltip extends LitElement {
-
   // Lazy creation
   static lazy(target: Element, callback: (target: SimpleTooltip) => void) {
     const createTooltip = () => {
@@ -17,11 +16,13 @@ export class SimpleTooltip extends LitElement {
       target.parentNode!.insertBefore(tooltip, target.nextSibling);
       tooltip.show();
       // We only need to create the tooltip once, so ignore all future events.
-      enterEvents.forEach(
-        (eventName) => target.removeEventListener(eventName, createTooltip));
+      enterEvents.forEach((eventName) =>
+        target.removeEventListener(eventName, createTooltip),
+      );
     };
-    enterEvents.forEach(
-      (eventName) => target.addEventListener(eventName, createTooltip));
+    enterEvents.forEach((eventName) =>
+      target.addEventListener(eventName, createTooltip),
+    );
   }
 
   static styles = css`
@@ -37,7 +38,7 @@ export class SimpleTooltip extends LitElement {
       opacity: 0;
       transform: scale(0.75);
       transition: opacity, transform;
-      transition-duration:  0.33s;
+      transition-duration: 0.33s;
     }
 
     :host([showing]) {
@@ -53,25 +54,25 @@ export class SimpleTooltip extends LitElement {
   @property({reflect: true, type: Boolean})
   showing = false;
 
-  _target: Element|null = null;
+  _target: Element | null = null;
 
   get target() {
     return this._target;
   }
-  set target(target: Element|null) {
+  set target(target: Element | null) {
     // Remove events from existing target
     if (this.target) {
-      enterEvents.forEach(name =>
-        this.target!.removeEventListener(name, this.show));
-      leaveEvents.forEach(name =>
-        this.target!.removeEventListener(name, this.hide));
+      enterEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.show),
+      );
+      leaveEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.hide),
+      );
     }
     // Add events to new target
     if (target) {
-      enterEvents.forEach(name =>
-        target!.addEventListener(name, this.show));
-      leaveEvents.forEach(name =>
-        target!.addEventListener(name, this.hide));
+      enterEvents.forEach((name) => target!.addEventListener(name, this.show));
+      leaveEvents.forEach((name) => target!.addEventListener(name, this.hide));
     }
     this._target = target;
   }
@@ -99,9 +100,9 @@ export class SimpleTooltip extends LitElement {
       middleware: [
         offset(this.offset),
         shift(),
-        autoPlacement({allowedPlacements: ['top', 'bottom']})
+        autoPlacement({allowedPlacements: ['top', 'bottom']}),
       ],
-    }).then(({x, y}: {x: number, y: number}) => {
+    }).then(({x, y}: {x: number; y: number}) => {
       this.style.left = `${x}px`;
       this.style.top = `${y}px`;
     });
@@ -117,11 +118,10 @@ export class SimpleTooltip extends LitElement {
       this.style.display = 'none';
     }
   };
-
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "simple-tooltip": SimpleTooltip;
+    'simple-tooltip': SimpleTooltip;
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/07/before/index.html b/packages/lit-dev-content/samples/tutorials/tooltip/07/before/index.html
index d48acadae..bf3abd69b 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/07/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/07/before/index.html
@@ -1,12 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <style>
     body {
       font-family: sans-serif;
     }
   </style>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-  rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
 
   <script type="module" src="./my-content.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/07/before/my-content.ts b/packages/lit-dev-content/samples/tutorials/tooltip/07/before/my-content.ts
index 9776243c3..570d0e2c4 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/07/before/my-content.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/07/before/my-content.ts
@@ -20,7 +20,8 @@ export class MyContent extends LitElement {
       right: 16px;
     }
 
-    .container, #greeting {
+    .container,
+    #greeting {
       display: inline-flex;
       align-items: center;
     }
@@ -40,16 +41,21 @@ export class MyContent extends LitElement {
   render() {
     return html`
       <h3>Welcome</h3>
-      <p>Who are you?
+      <p>
+        Who are you?
         <span class="container">
-          <input .value=${this.name} @input=${this._inputChange}>
+          <input .value=${this.name} @input=${this._inputChange} />
           <span class="icon">help_outline</span>
         </span>
         <simple-tooltip>Enter your name...</simple-tooltip>
       </p>
       <p>
-        <span id="greeting">Hello, ${this.name}! <span class="icon">info_outline</span></span>
-        <simple-tooltip>${this.name}, there's coffee available in the lounge.</simple-tooltip>
+        <span id="greeting"
+          >Hello, ${this.name}! <span class="icon">info_outline</span></span
+        >
+        <simple-tooltip
+          >${this.name}, there's coffee available in the lounge.</simple-tooltip
+        >
       </p>
 
       <h3>Some boxes hinted with tooltips</h3>
@@ -59,7 +65,9 @@ export class MyContent extends LitElement {
         <div class="box">2</div>
         <simple-tooltip>This is box 2.</simple-tooltip>
         <div class="box right">3</div>
-        <simple-tooltip>This is box 3 and it's way off on its own.</simple-tooltip>
+        <simple-tooltip
+          >This is box 3 and it's way off on its own.</simple-tooltip
+        >
       </section>
     `;
   }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/07/before/simple-tooltip.ts b/packages/lit-dev-content/samples/tutorials/tooltip/07/before/simple-tooltip.ts
index 11366a90e..b3382360e 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/07/before/simple-tooltip.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/07/before/simple-tooltip.ts
@@ -8,7 +8,6 @@ const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
 
 @customElement('simple-tooltip')
 export class SimpleTooltip extends LitElement {
-
   static styles = css`
     :host {
       display: inline-block;
@@ -22,7 +21,7 @@ export class SimpleTooltip extends LitElement {
       opacity: 0;
       transform: scale(0.75);
       transition: opacity, transform;
-      transition-duration:  0.33s;
+      transition-duration: 0.33s;
     }
 
     :host([showing]) {
@@ -38,25 +37,25 @@ export class SimpleTooltip extends LitElement {
   @property({reflect: true, type: Boolean})
   showing = false;
 
-  _target: Element|null = null;
+  _target: Element | null = null;
 
   get target() {
     return this._target;
   }
-  set target(target: Element|null) {
+  set target(target: Element | null) {
     // Remove events from existing target
     if (this.target) {
-      enterEvents.forEach(name =>
-        this.target!.removeEventListener(name, this.show));
-      leaveEvents.forEach(name =>
-        this.target!.removeEventListener(name, this.hide));
+      enterEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.show),
+      );
+      leaveEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.hide),
+      );
     }
     // Add events to new target
     if (target) {
-      enterEvents.forEach(name =>
-        target!.addEventListener(name, this.show));
-      leaveEvents.forEach(name =>
-        target!.addEventListener(name, this.hide));
+      enterEvents.forEach((name) => target!.addEventListener(name, this.show));
+      leaveEvents.forEach((name) => target!.addEventListener(name, this.hide));
     }
     this._target = target;
   }
@@ -84,9 +83,9 @@ export class SimpleTooltip extends LitElement {
       middleware: [
         offset(this.offset),
         shift(),
-        autoPlacement({allowedPlacements: ['top', 'bottom']})
+        autoPlacement({allowedPlacements: ['top', 'bottom']}),
       ],
-    }).then(({x, y}: {x: number, y: number}) => {
+    }).then(({x, y}: {x: number; y: number}) => {
       this.style.left = `${x}px`;
       this.style.top = `${y}px`;
     });
@@ -102,11 +101,10 @@ export class SimpleTooltip extends LitElement {
       this.style.display = 'none';
     }
   };
-
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "simple-tooltip": SimpleTooltip;
+    'simple-tooltip': SimpleTooltip;
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/08/after/index.html b/packages/lit-dev-content/samples/tutorials/tooltip/08/after/index.html
index d48acadae..bf3abd69b 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/08/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/08/after/index.html
@@ -1,12 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <style>
     body {
       font-family: sans-serif;
     }
   </style>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-  rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
 
   <script type="module" src="./my-content.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/08/after/my-content.ts b/packages/lit-dev-content/samples/tutorials/tooltip/08/after/my-content.ts
index 7d6d487a1..701ac1880 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/08/after/my-content.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/08/after/my-content.ts
@@ -21,7 +21,8 @@ export class MyContent extends LitElement {
       right: 16px;
     }
 
-    .container, #greeting {
+    .container,
+    #greeting {
       display: inline-flex;
       align-items: center;
     }
@@ -32,7 +33,6 @@ export class MyContent extends LitElement {
       margin: 0 0.25em;
       cursor: pointer;
     }
-
   `;
 
   @property()
@@ -42,15 +42,22 @@ export class MyContent extends LitElement {
   render() {
     return html`
       <h3>Welcome</h3>
-      <p>Who are you?
+      <p>
+        Who are you?
         <span class="container">
-          <input .value=${this.name} @input=${this._inputChange}>
+          <input .value=${this.name} @input=${this._inputChange} />
           <span class="icon">help_outline</span>
         </span>
         <simple-tooltip>Enter your name...</simple-tooltip>
       </p>
       <p>
-        <span id="greeting" ${tooltip(html`${this.name}, there's coffee available in the lounge.`)}>Hello, ${this.name}! <span class="icon">info_outline</span></span>
+        <span
+          id="greeting"
+          ${tooltip(
+            html`${this.name}, there's coffee available in the lounge.`,
+          )}
+          >Hello, ${this.name}! <span class="icon">info_outline</span></span
+        >
       </p>
 
       <h3>Some boxes hinted with tooltips</h3>
@@ -60,7 +67,9 @@ export class MyContent extends LitElement {
         <div class="box">2</div>
         <simple-tooltip>This is box 2.</simple-tooltip>
         <div class="box right">3</div>
-        <simple-tooltip>This is box 3 and it's way off on its own.</simple-tooltip>
+        <simple-tooltip
+          >This is box 3 and it's way off on its own.</simple-tooltip
+        >
       </section>
     `;
   }
@@ -68,5 +77,4 @@ export class MyContent extends LitElement {
   private _inputChange(e: InputEvent) {
     this.name = (e.target as HTMLInputElement).value;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/08/after/simple-tooltip.ts b/packages/lit-dev-content/samples/tutorials/tooltip/08/after/simple-tooltip.ts
index 13a1311ce..f6d4e14b6 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/08/after/simple-tooltip.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/08/after/simple-tooltip.ts
@@ -10,7 +10,6 @@ const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
 
 @customElement('simple-tooltip')
 export class SimpleTooltip extends LitElement {
-
   // Lazy creation
   static lazy(target: Element, callback: (target: SimpleTooltip) => void) {
     const createTooltip = () => {
@@ -19,11 +18,13 @@ export class SimpleTooltip extends LitElement {
       target.parentNode!.insertBefore(tooltip, target.nextSibling);
       tooltip.show();
       // We only need to create the tooltip once, so ignore all future events.
-      enterEvents.forEach(
-        (eventName) => target.removeEventListener(eventName, createTooltip));
+      enterEvents.forEach((eventName) =>
+        target.removeEventListener(eventName, createTooltip),
+      );
     };
-    enterEvents.forEach(
-      (eventName) => target.addEventListener(eventName, createTooltip));
+    enterEvents.forEach((eventName) =>
+      target.addEventListener(eventName, createTooltip),
+    );
   }
 
   static styles = css`
@@ -39,7 +40,7 @@ export class SimpleTooltip extends LitElement {
       opacity: 0;
       transform: scale(0.75);
       transition: opacity, transform;
-      transition-duration:  0.33s;
+      transition-duration: 0.33s;
     }
 
     :host([showing]) {
@@ -55,25 +56,25 @@ export class SimpleTooltip extends LitElement {
   @property({reflect: true, type: Boolean})
   showing = false;
 
-  _target: Element|null = null;
+  _target: Element | null = null;
 
   get target() {
     return this._target;
   }
-  set target(target: Element|null) {
+  set target(target: Element | null) {
     // Remove events from existing target
     if (this.target) {
-      enterEvents.forEach(name =>
-        this.target!.removeEventListener(name, this.show));
-      leaveEvents.forEach(name =>
-        this.target!.removeEventListener(name, this.hide));
+      enterEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.show),
+      );
+      leaveEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.hide),
+      );
     }
     // Add events to new target
     if (target) {
-      enterEvents.forEach(name =>
-        target!.addEventListener(name, this.show));
-      leaveEvents.forEach(name =>
-        target!.addEventListener(name, this.hide));
+      enterEvents.forEach((name) => target!.addEventListener(name, this.show));
+      leaveEvents.forEach((name) => target!.addEventListener(name, this.hide));
     }
     this._target = target;
   }
@@ -101,9 +102,9 @@ export class SimpleTooltip extends LitElement {
       middleware: [
         offset(this.offset),
         shift(),
-        autoPlacement({allowedPlacements: ['top', 'bottom']})
+        autoPlacement({allowedPlacements: ['top', 'bottom']}),
       ],
-    }).then(({x, y}: {x: number, y: number}) => {
+    }).then(({x, y}: {x: number; y: number}) => {
       this.style.left = `${x}px`;
       this.style.top = `${y}px`;
     });
@@ -119,7 +120,6 @@ export class SimpleTooltip extends LitElement {
       this.style.display = 'none';
     }
   };
-
 }
 
 /* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/08/before/index.html b/packages/lit-dev-content/samples/tutorials/tooltip/08/before/index.html
index d48acadae..bf3abd69b 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/08/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/08/before/index.html
@@ -1,12 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <style>
     body {
       font-family: sans-serif;
     }
   </style>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-  rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
 
   <script type="module" src="./my-content.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/08/before/my-content.ts b/packages/lit-dev-content/samples/tutorials/tooltip/08/before/my-content.ts
index 730cc6ea2..1b417128b 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/08/before/my-content.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/08/before/my-content.ts
@@ -21,7 +21,8 @@ export class MyContent extends LitElement {
       right: 16px;
     }
 
-    .container, #greeting {
+    .container,
+    #greeting {
       display: inline-flex;
       align-items: center;
     }
@@ -32,7 +33,6 @@ export class MyContent extends LitElement {
       margin: 0 0.25em;
       cursor: pointer;
     }
-
   `;
 
   @property()
@@ -42,15 +42,18 @@ export class MyContent extends LitElement {
   render() {
     return html`
       <h3>Welcome</h3>
-      <p>Who are you?
+      <p>
+        Who are you?
         <span class="container">
-          <input .value=${this.name} @input=${this._inputChange}>
+          <input .value=${this.name} @input=${this._inputChange} />
           <span class="icon">help_outline</span>
         </span>
         <simple-tooltip>Enter your name...</simple-tooltip>
       </p>
       <p>
-        <span id="greeting">Hello, ${this.name}! <span class="icon">info_outline</span></span>
+        <span id="greeting"
+          >Hello, ${this.name}! <span class="icon">info_outline</span></span
+        >
       </p>
 
       <h3>Some boxes hinted with tooltips</h3>
@@ -60,7 +63,9 @@ export class MyContent extends LitElement {
         <div class="box">2</div>
         <simple-tooltip>This is box 2.</simple-tooltip>
         <div class="box right">3</div>
-        <simple-tooltip>This is box 3 and it's way off on its own.</simple-tooltip>
+        <simple-tooltip
+          >This is box 3 and it's way off on its own.</simple-tooltip
+        >
       </section>
     `;
   }
@@ -68,5 +73,4 @@ export class MyContent extends LitElement {
   private _inputChange(e: InputEvent) {
     this.name = (e.target as HTMLInputElement).value;
   }
-
 }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/08/before/simple-tooltip.ts b/packages/lit-dev-content/samples/tutorials/tooltip/08/before/simple-tooltip.ts
index 5eac0186e..c825a9bef 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/08/before/simple-tooltip.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/08/before/simple-tooltip.ts
@@ -10,7 +10,6 @@ const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
 
 @customElement('simple-tooltip')
 export class SimpleTooltip extends LitElement {
-
   // Lazy creation
   static lazy(target: Element, callback: (target: SimpleTooltip) => void) {
     const createTooltip = () => {
@@ -19,11 +18,13 @@ export class SimpleTooltip extends LitElement {
       target.parentNode!.insertBefore(tooltip, target.nextSibling);
       tooltip.show();
       // We only need to create the tooltip once, so ignore all future events.
-      enterEvents.forEach(
-        (eventName) => target.removeEventListener(eventName, createTooltip));
+      enterEvents.forEach((eventName) =>
+        target.removeEventListener(eventName, createTooltip),
+      );
     };
-    enterEvents.forEach(
-      (eventName) => target.addEventListener(eventName, createTooltip));
+    enterEvents.forEach((eventName) =>
+      target.addEventListener(eventName, createTooltip),
+    );
   }
 
   static styles = css`
@@ -39,7 +40,7 @@ export class SimpleTooltip extends LitElement {
       opacity: 0;
       transform: scale(0.75);
       transition: opacity, transform;
-      transition-duration:  0.33s;
+      transition-duration: 0.33s;
     }
 
     :host([showing]) {
@@ -55,25 +56,25 @@ export class SimpleTooltip extends LitElement {
   @property({reflect: true, type: Boolean})
   showing = false;
 
-  _target: Element|null = null;
+  _target: Element | null = null;
 
   get target() {
     return this._target;
   }
-  set target(target: Element|null) {
+  set target(target: Element | null) {
     // Remove events from existing target
     if (this.target) {
-      enterEvents.forEach(name =>
-        this.target!.removeEventListener(name, this.show));
-      leaveEvents.forEach(name =>
-        this.target!.removeEventListener(name, this.hide));
+      enterEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.show),
+      );
+      leaveEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.hide),
+      );
     }
     // Add events to new target
     if (target) {
-      enterEvents.forEach(name =>
-        target!.addEventListener(name, this.show));
-      leaveEvents.forEach(name =>
-        target!.addEventListener(name, this.hide));
+      enterEvents.forEach((name) => target!.addEventListener(name, this.show));
+      leaveEvents.forEach((name) => target!.addEventListener(name, this.hide));
     }
     this._target = target;
   }
@@ -101,9 +102,9 @@ export class SimpleTooltip extends LitElement {
       middleware: [
         offset(this.offset),
         shift(),
-        autoPlacement({allowedPlacements: ['top', 'bottom']})
+        autoPlacement({allowedPlacements: ['top', 'bottom']}),
       ],
-    }).then(({x, y}: {x: number, y: number}) => {
+    }).then(({x, y}: {x: number; y: number}) => {
       this.style.left = `${x}px`;
       this.style.top = `${y}px`;
     });
@@ -119,7 +120,6 @@ export class SimpleTooltip extends LitElement {
       this.style.display = 'none';
     }
   };
-
 }
 
 /* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/09/before/index.html b/packages/lit-dev-content/samples/tutorials/tooltip/09/before/index.html
index d48acadae..bf3abd69b 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/09/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/09/before/index.html
@@ -1,12 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <style>
     body {
       font-family: sans-serif;
     }
   </style>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-  rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
 
   <script type="module" src="./my-content.js"></script>
 </head>
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/09/before/my-content.ts b/packages/lit-dev-content/samples/tutorials/tooltip/09/before/my-content.ts
index 9776243c3..570d0e2c4 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/09/before/my-content.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/09/before/my-content.ts
@@ -20,7 +20,8 @@ export class MyContent extends LitElement {
       right: 16px;
     }
 
-    .container, #greeting {
+    .container,
+    #greeting {
       display: inline-flex;
       align-items: center;
     }
@@ -40,16 +41,21 @@ export class MyContent extends LitElement {
   render() {
     return html`
       <h3>Welcome</h3>
-      <p>Who are you?
+      <p>
+        Who are you?
         <span class="container">
-          <input .value=${this.name} @input=${this._inputChange}>
+          <input .value=${this.name} @input=${this._inputChange} />
           <span class="icon">help_outline</span>
         </span>
         <simple-tooltip>Enter your name...</simple-tooltip>
       </p>
       <p>
-        <span id="greeting">Hello, ${this.name}! <span class="icon">info_outline</span></span>
-        <simple-tooltip>${this.name}, there's coffee available in the lounge.</simple-tooltip>
+        <span id="greeting"
+          >Hello, ${this.name}! <span class="icon">info_outline</span></span
+        >
+        <simple-tooltip
+          >${this.name}, there's coffee available in the lounge.</simple-tooltip
+        >
       </p>
 
       <h3>Some boxes hinted with tooltips</h3>
@@ -59,7 +65,9 @@ export class MyContent extends LitElement {
         <div class="box">2</div>
         <simple-tooltip>This is box 2.</simple-tooltip>
         <div class="box right">3</div>
-        <simple-tooltip>This is box 3 and it's way off on its own.</simple-tooltip>
+        <simple-tooltip
+          >This is box 3 and it's way off on its own.</simple-tooltip
+        >
       </section>
     `;
   }
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/09/before/simple-tooltip.ts b/packages/lit-dev-content/samples/tutorials/tooltip/09/before/simple-tooltip.ts
index ae39f226d..d7bb86dae 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/09/before/simple-tooltip.ts
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/09/before/simple-tooltip.ts
@@ -12,7 +12,6 @@ const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
 
 @customElement('simple-tooltip')
 export class SimpleTooltip extends LitElement {
-
   // Lazy creation
   static lazy(target: Element, callback: (target: SimpleTooltip) => void) {
     const createTooltip = () => {
@@ -21,11 +20,13 @@ export class SimpleTooltip extends LitElement {
       target.parentNode!.insertBefore(tooltip, target.nextSibling);
       tooltip.show();
       // We only need to create the tooltip once, so ignore all future events.
-      enterEvents.forEach(
-        (eventName) => target.removeEventListener(eventName, createTooltip));
+      enterEvents.forEach((eventName) =>
+        target.removeEventListener(eventName, createTooltip),
+      );
     };
-    enterEvents.forEach(
-      (eventName) => target.addEventListener(eventName, createTooltip));
+    enterEvents.forEach((eventName) =>
+      target.addEventListener(eventName, createTooltip),
+    );
   }
 
   static styles = css`
@@ -43,7 +44,7 @@ export class SimpleTooltip extends LitElement {
       opacity: 0;
       transform: scale(0.75);
       transition: opacity, transform;
-      transition-duration:  0.33s;
+      transition-duration: 0.33s;
     }
 
     :host([showing]) {
@@ -75,20 +76,24 @@ export class SimpleTooltip extends LitElement {
   }
 
   // Target for which to show tooltip
-  _target: Element|null = null;
+  _target: Element | null = null;
   get target() {
     return this._target;
   }
-  set target(target: Element|null) {
+  set target(target: Element | null) {
     // Remove events from existing target
     if (this.target) {
-      enterEvents.forEach(name => this.target!.removeEventListener(name, this.show));
-      leaveEvents.forEach(name => this.target!.removeEventListener(name, this.hide));
+      enterEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.show),
+      );
+      leaveEvents.forEach((name) =>
+        this.target!.removeEventListener(name, this.hide),
+      );
     }
     if (target) {
       // Add events to new target
-      enterEvents.forEach(name => target!.addEventListener(name, this.show));
-      leaveEvents.forEach(name => target!.addEventListener(name, this.hide));
+      enterEvents.forEach((name) => target!.addEventListener(name, this.show));
+      leaveEvents.forEach((name) => target!.addEventListener(name, this.hide));
     }
     this._target = target;
   }
@@ -100,9 +105,9 @@ export class SimpleTooltip extends LitElement {
       middleware: [
         offset(this.offset),
         shift(),
-        autoPlacement({allowedPlacements: ['top', 'bottom']})
+        autoPlacement({allowedPlacements: ['top', 'bottom']}),
       ],
-    }).then(({x, y}: {x: number, y: number}) => {
+    }).then(({x, y}: {x: number; y: number}) => {
       this.style.left = `${x}px`;
       this.style.top = `${y}px`;
     });
@@ -122,7 +127,6 @@ export class SimpleTooltip extends LitElement {
   render() {
     return html`<slot></slot>`;
   }
-
 }
 
 class TooltipDirective extends Directive {
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/tooltip-base.json b/packages/lit-dev-content/samples/tutorials/tooltip/tooltip-base.json
index cd5c91364..2b9272bbc 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/tooltip-base.json
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/tooltip-base.json
@@ -1,6 +1,9 @@
 {
-    "extends": "/samples/base.json",
-    "files": {
-      "package.json": {"hidden": true, "content": "{\"dependencies\":{\"@floating-ui/dom\":\"^0.5.0\"}}"}
+  "extends": "/samples/base.json",
+  "files": {
+    "package.json": {
+      "hidden": true,
+      "content": "{\"dependencies\":{\"@floating-ui/dom\":\"^0.5.0\"}}"
     }
   }
+}
diff --git a/packages/lit-dev-content/samples/tutorials/tooltip/tutorial.json b/packages/lit-dev-content/samples/tutorials/tooltip/tutorial.json
index 70f818e17..ee9d6ddab 100644
--- a/packages/lit-dev-content/samples/tutorials/tooltip/tutorial.json
+++ b/packages/lit-dev-content/samples/tutorials/tooltip/tutorial.json
@@ -41,4 +41,4 @@
       "noSolve": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/00/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/00/before/index.html
index 1756d3695..6b10ad860 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/00/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/00/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script src="./rating-element.js" type="module"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/00/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/00/before/rating-element.ts
index 1c1d38d35..ed8ca15eb 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/00/before/rating-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/00/before/rating-element.ts
@@ -15,11 +15,11 @@ class RatingElement extends LitElement {
       cursor: pointer;
     }
 
-    :host([vote=up]) .thumb_up {
+    :host([vote='up']) .thumb_up {
       fill: green;
     }
 
-    :host([vote=down]) .thumb_down {
+    :host([vote='down']) .thumb_down {
       fill: red;
     }
   `;
@@ -28,7 +28,7 @@ class RatingElement extends LitElement {
   rating = 0;
 
   @property({type: String, reflect: true})
-  vote: 'up'|'down'|null = null;
+  vote: 'up' | 'down' | null = null;
 
   willUpdate(changedProps: PropertyValues<this>) {
     if (changedProps.has('vote')) {
@@ -52,17 +52,40 @@ class RatingElement extends LitElement {
   }
 
   render() {
-    return html`
-      <button
-          class="thumb_down"
-          @click=${() => {this.vote = 'down'}}>
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
+    return html` <button
+        class="thumb_down"
+        @click=${() => {
+          this.vote = 'down';
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
+          />
+        </svg>
       </button>
       <span class="rating">${this.rating}</span>
       <button
-          class="thumb_up"
-          @click=${() => {this.vote = 'up'}}>
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
+        class="thumb_up"
+        @click=${() => {
+          this.vote = 'up';
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"
+          />
+        </svg>
       </button>`;
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/01/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/01/before/index.html
index 40f279985..5f509694e 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/01/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/01/before/index.html
@@ -1,8 +1,7 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script src="./rating-element.js" type="module"></script>
   </head>
-  <body>
-  </body>
+  <body></body>
 </html>
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/02/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/02/before/index.html
index ee8b9de6e..da0b9fd7c 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/02/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/02/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script src="./rating-element.js" type="module"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/03/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/03/before/index.html
index ee8b9de6e..da0b9fd7c 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/03/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/03/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script src="./rating-element.js" type="module"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/03/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/03/before/rating-element.ts
index 683ab32fe..776941765 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/03/before/rating-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/03/before/rating-element.ts
@@ -27,6 +27,6 @@ export class RatingElement extends HTMLElement {
       </button>
     `;
   }
- }
+}
 
- customElements.define('rating-element', RatingElement);
+customElements.define('rating-element', RatingElement);
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/04/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/04/before/index.html
index 25e91db2f..57efd68f1 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/04/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/04/before/index.html
@@ -1,18 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
- <head>
-   <script src="./rating-element.js" type="module"></script>
-   <style>
-     span {
-       border: 1px solid red;
-     }
-   </style>
- </head>
- <body>
-   <rating-element>
-     <div>
-       This is the light DOM!
-     </div>
-   </rating-element>
- </body>
+  <head>
+    <script src="./rating-element.js" type="module"></script>
+    <style>
+      span {
+        border: 1px solid red;
+      }
+    </style>
+  </head>
+  <body>
+    <rating-element>
+      <div>This is the light DOM!</div>
+    </rating-element>
+  </body>
 </html>
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/04/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/04/before/rating-element.ts
index 41bb237f6..75f3551c4 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/04/before/rating-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/04/before/rating-element.ts
@@ -29,6 +29,6 @@ export class RatingElement extends HTMLElement {
       </button>
     `;
   }
- }
+}
 
- customElements.define('rating-element', RatingElement);
+customElements.define('rating-element', RatingElement);
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/05/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/05/before/index.html
index 1e8537eaf..132e03d4f 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/05/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/05/before/index.html
@@ -1,34 +1,50 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
- <head>
-   <script src="./rating-element.js" type="module"></script>
- </head>
- <body>
-   <template id="rating-element-template">
-     <style>
-       :host {
-         display: inline-flex;
-         align-items: center;
-       }
-       button {
-         background: transparent;
-         border: none;
-         cursor: pointer;
-       }
-     </style>
-     <button class="thumb_down" >
-       <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
-     </button>
-     <span class="rating"></span>
-     <button class="thumb_up">
-       <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
-     </button>
-   </template>
+  <head>
+    <script src="./rating-element.js" type="module"></script>
+  </head>
+  <body>
+    <template id="rating-element-template">
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: center;
+        }
+        button {
+          background: transparent;
+          border: none;
+          cursor: pointer;
+        }
+      </style>
+      <button class="thumb_down">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
+          />
+        </svg>
+      </button>
+      <span class="rating"></span>
+      <button class="thumb_up">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"
+          />
+        </svg>
+      </button>
+    </template>
 
-   <rating-element>
-     <div>
-       This is the light DOM!
-     </div>
-   </rating-element>
- </body>
+    <rating-element>
+      <div>This is the light DOM!</div>
+    </rating-element>
+  </body>
 </html>
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/05/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/05/before/rating-element.ts
index bd5be95ea..1fad819e6 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/05/before/rating-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/05/before/rating-element.ts
@@ -7,12 +7,15 @@ export class RatingElement extends HTMLElement {
   }
   connectedCallback() {
     const shadowRoot = this.attachShadow({mode: 'open'});
-    const templateContent = document.querySelector<HTMLTemplateElement>('#rating-element-template')!.content;
+    const templateContent = document.querySelector<HTMLTemplateElement>(
+      '#rating-element-template',
+    )!.content;
     const clonedContent = templateContent.cloneNode(true);
     shadowRoot.appendChild(clonedContent);
 
-    this.shadowRoot!.querySelector<HTMLElement>('.rating')!.innerText = `${this.rating}`;
+    this.shadowRoot!.querySelector<HTMLElement>('.rating')!.innerText =
+      `${this.rating}`;
   }
- }
+}
 
- customElements.define('rating-element', RatingElement);
+customElements.define('rating-element', RatingElement);
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/06/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/06/before/index.html
index 1e8537eaf..132e03d4f 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/06/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/06/before/index.html
@@ -1,34 +1,50 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
- <head>
-   <script src="./rating-element.js" type="module"></script>
- </head>
- <body>
-   <template id="rating-element-template">
-     <style>
-       :host {
-         display: inline-flex;
-         align-items: center;
-       }
-       button {
-         background: transparent;
-         border: none;
-         cursor: pointer;
-       }
-     </style>
-     <button class="thumb_down" >
-       <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
-     </button>
-     <span class="rating"></span>
-     <button class="thumb_up">
-       <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
-     </button>
-   </template>
+  <head>
+    <script src="./rating-element.js" type="module"></script>
+  </head>
+  <body>
+    <template id="rating-element-template">
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: center;
+        }
+        button {
+          background: transparent;
+          border: none;
+          cursor: pointer;
+        }
+      </style>
+      <button class="thumb_down">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
+          />
+        </svg>
+      </button>
+      <span class="rating"></span>
+      <button class="thumb_up">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"
+          />
+        </svg>
+      </button>
+    </template>
 
-   <rating-element>
-     <div>
-       This is the light DOM!
-     </div>
-   </rating-element>
- </body>
+    <rating-element>
+      <div>This is the light DOM!</div>
+    </rating-element>
+  </body>
 </html>
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/06/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/06/before/rating-element.ts
index af943fe24..94b7a72cb 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/06/before/rating-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/06/before/rating-element.ts
@@ -3,11 +3,14 @@ export class RatingElement extends HTMLElement {
 
   connectedCallback() {
     const shadowRoot = this.attachShadow({mode: 'open'});
-    const templateContent = document.querySelector<HTMLTemplateElement>('#rating-element-template')!.content;
+    const templateContent = document.querySelector<HTMLTemplateElement>(
+      '#rating-element-template',
+    )!.content;
     const clonedContent = templateContent.cloneNode(true);
     shadowRoot.appendChild(clonedContent);
 
-    this.shadowRoot!.querySelector<HTMLElement>('.rating')!.innerText = `${this.rating}`;
+    this.shadowRoot!.querySelector<HTMLElement>('.rating')!.innerText =
+      `${this.rating}`;
   }
 
   set rating(value) {
@@ -27,6 +30,6 @@ export class RatingElement extends HTMLElement {
   get rating() {
     return this._rating;
   }
- }
+}
 
- customElements.define('rating-element', RatingElement);
+customElements.define('rating-element', RatingElement);
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/07/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/07/before/index.html
index ac883c940..dbed434b5 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/07/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/07/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script src="./rating-element.js" type="module"></script>
@@ -16,12 +16,30 @@
           cursor: pointer;
         }
       </style>
-      <button class="thumb_down" >
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
+      <button class="thumb_down">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
+          />
+        </svg>
       </button>
       <span class="rating"></span>
       <button class="thumb_up">
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"
+          />
+        </svg>
       </button>
     </template>
 
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/07/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/07/before/rating-element.ts
index 93a4a1cda..9451045d2 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/07/before/rating-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/07/before/rating-element.ts
@@ -3,18 +3,25 @@ export class RatingElement extends HTMLElement {
 
   connectedCallback() {
     const shadowRoot = this.attachShadow({mode: 'open'});
-    const templateContent = document.querySelector<HTMLTemplateElement>('#rating-element-template')!.content;
+    const templateContent = document.querySelector<HTMLTemplateElement>(
+      '#rating-element-template',
+    )!.content;
     const clonedContent = templateContent.cloneNode(true);
     shadowRoot.appendChild(clonedContent);
 
-    this.shadowRoot!.querySelector<HTMLElement>('.rating')!.innerText = `${this.rating}`;
+    this.shadowRoot!.querySelector<HTMLElement>('.rating')!.innerText =
+      `${this.rating}`;
   }
 
   static get observedAttributes() {
     return ['rating'];
   }
 
-  attributeChangedCallback(attributeName: string, _oldValue: string, newValue: string) {
+  attributeChangedCallback(
+    attributeName: string,
+    _oldValue: string,
+    newValue: string,
+  ) {
     if (attributeName === 'rating') {
       const newRating = Number(newValue);
 
@@ -39,6 +46,6 @@ export class RatingElement extends HTMLElement {
   get rating() {
     return this._rating;
   }
- }
+}
 
- customElements.define('rating-element', RatingElement);
+customElements.define('rating-element', RatingElement);
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/08/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/08/before/index.html
index dda519c33..e01611967 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/08/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/08/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script src="./rating-element.js" type="module"></script>
@@ -16,20 +16,38 @@
           cursor: pointer;
         }
 
-        :host([vote=up]) .thumb_up {
+        :host([vote='up']) .thumb_up {
           fill: green;
         }
 
-        :host([vote=down]) .thumb_down {
+        :host([vote='down']) .thumb_down {
           fill: red;
         }
       </style>
-      <button class="thumb_down" >
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
+      <button class="thumb_down">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
+          />
+        </svg>
       </button>
       <span class="rating"></span>
       <button class="thumb_up">
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"
+          />
+        </svg>
       </button>
     </template>
 
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/08/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/08/before/rating-element.ts
index c7c2c08bf..ede55f72a 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/08/before/rating-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/08/before/rating-element.ts
@@ -1,27 +1,34 @@
 export class RatingElement extends HTMLElement {
   private _rating = 0;
-  private _vote: 'up'|'down'|null = null;
+  private _vote: 'up' | 'down' | null = null;
 
   connectedCallback() {
     const shadowRoot = this.attachShadow({mode: 'open'});
-    const templateContent = document.querySelector<HTMLTemplateElement>('#rating-element-template')!.content;
+    const templateContent = document.querySelector<HTMLTemplateElement>(
+      '#rating-element-template',
+    )!.content;
     const clonedContent = templateContent.cloneNode(true);
     shadowRoot.appendChild(clonedContent);
 
-    this.shadowRoot!.querySelector<HTMLElement>('.rating')!.innerText = `${this.rating}`;
+    this.shadowRoot!.querySelector<HTMLElement>('.rating')!.innerText =
+      `${this.rating}`;
   }
 
   static get observedAttributes() {
     return ['rating', 'vote'];
   }
 
-  attributeChangedCallback(attributeName: string, _oldValue: string, newValue: string) {
+  attributeChangedCallback(
+    attributeName: string,
+    _oldValue: string,
+    newValue: string,
+  ) {
     if (attributeName === 'rating') {
       const newRating = Number(newValue);
 
       this.rating = newRating;
     } else if (attributeName === 'vote') {
-      this.vote = newValue as 'up'|'down';
+      this.vote = newValue as 'up' | 'down';
     }
   }
 
@@ -70,6 +77,6 @@ export class RatingElement extends HTMLElement {
   get vote() {
     return this._vote;
   }
- }
+}
 
- customElements.define('rating-element', RatingElement);
+customElements.define('rating-element', RatingElement);
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/09/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/09/before/index.html
index dda519c33..e01611967 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/09/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/09/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script src="./rating-element.js" type="module"></script>
@@ -16,20 +16,38 @@
           cursor: pointer;
         }
 
-        :host([vote=up]) .thumb_up {
+        :host([vote='up']) .thumb_up {
           fill: green;
         }
 
-        :host([vote=down]) .thumb_down {
+        :host([vote='down']) .thumb_down {
           fill: red;
         }
       </style>
-      <button class="thumb_down" >
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
+      <button class="thumb_down">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
+          />
+        </svg>
       </button>
       <span class="rating"></span>
       <button class="thumb_up">
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"
+          />
+        </svg>
       </button>
     </template>
 
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/09/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/09/before/rating-element.ts
index c4828518f..93f434745 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/09/before/rating-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/09/before/rating-element.ts
@@ -1,45 +1,56 @@
 export class RatingElement extends HTMLElement {
   private _rating = 0;
-  private _vote: 'up'|'down'|null = null;
+  private _vote: 'up' | 'down' | null = null;
   private _boundOnUpClick = this._onUpClick.bind(this);
   private _boundOnDownClick = this._onDownClick.bind(this);
 
   connectedCallback() {
     const shadowRoot = this.attachShadow({mode: 'open'});
-    const templateContent = document.querySelector<HTMLTemplateElement>('#rating-element-template')!.content;
+    const templateContent = document.querySelector<HTMLTemplateElement>(
+      '#rating-element-template',
+    )!.content;
     const clonedContent = templateContent.cloneNode(true);
     shadowRoot.appendChild(clonedContent);
 
-    this.shadowRoot!.querySelector<HTMLElement>('.rating')!.innerText = `${this.rating}`;
-
-    this.shadowRoot!
-      .querySelector('.thumb_up')!
-      .addEventListener('click', this._boundOnUpClick);
-    this.shadowRoot!
-      .querySelector('.thumb_down')!
-      .addEventListener('click', this._boundOnDownClick);
+    this.shadowRoot!.querySelector<HTMLElement>('.rating')!.innerText =
+      `${this.rating}`;
+
+    this.shadowRoot!.querySelector('.thumb_up')!.addEventListener(
+      'click',
+      this._boundOnUpClick,
+    );
+    this.shadowRoot!.querySelector('.thumb_down')!.addEventListener(
+      'click',
+      this._boundOnDownClick,
+    );
   }
 
   disconnectedCallback() {
-    this.shadowRoot!
-      .querySelector('.thumb_up')!
-      .removeEventListener('click', this._boundOnUpClick);
-    this.shadowRoot!
-      .querySelector('.thumb_down')!
-      .removeEventListener('click', this._boundOnDownClick);
+    this.shadowRoot!.querySelector('.thumb_up')!.removeEventListener(
+      'click',
+      this._boundOnUpClick,
+    );
+    this.shadowRoot!.querySelector('.thumb_down')!.removeEventListener(
+      'click',
+      this._boundOnDownClick,
+    );
   }
 
   static get observedAttributes() {
     return ['rating', 'vote'];
   }
 
-  attributeChangedCallback(attributeName: string, _oldValue: string, newValue: string) {
+  attributeChangedCallback(
+    attributeName: string,
+    _oldValue: string,
+    newValue: string,
+  ) {
     if (attributeName === 'rating') {
       const newRating = Number(newValue);
 
       this.rating = newRating;
     } else if (attributeName === 'vote') {
-      this.vote = newValue as 'up'|'down';
+      this.vote = newValue as 'up' | 'down';
     }
   }
 
@@ -96,6 +107,6 @@ export class RatingElement extends HTMLElement {
   _onDownClick() {
     this.vote = 'down';
   }
- }
+}
 
- customElements.define('rating-element', RatingElement);
+customElements.define('rating-element', RatingElement);
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/10/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/10/before/index.html
index 1756d3695..6b10ad860 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/10/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/10/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script src="./rating-element.js" type="module"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/10/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/10/before/rating-element.ts
index b9b159120..66ed89c7b 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/10/before/rating-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/10/before/rating-element.ts
@@ -2,7 +2,7 @@ import {render, html} from 'lit';
 
 export class RatingElement extends HTMLElement {
   private _rating = 0;
-  private _vote: 'up'|'down'|null = null;
+  private _vote: 'up' | 'down' | null = null;
   private _boundOnUpClick = this._onUpClick.bind(this);
   private _boundOnDownClick = this._onDownClick.bind(this);
 
@@ -10,34 +10,42 @@ export class RatingElement extends HTMLElement {
     this.attachShadow({mode: 'open'});
     this.render();
 
-    this.shadowRoot!
-      .querySelector('.thumb_up')!
-      .addEventListener('click', this._boundOnUpClick);
-    this.shadowRoot!
-      .querySelector('.thumb_down')!
-      .addEventListener('click', this._boundOnDownClick);
+    this.shadowRoot!.querySelector('.thumb_up')!.addEventListener(
+      'click',
+      this._boundOnUpClick,
+    );
+    this.shadowRoot!.querySelector('.thumb_down')!.addEventListener(
+      'click',
+      this._boundOnDownClick,
+    );
   }
 
   disconnectedCallback() {
-    this.shadowRoot!
-      .querySelector('.thumb_up')!
-      .removeEventListener('click', this._boundOnUpClick);
-    this.shadowRoot!
-      .querySelector('.thumb_down')!
-      .removeEventListener('click', this._boundOnDownClick);
+    this.shadowRoot!.querySelector('.thumb_up')!.removeEventListener(
+      'click',
+      this._boundOnUpClick,
+    );
+    this.shadowRoot!.querySelector('.thumb_down')!.removeEventListener(
+      'click',
+      this._boundOnDownClick,
+    );
   }
 
   static get observedAttributes() {
     return ['rating', 'vote'];
   }
 
-  attributeChangedCallback(attributeName: string, _oldValue: string, newValue: string) {
+  attributeChangedCallback(
+    attributeName: string,
+    _oldValue: string,
+    newValue: string,
+  ) {
     if (attributeName === 'rating') {
       const newRating = Number(newValue);
 
       this.rating = newRating;
     } else if (attributeName === 'vote') {
-      this.vote = newValue as 'up'|'down';
+      this.vote = newValue as 'up' | 'down';
     }
   }
 
@@ -100,8 +108,7 @@ export class RatingElement extends HTMLElement {
       return;
     }
 
-    const template = html`
-      <style>
+    const template = html` <style>
         :host {
           display: inline-flex;
           align-items: center;
@@ -112,24 +119,42 @@ export class RatingElement extends HTMLElement {
           cursor: pointer;
         }
 
-       :host([vote=up]) .thumb_up {
-         fill: green;
-       }
+        :host([vote='up']) .thumb_up {
+          fill: green;
+        }
 
-       :host([vote=down]) .thumb_down {
-         fill: red;
-       }
+        :host([vote='down']) .thumb_down {
+          fill: red;
+        }
       </style>
       <button class="thumb_down">
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
+          />
+        </svg>
       </button>
       <span class="rating">${this.rating}</span>
       <button class="thumb_up">
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"
+          />
+        </svg>
       </button>`;
 
     render(template, this.shadowRoot);
   }
- }
+}
 
- customElements.define('rating-element', RatingElement);
+customElements.define('rating-element', RatingElement);
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/11/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/11/before/index.html
index 1756d3695..6b10ad860 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/11/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/11/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script src="./rating-element.js" type="module"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/11/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/11/before/rating-element.ts
index 546da045e..0fab31619 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/11/before/rating-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/11/before/rating-element.ts
@@ -2,7 +2,7 @@ import {render, html} from 'lit';
 
 export class RatingElement extends HTMLElement {
   private _rating = 0;
-  private _vote: 'up'|'down'|null = null;
+  private _vote: 'up' | 'down' | null = null;
 
   connectedCallback() {
     this.attachShadow({mode: 'open'});
@@ -13,7 +13,11 @@ export class RatingElement extends HTMLElement {
     return ['rating'];
   }
 
-  attributeChangedCallback(attributeName: string, _oldValue: string, newValue: string) {
+  attributeChangedCallback(
+    attributeName: string,
+    _oldValue: string,
+    newValue: string,
+  ) {
     if (attributeName === 'rating') {
       const newRating = Number(newValue);
 
@@ -64,8 +68,7 @@ export class RatingElement extends HTMLElement {
       return;
     }
 
-    const template = html`
-      <style>
+    const template = html` <style>
         :host {
           display: inline-flex;
           align-items: center;
@@ -76,28 +79,52 @@ export class RatingElement extends HTMLElement {
           cursor: pointer;
         }
 
-       :host([vote=up]) .thumb_up {
-         fill: green;
-       }
+        :host([vote='up']) .thumb_up {
+          fill: green;
+        }
 
-       :host([vote=down]) .thumb_down {
-         fill: red;
-       }
+        :host([vote='down']) .thumb_down {
+          fill: red;
+        }
       </style>
       <button
-          class="thumb_down"
-          @click=${() => {this.vote = 'down'}}>
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
+        class="thumb_down"
+        @click=${() => {
+          this.vote = 'down';
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
+          />
+        </svg>
       </button>
       <span class="rating">${this.rating}</span>
       <button
-          class="thumb_up"
-          @click=${() => {this.vote = 'up'}}>
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
+        class="thumb_up"
+        @click=${() => {
+          this.vote = 'up';
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"
+          />
+        </svg>
       </button>`;
 
     render(template, this.shadowRoot);
   }
- }
+}
 
- customElements.define('rating-element', RatingElement);
+customElements.define('rating-element', RatingElement);
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/12/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/12/before/index.html
index 1756d3695..6b10ad860 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/12/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/12/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script src="./rating-element.js" type="module"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/12/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/12/before/rating-element.ts
index b8de33b32..17cf59162 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/12/before/rating-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/12/before/rating-element.ts
@@ -15,23 +15,27 @@ export class RatingElement extends LitElement {
       cursor: pointer;
     }
 
-    :host([vote=up]) .thumb_up {
+    :host([vote='up']) .thumb_up {
       fill: green;
     }
 
-    :host([vote=down]) .thumb_down {
+    :host([vote='down']) .thumb_down {
       fill: red;
     }
   `;
 
   private _rating = 0;
-  private _vote: 'up'|'down'|null = null;
+  private _vote: 'up' | 'down' | null = null;
 
   // static get observedAttributes() {
   //   return ['rating'];
   // }
 
-  attributeChangedCallback(attributeName: string, _oldValue: string, newValue: string) {
+  attributeChangedCallback(
+    attributeName: string,
+    _oldValue: string,
+    newValue: string,
+  ) {
     if (attributeName === 'rating') {
       const newRating = Number(newValue);
 
@@ -78,17 +82,40 @@ export class RatingElement extends LitElement {
   }
 
   render() {
-    return html`
-      <button
-          class="thumb_down"
-          @click=${() => {this.vote = 'down'}}>
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
+    return html` <button
+        class="thumb_down"
+        @click=${() => {
+          this.vote = 'down';
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
+          />
+        </svg>
       </button>
       <span class="rating">${this.rating}</span>
       <button
-          class="thumb_up"
-          @click=${() => {this.vote = 'up'}}>
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
+        class="thumb_up"
+        @click=${() => {
+          this.vote = 'up';
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"
+          />
+        </svg>
       </button>`;
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/13/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/13/before/index.html
index 372d55ac7..fe702d95e 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/13/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/13/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script src="./rating-element.js" type="module"></script>
@@ -21,20 +21,38 @@
           cursor: pointer;
         }
 
-        :host([vote=up]) .thumb_up {
+        :host([vote='up']) .thumb_up {
           fill: green;
         }
 
-        :host([vote=down]) .thumb_down {
+        :host([vote='down']) .thumb_down {
           fill: red;
         }
       </style>
-      <button class="thumb_down" >
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
+      <button class="thumb_down">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
+          />
+        </svg>
       </button>
       <span class="rating"></span>
       <button class="thumb_up">
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"
+          />
+        </svg>
       </button>
     </template>
 
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/13/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/13/before/rating-element.ts
index 1c1d38d35..ed8ca15eb 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/13/before/rating-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/13/before/rating-element.ts
@@ -15,11 +15,11 @@ class RatingElement extends LitElement {
       cursor: pointer;
     }
 
-    :host([vote=up]) .thumb_up {
+    :host([vote='up']) .thumb_up {
       fill: green;
     }
 
-    :host([vote=down]) .thumb_down {
+    :host([vote='down']) .thumb_down {
       fill: red;
     }
   `;
@@ -28,7 +28,7 @@ class RatingElement extends LitElement {
   rating = 0;
 
   @property({type: String, reflect: true})
-  vote: 'up'|'down'|null = null;
+  vote: 'up' | 'down' | null = null;
 
   willUpdate(changedProps: PropertyValues<this>) {
     if (changedProps.has('vote')) {
@@ -52,17 +52,40 @@ class RatingElement extends LitElement {
   }
 
   render() {
-    return html`
-      <button
-          class="thumb_down"
-          @click=${() => {this.vote = 'down'}}>
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
+    return html` <button
+        class="thumb_down"
+        @click=${() => {
+          this.vote = 'down';
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
+          />
+        </svg>
       </button>
       <span class="rating">${this.rating}</span>
       <button
-          class="thumb_up"
-          @click=${() => {this.vote = 'up'}}>
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
+        class="thumb_up"
+        @click=${() => {
+          this.vote = 'up';
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewbox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"
+          />
+        </svg>
       </button>`;
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/tutorial.json b/packages/lit-dev-content/samples/tutorials/wc-to-lit/tutorial.json
index 8512ba287..6f47450b5 100644
--- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/tutorial.json
+++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/tutorial.json
@@ -51,4 +51,4 @@
       "noSolve": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/00/after/index.html b/packages/lit-dev-content/samples/tutorials/word-viewer/00/after/index.html
index adf78eba6..cea1ee17b 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/00/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/00/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="word-viewer.js"></script>
@@ -14,7 +14,8 @@
   </head>
   <body>
     <p>Click the bouncing ball!</p>
-<word-viewer words='   █
+    <word-viewer
+      words="   █
 
 
 
@@ -50,6 +51,7 @@
 
 
 
-_______9'></word-viewer>
+_______9"
+    ></word-viewer>
   </body>
 </html>
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/00/after/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/00/after/word-viewer.ts
index 817218e38..3af209f2d 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/00/after/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/00/after/word-viewer.ts
@@ -1,6 +1,6 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import {css, html, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 
 @customElement('word-viewer')
 class WordViewer extends LitElement {
@@ -18,7 +18,7 @@ class WordViewer extends LitElement {
       color: white;
       background-color: violet;
     }
-  `
+  `;
 
   @state() private playDirection: -1 | 1 = 1;
   @state() private idx = 0;
@@ -39,15 +39,20 @@ class WordViewer extends LitElement {
 
   render() {
     const splitWords = this.words.split('.');
-    const idx = ((this.idx % splitWords.length) + splitWords.length) % splitWords.length;
+    const idx =
+      ((this.idx % splitWords.length) + splitWords.length) % splitWords.length;
     const word = splitWords[idx];
     return html`<pre
-      class="${classMap({ backwards: this.playDirection === -1 })}"
+      class="${classMap({backwards: this.playDirection === -1})}"
       @click=${this.switchPlayDirection}
-    >${word}</pre>`;
+    >
+${word}</pre
+    >`;
   }
 
-  tickToNextWord = () => { this.idx += this.playDirection; };
+  tickToNextWord = () => {
+    this.idx += this.playDirection;
+  };
 
   switchPlayDirection() {
     this.playDirection *= -1;
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/index.html b/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/index.html
index 52d99d087..3f10f3a03 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="word-viewer.js"></script>
@@ -18,6 +18,5 @@ <h1>&lt;word-viewer> examples:</h1>
     <word-viewer words="Passing.in.some.words!"></word-viewer>
     <word-viewer words="😃.😁.😂.🤣.🤪.😛.😋.🙂"></word-viewer>
     <span>Add your own here...</span>
-
   </body>
 </html>
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/project.json b/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/project.json
index 6315ce34d..58e4329b8 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/project.json
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/project.json
@@ -6,4 +6,4 @@
     },
     "word-viewer.ts": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/word-viewer.ts
index 417243e18..af8190e02 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/word-viewer.ts
@@ -1,6 +1,6 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import {css, html, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 
 @customElement('word-viewer')
 class WordViewer extends LitElement {
@@ -18,7 +18,7 @@ class WordViewer extends LitElement {
       color: white;
       background-color: violet;
     }
-  `
+  `;
 
   @state() private playDirection: -1 | 1 = 1;
   @state() private idx = 0;
@@ -39,15 +39,20 @@ class WordViewer extends LitElement {
 
   render() {
     const splitWords = this.words.split('.');
-    const idx = ((this.idx % splitWords.length) + splitWords.length) % splitWords.length;
+    const idx =
+      ((this.idx % splitWords.length) + splitWords.length) % splitWords.length;
     const word = splitWords[idx];
     return html`<pre
-      class="${classMap({ backwards: this.playDirection === -1 })}"
+      class="${classMap({backwards: this.playDirection === -1})}"
       @click=${this.switchPlayDirection}
-    >${word}</pre>`;
+    >
+${word}</pre
+    >`;
   }
 
-  tickToNextWord = () => { this.idx += this.playDirection; };
+  tickToNextWord = () => {
+    this.idx += this.playDirection;
+  };
 
   switchPlayDirection() {
     this.playDirection *= -1;
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/01/after/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/01/after/word-viewer.ts
index 02bc4685b..29b2d3f77 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/01/after/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/01/after/word-viewer.ts
@@ -1,15 +1,15 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
 
 @customElement('word-viewer')
 class WordViewer extends LitElement {
   render() {
-    return html`<pre>A super expressive and efficient template!</pre>`
+    return html`<pre>A super expressive and efficient template!</pre>`;
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "word-viewer": WordViewer
+    'word-viewer': WordViewer;
   }
 }
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/01/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/01/before/word-viewer.ts
index db175b0b3..74874f2c6 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/01/before/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/01/before/word-viewer.ts
@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
 
 class WordViewer extends LitElement {
   render() {
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/02/after/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/02/after/word-viewer.ts
index 291b60f1c..ece7cdea5 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/02/after/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/02/after/word-viewer.ts
@@ -1,12 +1,11 @@
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
 @customElement('word-viewer')
 class WordViewer extends LitElement {
   @property() words = 'initial value';
 
   render() {
-    return html`<pre>${this.words}</pre>`
+    return html`<pre>${this.words}</pre>`;
   }
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/02/before/word-viewer.js b/packages/lit-dev-content/samples/tutorials/word-viewer/02/before/word-viewer.js
index 0e3d4199e..b8297c388 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/02/before/word-viewer.js
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/02/before/word-viewer.js
@@ -1,5 +1,4 @@
-import { html, LitElement } from 'lit';
-
+import {html, LitElement} from 'lit';
 
 class WordViewer extends LitElement {
   // TODO: Declare a reactive property `words`.
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/02/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/02/before/word-viewer.ts
index 4654b39c4..9a06b7c91 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/02/before/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/02/before/word-viewer.ts
@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
 @customElement('word-viewer')
 class WordViewer extends LitElement {
@@ -9,4 +9,3 @@ class WordViewer extends LitElement {
     return html`<pre>${this.words}</pre>`;
   }
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/03/after/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/03/after/word-viewer.ts
index 4fc3a4245..6e5ba207a 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/03/after/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/03/after/word-viewer.ts
@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
 
 @customElement('word-viewer')
 class WordViewer extends LitElement {
@@ -12,4 +12,3 @@ class WordViewer extends LitElement {
     return html`<pre>${word}</pre>`;
   }
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/03/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/03/before/word-viewer.ts
index 5daf600fa..47d9282ee 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/03/before/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/03/before/word-viewer.ts
@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
 
 @customElement('word-viewer')
 class WordViewer extends LitElement {
@@ -12,4 +12,3 @@ class WordViewer extends LitElement {
     return html`<pre>${this.words}</pre>`;
   }
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/04/after/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/04/after/word-viewer.ts
index 3fbe89591..ab3e3e1fc 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/04/after/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/04/after/word-viewer.ts
@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
 
 @customElement('word-viewer')
 class WordViewer extends LitElement {
@@ -7,12 +7,12 @@ class WordViewer extends LitElement {
   @property() words = 'initial value';
 
   private intervalTimer?: number;
-  
+
   connectedCallback() {
     super.connectedCallback();
     this.intervalTimer = setInterval(this.tickToNextWord, 1000);
   }
-  
+
   disconnectedCallback() {
     super.disconnectedCallback();
     clearInterval(this.intervalTimer);
@@ -25,6 +25,7 @@ class WordViewer extends LitElement {
     return html`<pre>${word}</pre>`;
   }
 
-  tickToNextWord = () => { this.idx += 1; };
+  tickToNextWord = () => {
+    this.idx += 1;
+  };
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/04/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/04/before/word-viewer.ts
index 247d0b0bc..4d891b288 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/04/before/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/04/before/word-viewer.ts
@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
 
 @customElement('word-viewer')
 class WordViewer extends LitElement {
@@ -7,7 +7,7 @@ class WordViewer extends LitElement {
   @property() words = 'initial value';
 
   // TODO: Define a `connectedCallback` which sets an interval.
-  // TODO: Define a `disconnectedCallback` which clears the interval.  
+  // TODO: Define a `disconnectedCallback` which clears the interval.
 
   render() {
     const splitWords = this.words.split('.');
@@ -17,4 +17,3 @@ class WordViewer extends LitElement {
 
   // TODO: Define `tickToNextWord`.
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/05/after/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/05/after/word-viewer.ts
index fdf5581a5..f63e4c20f 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/05/after/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/05/after/word-viewer.ts
@@ -1,5 +1,5 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import {css, html, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
 
 @customElement('word-viewer')
 class WordViewer extends LitElement {
@@ -37,6 +37,7 @@ class WordViewer extends LitElement {
     return html`<pre>${word}</pre>`;
   }
 
-  tickToNextWord = () => { this.idx += 1; };
+  tickToNextWord = () => {
+    this.idx += 1;
+  };
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/05/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/05/before/word-viewer.ts
index 0305f02fe..272ee4507 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/05/before/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/05/before/word-viewer.ts
@@ -1,5 +1,5 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import {css, html, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
 
 @customElement('word-viewer')
 class WordViewer extends LitElement {
@@ -9,12 +9,12 @@ class WordViewer extends LitElement {
   @property() words = 'initial value';
 
   private intervalTimer?: number;
-  
+
   connectedCallback() {
     super.connectedCallback();
     this.intervalTimer = setInterval(this.tickToNextWord, 1000);
   }
-  
+
   disconnectedCallback() {
     super.disconnectedCallback();
     clearInterval(this.intervalTimer);
@@ -27,6 +27,7 @@ class WordViewer extends LitElement {
     return html`<pre>${word}</pre>`;
   }
 
-  tickToNextWord = () => { this.idx += 1; };
+  tickToNextWord = () => {
+    this.idx += 1;
+  };
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/06/after/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/06/after/word-viewer.ts
index d00fab1f0..99db44666 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/06/after/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/06/after/word-viewer.ts
@@ -1,5 +1,5 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import {css, html, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
 
 @customElement('word-viewer')
 class WordViewer extends LitElement {
@@ -34,17 +34,17 @@ class WordViewer extends LitElement {
 
   render() {
     const splitWords = this.words.split('.');
-    const idx = ((this.idx % splitWords.length) + splitWords.length) % splitWords.length;
+    const idx =
+      ((this.idx % splitWords.length) + splitWords.length) % splitWords.length;
     const word = splitWords[idx];
-    return html`<pre
-      @click=${this.switchPlayDirection}
-    >${word}</pre>`;
+    return html`<pre @click=${this.switchPlayDirection}>${word}</pre>`;
   }
 
-  tickToNextWord = () => { this.idx += this.playDirection; };
+  tickToNextWord = () => {
+    this.idx += this.playDirection;
+  };
 
   switchPlayDirection() {
     this.playDirection *= -1;
   }
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/06/before/project.json b/packages/lit-dev-content/samples/tutorials/word-viewer/06/before/project.json
index 324d2795c..c04439e43 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/06/before/project.json
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/06/before/project.json
@@ -6,4 +6,4 @@
     },
     "index.html": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/06/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/06/before/word-viewer.ts
index 574f90a2a..df8699ba1 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/06/before/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/06/before/word-viewer.ts
@@ -1,5 +1,5 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import {css, html, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
 
 @customElement('word-viewer')
 class WordViewer extends LitElement {
@@ -40,8 +40,9 @@ class WordViewer extends LitElement {
     return html`<pre>${word}</pre>`;
   }
   // TODO: Increment by `this.playDirection`
-  tickToNextWord = () => { this.idx += 1; };
+  tickToNextWord = () => {
+    this.idx += 1;
+  };
 
   // TODO: Add switchPlayDirection method.
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/07/after/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/07/after/word-viewer.ts
index 3004483c3..af8190e02 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/07/after/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/07/after/word-viewer.ts
@@ -1,6 +1,6 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import {css, html, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 
 @customElement('word-viewer')
 class WordViewer extends LitElement {
@@ -18,7 +18,7 @@ class WordViewer extends LitElement {
       color: white;
       background-color: violet;
     }
-  `
+  `;
 
   @state() private playDirection: -1 | 1 = 1;
   @state() private idx = 0;
@@ -39,18 +39,22 @@ class WordViewer extends LitElement {
 
   render() {
     const splitWords = this.words.split('.');
-    const idx = ((this.idx % splitWords.length) + splitWords.length) % splitWords.length;
+    const idx =
+      ((this.idx % splitWords.length) + splitWords.length) % splitWords.length;
     const word = splitWords[idx];
     return html`<pre
-      class="${classMap({ backwards: this.playDirection === -1 })}"
+      class="${classMap({backwards: this.playDirection === -1})}"
       @click=${this.switchPlayDirection}
-    >${word}</pre>`;
+    >
+${word}</pre
+    >`;
   }
 
-  tickToNextWord = () => { this.idx += this.playDirection; };
+  tickToNextWord = () => {
+    this.idx += this.playDirection;
+  };
 
   switchPlayDirection() {
     this.playDirection *= -1;
   }
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/07/before/project.json b/packages/lit-dev-content/samples/tutorials/word-viewer/07/before/project.json
index 324d2795c..c04439e43 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/07/before/project.json
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/07/before/project.json
@@ -6,4 +6,4 @@
     },
     "index.html": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/07/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/07/before/word-viewer.ts
index c7958bb35..d0d690b11 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/07/before/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/07/before/word-viewer.ts
@@ -1,6 +1,6 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import {css, html, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 
 @customElement('word-viewer')
 class WordViewer extends LitElement {
@@ -36,18 +36,22 @@ class WordViewer extends LitElement {
 
   render() {
     const splitWords = this.words.split('.');
-    const idx = ((this.idx % splitWords.length) + splitWords.length) % splitWords.length;
+    const idx =
+      ((this.idx % splitWords.length) + splitWords.length) % splitWords.length;
     const word = splitWords[idx];
     return html`<pre
       class="TODO: Use classMap expression"
       @click=${this.switchPlayDirection}
-    >${word}</pre>`;
+    >
+${word}</pre
+    >`;
   }
 
-  tickToNextWord = () => { this.idx += this.playDirection; };
+  tickToNextWord = () => {
+    this.idx += this.playDirection;
+  };
 
   switchPlayDirection() {
     this.playDirection *= -1;
   }
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/index.html b/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/index.html
index adf78eba6..cea1ee17b 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="word-viewer.js"></script>
@@ -14,7 +14,8 @@
   </head>
   <body>
     <p>Click the bouncing ball!</p>
-<word-viewer words='   █
+    <word-viewer
+      words="   █
 
 
 
@@ -50,6 +51,7 @@
 
 
 
-_______9'></word-viewer>
+_______9"
+    ></word-viewer>
   </body>
 </html>
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/project.json b/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/project.json
index 6315ce34d..58e4329b8 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/project.json
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/project.json
@@ -6,4 +6,4 @@
     },
     "word-viewer.ts": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/word-viewer.ts
index d875268ad..3af209f2d 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/word-viewer.ts
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/word-viewer.ts
@@ -1,6 +1,6 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import {css, html, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 
 @customElement('word-viewer')
 class WordViewer extends LitElement {
@@ -18,7 +18,7 @@ class WordViewer extends LitElement {
       color: white;
       background-color: violet;
     }
-  `
+  `;
 
   @state() private playDirection: -1 | 1 = 1;
   @state() private idx = 0;
@@ -39,18 +39,22 @@ class WordViewer extends LitElement {
 
   render() {
     const splitWords = this.words.split('.');
-    const idx = ((this.idx % splitWords.length) + splitWords.length) % splitWords.length;
+    const idx =
+      ((this.idx % splitWords.length) + splitWords.length) % splitWords.length;
     const word = splitWords[idx];
     return html`<pre
-      class="${classMap({ backwards: this.playDirection === -1 })}"
+      class="${classMap({backwards: this.playDirection === -1})}"
       @click=${this.switchPlayDirection}
-    >${word}</pre>`;
+    >
+${word}</pre
+    >`;
   }
 
-  tickToNextWord = () => { this.idx += this.playDirection; };
+  tickToNextWord = () => {
+    this.idx += this.playDirection;
+  };
 
   switchPlayDirection() {
     this.playDirection *= -1;
   }
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/tutorial.json b/packages/lit-dev-content/samples/tutorials/word-viewer/tutorial.json
index ab653cee1..0bd8e0403 100644
--- a/packages/lit-dev-content/samples/tutorials/word-viewer/tutorial.json
+++ b/packages/lit-dev-content/samples/tutorials/word-viewer/tutorial.json
@@ -43,4 +43,4 @@
       "noSolve": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/00/before/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/00/before/index.html
index a332734e2..3e7a17991 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/00/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/00/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/00/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/00/before/my-element.ts
index f926dc3e5..4311b6c71 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/00/before/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/00/before/my-element.ts
@@ -8,20 +8,15 @@ class MyElement extends LitElement {
       <h1>Rendering lists with Lit</h1>
       <p>Lit has built-in support for any iterables!</p>
       <h2>Array</h2>
-      <p>
-        ${['✨', '🔥', '❤️']}
-      </p>
+      <p>${['✨', '🔥', '❤️']}</p>
       <h2>Set</h2>
-      <p>
-        ${new Set(['A', 'B', 'C'])}
-      </p>
+      <p>${new Set(['A', 'B', 'C'])}</p>
       <h2>Generator</h2>
       <p>
         ${(function* () {
-            for (let i = 1; i < 4; i++) yield i;
+          for (let i = 1; i < 4; i++) yield i;
         })()}
       </p>
     `;
   }
 }
-
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/01/after/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/01/after/index.html
index a332734e2..3e7a17991 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/01/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/01/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/01/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/01/after/my-element.ts
index 92556c517..b0f453b80 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/01/after/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/01/after/my-element.ts
@@ -5,7 +5,7 @@ import {map} from 'lit/directives/map.js';
 @customElement('my-element')
 class MyElement extends LitElement {
   @state()
-  items = new Set(['Apple', 'Banana', 'Grape', 'Orange', 'Lime'])
+  items = new Set(['Apple', 'Banana', 'Grape', 'Orange', 'Lime']);
 
   render() {
     return html`
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/01/before/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/01/before/index.html
index a332734e2..3e7a17991 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/01/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/01/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/01/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/01/before/my-element.ts
index 8b08288e1..66a08d243 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/01/before/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/01/before/my-element.ts
@@ -5,7 +5,7 @@ import {customElement, state} from 'lit/decorators.js';
 @customElement('my-element')
 class MyElement extends LitElement {
   @state()
-  items = new Set(['Apple', 'Banana', 'Grape', 'Orange', 'Lime'])
+  items = new Set(['Apple', 'Banana', 'Grape', 'Orange', 'Lime']);
 
   render() {
     return html`
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/02/after/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/02/after/index.html
index a332734e2..3e7a17991 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/02/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/02/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/02/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/02/after/my-element.ts
index 95c6d3191..2b1faa565 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/02/after/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/02/after/my-element.ts
@@ -10,9 +10,9 @@ class MyElement extends LitElement {
     return html`
       <p>A list of names that include the letter "e"</p>
       <ul>
-      ${this.names
-        .filter((name) => name.match(/e/i))
-        .map((name) => html`<li>${name}</li>`)}
+        ${this.names
+          .filter((name) => name.match(/e/i))
+          .map((name) => html`<li>${name}</li>`)}
       </ul>
     `;
   }
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/02/before/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/02/before/index.html
index a332734e2..3e7a17991 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/02/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/02/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/03/after/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/03/after/index.html
index a332734e2..3e7a17991 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/03/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/03/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/03/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/03/after/my-element.ts
index fcedcadef..5bf5d1c77 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/03/after/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/03/after/my-element.ts
@@ -9,9 +9,9 @@ class MyElement extends LitElement {
 
   @state()
   pets = [
-    { name: "Hedwig", species: "Owl" },
-    { name: "Scabbers", species: "Rat" },
-    { name: "Crookshanks", species: "Cat" },
+    {name: 'Hedwig', species: 'Owl'},
+    {name: 'Scabbers', species: 'Rat'},
+    {name: 'Crookshanks', species: 'Cat'},
   ];
 
   @state()
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/03/before/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/03/before/index.html
index a332734e2..3e7a17991 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/03/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/03/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/03/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/03/before/my-element.ts
index ef5a53404..8a4dcfbe8 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/03/before/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/03/before/my-element.ts
@@ -9,9 +9,9 @@ class MyElement extends LitElement {
 
   @state()
   pets = [
-    { name: "Hedwig", species: "Owl" },
-    { name: "Scabbers", species: "Rat" },
-    { name: "Crookshanks", species: "Cat" },
+    {name: 'Hedwig', species: 'Owl'},
+    {name: 'Scabbers', species: 'Rat'},
+    {name: 'Crookshanks', species: 'Cat'},
   ];
 
   @state()
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/index.html
index a332734e2..3e7a17991 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/my-element.js b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/my-element.js
index 1c304b4b7..62347bdad 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/my-element.js
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/my-element.js
@@ -30,7 +30,6 @@ class MyElement extends LitElement {
       background: white;
     }
     /* playground-fold-end */
-
   `;
 
   render() {
@@ -41,9 +40,9 @@ class MyElement extends LitElement {
           map(
             range(8),
             (col) => html`
-          <div class="${getColor(row, col)}">${getLabel(row, col)}</div>
-        `
-          )
+              <div class="${getColor(row, col)}">${getLabel(row, col)}</div>
+            `,
+          ),
         )}
       </div>
     `;
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/my-element.ts
index 1c30cff05..518c2cd6d 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/my-element.ts
@@ -32,22 +32,26 @@ class MyElement extends LitElement {
       background: white;
     }
     /* playground-fold-end */
-
   `;
 
   render() {
     return html`
       <p>Let's play a game!</p>
       <div id="board">
-        ${map(range(8), (row) => map(range(8), (col) => html`
-          <div class="${getColor(row, col)}">${getLabel(row, col)}</div>
-        `))}
+        ${map(range(8), (row) =>
+          map(
+            range(8),
+            (col) => html`
+              <div class="${getColor(row, col)}">${getLabel(row, col)}</div>
+            `,
+          ),
+        )}
       </div>
     `;
   }
 }
 
 const getColor = (row: number, col: number) =>
-  (row + col) % 2 ? "black" : "white";
+  (row + col) % 2 ? 'black' : 'white';
 const getLabel = (row: number, col: number) =>
   `${String.fromCharCode(65 + col)}${8 - row}`;
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/before/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/before/index.html
index a332734e2..3e7a17991 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/before/my-element.ts
index 46c0e8e3b..a858d6b4c 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/before/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/before/my-element.ts
@@ -31,7 +31,6 @@ class MyElement extends LitElement {
       background: white;
     }
     /* playground-fold-end */
-
   `;
 
   render() {
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/05/after/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/05/after/index.html
index a332734e2..3e7a17991 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/05/after/index.html
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/05/after/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/05/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/05/after/my-element.ts
index 449c3537e..db9c55cc6 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/05/after/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/05/after/my-element.ts
@@ -6,10 +6,10 @@ import {repeat} from 'lit/directives/repeat.js';
 class MyElement extends LitElement {
   @state()
   tasks = [
-    { id: 'a', label: 'Learn Lit'},
-    { id: 'b', label: 'Feed the cat'},
-    { id: 'c', label: 'Go for a walk'},
-    { id: 'd', label: 'Take a nap'},
+    {id: 'a', label: 'Learn Lit'},
+    {id: 'b', label: 'Feed the cat'},
+    {id: 'c', label: 'Go for a walk'},
+    {id: 'd', label: 'Take a nap'},
   ];
 
   render() {
@@ -25,7 +25,7 @@ class MyElement extends LitElement {
             <li>
               <label><input type="checkbox" />${task.id}) ${task.label}</label>
             </li>
-          `
+          `,
         )}
       </ul>
     `;
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/05/before/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/05/before/index.html
index a332734e2..3e7a17991 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/05/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/05/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/05/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/05/before/my-element.ts
index 52cbeb6d8..54d903cb3 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/05/before/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/05/before/my-element.ts
@@ -1,17 +1,17 @@
 import {LitElement, html} from 'lit';
 import {customElement, state} from 'lit/decorators.js';
-import {map} from 'lit/directives/map.js'
+import {map} from 'lit/directives/map.js';
 // TODO: import repeat directive.
 
 @customElement('my-element')
 class MyElement extends LitElement {
   @state()
   tasks = [
-    { id: 'a', label: 'Learn Lit'},
-    { id: 'b', label: 'Feed the cat'},
-    { id: 'c', label: 'Go for a walk'},
-    { id: 'd', label: 'Take a nap'},
-  ]
+    {id: 'a', label: 'Learn Lit'},
+    {id: 'b', label: 'Feed the cat'},
+    {id: 'c', label: 'Go for a walk'},
+    {id: 'd', label: 'Take a nap'},
+  ];
 
   render() {
     return html`
@@ -26,7 +26,7 @@ class MyElement extends LitElement {
             <li>
               <label><input type="checkbox" />${task.id}) ${task.label}</label>
             </li>
-          `
+          `,
         )}
       </ul>
     `;
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/06/before/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/06/before/index.html
index a332734e2..3e7a17991 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/06/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/06/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/06/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/06/before/my-element.ts
index 34d740b9a..23aabd700 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/06/before/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/06/before/my-element.ts
@@ -6,10 +6,10 @@ import {map} from 'lit/directives/map.js';
 class MyElement extends LitElement {
   @state()
   things = [
-    "Raindrops on roses",
-    "Whiskers on kittens",
-    "Bright copper kettles",
-    "Warm woolen mittens",
+    'Raindrops on roses',
+    'Whiskers on kittens',
+    'Bright copper kettles',
+    'Warm woolen mittens',
   ];
 
   render() {
@@ -24,7 +24,7 @@ class MyElement extends LitElement {
               ${thing}
               <button>Delete</button>
             </li>
-          `
+          `,
         )}
       </ul>
     `;
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/07/before/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/07/before/index.html
index a332734e2..3e7a17991 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/07/before/index.html
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/07/before/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script type="module" src="my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/07/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/07/before/my-element.ts
index a92736926..48ec55ed8 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/07/before/my-element.ts
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/07/before/my-element.ts
@@ -6,10 +6,10 @@ import {map} from 'lit/directives/map.js';
 class MyElement extends LitElement {
   @state()
   things = [
-    "Raindrops on roses",
-    "Whiskers on kittens",
-    "Bright copper kettles",
-    "Warm woolen mittens",
+    'Raindrops on roses',
+    'Whiskers on kittens',
+    'Bright copper kettles',
+    'Warm woolen mittens',
   ];
 
   render() {
@@ -23,7 +23,7 @@ class MyElement extends LitElement {
               ${thing}
               <button @click=${() => this._deleteThing(index)}>Delete</button>
             </li>
-          `
+          `,
         )}
       </ul>
     `;
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/description.md b/packages/lit-dev-content/samples/tutorials/working-with-lists/description.md
index 3baec8417..31f9a3f59 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/description.md
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/description.md
@@ -1 +1 @@
-Learn how to take a list of items and render it on the page in multiple ways.
\ No newline at end of file
+Learn how to take a list of items and render it on the page in multiple ways.
diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/tutorial.json b/packages/lit-dev-content/samples/tutorials/working-with-lists/tutorial.json
index 88a392e15..ebc9b9700 100644
--- a/packages/lit-dev-content/samples/tutorials/working-with-lists/tutorial.json
+++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/tutorial.json
@@ -39,4 +39,4 @@
       "noSolve": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/comm/my-dispatcher.ts b/packages/lit-dev-content/samples/v2-docs/components/events/comm/my-dispatcher.ts
index 10e31167a..70355d533 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/events/comm/my-dispatcher.ts
+++ b/packages/lit-dev-content/samples/v2-docs/components/events/comm/my-dispatcher.ts
@@ -9,13 +9,20 @@ class MyDispatcher extends LitElement {
   private _resetMessage?: ReturnType<typeof setTimeout>;
   protected render() {
     return html`
-      <label><input type="checkbox" @click=${this._tryChange}>${this.label}</label>
+      <label
+        ><input type="checkbox" @click=${this._tryChange} />${this.label}</label
+      >
       <div>${this.message}</div>
     `;
   }
   private _tryChange(e: Event) {
     const detail = {message: this.message};
-    const event = new CustomEvent('checked', {detail, bubbles: true, composed: true, cancelable: true});
+    const event = new CustomEvent('checked', {
+      detail,
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    });
     this.dispatchEvent(event);
     if (event.defaultPrevented) {
       e.preventDefault();
@@ -24,7 +31,9 @@ class MyDispatcher extends LitElement {
   }
   protected updated() {
     clearTimeout(this._resetMessage);
-    this._resetMessage =
-      setTimeout(() => this.message = this.defaultMessage, 1000);
+    this._resetMessage = setTimeout(
+      () => (this.message = this.defaultMessage),
+      1000,
+    );
   }
 }
diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/comm/my-listener.ts b/packages/lit-dev-content/samples/v2-docs/components/events/comm/my-listener.ts
index c2acc3166..92d4df166 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/events/comm/my-listener.ts
+++ b/packages/lit-dev-content/samples/v2-docs/components/events/comm/my-listener.ts
@@ -5,9 +5,8 @@ import {customElement, property} from 'lit/decorators.js';
 class MyListener extends LitElement {
   @property() canCheck = false;
   protected render() {
-    return html`
-      <p @checked=${this._checkedHandler}><slot></slot></p>
-      <hr>
+    return html` <p @checked=${this._checkedHandler}><slot></slot></p>
+      <hr />
       <p>${this.canCheck ? 'Allowing' : 'Preventing'} check</p>
       <p><button @click=${this._clickHandler}>Toggle</button></p>`;
   }
diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/delegation/my-element.ts b/packages/lit-dev-content/samples/v2-docs/components/events/delegation/my-element.ts
index c8f8b534d..de0390ff5 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/events/delegation/my-element.ts
+++ b/packages/lit-dev-content/samples/v2-docs/components/events/delegation/my-element.ts
@@ -15,7 +15,9 @@ class MyElement extends LitElement {
     `;
   }
   private _clickHandler(e: Event) {
-    this.clicked = e.target === e.currentTarget ?
-      'container' : (e.target as HTMLDivElement).textContent!;
+    this.clicked =
+      e.target === e.currentTarget
+        ? 'container'
+        : (e.target as HTMLDivElement).textContent!;
   }
 }
diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-dispatcher.ts b/packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-dispatcher.ts
index 3e64679ff..98b1c332d 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-dispatcher.ts
+++ b/packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-dispatcher.ts
@@ -6,7 +6,7 @@ class MyDispatcher extends LitElement {
   @query('input', true) _input!: HTMLInputElement;
   protected render() {
     return html`
-      <p>Name: <input></p>
+      <p>Name: <input /></p>
       <p><button @click=${this._dispatchLogin}>Login</button></p>
     `;
   }
@@ -16,7 +16,7 @@ class MyDispatcher extends LitElement {
       const options = {
         detail: {name},
         bubbles: true,
-        composed: true
+        composed: true,
       };
       this.dispatchEvent(new CustomEvent('mylogin', options));
     }
diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-listener.ts b/packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-listener.ts
index 48ac9d745..83fa2d926 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-listener.ts
+++ b/packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-listener.ts
@@ -4,8 +4,7 @@ import {customElement, property} from 'lit/decorators.js';
 class MyListener extends LitElement {
   @property() name = '';
   protected render() {
-    return html`
-      <p @mylogin=${this._loginListener}><slot></slot></p>
+    return html` <p @mylogin=${this._loginListener}><slot></slot></p>
       <p>Login: ${this.name}</p>`;
   }
   private _loginListener(e: CustomEvent) {
diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/host/my-element.ts b/packages/lit-dev-content/samples/v2-docs/components/events/host/my-element.ts
index ee0bb9430..b0f923ffb 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/events/host/my-element.ts
+++ b/packages/lit-dev-content/samples/v2-docs/components/events/host/my-element.ts
@@ -6,13 +6,17 @@ class MyElement extends LitElement {
   @property() shadowName = '';
   constructor() {
     super();
-    this.addEventListener('click',
-      (e: Event) => this.hostName = (e.target as Element).localName);
+    this.addEventListener(
+      'click',
+      (e: Event) => (this.hostName = (e.target as Element).localName),
+    );
   }
   protected createRenderRoot() {
     const root = super.createRenderRoot();
-    root.addEventListener('click',
-      (e: Event) => this.shadowName = (e.target as Element).localName);
+    root.addEventListener(
+      'click',
+      (e: Event) => (this.shadowName = (e.target as Element).localName),
+    );
     return root;
   }
   protected render() {
diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/list/my-element.ts b/packages/lit-dev-content/samples/v2-docs/components/events/list/my-element.ts
index 39ea50868..4ef305cd4 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/events/list/my-element.ts
+++ b/packages/lit-dev-content/samples/v2-docs/components/events/list/my-element.ts
@@ -8,9 +8,11 @@ class MyElement extends LitElement {
   protected render() {
     return html`
       <div key="container" @click=${this._clickHandler}>
-        ${this.data.map(i => html`
-          <button key=${i} @focus=${this._focusHandler}>Item ${i}</button>
-        `)}
+        ${this.data.map(
+          (i) => html`
+            <button key=${i} @focus=${this._focusHandler}>Item ${i}</button>
+          `,
+        )}
       </div>
       <p>Clicked: ${this.clicked}</p>
       <p>Focused: ${this.focused}</p>
diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/update/my-dispatcher.ts b/packages/lit-dev-content/samples/v2-docs/components/events/update/my-dispatcher.ts
index c4d722319..2f9513237 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/events/update/my-dispatcher.ts
+++ b/packages/lit-dev-content/samples/v2-docs/components/events/update/my-dispatcher.ts
@@ -6,7 +6,9 @@ class MyDispatcher extends LitElement {
   @property({type: Boolean}) open = true;
   protected render() {
     return html`
-      <p><button @click=${this._notify}>${this.open ? 'Close' : 'Open'}</button></p>
+      <p>
+        <button @click=${this._notify}>${this.open ? 'Close' : 'Open'}</button>
+      </p>
       <p ?hidden=${!this.open}>Content!</p>
     `;
   }
diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/update/my-listener.ts b/packages/lit-dev-content/samples/v2-docs/components/events/update/my-listener.ts
index ecf396e38..b64b2a4d1 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/events/update/my-listener.ts
+++ b/packages/lit-dev-content/samples/v2-docs/components/events/update/my-listener.ts
@@ -3,10 +3,11 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('my-listener')
 class MyListener extends LitElement {
-  @property({type: Number}) height: number|null = null;
+  @property({type: Number}) height: number | null = null;
   protected render() {
-    return html`
-      <p @opened=${this._listener} @closed=${this._listener}><slot></slot></p>
+    return html` <p @opened=${this._listener} @closed=${this._listener}>
+        <slot></slot>
+      </p>
       <p>Height: ${this.height}px</p>`;
   }
   private _listener() {
@@ -14,7 +15,9 @@ class MyListener extends LitElement {
   }
   protected updated() {
     if (this.height === null) {
-      requestAnimationFrame(() => this.height = this.getBoundingClientRect().height);
+      requestAnimationFrame(
+        () => (this.height = this.getBoundingClientRect().height),
+      );
     }
   }
 }
diff --git a/packages/lit-dev-content/samples/v2-docs/components/overview/simple-greeting/index.html b/packages/lit-dev-content/samples/v2-docs/components/overview/simple-greeting/index.html
index 41814caa5..e0d58f0cb 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/overview/simple-greeting/index.html
+++ b/packages/lit-dev-content/samples/v2-docs/components/overview/simple-greeting/index.html
@@ -1,14 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-  <script type="module" src="simple-greeting.js"></script>
-  <title>Lit code sample</title>
-</head>
-<body>
-  <simple-greeting></simple-greeting>
-</body>
+    <script type="module" src="simple-greeting.js"></script>
+    <title>Lit code sample</title>
+  </head>
+  <body>
+    <simple-greeting></simple-greeting>
+  </body>
 </html>
diff --git a/packages/lit-dev-content/samples/v2-docs/components/shadowdom/namedslots/index.html b/packages/lit-dev-content/samples/v2-docs/components/shadowdom/namedslots/index.html
index 9bf7f3473..575cf9ad3 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/shadowdom/namedslots/index.html
+++ b/packages/lit-dev-content/samples/v2-docs/components/shadowdom/namedslots/index.html
@@ -4,7 +4,7 @@
   <p slot="two">Include me in slot "two".</p>
 </my-element>
 
-<hr>
+<hr />
 
 <my-element>
   <p slot="one">Include me in slot "one".</p>
diff --git a/packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/default-root.ts b/packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/default-root.ts
index 3d3210226..e04aab141 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/default-root.ts
+++ b/packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/default-root.ts
@@ -4,8 +4,6 @@ import {customElement} from 'lit/decorators.js';
 @customElement('default-root')
 export class DefaultRoot extends LitElement {
   protected render() {
-    return html`
-      <p>By default template renders into shadow DOM.</p>
-    `;
+    return html` <p>By default template renders into shadow DOM.</p> `;
   }
 }
diff --git a/packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/index.html b/packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/index.html
index 68192b58c..ae4ed4c95 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/index.html
+++ b/packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/packages/lit-dev-content/samples/v2-docs/components/shadowdom/slots/index.html b/packages/lit-dev-content/samples/v2-docs/components/shadowdom/slots/index.html
index c4385b0f0..bc48d1d54 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/shadowdom/slots/index.html
+++ b/packages/lit-dev-content/samples/v2-docs/components/shadowdom/slots/index.html
@@ -4,7 +4,7 @@
   <p>Render me in a slot</p>
 </my-element>
 
-<hr>
+<hr />
 
 <my-element>
   <p>Render me in a slot</p>
diff --git a/packages/lit-dev-content/samples/v2-docs/components/style/maps/my-element.ts b/packages/lit-dev-content/samples/v2-docs/components/style/maps/my-element.ts
index 95edb6d42..e5bea60ed 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/style/maps/my-element.ts
+++ b/packages/lit-dev-content/samples/v2-docs/components/style/maps/my-element.ts
@@ -6,13 +6,18 @@ import {styleMap} from 'lit/directives/style-map.js';
 @customElement('my-element')
 export class MyElement extends LitElement {
   static styles = css`
-    .someclass { border: 1px solid red; padding: 4px; }
-    .anotherclass { background-color: navy; }
+    .someclass {
+      border: 1px solid red;
+      padding: 4px;
+    }
+    .anotherclass {
+      background-color: navy;
+    }
   `;
   @property()
-  classes = { someclass: true, anotherclass: true };
+  classes = {someclass: true, anotherclass: true};
   @property()
-  styles = { color: 'lightgreen', fontFamily: 'Roboto' };
+  styles = {color: 'lightgreen', fontFamily: 'Roboto'};
   protected render() {
     return html`
       <div class=${classMap(this.classes)} style=${styleMap(this.styles)}>
diff --git a/packages/lit-dev-content/samples/v2-docs/components/style/slottedselector/my-element.ts b/packages/lit-dev-content/samples/v2-docs/components/style/slottedselector/my-element.ts
index 69c4ccd59..8771fc843 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/style/slottedselector/my-element.ts
+++ b/packages/lit-dev-content/samples/v2-docs/components/style/slottedselector/my-element.ts
@@ -4,9 +4,15 @@ import {customElement} from 'lit/decorators.js';
 @customElement('my-element')
 export class MyElement extends LitElement {
   static styles = css`
-    ::slotted(*) { font-family: Roboto; }
-    ::slotted(p) { color: blue; }
-    div ::slotted(*) { color: red; }
+    ::slotted(*) {
+      font-family: Roboto;
+    }
+    ::slotted(p) {
+      color: blue;
+    }
+    div ::slotted(*) {
+      color: red;
+    }
   `;
   protected render() {
     return html`
diff --git a/packages/lit-dev-content/samples/v2-docs/components/style/superstyles/my-element.ts b/packages/lit-dev-content/samples/v2-docs/components/style/superstyles/my-element.ts
index 2a2551aa7..cb381ae30 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/style/superstyles/my-element.ts
+++ b/packages/lit-dev-content/samples/v2-docs/components/style/superstyles/my-element.ts
@@ -6,8 +6,10 @@ import {SuperElement} from './super-element.js';
 export class MyElement extends SuperElement {
   static styles = [
     SuperElement.styles,
-    css`div {
-      color: red;
-    }`
+    css`
+      div {
+        color: red;
+      }
+    `,
   ];
 }
diff --git a/packages/lit-dev-content/samples/v2-docs/components/style/superstyles/super-element.ts b/packages/lit-dev-content/samples/v2-docs/components/style/superstyles/super-element.ts
index 9e2a75b98..0d99805b7 100644
--- a/packages/lit-dev-content/samples/v2-docs/components/style/superstyles/super-element.ts
+++ b/packages/lit-dev-content/samples/v2-docs/components/style/superstyles/super-element.ts
@@ -10,8 +10,6 @@ export class SuperElement extends LitElement {
     }
   ` as CSSResultGroup;
   protected render() {
-    return html`
-      <div>Content</div>
-    `;
+    return html` <div>Content</div> `;
   }
 }
diff --git a/packages/lit-dev-content/samples/v2-docs/composition/mediator-pattern/index.html b/packages/lit-dev-content/samples/v2-docs/composition/mediator-pattern/index.html
index c8ac8f56d..305c46f49 100644
--- a/packages/lit-dev-content/samples/v2-docs/composition/mediator-pattern/index.html
+++ b/packages/lit-dev-content/samples/v2-docs/composition/mediator-pattern/index.html
@@ -1,14 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-  <script type="module" src="mediator-element.js"></script>
-  <title>Lit code sample</title>
-</head>
-<body>
-  <mediator-element></mediator-element>
-</body>
+    <script type="module" src="mediator-element.js"></script>
+    <title>Lit code sample</title>
+  </head>
+  <body>
+    <mediator-element></mediator-element>
+  </body>
 </html>
diff --git a/packages/lit-dev-content/samples/v2-docs/composition/mediator-pattern/mediator-element.ts b/packages/lit-dev-content/samples/v2-docs/composition/mediator-pattern/mediator-element.ts
index 5bb0576cd..d089ace83 100644
--- a/packages/lit-dev-content/samples/v2-docs/composition/mediator-pattern/mediator-element.ts
+++ b/packages/lit-dev-content/samples/v2-docs/composition/mediator-pattern/mediator-element.ts
@@ -28,10 +28,12 @@ export class MediatorElement extends LitElement {
 
   render() {
     return html`<p>Nickname: ${this.name}</p>
-        <label>Enter new nickname:
-          <input @input=${this._inputChanged}>
-        </label>
-        <button @click=${this._updateName}
-                .disabled=${!this._submitEnabled}>Submit</button>`;
+      <label
+        >Enter new nickname:
+        <input @input=${this._inputChanged} />
+      </label>
+      <button @click=${this._updateName} .disabled=${!this._submitEnabled}>
+        Submit
+      </button>`;
   }
 }
diff --git a/packages/lit-dev-content/samples/v2-docs/controllers/mouse/my-element.ts b/packages/lit-dev-content/samples/v2-docs/controllers/mouse/my-element.ts
index e2a3c42f9..85ddfdc04 100644
--- a/packages/lit-dev-content/samples/v2-docs/controllers/mouse/my-element.ts
+++ b/packages/lit-dev-content/samples/v2-docs/controllers/mouse/my-element.ts
@@ -12,7 +12,8 @@ class MyElement extends LitElement {
       <pre>
         x: ${this.mouse.pos.x as number}
         y: ${this.mouse.pos.y as number}
-      </pre>
+      </pre
+      >
     `;
   }
 }
diff --git a/packages/lit-dev-content/samples/v2-docs/controllers/names/my-element.ts b/packages/lit-dev-content/samples/v2-docs/controllers/names/my-element.ts
index 2c9d29ba7..a1204dd4b 100644
--- a/packages/lit-dev-content/samples/v2-docs/controllers/names/my-element.ts
+++ b/packages/lit-dev-content/samples/v2-docs/controllers/names/my-element.ts
@@ -8,23 +8,22 @@ export class MyElement extends LitElement {
   private names = new NamesController(this);
 
   render() {
-    return html`
-      <h3>Names List</h3>
-      Kind: <select @change=${this._kindChange}>
-      ${this.names.kinds.map(
-        (k) => html`<option value=${k}>${k}</option>`)
-      }
-    </select>
-    ${this.names.render({
-      complete: (result: Names.Result) => html`
-        <p>List of ${this.names.kind}</p>
-        <ul>${result.map(i => html`<li>${i.name}</li>`)}
-        </ul>
-      `,
-      initial: () => html`<p>Select a kind...</p>`,
-      pending: () => html`<p>Loading ${this.names.kind}...</p>`,
-      error: (e: any) => html`<p>${e}</p>`
-    })}`;
+    return html` <h3>Names List</h3>
+      Kind:
+      <select @change=${this._kindChange}>
+        ${this.names.kinds.map((k) => html`<option value=${k}>${k}</option>`)}
+      </select>
+      ${this.names.render({
+        complete: (result: Names.Result) => html`
+          <p>List of ${this.names.kind}</p>
+          <ul>
+            ${result.map((i) => html`<li>${i.name}</li>`)}
+          </ul>
+        `,
+        initial: () => html`<p>Select a kind...</p>`,
+        pending: () => html`<p>Loading ${this.names.kind}...</p>`,
+        error: (e: any) => html`<p>${e}</p>`,
+      })}`;
   }
 
   private _kindChange(e: Event) {
diff --git a/packages/lit-dev-content/samples/v2-docs/controllers/names/names-api.ts b/packages/lit-dev-content/samples/v2-docs/controllers/names/names-api.ts
index c9e013425..71a1174cb 100644
--- a/packages/lit-dev-content/samples/v2-docs/controllers/names/names-api.ts
+++ b/packages/lit-dev-content/samples/v2-docs/controllers/names/names-api.ts
@@ -1,5 +1,5 @@
 export type Result = Array<{name: string}>;
-export type Kind = typeof kinds[number];
+export type Kind = (typeof kinds)[number];
 
 export const baseUrl = 'https://swapi.py4e.com/api/';
 
@@ -10,5 +10,5 @@ export const kinds = [
   'species',
   'planets',
   // Inserted to demo an error state.
-  'error'
+  'error',
 ] as const;
diff --git a/packages/lit-dev-content/samples/v2-docs/controllers/names/names-controller.ts b/packages/lit-dev-content/samples/v2-docs/controllers/names/names-controller.ts
index decb19631..48417c4e6 100644
--- a/packages/lit-dev-content/samples/v2-docs/controllers/names/names-controller.ts
+++ b/packages/lit-dev-content/samples/v2-docs/controllers/names/names-controller.ts
@@ -11,7 +11,8 @@ export class NamesController {
 
   constructor(host: ReactiveControllerHost) {
     this.host = host;
-    this.task = new Task<[Names.Kind], Names.Result>(host,
+    this.task = new Task<[Names.Kind], Names.Result>(
+      host,
       async ([kind]: [Names.Kind]) => {
         if (!kind?.trim()) {
           return initialState;
@@ -23,7 +24,8 @@ export class NamesController {
         } catch {
           throw new Error(`Failed to fetch "${kind}"`);
         }
-      }, () => [this.kind]
+      },
+      () => [this.kind],
     );
   }
 
@@ -31,7 +33,9 @@ export class NamesController {
     this._kind = value;
     this.host.requestUpdate();
   }
-  get kind() { return this._kind; }
+  get kind() {
+    return this._kind;
+  }
 
   render(renderFunctions: StatusRenderer<Names.Result>) {
     return this.task.render(renderFunctions);
diff --git a/packages/lit-dev-content/samples/v2-docs/controllers/overview/my-element.ts b/packages/lit-dev-content/samples/v2-docs/controllers/overview/my-element.ts
index 9286733c4..1cb0ee33c 100644
--- a/packages/lit-dev-content/samples/v2-docs/controllers/overview/my-element.ts
+++ b/packages/lit-dev-content/samples/v2-docs/controllers/overview/my-element.ts
@@ -15,5 +15,7 @@ class MyElement extends LitElement {
 }
 
 const timeFormat = new Intl.DateTimeFormat('en-US', {
-  hour: 'numeric', minute: 'numeric', second: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
 });
diff --git a/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/index.html b/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/index.html
index 2e89f4951..92eba33e8 100644
--- a/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/index.html
+++ b/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <title>lit-localize runtime example</title>
   <script type="module" src="./index.js"></script>
diff --git a/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/index.ts b/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/index.ts
index 6e9551010..cfb30f80e 100644
--- a/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/index.ts
+++ b/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/index.ts
@@ -30,7 +30,7 @@ window.addEventListener(LOCALE_STATUS_EVENT, ({detail}) => {
     spinner.setAttribute('hidden', '');
   } else if (detail.status === 'error') {
     console.error(
-      `Error loading locale ${detail.errorLocale}: ` + detail.errorMessage
+      `Error loading locale ${detail.errorLocale}: ` + detail.errorMessage,
     );
     spinner.setAttribute('hidden', '');
   }
diff --git a/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/locale-picker.ts b/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/locale-picker.ts
index 59efb6d5a..de4ebe3b4 100644
--- a/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/locale-picker.ts
+++ b/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/locale-picker.ts
@@ -11,7 +11,7 @@ import {allLocales} from './locale-codes.js';
 import {localized} from '@lit/localize';
 
 const localeNames: {
-  [L in typeof allLocales[number]]: string;
+  [L in (typeof allLocales)[number]]: string;
 } = {
   en: 'English',
   'es-419': 'Español (Latinoamérica)‎',
@@ -31,7 +31,7 @@ export class LocalePicker extends LitElement {
           (locale) =>
             html`<option value=${locale} ?selected=${locale === getLocale()}>
               ${localeNames[locale]}
-            </option>`
+            </option>`,
         )}
       </select>
     `;
diff --git a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-one.ts b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-one.ts
index 94504aa63..f499d8d09 100644
--- a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-one.ts
+++ b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-one.ts
@@ -1,10 +1,10 @@
 import {LitElement, html} from 'lit';
 import {customElement} from 'lit/decorators.js';
-import {Highlightable} from './highlightable.js'
+import {Highlightable} from './highlightable.js';
 
 @customElement('element-one')
 export class ElementOne extends Highlightable(LitElement) {
-  render(){
+  render() {
     return this.renderHighlight(html`<p>Simple highlight</p>`);
   }
 }
diff --git a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-two.js b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-two.js
index 8da1e16b3..3cc8a6e58 100644
--- a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-two.js
+++ b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-two.js
@@ -6,14 +6,20 @@ const HighlightableLitElement = Highlightable(LitElement);
 export class ElementTwo extends HighlightableLitElement {
   static styles = [
     HighlightableLitElement.styles || [],
-    css`:host { display: block; }`,
+    css`
+      :host {
+        display: block;
+      }
+    `,
   ];
   render() {
     return this.renderHighlight(html`
       <label>
-        <input type="checkbox"
+        <input
+          type="checkbox"
           .checked=${this.highlight}
-          @change=${this.toggleHighlight}>
+          @change=${this.toggleHighlight}
+        />
         Toggleable highlight
       </label>
     `);
diff --git a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-two.ts b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-two.ts
index 0e2990047..3d694a6a6 100644
--- a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-two.ts
+++ b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-two.ts
@@ -1,6 +1,6 @@
 import {LitElement, html, css} from 'lit';
 import {customElement} from 'lit/decorators.js';
-import {Highlightable} from './highlightable.js'
+import {Highlightable} from './highlightable.js';
 
 const HighlightableLitElement = Highlightable(LitElement);
 
@@ -8,14 +8,20 @@ const HighlightableLitElement = Highlightable(LitElement);
 export class ElementTwo extends HighlightableLitElement {
   static styles = [
     HighlightableLitElement.styles || [],
-    css`:host { display: block; }`
+    css`
+      :host {
+        display: block;
+      }
+    `,
   ];
-  render(){
+  render() {
     return this.renderHighlight(html`
       <label>
-        <input type="checkbox"
+        <input
+          type="checkbox"
           .checked=${this.highlight}
-          @change=${this.toggleHighlight}>
+          @change=${this.toggleHighlight}
+        />
         Toggleable highlight
       </label>
     `);
diff --git a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/highlightable.js b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/highlightable.js
index fd0fa1497..26e1873fc 100644
--- a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/highlightable.js
+++ b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/highlightable.js
@@ -11,7 +11,11 @@ export const Highlightable = (superClass) => {
     // Adds some styles...
     static styles = [
       superClass.styles ?? [],
-      css`.highlight { background: yellow; }`,
+      css`
+        .highlight {
+          background: yellow;
+        }
+      `,
     ];
 
     constructor() {
@@ -22,10 +26,9 @@ export const Highlightable = (superClass) => {
 
     // ...and a helper render method:
     renderHighlight(content) {
-      return html`
-          <div class=${classMap({highlight: this.highlight})}>
-            ${content}
-          </div>`;
+      return html` <div class=${classMap({highlight: this.highlight})}>
+        ${content}
+      </div>`;
     }
   }
   return HighlightableElement;
diff --git a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/highlightable.ts b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/highlightable.ts
index c649e05e1..68f76b9ee 100644
--- a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/highlightable.ts
+++ b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/highlightable.ts
@@ -11,25 +11,29 @@ export declare class HighlightableInterface {
 }
 /* playground-fold-end */
 
-export const Highlightable =
-  <T extends Constructor<LitElement>>(superClass: T) => {
-    class HighlightableElement extends superClass {
-      // Adds some styles...
-      static styles = [
-        (superClass as unknown as typeof LitElement).styles ?? [],
-        css`.highlight { background: yellow; }`
-      ];
+export const Highlightable = <T extends Constructor<LitElement>>(
+  superClass: T,
+) => {
+  class HighlightableElement extends superClass {
+    // Adds some styles...
+    static styles = [
+      (superClass as unknown as typeof LitElement).styles ?? [],
+      css`
+        .highlight {
+          background: yellow;
+        }
+      `,
+    ];
 
-      // ...a public `highlight` property/attribute...
-      @property({type: Boolean}) highlight = false;
+    // ...a public `highlight` property/attribute...
+    @property({type: Boolean}) highlight = false;
 
-      // ...and a helper render method:
-      renderHighlight(content: unknown) {
-        return html`
-          <div class=${classMap({highlight: this.highlight})}>
-            ${content}
-          </div>`;
-        }
-      }
-      return HighlightableElement as Constructor<HighlightableInterface> & T;
-    };
+    // ...and a helper render method:
+    renderHighlight(content: unknown) {
+      return html` <div class=${classMap({highlight: this.highlight})}>
+        ${content}
+      </div>`;
+    }
+  }
+  return HighlightableElement as Constructor<HighlightableInterface> & T;
+};
diff --git a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/index.html b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/index.html
index 6416a4125..9142728cd 100644
--- a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/index.html
+++ b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/index.html
@@ -1,14 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module" src="./element-one.js"></script>
-  <script type="module" src="./element-two.js"></script>
-  <title>lit-element code sample</title>
-</head>
-<body>
-  <element-one highlight></element-one>
-  <element-two></element-two>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="module" src="./element-one.js"></script>
+    <script type="module" src="./element-two.js"></script>
+    <title>lit-element code sample</title>
+  </head>
+  <body>
+    <element-one highlight></element-one>
+    <element-two></element-two>
+  </body>
 </html>
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/compose/index.html b/packages/lit-dev-content/samples/v2-docs/templates/compose/index.html
index 32dfee477..a7a3601a3 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/compose/index.html
+++ b/packages/lit-dev-content/samples/v2-docs/templates/compose/index.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="./my-page.js" type="module"></script>
-  <title>lit-element code sample</title>
-</head>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="./my-page.js" type="module"></script>
+    <title>lit-element code sample</title>
+  </head>
   <body>
     <my-page></my-page>
   </body>
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/compose/my-page.ts b/packages/lit-dev-content/samples/v2-docs/templates/compose/my-page.ts
index cb1278529..29e9353f6 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/compose/my-page.ts
+++ b/packages/lit-dev-content/samples/v2-docs/templates/compose/my-page.ts
@@ -1,10 +1,8 @@
 import {LitElement, html} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 
-
 @customElement('my-page')
 class MyPage extends LitElement {
-
   @property({attribute: false})
   article = {
     title: 'My Nifty Article',
@@ -25,8 +23,7 @@ class MyPage extends LitElement {
 
   render() {
     return html`
-      ${this.headerTemplate()}
-      ${this.articleTemplate()}
+      ${this.headerTemplate()} ${this.articleTemplate()}
       ${this.footerTemplate()}
     `;
   }
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/composeimports/index.html b/packages/lit-dev-content/samples/v2-docs/templates/composeimports/index.html
index 32dfee477..a7a3601a3 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/composeimports/index.html
+++ b/packages/lit-dev-content/samples/v2-docs/templates/composeimports/index.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="./my-page.js" type="module"></script>
-  <title>lit-element code sample</title>
-</head>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="./my-page.js" type="module"></script>
+    <title>lit-element code sample</title>
+  </head>
   <body>
     <my-page></my-page>
   </body>
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-article.ts b/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-article.ts
index df8cc1e6b..97e8c2482 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-article.ts
+++ b/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-article.ts
@@ -4,8 +4,6 @@ import {customElement} from 'lit/decorators.js';
 @customElement('my-article')
 class MyArticle extends LitElement {
   render() {
-    return html`
-      <article>article</article>
-    `;
+    return html` <article>article</article> `;
   }
 }
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-footer.ts b/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-footer.ts
index 5a7bb688e..2bc0a910b 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-footer.ts
+++ b/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-footer.ts
@@ -4,8 +4,6 @@ import {customElement} from 'lit/decorators.js';
 @customElement('my-footer')
 class MyFooter extends LitElement {
   render() {
-    return html`
-      <footer>footer</footer>
-    `;
+    return html` <footer>footer</footer> `;
   }
 }
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-header.ts b/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-header.ts
index 29a4af465..8014f775a 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-header.ts
+++ b/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-header.ts
@@ -4,8 +4,6 @@ import {customElement} from 'lit/decorators.js';
 @customElement('my-header')
 class MyHeader extends LitElement {
   render() {
-    return html`
-      <header>header</header>
-    `;
+    return html` <header>header</header> `;
   }
 }
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/define/index.html b/packages/lit-dev-content/samples/v2-docs/templates/define/index.html
index 241701161..8c658e1b2 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/define/index.html
+++ b/packages/lit-dev-content/samples/v2-docs/templates/define/index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module" src="./my-element.js"></script>
-  <title>Lit code sample</title>
-</head>
-<body>
-  <my-element></my-element>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="module" src="./my-element.js"></script>
+    <title>Lit code sample</title>
+  </head>
+  <body>
+    <my-element></my-element>
+  </body>
 </html>
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/define/my-element.ts b/packages/lit-dev-content/samples/v2-docs/templates/define/my-element.ts
index d4c96c980..7934ac8fe 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/define/my-element.ts
+++ b/packages/lit-dev-content/samples/v2-docs/templates/define/my-element.ts
@@ -3,8 +3,7 @@ import {customElement} from 'lit/decorators.js';
 
 @customElement('my-element')
 class MyElement extends LitElement {
-
-  render(){
+  render() {
     return html`<p>Hello from my template.</p>`;
   }
 }
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/design/index.html b/packages/lit-dev-content/samples/v2-docs/templates/design/index.html
index cb310edd0..674e46248 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/design/index.html
+++ b/packages/lit-dev-content/samples/v2-docs/templates/design/index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module" src="./update-properties.js"></script>
-  <title>lit-element code sample</title>
-</head>
-<body>
-  <update-properties></update-properties>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="module" src="./update-properties.js"></script>
+    <title>lit-element code sample</title>
+  </head>
+  <body>
+    <update-properties></update-properties>
+  </body>
 </html>
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/design/update-properties.ts b/packages/lit-dev-content/samples/v2-docs/templates/design/update-properties.ts
index b0b6a2bad..982dd1aba 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/design/update-properties.ts
+++ b/packages/lit-dev-content/samples/v2-docs/templates/design/update-properties.ts
@@ -3,19 +3,16 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('update-properties')
 class UpdateProperties extends LitElement {
-
   @property()
   message: string = 'Loading...';
 
   constructor() {
     super();
-    this.loadStuff().then((content) => this.message = content);
+    this.loadStuff().then((content) => (this.message = content));
   }
 
   render() {
-    return html`
-      <p>${this.message}</p>
-    `;
+    return html` <p>${this.message}</p> `;
   }
 
   loadStuff() {
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/expressions/my-element.ts b/packages/lit-dev-content/samples/v2-docs/templates/expressions/my-element.ts
index 20651bbdf..73279aac7 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/expressions/my-element.ts
+++ b/packages/lit-dev-content/samples/v2-docs/templates/expressions/my-element.ts
@@ -10,13 +10,16 @@ class MyElement extends LitElement {
   /* playground-fold-end */
 
   render() {
-    return html`
-      <p>
+    return html` <p>
         ${this.greeting}
-        <button @click=${() => this.show = !this.show}>Todos</button>
+        <button @click=${() => (this.show = !this.show)}>Todos</button>
       </p>
-      ${this.show ? html`
-          <ul>${this.todos.map(i => html`<li>${i}</li>`)}</ul>
-        ` : ''}`;
-  }/* playground-fold */
+      ${this.show
+        ? html`
+            <ul>
+              ${this.todos.map((i) => html`<li>${i}</li>`)}
+            </ul>
+          `
+        : ''}`;
+  } /* playground-fold */
 }
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/index.html b/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/index.html
+++ b/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/my-element.js b/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/my-element.js
index fb56fe7af..5ad5cb829 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/my-element.js
+++ b/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/my-element.js
@@ -2,22 +2,21 @@
 import {LitElement, html} from 'lit';
 
 class MyElement extends LitElement {
-/* playground-fold-end */
-
-static properties = {
-  colors: {},
-};
+  /* playground-fold-end */
 
-constructor() {
-  super();
-  this.colors = ['red', 'green', 'blue'];
-}
+  static properties = {
+    colors: {},
+  };
 
-render() {
-  return html`<p>Colors: ${this.colors}</p>`;
-}
-/* playground-fold */
+  constructor() {
+    super();
+    this.colors = ['red', 'green', 'blue'];
+  }
 
+  render() {
+    return html`<p>Colors: ${this.colors}</p>`;
+  }
+  /* playground-fold */
 }
 customElements.define('my-element', MyElement);
 /* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/my-element.ts b/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/my-element.ts
index e90fffa67..76539b680 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/my-element.ts
+++ b/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/my-element.ts
@@ -4,14 +4,13 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('my-element')
 class MyElement extends LitElement {
-/* playground-fold-end */
-
-@property() colors = ['red', 'green', 'blue'];
+  /* playground-fold-end */
 
-render() {
-  return html`<p>Colors: ${this.colors}</p>`;
-}
-/* playground-fold */
+  @property() colors = ['red', 'green', 'blue'];
 
+  render() {
+    return html`<p>Colors: ${this.colors}</p>`;
+  }
+  /* playground-fold */
 }
 /* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/lists-map/index.html b/packages/lit-dev-content/samples/v2-docs/templates/lists-map/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/lists-map/index.html
+++ b/packages/lit-dev-content/samples/v2-docs/templates/lists-map/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/lists-map/my-element.js b/packages/lit-dev-content/samples/v2-docs/templates/lists-map/my-element.js
index 18b0fc2f0..392746450 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/lists-map/my-element.js
+++ b/packages/lit-dev-content/samples/v2-docs/templates/lists-map/my-element.js
@@ -2,28 +2,27 @@
 import {LitElement, html} from 'lit';
 
 class MyElement extends LitElement {
-/* playground-fold-end */
-
-static properties = {
-  colors: {},
-};
+  /* playground-fold-end */
 
-constructor() {
-  super();
-  this.colors = ['red', 'green', 'blue'];
-}
+  static properties = {
+    colors: {},
+  };
 
-render() {
-  return html`
-    <ul>
-      ${this.colors.map((color) =>
-        html`<li style="color: ${color}">${color}</li>`
-      )}
-    </ul>
-  `;
-}
-/* playground-fold */
+  constructor() {
+    super();
+    this.colors = ['red', 'green', 'blue'];
+  }
 
+  render() {
+    return html`
+      <ul>
+        ${this.colors.map(
+          (color) => html`<li style="color: ${color}">${color}</li>`,
+        )}
+      </ul>
+    `;
+  }
+  /* playground-fold */
 }
 customElements.define('my-element', MyElement);
 /* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/lists-map/my-element.ts b/packages/lit-dev-content/samples/v2-docs/templates/lists-map/my-element.ts
index 97fb8afa3..11ac98748 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/lists-map/my-element.ts
+++ b/packages/lit-dev-content/samples/v2-docs/templates/lists-map/my-element.ts
@@ -4,20 +4,19 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('my-element')
 class MyElement extends LitElement {
-/* playground-fold-end */
-
-@property() colors = ['red', 'green', 'blue'];
+  /* playground-fold-end */
 
-render() {
-  return html`
-    <ul>
-      ${this.colors.map((color) =>
-        html`<li style="color: ${color}">${color}</li>`
-      )}
-    </ul>
-  `;
-}
-/* playground-fold */
+  @property() colors = ['red', 'green', 'blue'];
 
+  render() {
+    return html`
+      <ul>
+        ${this.colors.map(
+          (color) => html`<li style="color: ${color}">${color}</li>`,
+        )}
+      </ul>
+    `;
+  }
+  /* playground-fold */
 }
 /* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/lists-repeat/index.html b/packages/lit-dev-content/samples/v2-docs/templates/lists-repeat/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/lists-repeat/index.html
+++ b/packages/lit-dev-content/samples/v2-docs/templates/lists-repeat/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/v2-docs/templates/lists-repeat/my-element.ts b/packages/lit-dev-content/samples/v2-docs/templates/lists-repeat/my-element.ts
index 9a48488ae..db180c68c 100644
--- a/packages/lit-dev-content/samples/v2-docs/templates/lists-repeat/my-element.ts
+++ b/packages/lit-dev-content/samples/v2-docs/templates/lists-repeat/my-element.ts
@@ -8,35 +8,42 @@ import {repeat} from 'lit/directives/repeat.js';
 
 @customElement('my-element')
 class MyElement extends LitElement {
+  private sort = 1;
 
-private sort = 1;
+  @property() employees = [
+    {id: 0, givenName: 'Fred', familyName: 'Flintstone'},
+    {id: 1, givenName: 'George', familyName: 'Jetson'},
+    {id: 2, givenName: 'Barney', familyName: 'Rubble'},
+    {id: 3, givenName: 'Cosmo', familyName: 'Spacely'},
+  ];
+  /* playground-fold-end */
 
-@property() employees = [
-  {id: 0, givenName: 'Fred', familyName: 'Flintstone'},
-  {id: 1, givenName: 'George', familyName: 'Jetson'},
-  {id: 2, givenName: 'Barney', familyName: 'Rubble'},
-  {id: 3, givenName: 'Cosmo', familyName: 'Spacely'}
-];
-/* playground-fold-end */
-
-render() {
-  return html`
-    <ul>
-      ${repeat(this.employees, (employee) => employee.id, (employee, index) => html`
-        <li>${index}: ${employee.familyName}, ${employee.givenName}</li>
-      `)}
-    </ul>
-    <button @click=${this.toggleSort}>Toggle sort</button>
-  `;
-}
-/* playground-fold */
-
-private toggleSort() {
-  this.sort *= -1;
-  this.employees = [...this.employees.sort((a, b) =>
-    this.sort * (a.familyName.localeCompare(b.familyName) ||
-    a.givenName.localeCompare(b.givenName)))];
-}
+  render() {
+    return html`
+      <ul>
+        ${repeat(
+          this.employees,
+          (employee) => employee.id,
+          (employee, index) => html`
+            <li>${index}: ${employee.familyName}, ${employee.givenName}</li>
+          `,
+        )}
+      </ul>
+      <button @click=${this.toggleSort}>Toggle sort</button>
+    `;
+  }
+  /* playground-fold */
 
+  private toggleSort() {
+    this.sort *= -1;
+    this.employees = [
+      ...this.employees.sort(
+        (a, b) =>
+          this.sort *
+          (a.familyName.localeCompare(b.familyName) ||
+            a.givenName.localeCompare(b.givenName)),
+      ),
+    ];
+  }
 }
 /* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/v2-docs/what-is-lit/icons.ts b/packages/lit-dev-content/samples/v2-docs/what-is-lit/icons.ts
index 2d149f146..91233aaec 100644
--- a/packages/lit-dev-content/samples/v2-docs/what-is-lit/icons.ts
+++ b/packages/lit-dev-content/samples/v2-docs/what-is-lit/icons.ts
@@ -1,5 +1,45 @@
 import {html} from 'lit';
 
-export const replay = html`<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><title>Replay</title><g><rect fill="none" height="24" width="24"/><rect fill="none" height="24" width="24"/><rect fill="none" height="24" width="24"/></g><g><g/><path d="M12,5V1L7,6l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6H4c0,4.42,3.58,8,8,8s8-3.58,8-8S16.42,5,12,5z"/></g></svg>`;
-export const pause = html`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><title>Pause</title><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>`;
-export const play = html`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><title>Play</title><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z"/></svg>`;
+export const replay = html`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  enable-background="new 0 0 24 24"
+  height="24px"
+  viewBox="0 0 24 24"
+  width="24px"
+  fill="#000000"
+>
+  <title>Replay</title>
+  <g>
+    <rect fill="none" height="24" width="24" />
+    <rect fill="none" height="24" width="24" />
+    <rect fill="none" height="24" width="24" />
+  </g>
+  <g>
+    <g />
+    <path
+      d="M12,5V1L7,6l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6H4c0,4.42,3.58,8,8,8s8-3.58,8-8S16.42,5,12,5z"
+    />
+  </g>
+</svg>`;
+export const pause = html`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 0 24 24"
+  width="24px"
+  fill="#000000"
+>
+  <title>Pause</title>
+  <path d="M0 0h24v24H0V0z" fill="none" />
+  <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+</svg>`;
+export const play = html`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 0 24 24"
+  width="24px"
+  fill="#000000"
+>
+  <title>Play</title>
+  <path d="M0 0h24v24H0V0z" fill="none" />
+  <path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z" />
+</svg>`;
diff --git a/packages/lit-dev-content/samples/v2-docs/what-is-lit/index.html b/packages/lit-dev-content/samples/v2-docs/what-is-lit/index.html
index 00c26fcf6..243f398fb 100644
--- a/packages/lit-dev-content/samples/v2-docs/what-is-lit/index.html
+++ b/packages/lit-dev-content/samples/v2-docs/what-is-lit/index.html
@@ -1,7 +1,11 @@
 <!doctype html>
-<head><!-- playground-fold -->
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@1,800&display=swap" rel="stylesheet">
+<head>
+  <!-- playground-fold -->
+  <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@1,800&display=swap"
+    rel="stylesheet"
+  />
   <script type="module" src="./my-timer.js"></script>
   <style>
     body {
diff --git a/packages/lit-dev-content/samples/v2-docs/what-is-lit/my-timer.ts b/packages/lit-dev-content/samples/v2-docs/what-is-lit/my-timer.ts
index 058f1f7d6..28a71aee0 100644
--- a/packages/lit-dev-content/samples/v2-docs/what-is-lit/my-timer.ts
+++ b/packages/lit-dev-content/samples/v2-docs/what-is-lit/my-timer.ts
@@ -4,9 +4,10 @@ import {customElement, property, state} from 'lit/decorators.js';
 import {play, pause, replay} from './icons.js';
 /* playground-fold-end */
 
-@customElement("my-timer")
+@customElement('my-timer')
 export class MyTimer extends LitElement {
-  static styles = css`/* playground-fold */
+  static styles = css`
+    /* playground-fold */
 
     :host {
       display: inline-block;
@@ -19,7 +20,8 @@ export class MyTimer extends LitElement {
       user-select: none;
       font-size: 0.6em;
     }
-    /* playground-fold-end */`;
+    /* playground-fold-end */
+  `;
 
   @property() duration = 60;
   @state() private end: number | null = null;
@@ -28,14 +30,16 @@ export class MyTimer extends LitElement {
   render() {
     const {remaining, running} = this;
     const min = Math.floor(remaining / 60000);
-    const sec = pad(min, Math.floor(remaining / 1000 % 60));
-    const hun = pad(true, Math.floor(remaining % 1000 / 10));
+    const sec = pad(min, Math.floor((remaining / 1000) % 60));
+    const hun = pad(true, Math.floor((remaining % 1000) / 10));
     return html`
       ${min ? `${min}:${sec}` : `${sec}.${hun}`}
       <footer>
-        ${remaining === 0 ? '' : running ?
-          html`<span @click=${this.pause}>${pause}</span>` :
-          html`<span @click=${this.start}>${play}</span>`}
+        ${remaining === 0
+          ? ''
+          : running
+            ? html`<span @click=${this.pause}>${pause}</span>`
+            : html`<span @click=${this.start}>${play}</span>`}
         <span @click=${this.reset}>${replay}</span>
       </footer>
     `;
@@ -71,11 +75,10 @@ export class MyTimer extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.reset();
-  }/* playground-fold-end */
-
+  } /* playground-fold-end */
 }
 /* playground-fold */
 
 function pad(pad: unknown, val: number) {
   return pad ? String(val).padStart(2, '0') : val;
-}/* playground-fold-end */
+} /* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/v3-docs/components/events/comm/my-dispatcher.ts b/packages/lit-dev-content/samples/v3-docs/components/events/comm/my-dispatcher.ts
index 10e31167a..70355d533 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/events/comm/my-dispatcher.ts
+++ b/packages/lit-dev-content/samples/v3-docs/components/events/comm/my-dispatcher.ts
@@ -9,13 +9,20 @@ class MyDispatcher extends LitElement {
   private _resetMessage?: ReturnType<typeof setTimeout>;
   protected render() {
     return html`
-      <label><input type="checkbox" @click=${this._tryChange}>${this.label}</label>
+      <label
+        ><input type="checkbox" @click=${this._tryChange} />${this.label}</label
+      >
       <div>${this.message}</div>
     `;
   }
   private _tryChange(e: Event) {
     const detail = {message: this.message};
-    const event = new CustomEvent('checked', {detail, bubbles: true, composed: true, cancelable: true});
+    const event = new CustomEvent('checked', {
+      detail,
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    });
     this.dispatchEvent(event);
     if (event.defaultPrevented) {
       e.preventDefault();
@@ -24,7 +31,9 @@ class MyDispatcher extends LitElement {
   }
   protected updated() {
     clearTimeout(this._resetMessage);
-    this._resetMessage =
-      setTimeout(() => this.message = this.defaultMessage, 1000);
+    this._resetMessage = setTimeout(
+      () => (this.message = this.defaultMessage),
+      1000,
+    );
   }
 }
diff --git a/packages/lit-dev-content/samples/v3-docs/components/events/comm/my-listener.ts b/packages/lit-dev-content/samples/v3-docs/components/events/comm/my-listener.ts
index c2acc3166..92d4df166 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/events/comm/my-listener.ts
+++ b/packages/lit-dev-content/samples/v3-docs/components/events/comm/my-listener.ts
@@ -5,9 +5,8 @@ import {customElement, property} from 'lit/decorators.js';
 class MyListener extends LitElement {
   @property() canCheck = false;
   protected render() {
-    return html`
-      <p @checked=${this._checkedHandler}><slot></slot></p>
-      <hr>
+    return html` <p @checked=${this._checkedHandler}><slot></slot></p>
+      <hr />
       <p>${this.canCheck ? 'Allowing' : 'Preventing'} check</p>
       <p><button @click=${this._clickHandler}>Toggle</button></p>`;
   }
diff --git a/packages/lit-dev-content/samples/v3-docs/components/events/delegation/my-element.ts b/packages/lit-dev-content/samples/v3-docs/components/events/delegation/my-element.ts
index c8f8b534d..de0390ff5 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/events/delegation/my-element.ts
+++ b/packages/lit-dev-content/samples/v3-docs/components/events/delegation/my-element.ts
@@ -15,7 +15,9 @@ class MyElement extends LitElement {
     `;
   }
   private _clickHandler(e: Event) {
-    this.clicked = e.target === e.currentTarget ?
-      'container' : (e.target as HTMLDivElement).textContent!;
+    this.clicked =
+      e.target === e.currentTarget
+        ? 'container'
+        : (e.target as HTMLDivElement).textContent!;
   }
 }
diff --git a/packages/lit-dev-content/samples/v3-docs/components/events/dispatch/my-dispatcher.ts b/packages/lit-dev-content/samples/v3-docs/components/events/dispatch/my-dispatcher.ts
index 3e64679ff..98b1c332d 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/events/dispatch/my-dispatcher.ts
+++ b/packages/lit-dev-content/samples/v3-docs/components/events/dispatch/my-dispatcher.ts
@@ -6,7 +6,7 @@ class MyDispatcher extends LitElement {
   @query('input', true) _input!: HTMLInputElement;
   protected render() {
     return html`
-      <p>Name: <input></p>
+      <p>Name: <input /></p>
       <p><button @click=${this._dispatchLogin}>Login</button></p>
     `;
   }
@@ -16,7 +16,7 @@ class MyDispatcher extends LitElement {
       const options = {
         detail: {name},
         bubbles: true,
-        composed: true
+        composed: true,
       };
       this.dispatchEvent(new CustomEvent('mylogin', options));
     }
diff --git a/packages/lit-dev-content/samples/v3-docs/components/events/dispatch/my-listener.ts b/packages/lit-dev-content/samples/v3-docs/components/events/dispatch/my-listener.ts
index 48ac9d745..83fa2d926 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/events/dispatch/my-listener.ts
+++ b/packages/lit-dev-content/samples/v3-docs/components/events/dispatch/my-listener.ts
@@ -4,8 +4,7 @@ import {customElement, property} from 'lit/decorators.js';
 class MyListener extends LitElement {
   @property() name = '';
   protected render() {
-    return html`
-      <p @mylogin=${this._loginListener}><slot></slot></p>
+    return html` <p @mylogin=${this._loginListener}><slot></slot></p>
       <p>Login: ${this.name}</p>`;
   }
   private _loginListener(e: CustomEvent) {
diff --git a/packages/lit-dev-content/samples/v3-docs/components/events/host/my-element.ts b/packages/lit-dev-content/samples/v3-docs/components/events/host/my-element.ts
index ee0bb9430..b0f923ffb 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/events/host/my-element.ts
+++ b/packages/lit-dev-content/samples/v3-docs/components/events/host/my-element.ts
@@ -6,13 +6,17 @@ class MyElement extends LitElement {
   @property() shadowName = '';
   constructor() {
     super();
-    this.addEventListener('click',
-      (e: Event) => this.hostName = (e.target as Element).localName);
+    this.addEventListener(
+      'click',
+      (e: Event) => (this.hostName = (e.target as Element).localName),
+    );
   }
   protected createRenderRoot() {
     const root = super.createRenderRoot();
-    root.addEventListener('click',
-      (e: Event) => this.shadowName = (e.target as Element).localName);
+    root.addEventListener(
+      'click',
+      (e: Event) => (this.shadowName = (e.target as Element).localName),
+    );
     return root;
   }
   protected render() {
diff --git a/packages/lit-dev-content/samples/v3-docs/components/events/list/my-element.ts b/packages/lit-dev-content/samples/v3-docs/components/events/list/my-element.ts
index 39ea50868..4ef305cd4 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/events/list/my-element.ts
+++ b/packages/lit-dev-content/samples/v3-docs/components/events/list/my-element.ts
@@ -8,9 +8,11 @@ class MyElement extends LitElement {
   protected render() {
     return html`
       <div key="container" @click=${this._clickHandler}>
-        ${this.data.map(i => html`
-          <button key=${i} @focus=${this._focusHandler}>Item ${i}</button>
-        `)}
+        ${this.data.map(
+          (i) => html`
+            <button key=${i} @focus=${this._focusHandler}>Item ${i}</button>
+          `,
+        )}
       </div>
       <p>Clicked: ${this.clicked}</p>
       <p>Focused: ${this.focused}</p>
diff --git a/packages/lit-dev-content/samples/v3-docs/components/events/update/my-dispatcher.ts b/packages/lit-dev-content/samples/v3-docs/components/events/update/my-dispatcher.ts
index c4d722319..2f9513237 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/events/update/my-dispatcher.ts
+++ b/packages/lit-dev-content/samples/v3-docs/components/events/update/my-dispatcher.ts
@@ -6,7 +6,9 @@ class MyDispatcher extends LitElement {
   @property({type: Boolean}) open = true;
   protected render() {
     return html`
-      <p><button @click=${this._notify}>${this.open ? 'Close' : 'Open'}</button></p>
+      <p>
+        <button @click=${this._notify}>${this.open ? 'Close' : 'Open'}</button>
+      </p>
       <p ?hidden=${!this.open}>Content!</p>
     `;
   }
diff --git a/packages/lit-dev-content/samples/v3-docs/components/events/update/my-listener.ts b/packages/lit-dev-content/samples/v3-docs/components/events/update/my-listener.ts
index ecf396e38..b64b2a4d1 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/events/update/my-listener.ts
+++ b/packages/lit-dev-content/samples/v3-docs/components/events/update/my-listener.ts
@@ -3,10 +3,11 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('my-listener')
 class MyListener extends LitElement {
-  @property({type: Number}) height: number|null = null;
+  @property({type: Number}) height: number | null = null;
   protected render() {
-    return html`
-      <p @opened=${this._listener} @closed=${this._listener}><slot></slot></p>
+    return html` <p @opened=${this._listener} @closed=${this._listener}>
+        <slot></slot>
+      </p>
       <p>Height: ${this.height}px</p>`;
   }
   private _listener() {
@@ -14,7 +15,9 @@ class MyListener extends LitElement {
   }
   protected updated() {
     if (this.height === null) {
-      requestAnimationFrame(() => this.height = this.getBoundingClientRect().height);
+      requestAnimationFrame(
+        () => (this.height = this.getBoundingClientRect().height),
+      );
     }
   }
 }
diff --git a/packages/lit-dev-content/samples/v3-docs/components/overview/simple-greeting/index.html b/packages/lit-dev-content/samples/v3-docs/components/overview/simple-greeting/index.html
index 41814caa5..e0d58f0cb 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/overview/simple-greeting/index.html
+++ b/packages/lit-dev-content/samples/v3-docs/components/overview/simple-greeting/index.html
@@ -1,14 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-  <script type="module" src="simple-greeting.js"></script>
-  <title>Lit code sample</title>
-</head>
-<body>
-  <simple-greeting></simple-greeting>
-</body>
+    <script type="module" src="simple-greeting.js"></script>
+    <title>Lit code sample</title>
+  </head>
+  <body>
+    <simple-greeting></simple-greeting>
+  </body>
 </html>
diff --git a/packages/lit-dev-content/samples/v3-docs/components/shadowdom/namedslots/index.html b/packages/lit-dev-content/samples/v3-docs/components/shadowdom/namedslots/index.html
index 9bf7f3473..575cf9ad3 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/shadowdom/namedslots/index.html
+++ b/packages/lit-dev-content/samples/v3-docs/components/shadowdom/namedslots/index.html
@@ -4,7 +4,7 @@
   <p slot="two">Include me in slot "two".</p>
 </my-element>
 
-<hr>
+<hr />
 
 <my-element>
   <p slot="one">Include me in slot "one".</p>
diff --git a/packages/lit-dev-content/samples/v3-docs/components/shadowdom/renderroot/default-root.ts b/packages/lit-dev-content/samples/v3-docs/components/shadowdom/renderroot/default-root.ts
index 3d3210226..e04aab141 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/shadowdom/renderroot/default-root.ts
+++ b/packages/lit-dev-content/samples/v3-docs/components/shadowdom/renderroot/default-root.ts
@@ -4,8 +4,6 @@ import {customElement} from 'lit/decorators.js';
 @customElement('default-root')
 export class DefaultRoot extends LitElement {
   protected render() {
-    return html`
-      <p>By default template renders into shadow DOM.</p>
-    `;
+    return html` <p>By default template renders into shadow DOM.</p> `;
   }
 }
diff --git a/packages/lit-dev-content/samples/v3-docs/components/shadowdom/renderroot/index.html b/packages/lit-dev-content/samples/v3-docs/components/shadowdom/renderroot/index.html
index 68192b58c..ae4ed4c95 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/shadowdom/renderroot/index.html
+++ b/packages/lit-dev-content/samples/v3-docs/components/shadowdom/renderroot/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/packages/lit-dev-content/samples/v3-docs/components/shadowdom/slots/index.html b/packages/lit-dev-content/samples/v3-docs/components/shadowdom/slots/index.html
index c4385b0f0..bc48d1d54 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/shadowdom/slots/index.html
+++ b/packages/lit-dev-content/samples/v3-docs/components/shadowdom/slots/index.html
@@ -4,7 +4,7 @@
   <p>Render me in a slot</p>
 </my-element>
 
-<hr>
+<hr />
 
 <my-element>
   <p>Render me in a slot</p>
diff --git a/packages/lit-dev-content/samples/v3-docs/components/style/maps/my-element.ts b/packages/lit-dev-content/samples/v3-docs/components/style/maps/my-element.ts
index 95edb6d42..e5bea60ed 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/style/maps/my-element.ts
+++ b/packages/lit-dev-content/samples/v3-docs/components/style/maps/my-element.ts
@@ -6,13 +6,18 @@ import {styleMap} from 'lit/directives/style-map.js';
 @customElement('my-element')
 export class MyElement extends LitElement {
   static styles = css`
-    .someclass { border: 1px solid red; padding: 4px; }
-    .anotherclass { background-color: navy; }
+    .someclass {
+      border: 1px solid red;
+      padding: 4px;
+    }
+    .anotherclass {
+      background-color: navy;
+    }
   `;
   @property()
-  classes = { someclass: true, anotherclass: true };
+  classes = {someclass: true, anotherclass: true};
   @property()
-  styles = { color: 'lightgreen', fontFamily: 'Roboto' };
+  styles = {color: 'lightgreen', fontFamily: 'Roboto'};
   protected render() {
     return html`
       <div class=${classMap(this.classes)} style=${styleMap(this.styles)}>
diff --git a/packages/lit-dev-content/samples/v3-docs/components/style/slottedselector/my-element.ts b/packages/lit-dev-content/samples/v3-docs/components/style/slottedselector/my-element.ts
index 69c4ccd59..8771fc843 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/style/slottedselector/my-element.ts
+++ b/packages/lit-dev-content/samples/v3-docs/components/style/slottedselector/my-element.ts
@@ -4,9 +4,15 @@ import {customElement} from 'lit/decorators.js';
 @customElement('my-element')
 export class MyElement extends LitElement {
   static styles = css`
-    ::slotted(*) { font-family: Roboto; }
-    ::slotted(p) { color: blue; }
-    div ::slotted(*) { color: red; }
+    ::slotted(*) {
+      font-family: Roboto;
+    }
+    ::slotted(p) {
+      color: blue;
+    }
+    div ::slotted(*) {
+      color: red;
+    }
   `;
   protected render() {
     return html`
diff --git a/packages/lit-dev-content/samples/v3-docs/components/style/superstyles/my-element.ts b/packages/lit-dev-content/samples/v3-docs/components/style/superstyles/my-element.ts
index 2a2551aa7..cb381ae30 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/style/superstyles/my-element.ts
+++ b/packages/lit-dev-content/samples/v3-docs/components/style/superstyles/my-element.ts
@@ -6,8 +6,10 @@ import {SuperElement} from './super-element.js';
 export class MyElement extends SuperElement {
   static styles = [
     SuperElement.styles,
-    css`div {
-      color: red;
-    }`
+    css`
+      div {
+        color: red;
+      }
+    `,
   ];
 }
diff --git a/packages/lit-dev-content/samples/v3-docs/components/style/superstyles/super-element.ts b/packages/lit-dev-content/samples/v3-docs/components/style/superstyles/super-element.ts
index 9e2a75b98..0d99805b7 100644
--- a/packages/lit-dev-content/samples/v3-docs/components/style/superstyles/super-element.ts
+++ b/packages/lit-dev-content/samples/v3-docs/components/style/superstyles/super-element.ts
@@ -10,8 +10,6 @@ export class SuperElement extends LitElement {
     }
   ` as CSSResultGroup;
   protected render() {
-    return html`
-      <div>Content</div>
-    `;
+    return html` <div>Content</div> `;
   }
 }
diff --git a/packages/lit-dev-content/samples/v3-docs/composition/mediator-pattern/index.html b/packages/lit-dev-content/samples/v3-docs/composition/mediator-pattern/index.html
index c8ac8f56d..305c46f49 100644
--- a/packages/lit-dev-content/samples/v3-docs/composition/mediator-pattern/index.html
+++ b/packages/lit-dev-content/samples/v3-docs/composition/mediator-pattern/index.html
@@ -1,14 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-  <script type="module" src="mediator-element.js"></script>
-  <title>Lit code sample</title>
-</head>
-<body>
-  <mediator-element></mediator-element>
-</body>
+    <script type="module" src="mediator-element.js"></script>
+    <title>Lit code sample</title>
+  </head>
+  <body>
+    <mediator-element></mediator-element>
+  </body>
 </html>
diff --git a/packages/lit-dev-content/samples/v3-docs/composition/mediator-pattern/mediator-element.ts b/packages/lit-dev-content/samples/v3-docs/composition/mediator-pattern/mediator-element.ts
index 5bb0576cd..d089ace83 100644
--- a/packages/lit-dev-content/samples/v3-docs/composition/mediator-pattern/mediator-element.ts
+++ b/packages/lit-dev-content/samples/v3-docs/composition/mediator-pattern/mediator-element.ts
@@ -28,10 +28,12 @@ export class MediatorElement extends LitElement {
 
   render() {
     return html`<p>Nickname: ${this.name}</p>
-        <label>Enter new nickname:
-          <input @input=${this._inputChanged}>
-        </label>
-        <button @click=${this._updateName}
-                .disabled=${!this._submitEnabled}>Submit</button>`;
+      <label
+        >Enter new nickname:
+        <input @input=${this._inputChanged} />
+      </label>
+      <button @click=${this._updateName} .disabled=${!this._submitEnabled}>
+        Submit
+      </button>`;
   }
 }
diff --git a/packages/lit-dev-content/samples/v3-docs/controllers/mouse/my-element.ts b/packages/lit-dev-content/samples/v3-docs/controllers/mouse/my-element.ts
index e2a3c42f9..85ddfdc04 100644
--- a/packages/lit-dev-content/samples/v3-docs/controllers/mouse/my-element.ts
+++ b/packages/lit-dev-content/samples/v3-docs/controllers/mouse/my-element.ts
@@ -12,7 +12,8 @@ class MyElement extends LitElement {
       <pre>
         x: ${this.mouse.pos.x as number}
         y: ${this.mouse.pos.y as number}
-      </pre>
+      </pre
+      >
     `;
   }
 }
diff --git a/packages/lit-dev-content/samples/v3-docs/controllers/names/my-element.ts b/packages/lit-dev-content/samples/v3-docs/controllers/names/my-element.ts
index 2c9d29ba7..a1204dd4b 100644
--- a/packages/lit-dev-content/samples/v3-docs/controllers/names/my-element.ts
+++ b/packages/lit-dev-content/samples/v3-docs/controllers/names/my-element.ts
@@ -8,23 +8,22 @@ export class MyElement extends LitElement {
   private names = new NamesController(this);
 
   render() {
-    return html`
-      <h3>Names List</h3>
-      Kind: <select @change=${this._kindChange}>
-      ${this.names.kinds.map(
-        (k) => html`<option value=${k}>${k}</option>`)
-      }
-    </select>
-    ${this.names.render({
-      complete: (result: Names.Result) => html`
-        <p>List of ${this.names.kind}</p>
-        <ul>${result.map(i => html`<li>${i.name}</li>`)}
-        </ul>
-      `,
-      initial: () => html`<p>Select a kind...</p>`,
-      pending: () => html`<p>Loading ${this.names.kind}...</p>`,
-      error: (e: any) => html`<p>${e}</p>`
-    })}`;
+    return html` <h3>Names List</h3>
+      Kind:
+      <select @change=${this._kindChange}>
+        ${this.names.kinds.map((k) => html`<option value=${k}>${k}</option>`)}
+      </select>
+      ${this.names.render({
+        complete: (result: Names.Result) => html`
+          <p>List of ${this.names.kind}</p>
+          <ul>
+            ${result.map((i) => html`<li>${i.name}</li>`)}
+          </ul>
+        `,
+        initial: () => html`<p>Select a kind...</p>`,
+        pending: () => html`<p>Loading ${this.names.kind}...</p>`,
+        error: (e: any) => html`<p>${e}</p>`,
+      })}`;
   }
 
   private _kindChange(e: Event) {
diff --git a/packages/lit-dev-content/samples/v3-docs/controllers/names/names-api.ts b/packages/lit-dev-content/samples/v3-docs/controllers/names/names-api.ts
index c9e013425..71a1174cb 100644
--- a/packages/lit-dev-content/samples/v3-docs/controllers/names/names-api.ts
+++ b/packages/lit-dev-content/samples/v3-docs/controllers/names/names-api.ts
@@ -1,5 +1,5 @@
 export type Result = Array<{name: string}>;
-export type Kind = typeof kinds[number];
+export type Kind = (typeof kinds)[number];
 
 export const baseUrl = 'https://swapi.py4e.com/api/';
 
@@ -10,5 +10,5 @@ export const kinds = [
   'species',
   'planets',
   // Inserted to demo an error state.
-  'error'
+  'error',
 ] as const;
diff --git a/packages/lit-dev-content/samples/v3-docs/controllers/names/names-controller.ts b/packages/lit-dev-content/samples/v3-docs/controllers/names/names-controller.ts
index decb19631..48417c4e6 100644
--- a/packages/lit-dev-content/samples/v3-docs/controllers/names/names-controller.ts
+++ b/packages/lit-dev-content/samples/v3-docs/controllers/names/names-controller.ts
@@ -11,7 +11,8 @@ export class NamesController {
 
   constructor(host: ReactiveControllerHost) {
     this.host = host;
-    this.task = new Task<[Names.Kind], Names.Result>(host,
+    this.task = new Task<[Names.Kind], Names.Result>(
+      host,
       async ([kind]: [Names.Kind]) => {
         if (!kind?.trim()) {
           return initialState;
@@ -23,7 +24,8 @@ export class NamesController {
         } catch {
           throw new Error(`Failed to fetch "${kind}"`);
         }
-      }, () => [this.kind]
+      },
+      () => [this.kind],
     );
   }
 
@@ -31,7 +33,9 @@ export class NamesController {
     this._kind = value;
     this.host.requestUpdate();
   }
-  get kind() { return this._kind; }
+  get kind() {
+    return this._kind;
+  }
 
   render(renderFunctions: StatusRenderer<Names.Result>) {
     return this.task.render(renderFunctions);
diff --git a/packages/lit-dev-content/samples/v3-docs/controllers/overview/my-element.ts b/packages/lit-dev-content/samples/v3-docs/controllers/overview/my-element.ts
index 9286733c4..1cb0ee33c 100644
--- a/packages/lit-dev-content/samples/v3-docs/controllers/overview/my-element.ts
+++ b/packages/lit-dev-content/samples/v3-docs/controllers/overview/my-element.ts
@@ -15,5 +15,7 @@ class MyElement extends LitElement {
 }
 
 const timeFormat = new Intl.DateTimeFormat('en-US', {
-  hour: 'numeric', minute: 'numeric', second: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
 });
diff --git a/packages/lit-dev-content/samples/v3-docs/libraries/localization/runtime/index.html b/packages/lit-dev-content/samples/v3-docs/libraries/localization/runtime/index.html
index 2e89f4951..92eba33e8 100644
--- a/packages/lit-dev-content/samples/v3-docs/libraries/localization/runtime/index.html
+++ b/packages/lit-dev-content/samples/v3-docs/libraries/localization/runtime/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <title>lit-localize runtime example</title>
   <script type="module" src="./index.js"></script>
diff --git a/packages/lit-dev-content/samples/v3-docs/libraries/localization/runtime/index.ts b/packages/lit-dev-content/samples/v3-docs/libraries/localization/runtime/index.ts
index 6e9551010..cfb30f80e 100644
--- a/packages/lit-dev-content/samples/v3-docs/libraries/localization/runtime/index.ts
+++ b/packages/lit-dev-content/samples/v3-docs/libraries/localization/runtime/index.ts
@@ -30,7 +30,7 @@ window.addEventListener(LOCALE_STATUS_EVENT, ({detail}) => {
     spinner.setAttribute('hidden', '');
   } else if (detail.status === 'error') {
     console.error(
-      `Error loading locale ${detail.errorLocale}: ` + detail.errorMessage
+      `Error loading locale ${detail.errorLocale}: ` + detail.errorMessage,
     );
     spinner.setAttribute('hidden', '');
   }
diff --git a/packages/lit-dev-content/samples/v3-docs/libraries/localization/runtime/locale-picker.ts b/packages/lit-dev-content/samples/v3-docs/libraries/localization/runtime/locale-picker.ts
index 59efb6d5a..de4ebe3b4 100644
--- a/packages/lit-dev-content/samples/v3-docs/libraries/localization/runtime/locale-picker.ts
+++ b/packages/lit-dev-content/samples/v3-docs/libraries/localization/runtime/locale-picker.ts
@@ -11,7 +11,7 @@ import {allLocales} from './locale-codes.js';
 import {localized} from '@lit/localize';
 
 const localeNames: {
-  [L in typeof allLocales[number]]: string;
+  [L in (typeof allLocales)[number]]: string;
 } = {
   en: 'English',
   'es-419': 'Español (Latinoamérica)‎',
@@ -31,7 +31,7 @@ export class LocalePicker extends LitElement {
           (locale) =>
             html`<option value=${locale} ?selected=${locale === getLocale()}>
               ${localeNames[locale]}
-            </option>`
+            </option>`,
         )}
       </select>
     `;
diff --git a/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/element-one.ts b/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/element-one.ts
index 94504aa63..f499d8d09 100644
--- a/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/element-one.ts
+++ b/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/element-one.ts
@@ -1,10 +1,10 @@
 import {LitElement, html} from 'lit';
 import {customElement} from 'lit/decorators.js';
-import {Highlightable} from './highlightable.js'
+import {Highlightable} from './highlightable.js';
 
 @customElement('element-one')
 export class ElementOne extends Highlightable(LitElement) {
-  render(){
+  render() {
     return this.renderHighlight(html`<p>Simple highlight</p>`);
   }
 }
diff --git a/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/element-two.js b/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/element-two.js
index 8da1e16b3..3cc8a6e58 100644
--- a/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/element-two.js
+++ b/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/element-two.js
@@ -6,14 +6,20 @@ const HighlightableLitElement = Highlightable(LitElement);
 export class ElementTwo extends HighlightableLitElement {
   static styles = [
     HighlightableLitElement.styles || [],
-    css`:host { display: block; }`,
+    css`
+      :host {
+        display: block;
+      }
+    `,
   ];
   render() {
     return this.renderHighlight(html`
       <label>
-        <input type="checkbox"
+        <input
+          type="checkbox"
           .checked=${this.highlight}
-          @change=${this.toggleHighlight}>
+          @change=${this.toggleHighlight}
+        />
         Toggleable highlight
       </label>
     `);
diff --git a/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/element-two.ts b/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/element-two.ts
index 0e2990047..3d694a6a6 100644
--- a/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/element-two.ts
+++ b/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/element-two.ts
@@ -1,6 +1,6 @@
 import {LitElement, html, css} from 'lit';
 import {customElement} from 'lit/decorators.js';
-import {Highlightable} from './highlightable.js'
+import {Highlightable} from './highlightable.js';
 
 const HighlightableLitElement = Highlightable(LitElement);
 
@@ -8,14 +8,20 @@ const HighlightableLitElement = Highlightable(LitElement);
 export class ElementTwo extends HighlightableLitElement {
   static styles = [
     HighlightableLitElement.styles || [],
-    css`:host { display: block; }`
+    css`
+      :host {
+        display: block;
+      }
+    `,
   ];
-  render(){
+  render() {
     return this.renderHighlight(html`
       <label>
-        <input type="checkbox"
+        <input
+          type="checkbox"
           .checked=${this.highlight}
-          @change=${this.toggleHighlight}>
+          @change=${this.toggleHighlight}
+        />
         Toggleable highlight
       </label>
     `);
diff --git a/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/highlightable.js b/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/highlightable.js
index fd0fa1497..26e1873fc 100644
--- a/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/highlightable.js
+++ b/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/highlightable.js
@@ -11,7 +11,11 @@ export const Highlightable = (superClass) => {
     // Adds some styles...
     static styles = [
       superClass.styles ?? [],
-      css`.highlight { background: yellow; }`,
+      css`
+        .highlight {
+          background: yellow;
+        }
+      `,
     ];
 
     constructor() {
@@ -22,10 +26,9 @@ export const Highlightable = (superClass) => {
 
     // ...and a helper render method:
     renderHighlight(content) {
-      return html`
-          <div class=${classMap({highlight: this.highlight})}>
-            ${content}
-          </div>`;
+      return html` <div class=${classMap({highlight: this.highlight})}>
+        ${content}
+      </div>`;
     }
   }
   return HighlightableElement;
diff --git a/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/highlightable.ts b/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/highlightable.ts
index c649e05e1..68f76b9ee 100644
--- a/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/highlightable.ts
+++ b/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/highlightable.ts
@@ -11,25 +11,29 @@ export declare class HighlightableInterface {
 }
 /* playground-fold-end */
 
-export const Highlightable =
-  <T extends Constructor<LitElement>>(superClass: T) => {
-    class HighlightableElement extends superClass {
-      // Adds some styles...
-      static styles = [
-        (superClass as unknown as typeof LitElement).styles ?? [],
-        css`.highlight { background: yellow; }`
-      ];
+export const Highlightable = <T extends Constructor<LitElement>>(
+  superClass: T,
+) => {
+  class HighlightableElement extends superClass {
+    // Adds some styles...
+    static styles = [
+      (superClass as unknown as typeof LitElement).styles ?? [],
+      css`
+        .highlight {
+          background: yellow;
+        }
+      `,
+    ];
 
-      // ...a public `highlight` property/attribute...
-      @property({type: Boolean}) highlight = false;
+    // ...a public `highlight` property/attribute...
+    @property({type: Boolean}) highlight = false;
 
-      // ...and a helper render method:
-      renderHighlight(content: unknown) {
-        return html`
-          <div class=${classMap({highlight: this.highlight})}>
-            ${content}
-          </div>`;
-        }
-      }
-      return HighlightableElement as Constructor<HighlightableInterface> & T;
-    };
+    // ...and a helper render method:
+    renderHighlight(content: unknown) {
+      return html` <div class=${classMap({highlight: this.highlight})}>
+        ${content}
+      </div>`;
+    }
+  }
+  return HighlightableElement as Constructor<HighlightableInterface> & T;
+};
diff --git a/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/index.html b/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/index.html
index 6416a4125..9142728cd 100644
--- a/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/index.html
+++ b/packages/lit-dev-content/samples/v3-docs/mixins/highlightable/index.html
@@ -1,14 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module" src="./element-one.js"></script>
-  <script type="module" src="./element-two.js"></script>
-  <title>lit-element code sample</title>
-</head>
-<body>
-  <element-one highlight></element-one>
-  <element-two></element-two>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="module" src="./element-one.js"></script>
+    <script type="module" src="./element-two.js"></script>
+    <title>lit-element code sample</title>
+  </head>
+  <body>
+    <element-one highlight></element-one>
+    <element-two></element-two>
+  </body>
 </html>
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/compose/index.html b/packages/lit-dev-content/samples/v3-docs/templates/compose/index.html
index 32dfee477..a7a3601a3 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/compose/index.html
+++ b/packages/lit-dev-content/samples/v3-docs/templates/compose/index.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="./my-page.js" type="module"></script>
-  <title>lit-element code sample</title>
-</head>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="./my-page.js" type="module"></script>
+    <title>lit-element code sample</title>
+  </head>
   <body>
     <my-page></my-page>
   </body>
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/compose/my-page.ts b/packages/lit-dev-content/samples/v3-docs/templates/compose/my-page.ts
index cb1278529..29e9353f6 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/compose/my-page.ts
+++ b/packages/lit-dev-content/samples/v3-docs/templates/compose/my-page.ts
@@ -1,10 +1,8 @@
 import {LitElement, html} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 
-
 @customElement('my-page')
 class MyPage extends LitElement {
-
   @property({attribute: false})
   article = {
     title: 'My Nifty Article',
@@ -25,8 +23,7 @@ class MyPage extends LitElement {
 
   render() {
     return html`
-      ${this.headerTemplate()}
-      ${this.articleTemplate()}
+      ${this.headerTemplate()} ${this.articleTemplate()}
       ${this.footerTemplate()}
     `;
   }
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/composeimports/index.html b/packages/lit-dev-content/samples/v3-docs/templates/composeimports/index.html
index 32dfee477..a7a3601a3 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/composeimports/index.html
+++ b/packages/lit-dev-content/samples/v3-docs/templates/composeimports/index.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="./my-page.js" type="module"></script>
-  <title>lit-element code sample</title>
-</head>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="./my-page.js" type="module"></script>
+    <title>lit-element code sample</title>
+  </head>
   <body>
     <my-page></my-page>
   </body>
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/composeimports/my-article.ts b/packages/lit-dev-content/samples/v3-docs/templates/composeimports/my-article.ts
index df8cc1e6b..97e8c2482 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/composeimports/my-article.ts
+++ b/packages/lit-dev-content/samples/v3-docs/templates/composeimports/my-article.ts
@@ -4,8 +4,6 @@ import {customElement} from 'lit/decorators.js';
 @customElement('my-article')
 class MyArticle extends LitElement {
   render() {
-    return html`
-      <article>article</article>
-    `;
+    return html` <article>article</article> `;
   }
 }
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/composeimports/my-footer.ts b/packages/lit-dev-content/samples/v3-docs/templates/composeimports/my-footer.ts
index 5a7bb688e..2bc0a910b 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/composeimports/my-footer.ts
+++ b/packages/lit-dev-content/samples/v3-docs/templates/composeimports/my-footer.ts
@@ -4,8 +4,6 @@ import {customElement} from 'lit/decorators.js';
 @customElement('my-footer')
 class MyFooter extends LitElement {
   render() {
-    return html`
-      <footer>footer</footer>
-    `;
+    return html` <footer>footer</footer> `;
   }
 }
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/composeimports/my-header.ts b/packages/lit-dev-content/samples/v3-docs/templates/composeimports/my-header.ts
index 29a4af465..8014f775a 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/composeimports/my-header.ts
+++ b/packages/lit-dev-content/samples/v3-docs/templates/composeimports/my-header.ts
@@ -4,8 +4,6 @@ import {customElement} from 'lit/decorators.js';
 @customElement('my-header')
 class MyHeader extends LitElement {
   render() {
-    return html`
-      <header>header</header>
-    `;
+    return html` <header>header</header> `;
   }
 }
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/define/index.html b/packages/lit-dev-content/samples/v3-docs/templates/define/index.html
index 241701161..8c658e1b2 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/define/index.html
+++ b/packages/lit-dev-content/samples/v3-docs/templates/define/index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module" src="./my-element.js"></script>
-  <title>Lit code sample</title>
-</head>
-<body>
-  <my-element></my-element>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="module" src="./my-element.js"></script>
+    <title>Lit code sample</title>
+  </head>
+  <body>
+    <my-element></my-element>
+  </body>
 </html>
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/define/my-element.ts b/packages/lit-dev-content/samples/v3-docs/templates/define/my-element.ts
index d4c96c980..7934ac8fe 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/define/my-element.ts
+++ b/packages/lit-dev-content/samples/v3-docs/templates/define/my-element.ts
@@ -3,8 +3,7 @@ import {customElement} from 'lit/decorators.js';
 
 @customElement('my-element')
 class MyElement extends LitElement {
-
-  render(){
+  render() {
     return html`<p>Hello from my template.</p>`;
   }
 }
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/design/index.html b/packages/lit-dev-content/samples/v3-docs/templates/design/index.html
index cb310edd0..674e46248 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/design/index.html
+++ b/packages/lit-dev-content/samples/v3-docs/templates/design/index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module" src="./update-properties.js"></script>
-  <title>lit-element code sample</title>
-</head>
-<body>
-  <update-properties></update-properties>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="module" src="./update-properties.js"></script>
+    <title>lit-element code sample</title>
+  </head>
+  <body>
+    <update-properties></update-properties>
+  </body>
 </html>
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/design/update-properties.ts b/packages/lit-dev-content/samples/v3-docs/templates/design/update-properties.ts
index b0b6a2bad..982dd1aba 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/design/update-properties.ts
+++ b/packages/lit-dev-content/samples/v3-docs/templates/design/update-properties.ts
@@ -3,19 +3,16 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('update-properties')
 class UpdateProperties extends LitElement {
-
   @property()
   message: string = 'Loading...';
 
   constructor() {
     super();
-    this.loadStuff().then((content) => this.message = content);
+    this.loadStuff().then((content) => (this.message = content));
   }
 
   render() {
-    return html`
-      <p>${this.message}</p>
-    `;
+    return html` <p>${this.message}</p> `;
   }
 
   loadStuff() {
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/expressions/my-element.ts b/packages/lit-dev-content/samples/v3-docs/templates/expressions/my-element.ts
index 20651bbdf..73279aac7 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/expressions/my-element.ts
+++ b/packages/lit-dev-content/samples/v3-docs/templates/expressions/my-element.ts
@@ -10,13 +10,16 @@ class MyElement extends LitElement {
   /* playground-fold-end */
 
   render() {
-    return html`
-      <p>
+    return html` <p>
         ${this.greeting}
-        <button @click=${() => this.show = !this.show}>Todos</button>
+        <button @click=${() => (this.show = !this.show)}>Todos</button>
       </p>
-      ${this.show ? html`
-          <ul>${this.todos.map(i => html`<li>${i}</li>`)}</ul>
-        ` : ''}`;
-  }/* playground-fold */
+      ${this.show
+        ? html`
+            <ul>
+              ${this.todos.map((i) => html`<li>${i}</li>`)}
+            </ul>
+          `
+        : ''}`;
+  } /* playground-fold */
 }
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/index.html b/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/index.html
+++ b/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/my-element.js b/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/my-element.js
index fb56fe7af..5ad5cb829 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/my-element.js
+++ b/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/my-element.js
@@ -2,22 +2,21 @@
 import {LitElement, html} from 'lit';
 
 class MyElement extends LitElement {
-/* playground-fold-end */
-
-static properties = {
-  colors: {},
-};
+  /* playground-fold-end */
 
-constructor() {
-  super();
-  this.colors = ['red', 'green', 'blue'];
-}
+  static properties = {
+    colors: {},
+  };
 
-render() {
-  return html`<p>Colors: ${this.colors}</p>`;
-}
-/* playground-fold */
+  constructor() {
+    super();
+    this.colors = ['red', 'green', 'blue'];
+  }
 
+  render() {
+    return html`<p>Colors: ${this.colors}</p>`;
+  }
+  /* playground-fold */
 }
 customElements.define('my-element', MyElement);
 /* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/my-element.ts b/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/my-element.ts
index e90fffa67..76539b680 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/my-element.ts
+++ b/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/my-element.ts
@@ -4,14 +4,13 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('my-element')
 class MyElement extends LitElement {
-/* playground-fold-end */
-
-@property() colors = ['red', 'green', 'blue'];
+  /* playground-fold-end */
 
-render() {
-  return html`<p>Colors: ${this.colors}</p>`;
-}
-/* playground-fold */
+  @property() colors = ['red', 'green', 'blue'];
 
+  render() {
+    return html`<p>Colors: ${this.colors}</p>`;
+  }
+  /* playground-fold */
 }
 /* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/lists-map/index.html b/packages/lit-dev-content/samples/v3-docs/templates/lists-map/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/lists-map/index.html
+++ b/packages/lit-dev-content/samples/v3-docs/templates/lists-map/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/lists-map/my-element.js b/packages/lit-dev-content/samples/v3-docs/templates/lists-map/my-element.js
index 18b0fc2f0..392746450 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/lists-map/my-element.js
+++ b/packages/lit-dev-content/samples/v3-docs/templates/lists-map/my-element.js
@@ -2,28 +2,27 @@
 import {LitElement, html} from 'lit';
 
 class MyElement extends LitElement {
-/* playground-fold-end */
-
-static properties = {
-  colors: {},
-};
+  /* playground-fold-end */
 
-constructor() {
-  super();
-  this.colors = ['red', 'green', 'blue'];
-}
+  static properties = {
+    colors: {},
+  };
 
-render() {
-  return html`
-    <ul>
-      ${this.colors.map((color) =>
-        html`<li style="color: ${color}">${color}</li>`
-      )}
-    </ul>
-  `;
-}
-/* playground-fold */
+  constructor() {
+    super();
+    this.colors = ['red', 'green', 'blue'];
+  }
 
+  render() {
+    return html`
+      <ul>
+        ${this.colors.map(
+          (color) => html`<li style="color: ${color}">${color}</li>`,
+        )}
+      </ul>
+    `;
+  }
+  /* playground-fold */
 }
 customElements.define('my-element', MyElement);
 /* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/lists-map/my-element.ts b/packages/lit-dev-content/samples/v3-docs/templates/lists-map/my-element.ts
index 97fb8afa3..11ac98748 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/lists-map/my-element.ts
+++ b/packages/lit-dev-content/samples/v3-docs/templates/lists-map/my-element.ts
@@ -4,20 +4,19 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('my-element')
 class MyElement extends LitElement {
-/* playground-fold-end */
-
-@property() colors = ['red', 'green', 'blue'];
+  /* playground-fold-end */
 
-render() {
-  return html`
-    <ul>
-      ${this.colors.map((color) =>
-        html`<li style="color: ${color}">${color}</li>`
-      )}
-    </ul>
-  `;
-}
-/* playground-fold */
+  @property() colors = ['red', 'green', 'blue'];
 
+  render() {
+    return html`
+      <ul>
+        ${this.colors.map(
+          (color) => html`<li style="color: ${color}">${color}</li>`,
+        )}
+      </ul>
+    `;
+  }
+  /* playground-fold */
 }
 /* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/index.html b/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/index.html
index fe1517255..f149c266f 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/index.html
+++ b/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/index.html
@@ -1,5 +1,7 @@
 <style>
-  body { font-family: sans-serif; }
+  body {
+    font-family: sans-serif;
+  }
 </style>
 
 <script type="module" src="./my-element.js"></script>
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/my-element.ts b/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/my-element.ts
index 9a48488ae..db180c68c 100644
--- a/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/my-element.ts
+++ b/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/my-element.ts
@@ -8,35 +8,42 @@ import {repeat} from 'lit/directives/repeat.js';
 
 @customElement('my-element')
 class MyElement extends LitElement {
+  private sort = 1;
 
-private sort = 1;
+  @property() employees = [
+    {id: 0, givenName: 'Fred', familyName: 'Flintstone'},
+    {id: 1, givenName: 'George', familyName: 'Jetson'},
+    {id: 2, givenName: 'Barney', familyName: 'Rubble'},
+    {id: 3, givenName: 'Cosmo', familyName: 'Spacely'},
+  ];
+  /* playground-fold-end */
 
-@property() employees = [
-  {id: 0, givenName: 'Fred', familyName: 'Flintstone'},
-  {id: 1, givenName: 'George', familyName: 'Jetson'},
-  {id: 2, givenName: 'Barney', familyName: 'Rubble'},
-  {id: 3, givenName: 'Cosmo', familyName: 'Spacely'}
-];
-/* playground-fold-end */
-
-render() {
-  return html`
-    <ul>
-      ${repeat(this.employees, (employee) => employee.id, (employee, index) => html`
-        <li>${index}: ${employee.familyName}, ${employee.givenName}</li>
-      `)}
-    </ul>
-    <button @click=${this.toggleSort}>Toggle sort</button>
-  `;
-}
-/* playground-fold */
-
-private toggleSort() {
-  this.sort *= -1;
-  this.employees = [...this.employees.sort((a, b) =>
-    this.sort * (a.familyName.localeCompare(b.familyName) ||
-    a.givenName.localeCompare(b.givenName)))];
-}
+  render() {
+    return html`
+      <ul>
+        ${repeat(
+          this.employees,
+          (employee) => employee.id,
+          (employee, index) => html`
+            <li>${index}: ${employee.familyName}, ${employee.givenName}</li>
+          `,
+        )}
+      </ul>
+      <button @click=${this.toggleSort}>Toggle sort</button>
+    `;
+  }
+  /* playground-fold */
 
+  private toggleSort() {
+    this.sort *= -1;
+    this.employees = [
+      ...this.employees.sort(
+        (a, b) =>
+          this.sort *
+          (a.familyName.localeCompare(b.familyName) ||
+            a.givenName.localeCompare(b.givenName)),
+      ),
+    ];
+  }
 }
 /* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/v3-docs/what-is-lit/icons.ts b/packages/lit-dev-content/samples/v3-docs/what-is-lit/icons.ts
index 2d149f146..91233aaec 100644
--- a/packages/lit-dev-content/samples/v3-docs/what-is-lit/icons.ts
+++ b/packages/lit-dev-content/samples/v3-docs/what-is-lit/icons.ts
@@ -1,5 +1,45 @@
 import {html} from 'lit';
 
-export const replay = html`<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><title>Replay</title><g><rect fill="none" height="24" width="24"/><rect fill="none" height="24" width="24"/><rect fill="none" height="24" width="24"/></g><g><g/><path d="M12,5V1L7,6l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6H4c0,4.42,3.58,8,8,8s8-3.58,8-8S16.42,5,12,5z"/></g></svg>`;
-export const pause = html`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><title>Pause</title><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>`;
-export const play = html`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><title>Play</title><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z"/></svg>`;
+export const replay = html`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  enable-background="new 0 0 24 24"
+  height="24px"
+  viewBox="0 0 24 24"
+  width="24px"
+  fill="#000000"
+>
+  <title>Replay</title>
+  <g>
+    <rect fill="none" height="24" width="24" />
+    <rect fill="none" height="24" width="24" />
+    <rect fill="none" height="24" width="24" />
+  </g>
+  <g>
+    <g />
+    <path
+      d="M12,5V1L7,6l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6H4c0,4.42,3.58,8,8,8s8-3.58,8-8S16.42,5,12,5z"
+    />
+  </g>
+</svg>`;
+export const pause = html`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 0 24 24"
+  width="24px"
+  fill="#000000"
+>
+  <title>Pause</title>
+  <path d="M0 0h24v24H0V0z" fill="none" />
+  <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+</svg>`;
+export const play = html`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 0 24 24"
+  width="24px"
+  fill="#000000"
+>
+  <title>Play</title>
+  <path d="M0 0h24v24H0V0z" fill="none" />
+  <path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z" />
+</svg>`;
diff --git a/packages/lit-dev-content/samples/v3-docs/what-is-lit/index.html b/packages/lit-dev-content/samples/v3-docs/what-is-lit/index.html
index 00c26fcf6..243f398fb 100644
--- a/packages/lit-dev-content/samples/v3-docs/what-is-lit/index.html
+++ b/packages/lit-dev-content/samples/v3-docs/what-is-lit/index.html
@@ -1,7 +1,11 @@
 <!doctype html>
-<head><!-- playground-fold -->
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@1,800&display=swap" rel="stylesheet">
+<head>
+  <!-- playground-fold -->
+  <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@1,800&display=swap"
+    rel="stylesheet"
+  />
   <script type="module" src="./my-timer.js"></script>
   <style>
     body {
diff --git a/packages/lit-dev-content/samples/v3-docs/what-is-lit/my-timer.ts b/packages/lit-dev-content/samples/v3-docs/what-is-lit/my-timer.ts
index 058f1f7d6..28a71aee0 100644
--- a/packages/lit-dev-content/samples/v3-docs/what-is-lit/my-timer.ts
+++ b/packages/lit-dev-content/samples/v3-docs/what-is-lit/my-timer.ts
@@ -4,9 +4,10 @@ import {customElement, property, state} from 'lit/decorators.js';
 import {play, pause, replay} from './icons.js';
 /* playground-fold-end */
 
-@customElement("my-timer")
+@customElement('my-timer')
 export class MyTimer extends LitElement {
-  static styles = css`/* playground-fold */
+  static styles = css`
+    /* playground-fold */
 
     :host {
       display: inline-block;
@@ -19,7 +20,8 @@ export class MyTimer extends LitElement {
       user-select: none;
       font-size: 0.6em;
     }
-    /* playground-fold-end */`;
+    /* playground-fold-end */
+  `;
 
   @property() duration = 60;
   @state() private end: number | null = null;
@@ -28,14 +30,16 @@ export class MyTimer extends LitElement {
   render() {
     const {remaining, running} = this;
     const min = Math.floor(remaining / 60000);
-    const sec = pad(min, Math.floor(remaining / 1000 % 60));
-    const hun = pad(true, Math.floor(remaining % 1000 / 10));
+    const sec = pad(min, Math.floor((remaining / 1000) % 60));
+    const hun = pad(true, Math.floor((remaining % 1000) / 10));
     return html`
       ${min ? `${min}:${sec}` : `${sec}.${hun}`}
       <footer>
-        ${remaining === 0 ? '' : running ?
-          html`<span @click=${this.pause}>${pause}</span>` :
-          html`<span @click=${this.start}>${play}</span>`}
+        ${remaining === 0
+          ? ''
+          : running
+            ? html`<span @click=${this.pause}>${pause}</span>`
+            : html`<span @click=${this.start}>${play}</span>`}
         <span @click=${this.reset}>${replay}</span>
       </footer>
     `;
@@ -71,11 +75,10 @@ export class MyTimer extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.reset();
-  }/* playground-fold-end */
-
+  } /* playground-fold-end */
 }
 /* playground-fold */
 
 function pad(pad: unknown, val: number) {
   return pad ? String(val).padStart(2, '0') : val;
-}/* playground-fold-end */
+} /* playground-fold-end */
diff --git a/packages/lit-dev-content/src/code-language-preference.ts b/packages/lit-dev-content/src/code-language-preference.ts
index a5766be21..7a10b3dc6 100644
--- a/packages/lit-dev-content/src/code-language-preference.ts
+++ b/packages/lit-dev-content/src/code-language-preference.ts
@@ -64,7 +64,7 @@ export const getCodeLanguagePreference = (): CodeLanguagePreference =>
  */
 export const setCodeLanguagePreference = (
   preference: CodeLanguagePreference,
-  force = false
+  force = false,
 ): void => {
   if (!force) {
     let cancelled = false;
@@ -75,7 +75,7 @@ export const setCodeLanguagePreference = (
       },
     };
     window.dispatchEvent(
-      new CustomEvent(BEFORE_CODE_LANGUAGE_CHANGE, {detail})
+      new CustomEvent(BEFORE_CODE_LANGUAGE_CHANGE, {detail}),
     );
     if (cancelled) {
       return;
diff --git a/packages/lit-dev-content/src/components/algolia-search-controller.ts b/packages/lit-dev-content/src/components/algolia-search-controller.ts
index 05540901a..60bd8bbd0 100644
--- a/packages/lit-dev-content/src/components/algolia-search-controller.ts
+++ b/packages/lit-dev-content/src/components/algolia-search-controller.ts
@@ -62,7 +62,7 @@ export class AgloliaSearchController<T extends {}> {
   constructor(
     host: ReactiveControllerHost,
     argsFn: () => string,
-    options?: Partial<AlgoliaSearchControllerOptions>
+    options?: Partial<AlgoliaSearchControllerOptions>,
   ) {
     const opts = {...agloliaSearchControllerDefaultOptions, ...options};
     this._indexName = opts.index;
@@ -75,7 +75,7 @@ export class AgloliaSearchController<T extends {}> {
     this._task = new Task(
       host,
       ([text]) => this._querySearch(text),
-      () => [argsFn()]
+      () => [argsFn()],
     );
 
     aa('init', {
diff --git a/packages/lit-dev-content/src/components/lazy-svg.ts b/packages/lit-dev-content/src/components/lazy-svg.ts
index 3d33d7471..bef690f67 100644
--- a/packages/lit-dev-content/src/components/lazy-svg.ts
+++ b/packages/lit-dev-content/src/components/lazy-svg.ts
@@ -147,7 +147,7 @@ export default class LazySvg extends LitElement {
       },
       {
         rootMargin: this.rootMargin,
-      }
+      },
     );
     observer.observe(this._svgEl);
   }
diff --git a/packages/lit-dev-content/src/components/litdev-aside.ts b/packages/lit-dev-content/src/components/litdev-aside.ts
index d717193ba..43bf6d207 100644
--- a/packages/lit-dev-content/src/components/litdev-aside.ts
+++ b/packages/lit-dev-content/src/components/litdev-aside.ts
@@ -90,7 +90,7 @@ export class LitDevAside extends LitElement {
       default:
         const exhaustiveCheck: never = this.type;
         console.warn(
-          `Received unexpected type for <litdev-aside>: ${exhaustiveCheck}`
+          `Received unexpected type for <litdev-aside>: ${exhaustiveCheck}`,
         );
         return nothing;
     }
diff --git a/packages/lit-dev-content/src/components/litdev-banner.ts b/packages/lit-dev-content/src/components/litdev-banner.ts
index 918eaed74..a38b3f1d1 100644
--- a/packages/lit-dev-content/src/components/litdev-banner.ts
+++ b/packages/lit-dev-content/src/components/litdev-banner.ts
@@ -33,7 +33,7 @@ export class LitDevBanner extends HTMLElement {
       if (size) {
         document.documentElement.style.setProperty(
           '--banner-height',
-          `${size.blockSize}px`
+          `${size.blockSize}px`,
         );
       }
     });
diff --git a/packages/lit-dev-content/src/components/litdev-code-language-switch.ts b/packages/lit-dev-content/src/components/litdev-code-language-switch.ts
index aa9803474..0574c9422 100644
--- a/packages/lit-dev-content/src/components/litdev-code-language-switch.ts
+++ b/packages/lit-dev-content/src/components/litdev-code-language-switch.ts
@@ -113,7 +113,7 @@ export class LitDevCodeLanguageSwitch extends LitElement {
     super.connectedCallback();
     window.addEventListener(
       CODE_LANGUAGE_CHANGE,
-      this._onCodeLanguagePreferenceChanged
+      this._onCodeLanguagePreferenceChanged,
     );
   }
 
@@ -121,7 +121,7 @@ export class LitDevCodeLanguageSwitch extends LitElement {
     super.disconnectedCallback();
     window.removeEventListener(
       CODE_LANGUAGE_CHANGE,
-      this._onCodeLanguagePreferenceChanged
+      this._onCodeLanguagePreferenceChanged,
     );
   }
 
diff --git a/packages/lit-dev-content/src/components/litdev-cookie-banner.ts b/packages/lit-dev-content/src/components/litdev-cookie-banner.ts
index 8bd0fc115..5763b19c7 100644
--- a/packages/lit-dev-content/src/components/litdev-cookie-banner.ts
+++ b/packages/lit-dev-content/src/components/litdev-cookie-banner.ts
@@ -31,7 +31,8 @@ export default class LitdevCookieBanner extends LitElement {
       /* Material 2 elevation 5
       https://lit.dev/playground/?mods=gists#gist=3ee0643323ce76d53bb8f5a98149dd45
       */
-      box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px,
+      box-shadow:
+        rgba(0, 0, 0, 0.2) 0px 3px 5px -1px,
         rgba(0, 0, 0, 0.14) 0px 5px 8px 0px,
         rgba(0, 0, 0, 0.12) 0px 1px 14px 0px;
     }
diff --git a/packages/lit-dev-content/src/components/litdev-design-section.ts b/packages/lit-dev-content/src/components/litdev-design-section.ts
index 4065e94c1..933fbb10b 100644
--- a/packages/lit-dev-content/src/components/litdev-design-section.ts
+++ b/packages/lit-dev-content/src/components/litdev-design-section.ts
@@ -92,7 +92,7 @@ export class LitDevDesignSection extends LitElement {
                   <option value=${token} ?selected=${this.foreground === token}>
                     ${token.replace('--sys-color-', '').replaceAll('-', ' ')}
                   </option>
-                `
+                `,
               )}
             </select>
           </label>
@@ -105,7 +105,7 @@ export class LitDevDesignSection extends LitElement {
                   <option value=${token} ?selected=${this.background === token}>
                     ${token.replace('--sys-color-', '').replaceAll('-', ' ')}
                   </option>
-                `
+                `,
               )}
             </select>
           </label>
@@ -120,7 +120,7 @@ export class LitDevDesignSection extends LitElement {
             >
               ${config.text}
             </div>
-          `
+          `,
         )}
       </div>
     `;
diff --git a/packages/lit-dev-content/src/components/litdev-drawer.ts b/packages/lit-dev-content/src/components/litdev-drawer.ts
index 34fcc1554..50d5e177b 100644
--- a/packages/lit-dev-content/src/components/litdev-drawer.ts
+++ b/packages/lit-dev-content/src/components/litdev-drawer.ts
@@ -57,7 +57,8 @@ export class LitDevDrawer extends LitElement {
   static styles = css`
     :host {
       width: var(--litdev-drawer-open-width);
-      transition: transform var(--litdev-drawer-transition-duration),
+      transition:
+        transform var(--litdev-drawer-transition-duration),
         margin-right var(--litdev-drawer-transition-duration);
       display: flex;
       flex-direction: column;
@@ -69,15 +70,21 @@ export class LitDevDrawer extends LitElement {
          way there is no content reflow within the drawer during animation. */
       transform: translateX(
         calc(
-          -1 * calc(var(--litdev-drawer-open-width) -
-                var(--litdev-drawer-closed-width))
+          -1 *
+            calc(
+              var(--litdev-drawer-open-width) - var(
+                  --litdev-drawer-closed-width
+                )
+            )
         )
       );
       /* We also apply a negative margin, so that we don't take up the extra
          space. */
       margin-right: calc(
-        -1 * calc(var(--litdev-drawer-open-width) -
-              var(--litdev-drawer-closed-width))
+        -1 *
+          calc(
+            var(--litdev-drawer-open-width) - var(--litdev-drawer-closed-width)
+          )
       );
       overflow-y: hidden !important;
     }
@@ -173,7 +180,7 @@ export class LitDevDrawer extends LitElement {
       () => {
         this.removeAttribute('transitioning');
       },
-      {once: true}
+      {once: true},
     );
   }
 }
diff --git a/packages/lit-dev-content/src/components/litdev-error-notifier.ts b/packages/lit-dev-content/src/components/litdev-error-notifier.ts
index 6e8ec5d19..142363f9f 100644
--- a/packages/lit-dev-content/src/components/litdev-error-notifier.ts
+++ b/packages/lit-dev-content/src/components/litdev-error-notifier.ts
@@ -92,7 +92,7 @@ Site version: \`${this.siteVersion}\`
 Browser: \`${navigator.userAgent}\`
 
 <!-- Please add any additional information here. -->
-`
+`,
     );
     return url.href;
   }
diff --git a/packages/lit-dev-content/src/components/litdev-example.ts b/packages/lit-dev-content/src/components/litdev-example.ts
index b578ebfd9..5713e442a 100644
--- a/packages/lit-dev-content/src/components/litdev-example.ts
+++ b/packages/lit-dev-content/src/components/litdev-example.ts
@@ -150,7 +150,7 @@ export class LitDevExample extends LitElement {
     super.connectedCallback();
     window.addEventListener(
       CODE_LANGUAGE_CHANGE,
-      this._onCodeLanguagePreferenceChanged
+      this._onCodeLanguagePreferenceChanged,
     );
   }
 
@@ -158,7 +158,7 @@ export class LitDevExample extends LitElement {
     super.disconnectedCallback();
     window.removeEventListener(
       CODE_LANGUAGE_CHANGE,
-      this._onCodeLanguagePreferenceChanged
+      this._onCodeLanguagePreferenceChanged,
     );
   }
 
@@ -243,7 +243,7 @@ export class LitDevExample extends LitElement {
         },
         {
           rootMargin: '40px',
-        }
+        },
       );
 
       io.observe(this);
diff --git a/packages/lit-dev-content/src/components/litdev-playground-change-guard.ts b/packages/lit-dev-content/src/components/litdev-playground-change-guard.ts
index 7373b0a43..8cd73ecf5 100644
--- a/packages/lit-dev-content/src/components/litdev-playground-change-guard.ts
+++ b/packages/lit-dev-content/src/components/litdev-playground-change-guard.ts
@@ -60,7 +60,7 @@ export class LitDevPlaygroundChangeGuard extends PlaygroundConnectedElement {
     super.connectedCallback();
     window.addEventListener(
       BEFORE_CODE_LANGUAGE_CHANGE,
-      this._onBeforeCodeLanguageChange
+      this._onBeforeCodeLanguageChange,
     );
   }
 
@@ -68,7 +68,7 @@ export class LitDevPlaygroundChangeGuard extends PlaygroundConnectedElement {
     super.disconnectedCallback();
     window.removeEventListener(
       BEFORE_CODE_LANGUAGE_CHANGE,
-      this._onBeforeCodeLanguageChange
+      this._onBeforeCodeLanguageChange,
     );
   }
 
@@ -76,7 +76,7 @@ export class LitDevPlaygroundChangeGuard extends PlaygroundConnectedElement {
   private _pendingLanguage: CodeLanguagePreference | undefined = undefined;
 
   private _onBeforeCodeLanguageChange = (
-    event: WindowEventMap[typeof BEFORE_CODE_LANGUAGE_CHANGE]
+    event: WindowEventMap[typeof BEFORE_CODE_LANGUAGE_CHANGE],
   ) => {
     if (this._project?.modified) {
       event.detail.cancel();
@@ -85,7 +85,7 @@ export class LitDevPlaygroundChangeGuard extends PlaygroundConnectedElement {
   };
 
   private _onDialogClosed(
-    event: CustomEvent<{action: 'cancel' | 'continue' | 'close'}>
+    event: CustomEvent<{action: 'cancel' | 'continue' | 'close'}>,
   ) {
     if (
       event.detail.action === 'continue' &&
diff --git a/packages/lit-dev-content/src/components/litdev-playground-page.ts b/packages/lit-dev-content/src/components/litdev-playground-page.ts
index d58be636b..03bcfab0b 100644
--- a/packages/lit-dev-content/src/components/litdev-playground-page.ts
+++ b/packages/lit-dev-content/src/components/litdev-playground-page.ts
@@ -136,7 +136,7 @@ export class LitDevPlaygroundPage extends LitElement {
       this.viewMode =
         (getHashSearchParam(
           PLAYGROUND_FULLSCREEN_HASH_PARAM,
-          hashSearchParams
+          hashSearchParams,
         ) as null | ViewMode) ?? 'split';
     } else if (changed.has('viewMode')) {
       // if previewFullscreen has changed, update the hash in the URL but not on
@@ -145,12 +145,12 @@ export class LitDevPlaygroundPage extends LitElement {
         setHashSearchParam(
           PLAYGROUND_FULLSCREEN_HASH_PARAM,
           this.viewMode,
-          hashSearchParams
+          hashSearchParams,
         );
       } else {
         deleteHashSearchParam(
           PLAYGROUND_FULLSCREEN_HASH_PARAM,
-          hashSearchParams
+          hashSearchParams,
         );
       }
 
@@ -198,8 +198,8 @@ export class LitDevPlaygroundPage extends LitElement {
   private async _discoverChildElements() {
     // TODO(aomarks) This is very unconventional. We should be rendering these
     // elements ourselves, or slotting them in with names.
-    const mustFindChild: typeof this['querySelector'] = (
-      selector: string
+    const mustFindChild: (typeof this)['querySelector'] = (
+      selector: string,
     ): HTMLElement => {
       const el = this.querySelector(selector);
       if (el === null) {
@@ -215,13 +215,13 @@ export class LitDevPlaygroundPage extends LitElement {
     this._examplesDrawer = mustFindChild('litdev-drawer')!;
     this._exampleControls = mustFindChild('litdev-example-controls')!;
     this._examplesDrawerScroller = mustFindChild(
-      'litdev-drawer .minimalScroller'
+      'litdev-drawer .minimalScroller',
     )!;
     // Unforuntately, the file editor does not emit a change event, so we reach
     // into the shadow root and find the code editor that does.
     await this._fileEditor.updateComplete;
     this._codeEditor = this._fileEditor.shadowRoot!.querySelector(
-      'playground-code-editor'
+      'playground-code-editor',
     )!;
   }
 
@@ -287,7 +287,7 @@ export class LitDevPlaygroundPage extends LitElement {
 
     this.viewMode =
       (getHashSearchParam(
-        PLAYGROUND_FULLSCREEN_HASH_PARAM
+        PLAYGROUND_FULLSCREEN_HASH_PARAM,
       ) as ViewMode | null) || 'split';
     let urlFiles: Array<CompactProjectFile> | undefined;
     const gist = getHashSearchParam('gist');
@@ -325,7 +325,7 @@ export class LitDevPlaygroundPage extends LitElement {
       this._playgroundProject.config = {
         extends: '/samples/base.json',
         files: Object.fromEntries(
-          urlFiles.map(({name, content, hidden}) => [name, {content, hidden}])
+          urlFiles.map(({name, content, hidden}) => [name, {content, hidden}]),
         ),
       };
     } else {
@@ -340,7 +340,7 @@ export class LitDevPlaygroundPage extends LitElement {
       this._playgroundProject.projectSrc = `${samplesRoot}/${sample}/project.json`;
 
       const link = this._examplesDrawer.querySelector(
-        `.exampleItem[data-sample="${sample}"]`
+        `.exampleItem[data-sample="${sample}"]`,
       );
       if (link) {
         link.classList.add('active');
diff --git a/packages/lit-dev-content/src/components/litdev-playground-share-gist.ts b/packages/lit-dev-content/src/components/litdev-playground-share-gist.ts
index 1d5794524..431891803 100644
--- a/packages/lit-dev-content/src/components/litdev-playground-share-gist.ts
+++ b/packages/lit-dev-content/src/components/litdev-playground-share-gist.ts
@@ -169,7 +169,7 @@ export class LitDevPlaygroundShareGist extends LitElement {
     const avatarSize = 24;
     const avatarUrl = new URL(
       `/u/${id}?s=${/* double for high dpi */ avatarSize * 2}`,
-      this.githubAvatarUrl
+      this.githubAvatarUrl,
     ).href;
     return html`<div id="signInStatus">
       <span>
@@ -247,7 +247,7 @@ export class LitDevPlaygroundShareGist extends LitElement {
       });
       localStorage.setItem(
         GITHUB_USER_LOCALSTORAGE_KEY,
-        JSON.stringify({id, login})
+        JSON.stringify({id, login}),
       );
       // Render share button.
       this.requestUpdate();
@@ -285,7 +285,7 @@ export class LitDevPlaygroundShareGist extends LitElement {
         new CustomEvent('status', {
           detail: {text: 'Creating gist ...'},
           bubbles: true,
-        })
+        }),
       );
 
       let token = tokenCache.get(this);
@@ -305,7 +305,7 @@ export class LitDevPlaygroundShareGist extends LitElement {
       });
 
       this.dispatchEvent(
-        new Event('will-hashchange', {bubbles: true, composed: true})
+        new Event('will-hashchange', {bubbles: true, composed: true}),
       );
       writeToHash(gist.id);
       let statusText = 'Gist created';
@@ -323,7 +323,7 @@ export class LitDevPlaygroundShareGist extends LitElement {
         new CustomEvent('status', {
           detail: {text: statusText},
           bubbles: true,
-        })
+        }),
       );
     } finally {
       this._pending = false;
@@ -347,7 +347,7 @@ export class LitDevPlaygroundShareGist extends LitElement {
         new CustomEvent('status', {
           detail: {text: 'Updating gist ...'},
           bubbles: true,
-        })
+        }),
       );
 
       let token = tokenCache.get(this);
@@ -378,7 +378,7 @@ export class LitDevPlaygroundShareGist extends LitElement {
       });
 
       this.dispatchEvent(
-        new Event('will-hashchange', {bubbles: true, composed: true})
+        new Event('will-hashchange', {bubbles: true, composed: true}),
       );
       writeToHash(gist.id);
       let statusText = 'Gist updated';
@@ -391,7 +391,7 @@ export class LitDevPlaygroundShareGist extends LitElement {
         new CustomEvent('status', {
           detail: {text: statusText},
           bubbles: true,
-        })
+        }),
       );
     } finally {
       this._pending = false;
diff --git a/packages/lit-dev-content/src/components/litdev-playground-share-long-url.ts b/packages/lit-dev-content/src/components/litdev-playground-share-long-url.ts
index ee09571a7..688ea23ff 100644
--- a/packages/lit-dev-content/src/components/litdev-playground-share-long-url.ts
+++ b/packages/lit-dev-content/src/components/litdev-playground-share-long-url.ts
@@ -75,7 +75,7 @@ export class LitDevPlaygroundShareLongUrl extends LitElement {
       return;
     }
     const base64 = encodeSafeBase64(
-      JSON.stringify(files.map(compactPlaygroundFile))
+      JSON.stringify(files.map(compactPlaygroundFile)),
     );
     // We have to use these util functions so that we do not accidentally
     // overwrite any existing query parameters in the hash like `#view-mode=...`
@@ -114,7 +114,7 @@ export class LitDevPlaygroundShareLongUrl extends LitElement {
       new CustomEvent('status', {
         detail: {text: statusText},
         bubbles: true,
-      })
+      }),
     );
   }
 }
diff --git a/packages/lit-dev-content/src/components/litdev-search-modal.ts b/packages/lit-dev-content/src/components/litdev-search-modal.ts
index 24e7b506a..952720b79 100644
--- a/packages/lit-dev-content/src/components/litdev-search-modal.ts
+++ b/packages/lit-dev-content/src/components/litdev-search-modal.ts
@@ -178,8 +178,10 @@ export class LitDevSearchModal extends LitElement {
       border: none;
       inset-block: 60px auto;
       background-color: transparent;
-      box-shadow: rgb(0 0 0 / 20%) 0px 11px 15px -7px,
-        rgb(0 0 0 / 14%) 0px 24px 38px 3px, rgb(0 0 0 / 12%) 0px 9px 46px 8px;
+      box-shadow:
+        rgb(0 0 0 / 20%) 0px 11px 15px -7px,
+        rgb(0 0 0 / 14%) 0px 24px 38px 3px,
+        rgb(0 0 0 / 12%) 0px 9px 46px 8px;
     }
 
     dialog::backdrop {
diff --git a/packages/lit-dev-content/src/components/litdev-search.ts b/packages/lit-dev-content/src/components/litdev-search.ts
index 27525c22c..db4ddec73 100644
--- a/packages/lit-dev-content/src/components/litdev-search.ts
+++ b/packages/lit-dev-content/src/components/litdev-search.ts
@@ -264,7 +264,7 @@ export class LitDevSearch extends LitElement {
     // once we release that feature in @lit-labs/task so that we don't do this
     // needlessly every render.
     const groupedSuggestions = new SuggestionGroups(
-      this._searchController?.value ?? []
+      this._searchController?.value ?? [],
     );
 
     // for aria-activedescendant we need each item in each group to have a
@@ -317,10 +317,10 @@ export class LitDevSearch extends LitElement {
                     })}"
                 ></litdev-search-option>
               `;
-            }
+            },
           )}
         </section>`;
-      }
+      },
     );
   }
 
@@ -463,7 +463,7 @@ export class LitDevSearch extends LitElement {
     // On mobile we manually close the nav drawer, otherwise the drawer remains
     // open when navigating between fragment identifiers.
     const navDrawer = document.querySelector(
-      'mwc-drawer#mobileDrawer'
+      'mwc-drawer#mobileDrawer',
     ) as Drawer;
     if (navDrawer) {
       navDrawer.open = false;
@@ -480,11 +480,11 @@ export class LitDevSearch extends LitElement {
     const githubIssueUrl = new URL('https://github.com/lit/lit.dev/issues/new');
     githubIssueUrl.searchParams.append(
       'title',
-      `[docs] No search results for \`${searchText}\``
+      `[docs] No search results for \`${searchText}\``,
     );
     githubIssueUrl.searchParams.append(
       'body',
-      `<!-- What type of content did you expect to see on lit.dev and explain why it should be on lit.dev -->`
+      `<!-- What type of content did you expect to see on lit.dev and explain why it should be on lit.dev -->`,
     );
     githubIssueUrl.searchParams.append('labels', `Area: docs`);
     return githubIssueUrl.href;
@@ -673,8 +673,8 @@ export class LitDevSearch extends LitElement {
 
       #items {
         max-height: calc(
-          100dvh - var(--_input-height) - 2 * var(--search-modal-padding-block) -
-            var(--_items-margin-block-start)
+          100dvh - var(--_input-height) - 2 *
+            var(--search-modal-padding-block) - var(--_items-margin-block-start)
         );
       }
     }
diff --git a/packages/lit-dev-content/src/components/litdev-tutorial.ts b/packages/lit-dev-content/src/components/litdev-tutorial.ts
index e71c1b8d5..8afb4cef1 100644
--- a/packages/lit-dev-content/src/components/litdev-tutorial.ts
+++ b/packages/lit-dev-content/src/components/litdev-tutorial.ts
@@ -153,7 +153,7 @@ export class LitDevTutorial extends LitElement {
    *     validation message
    */
   private readonly onPlaygroundMessage = (
-    e: MessageEvent<{status: string; message?: string}>
+    e: MessageEvent<{status: string; message?: string}>,
   ) => {
     if (this._checkStatus !== 'CHECKING') {
       return;
@@ -203,7 +203,7 @@ export class LitDevTutorial extends LitElement {
       return undefined;
     }
     return (this.getRootNode() as ShadowRoot | Document).getElementById(
-      this.project
+      this.project,
     ) as PlaygroundProject | undefined;
   }
 
@@ -215,7 +215,7 @@ export class LitDevTutorial extends LitElement {
       return undefined;
     }
     return (this.getRootNode() as ShadowRoot | Document).getElementById(
-      this.preview
+      this.preview,
     ) as PlaygroundPreview | undefined;
   }
 
@@ -254,7 +254,7 @@ export class LitDevTutorial extends LitElement {
     this,
     async ([projectLocation]) => {
       const manifestRes = await fetch(
-        `${this._samplesRoot}/tutorials/${projectLocation}/tutorial.json`
+        `${this._samplesRoot}/tutorials/${projectLocation}/tutorial.json`,
       );
 
       if (manifestRes.ok) {
@@ -263,7 +263,7 @@ export class LitDevTutorial extends LitElement {
         throw new Error('Manifest fetch was unsuccessful');
       }
     },
-    () => [this._projectLocation]
+    () => [this._projectLocation],
   );
 
   /**
@@ -288,7 +288,7 @@ export class LitDevTutorial extends LitElement {
 
       return html;
     },
-    () => [this._idx]
+    () => [this._idx],
   );
 
   createRenderRoot() {
@@ -369,13 +369,12 @@ export class LitDevTutorial extends LitElement {
         </a>
         <span class="tutorial-metadata">
           ${this._manifestTask.render({
-            complete: (manifest) => html` <span class="tutorial-title"
-                >${manifest?.header}</span
-              >
-              <span class="title-separator">${diamondIcon}</span>
-              <span class="step-text">Step</span>
-              <span class="number">${this._idx + 1}</span>
-              / <span class="number">${manifest?.steps.length}</span>`,
+            complete: (manifest) =>
+              html` <span class="tutorial-title">${manifest?.header}</span>
+                <span class="title-separator">${diamondIcon}</span>
+                <span class="step-text">Step</span>
+                <span class="number">${this._idx + 1}</span>
+                / <span class="number">${manifest?.steps.length}</span>`,
           })}
         </span>
       </div>
@@ -416,7 +415,7 @@ export class LitDevTutorial extends LitElement {
       <h1>
         ${when(
           this._idx < this._manifest.steps.length,
-          () => this._manifest.steps[this._idx].title
+          () => this._manifest.steps[this._idx].title,
         )}
       </h1>
       ${this._manifestTask.render({
@@ -440,7 +439,7 @@ export class LitDevTutorial extends LitElement {
             const domResponse = (domParser.parseFromString as any)(
               response,
               'text/html',
-              {includeShadowRoots: true}
+              {includeShadowRoots: true},
             );
             const body = domResponse.body;
             if (needsDSDPolyfill) {
@@ -464,9 +463,10 @@ export class LitDevTutorial extends LitElement {
     return html`<div id="tutorialFooter">
         ${when(
           !this._manifest.steps[this._idx].noSolve,
-          () => html`<litdev-icon-button @click=${this._onClickSolve}>
-            ${solveIcon} Solve
-          </litdev-icon-button>`
+          () =>
+            html`<litdev-icon-button @click=${this._onClickSolve}>
+              ${solveIcon} Solve
+            </litdev-icon-button>`,
         )}
         ${this._manifestTask.render({
           complete: (manifest) => this._renderCodeCheckButton(manifest),
@@ -536,7 +536,7 @@ export class LitDevTutorial extends LitElement {
     window.addEventListener('hashchange', this._readUrl);
     window.addEventListener(
       CODE_LANGUAGE_CHANGE,
-      this._onCodeLanguagePreferenceChanged
+      this._onCodeLanguagePreferenceChanged,
     );
 
     const previewElement = this._preview!;
@@ -557,7 +557,7 @@ export class LitDevTutorial extends LitElement {
     window.removeEventListener('hashchange', this._readUrl);
     window.removeEventListener(
       CODE_LANGUAGE_CHANGE,
-      this._onCodeLanguagePreferenceChanged
+      this._onCodeLanguagePreferenceChanged,
     );
 
     const iframe = this._preview!.iframe!;
@@ -596,7 +596,7 @@ export class LitDevTutorial extends LitElement {
       this._requestSolvedCode
         ? this._info.projectSrcAfter
         : this._info.projectSrcBefore,
-      true
+      true,
     );
   };
 
@@ -681,7 +681,7 @@ export class LitDevTutorial extends LitElement {
     if (hash.startsWith('#')) {
       hash = hash.slice(1);
     }
-    this._idx = hash === '' ? 0 : this._slugToIdx(hash) ?? this._idx;
+    this._idx = hash === '' ? 0 : (this._slugToIdx(hash) ?? this._idx);
     if (hash.startsWith('0')) {
       // In an earlier URL scheme, we indexed steps from 0, and left-padded with
       // "0"s. Now we index from 1, and conveniently use the fact that we also
@@ -705,7 +705,7 @@ export class LitDevTutorial extends LitElement {
     window.history.pushState(
       null,
       '',
-      addModsParameterToUrlIfNeeded(this._info.url)
+      addModsParameterToUrlIfNeeded(this._info.url),
     );
   }
 
diff --git a/packages/lit-dev-content/src/components/resize-bar.ts b/packages/lit-dev-content/src/components/resize-bar.ts
index 2307054ad..3bec62fd6 100644
--- a/packages/lit-dev-content/src/components/resize-bar.ts
+++ b/packages/lit-dev-content/src/components/resize-bar.ts
@@ -113,7 +113,7 @@ export class ResizeBar extends LitElement {
       return;
     }
     const target = (this.getRootNode() as ShadowRoot | Document).getElementById(
-      this.target
+      this.target,
     );
     if (!target) {
       return;
@@ -146,11 +146,13 @@ export class ResizeBar extends LitElement {
         // underneath the bar.
         const newSize = Math.max(
           0,
-          isWidthDimension ? oldSize + clientX - right : oldSize - clientY + top
+          isWidthDimension
+            ? oldSize + clientX - right
+            : oldSize - clientY + top,
         );
         document.documentElement.style.setProperty(
           this.property,
-          `${newSize}px`
+          `${newSize}px`,
         );
       });
     };
@@ -167,7 +169,7 @@ export class ResizeBar extends LitElement {
         this.active = false;
         this.resizing = false;
       },
-      {once: true}
+      {once: true},
     );
   }
 }
diff --git a/packages/lit-dev-content/src/components/theme-switcher.ts b/packages/lit-dev-content/src/components/theme-switcher.ts
index ffc88fdf9..bbceb68bb 100644
--- a/packages/lit-dev-content/src/components/theme-switcher.ts
+++ b/packages/lit-dev-content/src/components/theme-switcher.ts
@@ -93,7 +93,7 @@ export class ThemeSwitcher extends LitElement {
 
           (
             this.shadowRoot?.querySelector?.(
-              'md-menu-item[selected]'
+              'md-menu-item[selected]',
             ) as HTMLElement
           )?.focus?.();
         }}
@@ -115,7 +115,7 @@ export class ThemeSwitcher extends LitElement {
                 ? checkIcon('end')
                 : html`<span slot="end"></span>`}
             </md-menu-item>
-          `
+          `,
         )}
       </md-menu>
     `;
diff --git a/packages/lit-dev-content/src/components/ts-js.ts b/packages/lit-dev-content/src/components/ts-js.ts
index 05d53e175..0d73222f1 100644
--- a/packages/lit-dev-content/src/components/ts-js.ts
+++ b/packages/lit-dev-content/src/components/ts-js.ts
@@ -34,7 +34,7 @@ export class TsJsLanguageDisplay extends LitElement {
     super.disconnectedCallback();
     window.removeEventListener(
       CODE_LANGUAGE_CHANGE,
-      this._onCodeLanguageChange
+      this._onCodeLanguageChange,
     );
   }
 
diff --git a/packages/lit-dev-content/src/github/github-gists.ts b/packages/lit-dev-content/src/github/github-gists.ts
index 3d64fc4b9..c201b3d87 100644
--- a/packages/lit-dev-content/src/github/github-gists.ts
+++ b/packages/lit-dev-content/src/github/github-gists.ts
@@ -31,7 +31,7 @@ export interface GistFile {
  */
 export const getGist = async (
   gistId: string,
-  opts: GitHubApiOptions
+  opts: GitHubApiOptions,
 ): Promise<Gist> => {
   // https://docs.github.com/en/rest/reference/gists#get-a-gist
   const url = new URL(`/gists/${gistId}`, opts.apiBaseUrl);
@@ -47,7 +47,7 @@ export const getGist = async (
  */
 export const createGist = async (
   files: GistFiles,
-  opts: AuthenticatedGitHubApiOptions
+  opts: AuthenticatedGitHubApiOptions,
 ): Promise<Gist> => {
   // https://docs.github.com/en/rest/reference/gists#create-a-gist
   const url = new URL('/gists', opts.apiBaseUrl);
@@ -67,7 +67,7 @@ export const createGist = async (
 export const updateGist = async (
   gistId: string,
   files: GistFiles,
-  opts: AuthenticatedGitHubApiOptions
+  opts: AuthenticatedGitHubApiOptions,
 ): Promise<Gist> => {
   // https://docs.github.com/en/rest/reference/gists#update-a-gist
   const url = new URL(`/gists/${gistId}`, opts.apiBaseUrl);
diff --git a/packages/lit-dev-content/src/github/github-signin.ts b/packages/lit-dev-content/src/github/github-signin.ts
index 396c58a17..c4140e8fe 100644
--- a/packages/lit-dev-content/src/github/github-signin.ts
+++ b/packages/lit-dev-content/src/github/github-signin.ts
@@ -30,14 +30,14 @@ export interface GitHubSigninOptions {
  * https://docs.github.com/en/developers/apps/building-oauth-apps/authorizing-oauth-apps#web-application-flow.
  */
 export const signInToGithub = async (
-  options: GitHubSigninOptions
+  options: GitHubSigninOptions,
 ): Promise<string> => {
   const url = new URL(options.authorizeUrl);
   url.searchParams.set('client_id', options.clientId);
   url.searchParams.set('scope', 'gist');
   url.searchParams.set(
     'redirect_uri',
-    new URL('/playground/signin/', document.location.href).href
+    new URL('/playground/signin/', document.location.href).href,
   );
 
   // Width and height found empirically.
@@ -49,7 +49,7 @@ export const signInToGithub = async (
   const popup = window.open(
     url,
     '_blank',
-    `width=${width},height=${height},top=${top},left=${left}`
+    `width=${width},height=${height},top=${top},left=${left}`,
   );
   if (popup === null) {
     // Disabling popups in Chrome and Firefox doesn't seem to prevent
@@ -110,7 +110,7 @@ export const signInToGithub = async (
  * can be used to clean up this event listener if we need to end early.
  */
 const receiveCodeFromPopup = (
-  popup: Window
+  popup: Window,
 ): {
   promise: Promise<GitHubSigninReceiverMessage>;
   abort: () => void;
@@ -131,7 +131,7 @@ const receiveCodeFromPopup = (
           abort();
         }
       },
-      {signal: abortController.signal}
+      {signal: abortController.signal},
     );
   });
   return {promise, abort};
@@ -143,7 +143,7 @@ const receiveCodeFromPopup = (
  */
 const pollForPopupClosed = (
   popup: Window,
-  pollInterval: number
+  pollInterval: number,
 ): Promise<'closed'> => {
   return new Promise((resolve) => {
     const id = setInterval(() => {
@@ -174,7 +174,7 @@ const exchangeCodeForAccessToken = async (code: string): Promise<string> => {
     throw new Error(
       `/api/github-token-exchange error [${httpResp.status}]: ${
         jsonResp.error ?? '<unknown>'
-      }`
+      }`,
     );
   }
   return jsonResp.accessToken;
diff --git a/packages/lit-dev-content/src/github/github-user.ts b/packages/lit-dev-content/src/github/github-user.ts
index 565991ed1..d0c1bdc0b 100644
--- a/packages/lit-dev-content/src/github/github-user.ts
+++ b/packages/lit-dev-content/src/github/github-user.ts
@@ -17,7 +17,7 @@ export interface UserInfo {
  * Get details about the authenticated user.
  */
 export const getAuthenticatedUser = async (
-  opts: AuthenticatedGitHubApiOptions
+  opts: AuthenticatedGitHubApiOptions,
 ): Promise<UserInfo> => {
   // https://docs.github.com/en/rest/reference/users#get-the-authenticated-user
   const url = new URL('/user', opts.apiBaseUrl);
diff --git a/packages/lit-dev-content/src/github/github-util.ts b/packages/lit-dev-content/src/github/github-util.ts
index 65505e01d..dbd8b36d7 100644
--- a/packages/lit-dev-content/src/github/github-util.ts
+++ b/packages/lit-dev-content/src/github/github-util.ts
@@ -21,12 +21,12 @@ export class GitHubError extends Error {
     method: string,
     status: number | undefined,
     message?: string,
-    stack?: string
+    stack?: string,
   ) {
     super(
       `Error calling GitHub API ${method} ${url.pathname}` +
         (status ? ` (HTTP status ${status})` : '') +
-        (message ? `: ${message}` : '')
+        (message ? `: ${message}` : ''),
     );
     this.url = url;
     this.status = status;
@@ -42,7 +42,7 @@ export class GitHubError extends Error {
  */
 export const fetchGitHubJson = async <T>(
   url: URL,
-  init: RequestInit
+  init: RequestInit,
 ): Promise<T> => {
   try {
     const res = await fetch(url.href, init);
@@ -58,7 +58,7 @@ export const fetchGitHubJson = async <T>(
         init?.method ?? 'GET',
         undefined,
         (error as Error).message,
-        (error as Error).stack
+        (error as Error).stack,
       );
     }
     throw error;
diff --git a/packages/lit-dev-content/src/global/apply-mods.ts b/packages/lit-dev-content/src/global/apply-mods.ts
index 5301660ea..08dc344df 100644
--- a/packages/lit-dev-content/src/global/apply-mods.ts
+++ b/packages/lit-dev-content/src/global/apply-mods.ts
@@ -10,7 +10,7 @@ if (MODS) {
   document.body.classList.add(
     ...MODS.split(' ')
       .map((v) => v.trim())
-      .filter((v) => v !== '')
+      .filter((v) => v !== ''),
   );
   window.addEventListener('click', (event) => {
     for (const el of event.composedPath()) {
diff --git a/packages/lit-dev-content/src/global/hydrate-common-components.ts b/packages/lit-dev-content/src/global/hydrate-common-components.ts
index 7ef8cffa5..dc7a89320 100644
--- a/packages/lit-dev-content/src/global/hydrate-common-components.ts
+++ b/packages/lit-dev-content/src/global/hydrate-common-components.ts
@@ -32,7 +32,7 @@ const hydrateMobileNav = () => {
 const activateMobileDetails = async () => {
   // Expand the current section in the mobile nav.
   const activeDetails = document.querySelector(
-    '#mobileDocsNav > li.activeSection details'
+    '#mobileDocsNav > li.activeSection details',
   ) as HTMLDetailsElement | null;
   if (activeDetails === null) {
     return;
@@ -52,7 +52,7 @@ const activateMobileDetails = async () => {
         activeDetails.scrollIntoView({block: 'end'});
       });
     },
-    {once: true}
+    {once: true},
   );
 };
 
@@ -62,7 +62,7 @@ const activateMobileDetails = async () => {
 // We need to open the one in the current view or else it'll open a hidden
 // modal that makes the dom inert.
 const searchModals = document.querySelectorAll(
-  'litdev-search-modal'
+  'litdev-search-modal',
 ) as NodeListOf<LitDevSearchModal>;
 let modalHydrated = false;
 
@@ -88,7 +88,7 @@ for (const searchModal of searchModals) {
     },
     {
       once: true,
-    }
+    },
   );
 }
 
@@ -107,7 +107,7 @@ const hydrateAndOpenOnCMDK = async (e: KeyboardEvent) => {
     // We need to make sure we open the currently visible modal or else it'll
     // open a hidden modal that makes the dom inert.
     const searchModal = document.querySelector(
-      `#${navBar} litdev-search-modal`
+      `#${navBar} litdev-search-modal`,
     ) as LitDevSearchModal;
     const drawer = document.body.querySelector('mwc-drawer');
 
@@ -135,7 +135,7 @@ const onMobileView = () => {
   }
 
   const activeDetails = document.querySelector(
-    '#mobileDocsNav > li.activeSection details'
+    '#mobileDocsNav > li.activeSection details',
   );
 
   if (activeDetails) {
diff --git a/packages/lit-dev-content/src/global/theme.ts b/packages/lit-dev-content/src/global/theme.ts
index 8fb19245e..6c97a912e 100644
--- a/packages/lit-dev-content/src/global/theme.ts
+++ b/packages/lit-dev-content/src/global/theme.ts
@@ -44,7 +44,7 @@ function saveColorMode(mode: ColorMode) {
  */
 export function updateMetaColor(mode: ColorMode) {
   const meta = document.head.querySelector(
-    'meta[name="theme-color"]:not([media])'
+    'meta[name="theme-color"]:not([media])',
   );
   if (!meta) {
     return;
@@ -54,7 +54,7 @@ export function updateMetaColor(mode: ColorMode) {
 
   if (mode === 'auto') {
     const prefersDark = window.matchMedia(
-      '(prefers-color-scheme: dark)'
+      '(prefers-color-scheme: dark)',
     ).matches;
     isLight = !prefersDark;
   }
diff --git a/packages/lit-dev-content/src/icons/check-icon.ts b/packages/lit-dev-content/src/icons/check-icon.ts
index 4b68dd894..6f0b19bbd 100644
--- a/packages/lit-dev-content/src/icons/check-icon.ts
+++ b/packages/lit-dev-content/src/icons/check-icon.ts
@@ -7,12 +7,13 @@
 import {html, nothing} from 'lit';
 
 // Source: https://fonts.google.com/icons?selected=Material+Icons+Outlined:check_circle
-export const checkIcon = (slot = '') => html`<svg
-  height="24px"
-  viewBox="0 0 24 24"
-  width="24px"
-  fill="currentcolor"
-  slot=${slot || nothing}
->
-  <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
-</svg>`;
+export const checkIcon = (slot = '') =>
+  html`<svg
+    height="24px"
+    viewBox="0 0 24 24"
+    width="24px"
+    fill="currentcolor"
+    slot=${slot || nothing}
+  >
+    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
+  </svg>`;
diff --git a/packages/lit-dev-content/src/pages/home.ts b/packages/lit-dev-content/src/pages/home.ts
index 252872297..1501c7a22 100644
--- a/packages/lit-dev-content/src/pages/home.ts
+++ b/packages/lit-dev-content/src/pages/home.ts
@@ -44,7 +44,7 @@ const fadeHeaderOnScroll = () => {
       const entry = entries[0];
       document.body.classList.toggle('introScrolled', !entry.isIntersecting);
     },
-    {rootMargin: '-60px'}
+    {rootMargin: '-60px'},
   );
   const splashLogo = document.body.querySelector('#intro')!;
   observer.observe(splashLogo);
@@ -120,7 +120,7 @@ const activateTourRegions = () => {
     position: {
       start: {line: number; char: number};
       end: {line: number; char: number};
-    }
+    },
   ) => {
     const line = code.childNodes[position.start.line];
     if (line === undefined) {
diff --git a/packages/lit-dev-content/src/pages/learn.ts b/packages/lit-dev-content/src/pages/learn.ts
index c261306f5..b89bb19e2 100644
--- a/packages/lit-dev-content/src/pages/learn.ts
+++ b/packages/lit-dev-content/src/pages/learn.ts
@@ -14,7 +14,7 @@ import type {MdChipSet} from '@material/web/chips/chip-set.js';
 import {FilterChip} from '@material/web/chips/internal/filter-chip.js';
 
 const intentionallyBlank = document.querySelector<HTMLElement>(
-  '#intentionally-blank'
+  '#intentionally-blank',
 );
 if (!intentionallyBlank) {
   throw new Error(`Internal Error: no intentionally blank element.`);
@@ -68,12 +68,12 @@ const updateContentFromChips = async (updateHash = true) => {
   const keepKinds = new Set(
     (chipSet.chips as FilterChip[])
       .filter((el) => el.selected)
-      .map((el) => el.dataset['value'])
+      .map((el) => el.dataset['value']),
   );
 
   intentionallyBlank.style.display = keepKinds.size === 0 ? 'block' : 'none';
   for (const card of Array.from(
-    document.querySelectorAll<HTMLDivElement>('.card-grid > .card')
+    document.querySelectorAll<HTMLDivElement>('.card-grid > .card'),
   )) {
     const cardKind = card.dataset['contentKind'] ?? 'always-show';
     card.style.display =
diff --git a/packages/lit-dev-content/src/types/gtag.d.ts b/packages/lit-dev-content/src/types/gtag.d.ts
index 4e0fe4e38..0588db3f0 100644
--- a/packages/lit-dev-content/src/types/gtag.d.ts
+++ b/packages/lit-dev-content/src/types/gtag.d.ts
@@ -7,6 +7,6 @@ interface Window {
   gtag?: (
     interface: 'event',
     eventName: string,
-    params?: {[param: string]: unknown}
+    params?: {[param: string]: unknown},
   ) => void;
 }
diff --git a/packages/lit-dev-content/src/util/compact-playground-file.ts b/packages/lit-dev-content/src/util/compact-playground-file.ts
index a02baa4b2..89ee7e59f 100644
--- a/packages/lit-dev-content/src/util/compact-playground-file.ts
+++ b/packages/lit-dev-content/src/util/compact-playground-file.ts
@@ -21,7 +21,7 @@ export interface CompactPlaygroundFile {
  * false.
  */
 export const compactPlaygroundFile = (
-  file: SampleFile
+  file: SampleFile,
 ): CompactPlaygroundFile => {
   const compact: CompactPlaygroundFile = {
     name: file.name,
diff --git a/packages/lit-dev-content/src/util/gist-conversion.ts b/packages/lit-dev-content/src/util/gist-conversion.ts
index 4464fa972..20e1a656b 100644
--- a/packages/lit-dev-content/src/util/gist-conversion.ts
+++ b/packages/lit-dev-content/src/util/gist-conversion.ts
@@ -48,7 +48,7 @@ export const playgroundToGist = (playgroundFiles: SampleFile[]): GistFiles => {
           entry.hidden = true;
         }
         return [name, entry];
-      })
+      }),
     ),
   };
   const gistFiles: GistFiles = Object.fromEntries(
@@ -56,7 +56,7 @@ export const playgroundToGist = (playgroundFiles: SampleFile[]): GistFiles => {
       // Gist files can't be empty. But because an empty file will still have a
       // metadata entry, we'll still know it exists when we load it later.
       .filter(({content}) => content !== '')
-      .map(({name, content}) => [name, {content}])
+      .map(({name, content}) => [name, {content}]),
   );
   gistFiles[METADATA_FILENAME] = {
     content: JSON.stringify(metadata, null, 2),
@@ -74,7 +74,7 @@ export const gistToPlayground = (gistFiles: GistFiles): SampleFile[] => {
     try {
       metadata =
         (JSON.parse(
-          metadataFile.content
+          metadataFile.content,
         ) as GistPlaygroundMetadata) /* in case it is null */ || {};
     } catch (error) {
       console.warn('Failed to JSON parse playground metadata file in gist');
diff --git a/packages/lit-dev-content/src/util/hydration-helpers.ts b/packages/lit-dev-content/src/util/hydration-helpers.ts
index d7f5da4f1..dc4218506 100644
--- a/packages/lit-dev-content/src/util/hydration-helpers.ts
+++ b/packages/lit-dev-content/src/util/hydration-helpers.ts
@@ -26,7 +26,7 @@ export const onIdle = (hydrationCallback: () => void) => {
  */
 export const onMediaQueryOnce = (
   queryString: string,
-  hydrationCallback: () => void
+  hydrationCallback: () => void,
 ) => {
   const query = window.matchMedia(queryString);
   const onQuery = (e: MediaQueryList | MediaQueryListEvent) => {
diff --git a/packages/lit-dev-content/src/util/render-algolia-suggestions.ts b/packages/lit-dev-content/src/util/render-algolia-suggestions.ts
index beb3b9d72..9e8f7586e 100644
--- a/packages/lit-dev-content/src/util/render-algolia-suggestions.ts
+++ b/packages/lit-dev-content/src/util/render-algolia-suggestions.ts
@@ -14,7 +14,7 @@ import {html, TemplateResult} from 'lit';
  * @returns A sanitized lit template.
  */
 export const renderAlgoliaSnippet = (
-  snippet: string
+  snippet: string,
 ): TemplateResult | string => {
   // Algloia snippets have stringified HTML like so:
   // 'Baz <em>Foo</em> bar <em>Foo</em>z'.
diff --git a/packages/lit-dev-content/src/util/safe-base64.ts b/packages/lit-dev-content/src/util/safe-base64.ts
index e767c098c..8c2c55654 100644
--- a/packages/lit-dev-content/src/util/safe-base64.ts
+++ b/packages/lit-dev-content/src/util/safe-base64.ts
@@ -31,7 +31,7 @@ export const encodeSafeBase64 = (str: string): string => {
   //       to base64 encode: {F0 9F 98 83}
   const percentEscaped = encodeURIComponent(str);
   const utf8 = percentEscaped.replace(/%([0-9A-F]{2})/g, (_, hex) =>
-    String.fromCharCode(parseInt(hex, 16))
+    String.fromCharCode(parseInt(hex, 16)),
   );
   const base64 = btoa(utf8);
   const base64url = base64.replace(/\+/g, '-').replace(/\//g, '_');
diff --git a/packages/lit-dev-content/src/util/url-helpers.ts b/packages/lit-dev-content/src/util/url-helpers.ts
index f27fc890e..50d2faba3 100644
--- a/packages/lit-dev-content/src/util/url-helpers.ts
+++ b/packages/lit-dev-content/src/util/url-helpers.ts
@@ -15,7 +15,7 @@
  */
 export const getHashSearchParam = (
   name: string,
-  hashParams = getHashSearchParams()
+  hashParams = getHashSearchParams(),
 ): string | null => {
   return hashParams.get(name);
 };
@@ -33,7 +33,7 @@ export const getHashSearchParam = (
 export const setHashSearchParam = (
   name: string,
   value: string,
-  hashParams = getHashSearchParams()
+  hashParams = getHashSearchParams(),
 ): URLSearchParams => {
   hashParams.set(name, value);
   return hashParams;
@@ -50,7 +50,7 @@ export const setHashSearchParam = (
  */
 export const deleteHashSearchParam = (
   name: string,
-  hashParams = getHashSearchParams()
+  hashParams = getHashSearchParams(),
 ): URLSearchParams => {
   hashParams.delete(name);
   return hashParams;
diff --git a/packages/lit-dev-discord-bot/src/index.ts b/packages/lit-dev-discord-bot/src/index.ts
index d786c401e..61bfb75f6 100644
--- a/packages/lit-dev-discord-bot/src/index.ts
+++ b/packages/lit-dev-discord-bot/src/index.ts
@@ -21,7 +21,7 @@ import {publicVars} from 'lit-dev-tools-esm/lib/configs.js';
 // set up algolia search
 const algClient = algolia(
   publicVars.algolia.appId,
-  publicVars.algolia.searchOnlyKey
+  publicVars.algolia.searchOnlyKey,
 );
 const index = algClient.initIndex(publicVars.algolia.index);
 
@@ -55,7 +55,7 @@ const docsSlashCommand = new SlashCommandBuilder()
       .setName('query')
       .setDescription('The text to search for.')
       .setRequired(true)
-      .setAutocomplete(true)
+      .setAutocomplete(true),
   );
 
 /**
@@ -87,7 +87,7 @@ const publishDiscordCommands = async (commands: PublishableCommand[]) => {
  * @param interaction The Autocomplete interaction to be handled.
  */
 const handleDocsAutocompleteInteraction = async (
-  interaction: AutocompleteInteraction
+  interaction: AutocompleteInteraction,
 ) => {
   const focusedValue = interaction.options.getFocused();
   // Do not waste a query if the user has fewer than 3 chars.
@@ -129,7 +129,7 @@ const handleDocsAutocompleteInteraction = async (
  * @param interaction The /docs command interaction to be handled.
  */
 const handleDocsSubmissionInteraction = async (
-  interaction: ChatInputCommandInteraction
+  interaction: ChatInputCommandInteraction,
 ) => {
   const value = interaction.options.data[0].value as string;
 
@@ -165,14 +165,14 @@ const startClientWebsocketServer = () => {
       // SlashCommandBuilder's .setAutocomplete(true) option.
       if (interaction.type === InteractionType.ApplicationCommandAutocomplete) {
         handleDocsAutocompleteInteraction(interaction).catch((error) =>
-          console.error(error)
+          console.error(error),
         );
       }
 
       // This is true when the user finally returns a command. (a lit.dev url)
       if (interaction.isChatInputCommand()) {
         handleDocsSubmissionInteraction(interaction).catch((error) =>
-          console.error(error)
+          console.error(error),
         );
       }
     }
diff --git a/packages/lit-dev-server/src/middleware/content-security-policy-middleware.ts b/packages/lit-dev-server/src/middleware/content-security-policy-middleware.ts
index 408a8241d..156f6b77c 100644
--- a/packages/lit-dev-server/src/middleware/content-security-policy-middleware.ts
+++ b/packages/lit-dev-server/src/middleware/content-security-policy-middleware.ts
@@ -68,7 +68,7 @@ const GOOGLE_ANALYTICS_INLINE_SCRIPT_HASH =
  * https://csp-evaluator.withgoogle.com/
  */
 export const contentSecurityPolicyMiddleware = (
-  opts: ContentSecurityPolicyMiddlewareOptions
+  opts: ContentSecurityPolicyMiddlewareOptions,
 ): Koa.Middleware => {
   const makePolicy = (...directives: string[]) =>
     [
@@ -143,7 +143,7 @@ export const contentSecurityPolicyMiddleware = (
     // is no other directive to use. See
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1303364#c4 and
     // https://github.com/w3c/webappsec-csp/issues/199.
-    `default-src 'self'`
+    `default-src 'self'`,
   );
 
   // Policy for the playground-elements web worker script.
@@ -174,7 +174,7 @@ export const contentSecurityPolicyMiddleware = (
     `connect-src https://unpkg.com/ https://cdn.jsdelivr.net/`,
 
     // Disallow everything else.
-    `default-src 'none'`
+    `default-src 'none'`,
   );
 
   // For all other responses, set the strictest possible CSP, just in case a
@@ -191,7 +191,7 @@ export const contentSecurityPolicyMiddleware = (
   const atomXmlFeedCsp = makePolicy(
     `style-src 'unsafe-inline'`,
     `img-src data:`,
-    `default-src 'none'`
+    `default-src 'none'`,
   );
 
   return async (ctx, next) => {
diff --git a/packages/lit-dev-server/src/middleware/github-token-exchange-middleware.ts b/packages/lit-dev-server/src/middleware/github-token-exchange-middleware.ts
index a17eebd46..060be5475 100644
--- a/packages/lit-dev-server/src/middleware/github-token-exchange-middleware.ts
+++ b/packages/lit-dev-server/src/middleware/github-token-exchange-middleware.ts
@@ -69,7 +69,7 @@ export const createGitHubTokenExchangeMiddleware =
     const errorResponse = (
       status: number,
       externalMessage: string,
-      internalMessage?: string
+      internalMessage?: string,
     ): void => {
       ctx.status = status;
       ctx.type = 'application/json';
@@ -80,7 +80,7 @@ export const createGitHubTokenExchangeMiddleware =
       console.error(
         `GitHub token exchange middleware error [${status}]\n${externalMessage}${
           internalMessage ? '\n' + internalMessage : ''
-        }`
+        }`,
       );
     };
 
@@ -89,7 +89,7 @@ export const createGitHubTokenExchangeMiddleware =
     if (!code) {
       return errorResponse(
         400,
-        'The "code" query parameter is missing or malformed.'
+        'The "code" query parameter is missing or malformed.',
       );
     }
 
@@ -108,7 +108,7 @@ export const createGitHubTokenExchangeMiddleware =
       return errorResponse(
         500,
         `An HTTP ${tokenHttpResp.status} error was returned by the GitHub API.`,
-        await safelyGetHttpBody(tokenHttpResp)
+        await safelyGetHttpBody(tokenHttpResp),
       );
     }
 
@@ -123,7 +123,7 @@ export const createGitHubTokenExchangeMiddleware =
       return errorResponse(
         500,
         'Error parsing JSON response from GitHub API.',
-        (error as Error).message
+        (error as Error).message,
       );
     }
 
@@ -134,7 +134,7 @@ export const createGitHubTokenExchangeMiddleware =
         return errorResponse(
           401,
           'The code passed is incorrect or expired.',
-          JSON.stringify(tokenResp)
+          JSON.stringify(tokenResp),
         );
       } else if (tokenResp.error === 'incorrect_client_credentials') {
         // This error could happen if our GitHub app ID or secret is set
@@ -142,13 +142,13 @@ export const createGitHubTokenExchangeMiddleware =
         return errorResponse(
           500,
           'The GitHub client credentials are invalid.',
-          JSON.stringify(tokenResp)
+          JSON.stringify(tokenResp),
         );
       }
       return errorResponse(
         500,
         'An unexpected GitHub API error occured.',
-        JSON.stringify(tokenResp)
+        JSON.stringify(tokenResp),
       );
     }
 
@@ -157,7 +157,7 @@ export const createGitHubTokenExchangeMiddleware =
       return errorResponse(
         500,
         'Unexpected GitHub API response format.',
-        JSON.stringify(tokenResp)
+        JSON.stringify(tokenResp),
       );
     }
 
diff --git a/packages/lit-dev-server/src/middleware/redirect-middleware.ts b/packages/lit-dev-server/src/middleware/redirect-middleware.ts
index 46a958132..0dae97ff4 100644
--- a/packages/lit-dev-server/src/middleware/redirect-middleware.ts
+++ b/packages/lit-dev-server/src/middleware/redirect-middleware.ts
@@ -31,7 +31,7 @@ export const redirectMiddleware = (): Koa.Middleware => async (ctx, next) => {
       // of as an escaped path component.
       url = new URL(
         oldLitHtmlSiteRedirects.get(url.pathname) ?? '/404-not-found/',
-        url
+        url,
       );
       break;
     }
@@ -39,7 +39,7 @@ export const redirectMiddleware = (): Koa.Middleware => async (ctx, next) => {
       url.hostname = 'lit.dev';
       url = new URL(
         oldLitElementSiteRedirects.get(url.pathname) ?? '/404-not-found/',
-        url
+        url,
       );
       break;
     }
diff --git a/packages/lit-dev-server/src/server.ts b/packages/lit-dev-server/src/server.ts
index 23da80b89..7312bc86f 100644
--- a/packages/lit-dev-server/src/server.ts
+++ b/packages/lit-dev-server/src/server.ts
@@ -51,9 +51,9 @@ if (mode === 'playground') {
       path.join(
         contentPackage,
         ENV.eleventyOutDir,
-        'csp-inline-script-hashes.txt'
+        'csp-inline-script-hashes.txt',
       ),
-      'utf8'
+      'utf8',
     )
     .trim()
     .split('\n');
@@ -65,14 +65,14 @@ if (mode === 'playground') {
       reportViolations: ENV.reportCspViolations,
       githubApiOrigin: ENV.githubApiUrl,
       githubAvatarOrigin: ENV.githubAvatarUrl,
-    })
+    }),
   );
   app.use(
     createGitHubTokenExchangeMiddleware({
       githubMainUrl: ENV.githubMainUrl,
       clientId: ENV.githubClientId,
       clientSecret: ENV.githubClientSecret,
-    })
+    }),
   );
   app.use(redirectMiddleware());
   app.use(notFoundMiddleware(staticRoot));
@@ -99,11 +99,11 @@ app.use(
         // day while it revalidates the cache in the background.
         res.setHeader(
           'Cache-Control',
-          'max-age=120, stale-while-revalidate=86400'
+          'max-age=120, stale-while-revalidate=86400',
         );
       }
     },
-  })
+  }),
 );
 
 const server = app.listen(port);
diff --git a/packages/lit-dev-tests/src/check-broken-links.ts b/packages/lit-dev-tests/src/check-broken-links.ts
index f201140dd..97749cfe5 100644
--- a/packages/lit-dev-tests/src/check-broken-links.ts
+++ b/packages/lit-dev-tests/src/check-broken-links.ts
@@ -13,7 +13,7 @@ const goodUrlsFilename = pathLib.join(
   url.fileURLToPath(import.meta.url),
   '..',
   '..',
-  'known-good-urls.txt'
+  'known-good-urls.txt',
 );
 
 /**
@@ -107,7 +107,7 @@ async function main() {
             return;
           }
           console.log(
-            `BROKEN LINK: ${result.url.resolved} found on page ${result.base.resolved}`
+            `BROKEN LINK: ${result.url.resolved} found on page ${result.base.resolved}`,
           );
           console.log(result.brokenReason);
           console.log();
@@ -125,7 +125,7 @@ async function main() {
         // Ok, this is a non-broken, external, not-excluded link. Let's cache it.
         knownGoodUrls.add(result.url.resolved);
       },
-    }
+    },
   );
   checker.enqueue('http://localhost:6415', {});
   return donePromise;
diff --git a/packages/lit-dev-tests/src/check-no-todos.ts b/packages/lit-dev-tests/src/check-no-todos.ts
index 59e1139f5..90f961808 100644
--- a/packages/lit-dev-tests/src/check-no-todos.ts
+++ b/packages/lit-dev-tests/src/check-no-todos.ts
@@ -27,7 +27,7 @@ const siteOutputDir = pathLib.resolve(
   '../',
   '../',
   'lit-dev-content',
-  '_site'
+  '_site',
 );
 
 const api_pages_to_check = [
@@ -63,12 +63,12 @@ const checkNoTodos = async () => {
   console.log();
   if (fail) {
     console.log(
-      `${bold + red}Found TODOs in generated  API documentation!${reset}`
+      `${bold + red}Found TODOs in generated  API documentation!${reset}`,
     );
     process.exit(1);
   } else {
     console.error(
-      `${bold + green}Generated API does not contain any TODOs!${reset}`
+      `${bold + green}Generated API does not contain any TODOs!${reset}`,
     );
   }
 };
diff --git a/packages/lit-dev-tests/src/check-redirects.ts b/packages/lit-dev-tests/src/check-redirects.ts
index ed493ac44..bd7b655f3 100644
--- a/packages/lit-dev-tests/src/check-redirects.ts
+++ b/packages/lit-dev-tests/src/check-redirects.ts
@@ -40,11 +40,11 @@ const siteOutputDir = pathLib.resolve(
   '../',
   '../',
   'lit-dev-content',
-  '_site'
+  '_site',
 );
 
 const checkRedirect = async (
-  redirect: string
+  redirect: string,
 ): Promise<ErrorMessage | typeof OK> => {
   if (isAbsoluteUrl(redirect)) {
     // Remote URLs.
@@ -64,11 +64,11 @@ const checkRedirect = async (
     const {pathname, hash} = new URL(redirect, 'http://lit.dev');
     const indexHtmlPath = pathLib.relative(
       process.cwd(),
-      pathLib.join(siteOutputDir, trimTrailingSlash(pathname), 'index.html')
+      pathLib.join(siteOutputDir, trimTrailingSlash(pathname), 'index.html'),
     );
     const directPath = pathLib.relative(
       process.cwd(),
-      pathLib.join(siteOutputDir, trimTrailingSlash(pathname))
+      pathLib.join(siteOutputDir, trimTrailingSlash(pathname)),
     );
     let data;
     try {
@@ -119,13 +119,13 @@ const checkAllRedirects = async () => {
         } else {
           console.log();
           console.log(
-            `${bold + red}BROKEN REDIRECT${reset} ${yellow + target + reset}`
+            `${bold + red}BROKEN REDIRECT${reset} ${yellow + target + reset}`,
           );
           console.log(result);
           console.log();
           fail = true;
         }
-      })()
+      })(),
     );
   }
   await Promise.all(promises);
diff --git a/packages/lit-dev-tests/src/playwright/components-styles.spec.ts b/packages/lit-dev-tests/src/playwright/components-styles.spec.ts
index 81f1b86be..74a1b71d6 100644
--- a/packages/lit-dev-tests/src/playwright/components-styles.spec.ts
+++ b/packages/lit-dev-tests/src/playwright/components-styles.spec.ts
@@ -17,12 +17,12 @@ function runTests(dark: boolean) {
       dark ? ' - dark' : ''
     }`, async ({page}) => {
       await page.goto(
-        '/docs/components/styles/#inheriting-styles-from-a-superclass'
+        '/docs/components/styles/#inheriting-styles-from-a-superclass',
       );
 
       // Wait for the exact playground preview we want to load.
       await page.waitForSelector(
-        'litdev-example[project="v3-docs/components/style/superstyles"] playground-preview [part="preview-loading-indicator"][aria-hidden="true"]'
+        'litdev-example[project="v3-docs/components/style/superstyles"] playground-preview [part="preview-loading-indicator"][aria-hidden="true"]',
       );
       // Wait for the loading bar to fade out.
       await page.waitForTimeout(250);
@@ -32,11 +32,11 @@ function runTests(dark: boolean) {
       await expect(
         await page
           .locator(
-            'litdev-example[project="v3-docs/components/style/superstyles"] playground-preview'
+            'litdev-example[project="v3-docs/components/style/superstyles"] playground-preview',
           )
-          .screenshot()
+          .screenshot(),
       ).toMatchSnapshot(
-        `inheritingStylesPlaygroundPreview${dark ? '-dark' : ''}.png`
+        `inheritingStylesPlaygroundPreview${dark ? '-dark' : ''}.png`,
       );
     });
   });
diff --git a/packages/lit-dev-tests/src/playwright/home.spec.ts b/packages/lit-dev-tests/src/playwright/home.spec.ts
index f8cfe6574..03d61fa5c 100644
--- a/packages/lit-dev-tests/src/playwright/home.spec.ts
+++ b/packages/lit-dev-tests/src/playwright/home.spec.ts
@@ -14,7 +14,7 @@ function runScreenshotTests(dark: boolean) {
       await page.goto('/');
       await waitForTheme(page, dark);
       await expect(await page.locator('#intro').screenshot()).toMatchSnapshot(
-        `homePageIntroSection${dark ? '-dark' : ''}.png`
+        `homePageIntroSection${dark ? '-dark' : ''}.png`,
       );
     });
 
@@ -22,7 +22,7 @@ function runScreenshotTests(dark: boolean) {
       await page.goto('/');
       await waitForTheme(page, dark);
       await expect(
-        await page.locator('litdev-cookie-banner').screenshot()
+        await page.locator('litdev-cookie-banner').screenshot(),
       ).toMatchSnapshot(`homePageCookiesBanner${dark ? '-dark' : ''}.png`);
     });
   });
@@ -32,7 +32,7 @@ test.describe('Home page', () => {
   test('splashLogo accessible.', async ({page}) => {
     await page.goto('/');
     expect(await page.locator('#splashLogo').getAttribute('role')).toBe(
-      'heading'
+      'heading',
     );
     const homePageImg = page.locator('#splashLogo > svg');
     expect(await homePageImg.getAttribute('aria-label')).toBe('Lit');
@@ -41,7 +41,7 @@ test.describe('Home page', () => {
   test('search site input basic functionality works', async ({page}) => {
     await page.goto('/');
     const searchButton = page.locator(
-      '#desktopNav litdev-search-modal > button'
+      '#desktopNav litdev-search-modal > button',
     );
     const searchInput = page.locator('#desktopNav litdev-search input');
 
@@ -58,44 +58,44 @@ test.describe('Home page', () => {
 
     // Playwright pierces shadow dom by default.
     await page.waitForSelector(
-      '.group:nth-of-type(1) litdev-search-option:nth-of-type(1)'
+      '.group:nth-of-type(1) litdev-search-option:nth-of-type(1)',
     );
 
     // section title and type should be correct
     await expect(
-      page.locator('.group:nth-of-type(1) .descriptor:nth-of-type(1) .title')
+      page.locator('.group:nth-of-type(1) .descriptor:nth-of-type(1) .title'),
     ).toHaveText('Lifecycle');
     await expect(
-      page.locator('.group:nth-of-type(1) .descriptor:nth-of-type(1) .tag')
+      page.locator('.group:nth-of-type(1) .descriptor:nth-of-type(1) .tag'),
     ).toHaveText('Docs');
 
     // First Result should be a document title not a subsection
     await expect(
       page.locator(
-        '.group:nth-of-type(1) litdev-search-option:nth-of-type(1) .title'
-      )
+        '.group:nth-of-type(1) litdev-search-option:nth-of-type(1) .title',
+      ),
     ).toHaveText('Lifecycle');
     await expect(
       page.locator(
-        '.group:nth-of-type(1) litdev-search-option:nth-of-type(1) .text'
-      )
+        '.group:nth-of-type(1) litdev-search-option:nth-of-type(1) .text',
+      ),
     ).toHaveCount(0);
 
     // Second result should be a subsection
     await expect(
       page.locator(
-        '.group:nth-of-type(1) litdev-search-option:nth-of-type(2) .title'
-      )
+        '.group:nth-of-type(1) litdev-search-option:nth-of-type(2) .title',
+      ),
     ).toHaveText('Reactive update cycle');
     await expect(
       page.locator(
-        '.group:nth-of-type(1) litdev-search-option:nth-of-type(2) .text'
-      )
+        '.group:nth-of-type(1) litdev-search-option:nth-of-type(2) .text',
+      ),
     ).not.toBeEmpty();
 
     // click on the subsection
     await page.click(
-      '.group:nth-of-type(1) litdev-search-option:nth-of-type(2)'
+      '.group:nth-of-type(1) litdev-search-option:nth-of-type(2)',
     );
 
     await expect(page.locator('#reactive-update-cycle')).toBeVisible();
diff --git a/packages/lit-dev-tests/src/playwright/learn.spec.ts b/packages/lit-dev-tests/src/playwright/learn.spec.ts
index 369ac0118..47561b176 100644
--- a/packages/lit-dev-tests/src/playwright/learn.spec.ts
+++ b/packages/lit-dev-tests/src/playwright/learn.spec.ts
@@ -20,7 +20,7 @@ function runScreenshotTests(dark: boolean) {
       await page.goto('/learn/');
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `learnCatalog${dark ? '-dark' : ''}.png`
+        `learnCatalog${dark ? '-dark' : ''}.png`,
       );
     });
   });
diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.ts b/packages/lit-dev-tests/src/playwright/playground.spec.ts
index 71360ce3e..191114d23 100644
--- a/packages/lit-dev-tests/src/playwright/playground.spec.ts
+++ b/packages/lit-dev-tests/src/playwright/playground.spec.ts
@@ -45,7 +45,7 @@ function runScreenshotTests(dark: boolean) {
       await preventGDPRBanner(page);
       await browserPage.goto('http://localhost:6417/reset');
       expect(await browserPage.textContent('body')).toEqual(
-        'fake github successfully reset'
+        'fake github successfully reset',
       );
       await browserPage.close();
     });
@@ -61,9 +61,9 @@ function runScreenshotTests(dark: boolean) {
       await expect(
         await page
           .locator('main > litdev-playground-page > #content')
-          .screenshot()
+          .screenshot(),
       ).toMatchSnapshot(
-        `helloWorldPlaygroundProject${dark ? '-dark' : ''}.png`
+        `helloWorldPlaygroundProject${dark ? '-dark' : ''}.png`,
       );
     });
 
@@ -81,7 +81,7 @@ function runScreenshotTests(dark: boolean) {
       await page.click('litdev-playground-share-button');
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `shareLongUrl-1-shareMenuOpen${dark ? '-dark' : ''}.png`
+        `shareLongUrl-1-shareMenuOpen${dark ? '-dark' : ''}.png`,
       );
 
       // Save the long URL
@@ -92,11 +92,11 @@ function runScreenshotTests(dark: boolean) {
         'litdev-playground-share-button litdev-flyout',
         {
           state: 'hidden',
-        }
+        },
       );
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `shareLongUrl-2-snackbarOpen${dark ? '-dark' : ''}.png`
+        `shareLongUrl-2-snackbarOpen${dark ? '-dark' : ''}.png`,
       );
 
       // Reload the page to confirm the new content is still there
@@ -104,7 +104,7 @@ function runScreenshotTests(dark: boolean) {
       await waitForPlaygroundPreviewToLoad(page);
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `shareLongUrl-3-pageReloaded${dark ? '-dark' : ''}.png`
+        `shareLongUrl-3-pageReloaded${dark ? '-dark' : ''}.png`,
       );
     });
 
@@ -124,11 +124,11 @@ function runScreenshotTests(dark: boolean) {
         'litdev-playground-share-button litdev-flyout',
         {
           state: 'visible',
-        }
+        },
       );
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `shareGist-1-shareMenuOpen${dark ? '-dark' : ''}.png`
+        `shareGist-1-shareMenuOpen${dark ? '-dark' : ''}.png`,
       );
 
       // Sign in to GitHub
@@ -136,7 +136,7 @@ function runScreenshotTests(dark: boolean) {
       await page.waitForSelector('#createNewGistButton', {state: 'visible'});
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `shareGist-2-signedIn${dark ? '-dark' : ''}.png`
+        `shareGist-2-signedIn${dark ? '-dark' : ''}.png`,
       );
 
       // Save the gist
@@ -148,12 +148,12 @@ function runScreenshotTests(dark: boolean) {
         'litdev-playground-share-button litdev-flyout',
         {
           state: 'hidden',
-        }
+        },
       );
       await freezeSnackbars(page);
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `shareGist-3-snackbarOpen${dark ? '-dark' : ''}.png`
+        `shareGist-3-snackbarOpen${dark ? '-dark' : ''}.png`,
       );
 
       // Reload the page to confirm the new content is still there
@@ -161,7 +161,7 @@ function runScreenshotTests(dark: boolean) {
       await waitForPlaygroundPreviewToLoad(page);
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `shareGist-4-pageReloaded${dark ? '-dark' : ''}.png`
+        `shareGist-4-pageReloaded${dark ? '-dark' : ''}.png`,
       );
 
       // Type some more content
@@ -178,7 +178,7 @@ function runScreenshotTests(dark: boolean) {
       await page.keyboard.type('new-name.ts');
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `shareGist-5-renamingFile${dark ? '-dark' : ''}.png`
+        `shareGist-5-renamingFile${dark ? '-dark' : ''}.png`,
       );
       await page.keyboard.press('Enter');
 
@@ -188,7 +188,7 @@ function runScreenshotTests(dark: boolean) {
       await page.keyboard.type('empty.txt');
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `shareGist-6-addingFile${dark ? '-dark' : ''}.png`
+        `shareGist-6-addingFile${dark ? '-dark' : ''}.png`,
       );
       await page.keyboard.press('Enter');
 
@@ -199,11 +199,11 @@ function runScreenshotTests(dark: boolean) {
         'litdev-playground-share-button litdev-flyout',
         {
           state: 'visible',
-        }
+        },
       );
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `shareGist-7-shareMenuOpenAgain${dark ? '-dark' : ''}.png`
+        `shareGist-7-shareMenuOpenAgain${dark ? '-dark' : ''}.png`,
       );
 
       // Update the gist
@@ -216,11 +216,11 @@ function runScreenshotTests(dark: boolean) {
         'litdev-playground-share-button litdev-flyout',
         {
           state: 'hidden',
-        }
+        },
       );
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `shareGist-8-gistUpdated${dark ? '-dark' : ''}.png`
+        `shareGist-8-gistUpdated${dark ? '-dark' : ''}.png`,
       );
 
       // Reload the page again to confirm the updated content is there
@@ -228,7 +228,7 @@ function runScreenshotTests(dark: boolean) {
       await waitForPlaygroundPreviewToLoad(page);
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `shareGist-9-pageReloadedAgain${dark ? '-dark' : ''}.png`
+        `shareGist-9-pageReloadedAgain${dark ? '-dark' : ''}.png`,
       );
     });
 
@@ -241,7 +241,7 @@ function runScreenshotTests(dark: boolean) {
       // Open the share menu
       await page.click('litdev-playground-share-button');
       await page.waitForSelector(
-        'litdev-playground-share-button litdev-flyout'
+        'litdev-playground-share-button litdev-flyout',
       );
 
       // Click share
@@ -260,7 +260,7 @@ function runScreenshotTests(dark: boolean) {
       await freezeDialogs(page);
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `userDeclinesGithubAuth${dark ? '-dark' : ''}.png`
+        `userDeclinesGithubAuth${dark ? '-dark' : ''}.png`,
       );
     });
 
@@ -273,7 +273,7 @@ function runScreenshotTests(dark: boolean) {
       // Open the share menu
       await page.click('litdev-playground-share-button');
       await page.waitForSelector(
-        'litdev-playground-share-button litdev-flyout'
+        'litdev-playground-share-button litdev-flyout',
       );
 
       // Click share
@@ -291,7 +291,7 @@ function runScreenshotTests(dark: boolean) {
       await freezeDialogs(page);
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `userClosesGitHubAuthWindowTooEarly${dark ? '-dark' : ''}.png`
+        `userClosesGitHubAuthWindowTooEarly${dark ? '-dark' : ''}.png`,
       );
     });
 
@@ -304,7 +304,7 @@ function runScreenshotTests(dark: boolean) {
       await freezeDialogs(page);
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `gistDoesNotExist${dark ? '-dark' : ''}.png`
+        `gistDoesNotExist${dark ? '-dark' : ''}.png`,
       );
     });
 
@@ -323,7 +323,7 @@ function runScreenshotTests(dark: boolean) {
       // Open the share menu
       await page.click('litdev-playground-share-button');
       await page.waitForSelector(
-        'litdev-playground-share-button litdev-flyout'
+        'litdev-playground-share-button litdev-flyout',
       );
 
       // Sign in to GitHub
@@ -340,7 +340,7 @@ function runScreenshotTests(dark: boolean) {
       await closeSnackbars(page);
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `backendErrorWritingGist${dark ? '-dark' : ''}.png`
+        `backendErrorWritingGist${dark ? '-dark' : ''}.png`,
       );
     });
   });
@@ -351,7 +351,7 @@ test.describe('Playground', () => {
     const browserPage = await browser.newPage();
     await browserPage.goto('http://localhost:6417/reset');
     expect(await browserPage.textContent('body')).toEqual(
-      'fake github successfully reset'
+      'fake github successfully reset',
     );
     await browserPage.close();
   });
@@ -362,26 +362,26 @@ test.describe('Playground', () => {
     await waitForPlaygroundPreviewToLoad(page);
 
     const greetingExample = page.locator(
-      '#exampleContent > div:nth-child(1) > ul > li:nth-child(1)'
+      '#exampleContent > div:nth-child(1) > ul > li:nth-child(1)',
     );
     await expect(greetingExample).toHaveClass('exampleItem active');
 
     const codeEditor = page.locator('playground-code-editor #focusContainer');
     expect(
       ((await codeEditor.textContent()) ?? '').includes(
-        `@customElement('simple-greeting')`
-      )
+        `@customElement('simple-greeting')`,
+      ),
     ).toBe(true);
 
     const playgroundPreviewFrame = (await (await page
       .locator('playground-preview iframe')
       .elementHandle())!.contentFrame())!;
     await expect(
-      playgroundPreviewFrame.locator('simple-greeting p')!
+      playgroundPreviewFrame.locator('simple-greeting p')!,
     ).toHaveText('Hello, World!');
     await expect(playgroundPreviewFrame.locator('simple-greeting p')).toHaveCSS(
       'color',
-      'rgb(0, 0, 255)'
+      'rgb(0, 0, 255)',
     );
   });
 
@@ -402,11 +402,11 @@ test.describe('Playground', () => {
       .locator('playground-preview iframe')
       .elementHandle())!.contentFrame())!;
     await expect(
-      playgroundPreviewFrame.locator('simple-greeting p')
+      playgroundPreviewFrame.locator('simple-greeting p'),
     ).toHaveText('Hello, World!');
     await expect(playgroundPreviewFrame.locator('simple-greeting p')).toHaveCSS(
       'color',
-      'rgb(255, 0, 0)'
+      'rgb(255, 0, 0)',
     );
   });
 
@@ -433,7 +433,7 @@ test.describe('Playground', () => {
     // On the next Ctrl+S, the long URL share should happen automatically
     await page.keyboard.press(`${modifierKey}+S`);
     await page.waitForURL(
-      (url) => url.href.match(/#project=/) !== null && url.href !== firstUrl
+      (url) => url.href.match(/#project=/) !== null && url.href !== firstUrl,
     );
     expect(await readClipboardText(page)).toMatch(page.url());
   });
diff --git a/packages/lit-dev-tests/src/playwright/tutorials.spec.ts b/packages/lit-dev-tests/src/playwright/tutorials.spec.ts
index 1253dc10d..c39a6eb43 100644
--- a/packages/lit-dev-tests/src/playwright/tutorials.spec.ts
+++ b/packages/lit-dev-tests/src/playwright/tutorials.spec.ts
@@ -22,7 +22,7 @@ function runScreenshotTests(dark: boolean) {
       await waitForPlaygroundPreviewToLoad(page);
       await waitForTheme(page, dark);
       await expect(await page.screenshot()).toMatchSnapshot(
-        `introToLitTutorialFirstStep${dark ? '-dark' : ''}.png`
+        `introToLitTutorialFirstStep${dark ? '-dark' : ''}.png`,
       );
     });
   });
diff --git a/packages/lit-dev-tests/src/playwright/unversioned.spec.ts b/packages/lit-dev-tests/src/playwright/unversioned.spec.ts
index cc91d426d..ec57e149d 100644
--- a/packages/lit-dev-tests/src/playwright/unversioned.spec.ts
+++ b/packages/lit-dev-tests/src/playwright/unversioned.spec.ts
@@ -62,7 +62,7 @@ test.describe('Unversioned docs', () => {
 
     // unversioned page should not have a canonical link.
     await expect(unversionedPage.locator('link[rel="canonical"]')).toHaveCount(
-      0
+      0,
     );
   });
 
@@ -77,7 +77,7 @@ test.describe('Unversioned docs', () => {
     });
     await expect(gettingStartedLocator).toHaveAttribute(
       'href',
-      '/docs/composition/overview/'
+      '/docs/composition/overview/',
     );
   });
 
@@ -97,21 +97,21 @@ test.describe('Unversioned docs', () => {
       'article#content table a',
       {
         hasText: '@property',
-      }
+      },
     );
     const unversionedPropertyDecoratorLink = unversionedPage.locator(
       'article#content table a',
       {
         hasText: '@property',
-      }
+      },
     );
     await expect(versionedPropertyDecoratorLink).toHaveAttribute(
       'href',
-      `/docs/${SITE_LATEST_VERSION}/api/decorators#property`
+      `/docs/${SITE_LATEST_VERSION}/api/decorators#property`,
     );
     await expect(unversionedPropertyDecoratorLink).toHaveAttribute(
       'href',
-      `/docs/api/decorators#property`
+      `/docs/api/decorators#property`,
     );
   });
 });
diff --git a/packages/lit-dev-tests/src/playwright/util.ts b/packages/lit-dev-tests/src/playwright/util.ts
index 37a9ca973..2140ff659 100644
--- a/packages/lit-dev-tests/src/playwright/util.ts
+++ b/packages/lit-dev-tests/src/playwright/util.ts
@@ -48,9 +48,15 @@ export async function waitForPlaygroundPreviewToLoad(page: Page) {
     return true;
   }, iframe);
   // Hide the animated loading indicator.
-  await page.evaluate((el) => {
-    el.style.visibility = 'hidden';
-  }, await page.waitForSelector('playground-preview [part="preview-loading-indicator"]', {state: 'attached'}));
+  await page.evaluate(
+    (el) => {
+      el.style.visibility = 'hidden';
+    },
+    await page.waitForSelector(
+      'playground-preview [part="preview-loading-indicator"]',
+      {state: 'attached'},
+    ),
+  );
 }
 
 interface MwcSnackbar extends HTMLElement {
@@ -67,7 +73,7 @@ export async function freezeSnackbars(page: Page) {
     await page.evaluate((snackbar) => {
       (snackbar as MwcSnackbar).timeoutMs = -1;
       const surface = snackbar.shadowRoot?.querySelector(
-        '.mdc-snackbar__surface'
+        '.mdc-snackbar__surface',
       );
       if (surface) {
         (surface as HTMLElement).style.transition = 'none';
diff --git a/packages/lit-dev-tools-cjs/src/api-docs/generate.ts b/packages/lit-dev-tools-cjs/src/api-docs/generate.ts
index 6405edd21..af3ef19fe 100644
--- a/packages/lit-dev-tools-cjs/src/api-docs/generate.ts
+++ b/packages/lit-dev-tools-cjs/src/api-docs/generate.ts
@@ -46,7 +46,7 @@ const clone = async ({repo, gitDir, commit}: ApiDocsConfig) => {
   await execFileAsync(
     'git',
     ['remote', 'add', 'origin', `https://github.com/${repo}`],
-    {cwd: gitDir}
+    {cwd: gitDir},
   );
   await execFileAsync('git', ['fetch', 'origin', '--depth=1', commit], {
     cwd: gitDir,
@@ -104,7 +104,7 @@ const analyze = async (config: ApiDocsConfig) => {
 
   const json = await app.serializer.projectToObject(
     root,
-    pathlib.resolve(config.tsConfigPath, '..')
+    pathlib.resolve(config.tsConfigPath, '..'),
   );
   const transformer = new ApiDocsTransformer(json, config);
   const {pages, symbolMap} = await transformer.transform();
@@ -113,7 +113,7 @@ const analyze = async (config: ApiDocsConfig) => {
   await fs.writeFile(
     config.pagesOutPath,
     JSON.stringify(pages, null, 2),
-    'utf8'
+    'utf8',
   );
   console.log(`Wrote ${config.pagesOutPath}`);
 
@@ -121,7 +121,7 @@ const analyze = async (config: ApiDocsConfig) => {
   await fs.writeFile(
     config.symbolsOutPath,
     JSON.stringify(symbolMap, null, 2),
-    'utf8'
+    'utf8',
   );
   console.log(`Wrote ${config.symbolsOutPath}`);
 };
diff --git a/packages/lit-dev-tools-cjs/src/api-docs/transformer.spec.ts b/packages/lit-dev-tools-cjs/src/api-docs/transformer.spec.ts
index 2ebd0f1f6..caf2ed0a5 100644
--- a/packages/lit-dev-tools-cjs/src/api-docs/transformer.spec.ts
+++ b/packages/lit-dev-tools-cjs/src/api-docs/transformer.spec.ts
@@ -112,7 +112,7 @@ const simpleTests: Array<[TestLabel, Input, Expected]> = [
 ];
 
 simpleTests.forEach(([label, input, expected]: [TestLabel, Input, Expected]) =>
-  test(label, () => assert.equal(simpleReplacer(input), expected))
+  test(label, () => assert.equal(simpleReplacer(input), expected)),
 );
 
 test('[[`symbol`]] hyperlink with node context', () => {
@@ -128,7 +128,7 @@ test('[[`symbol`]] hyperlink with node context', () => {
 
   assert.equal(
     r('[[`attributeChangedCallback`]]'),
-    '[`attributeChangedCallback`](LitElement#LitElement.attributeChangedCallback)'
+    '[`attributeChangedCallback`](LitElement#LitElement.attributeChangedCallback)',
   );
 });
 
@@ -145,7 +145,7 @@ test('@linkcode hyperlink with node context', () => {
 
   assert.equal(
     r('{@linkcode attributeChangedCallback}'),
-    '[`attributeChangedCallback`](LitElement#LitElement.attributeChangedCallback)'
+    '[`attributeChangedCallback`](LitElement#LitElement.attributeChangedCallback)',
   );
 });
 
diff --git a/packages/lit-dev-tools-cjs/src/api-docs/transformer.ts b/packages/lit-dev-tools-cjs/src/api-docs/transformer.ts
index 7b508e48c..fb3b45087 100644
--- a/packages/lit-dev-tools-cjs/src/api-docs/transformer.ts
+++ b/packages/lit-dev-tools-cjs/src/api-docs/transformer.ts
@@ -21,7 +21,7 @@ import {ReflectionKind} from 'typedoc';
 
 const findIndexOrInfinity = <T>(
   array: ReadonlyArray<T>,
-  match: (el: T) => boolean
+  match: (el: T) => boolean,
 ) => {
   const idx = array.findIndex(match);
   return idx === -1 ? Infinity : idx;
@@ -96,7 +96,7 @@ export class ApiDocsTransformer {
 
   constructor(
     project: typedoc.JSONOutput.ProjectReflection,
-    config: ApiDocsConfig
+    config: ApiDocsConfig,
   ) {
     this.project = project;
     this.config = config;
@@ -132,7 +132,7 @@ export class ApiDocsTransformer {
         this.replaceCommentNodesWithLegacyCommentFields(node);
         this.reflectionById.set(node.id, node);
         node.children = (node.children ?? []).filter((child) =>
-          this.filter(child)
+          this.filter(child),
         );
         ancestry.push(node);
         for (const child of node.children) {
@@ -217,7 +217,7 @@ export class ApiDocsTransformer {
       this.expandAndMergeCategoryReferences(node);
       this.linkifySymbolsInComments(node);
       node.children = (node.children ?? []).filter(
-        (child) => !duplicateExportIdsToRemove.has(child.id)
+        (child) => !duplicateExportIdsToRemove.has(child.id),
       );
       for (const child of node.children) {
         secondPassVisit(child);
@@ -258,7 +258,7 @@ export class ApiDocsTransformer {
    */
   private choosePageLocation(
     node: DeclarationReflection,
-    ancestry: Array<DeclarationReflection>
+    ancestry: Array<DeclarationReflection>,
   ) {
     if (!node.kind || node.kind === typedoc.ReflectionKind.Module) {
       return;
@@ -522,7 +522,7 @@ export class ApiDocsTransformer {
    * mixed types, and with fully expanded reflections.
    */
   private expandAndMergeCategoryReferences(
-    node: ExtendedDeclarationReflection
+    node: ExtendedDeclarationReflection,
   ) {
     for (const group of node.groups ?? []) {
       for (const category of group.categories ?? []) {
@@ -532,7 +532,7 @@ export class ApiDocsTransformer {
         const anchor = node.name + '/' + name;
         node.expandedCategories ??= [];
         let cat = node.expandedCategories.find(
-          (category) => category.anchor === anchor
+          (category) => category.anchor === anchor,
         );
         if (cat === undefined) {
           cat = {
@@ -555,7 +555,7 @@ export class ApiDocsTransformer {
     }
     if (node.expandedCategories) {
       node.expandedCategories.sort(({title: a}, {title: b}) =>
-        a.localeCompare(b)
+        a.localeCompare(b),
       );
       for (const category of node.expandedCategories) {
         category.children.sort(this.symbolSortFn);
@@ -569,7 +569,7 @@ export class ApiDocsTransformer {
    */
   symbolSortFn = (
     a: DeclarationReflection,
-    b: DeclarationReflection
+    b: DeclarationReflection,
   ): number => {
     // By entrypoint (e.g. a type from a directive module should be adjacent to
     // the directive function).
@@ -587,12 +587,12 @@ export class ApiDocsTransformer {
     const idxA = findIndexOrInfinity(
       this.config.symbolOrder,
       (s) =>
-        s === (a as ExtendedDeclarationReflection).location?.anchor ?? a.name
+        s === (a as ExtendedDeclarationReflection).location?.anchor ?? a.name,
     );
     const idxB = findIndexOrInfinity(
       this.config.symbolOrder,
       (s) =>
-        s === (b as ExtendedDeclarationReflection).location?.anchor ?? b.name
+        s === (b as ExtendedDeclarationReflection).location?.anchor ?? b.name,
     );
     if (idxA !== idxB) {
       return idxA - idxB;
@@ -615,7 +615,7 @@ export class ApiDocsTransformer {
    * our HTML template understands.
    */
   private replaceCommentNodesWithLegacyCommentFields(
-    node: DeclarationReflection
+    node: DeclarationReflection,
   ) {
     if (node.comment) {
       this.replaceCommentNodeForLegacyFormat(node.comment);
@@ -670,7 +670,7 @@ export class ApiDocsTransformer {
           throw new Error(
             `Unhandled inline-tag format: '${
               part.tag
-            }' for part: ${JSON.stringify(part)}`
+            }' for part: ${JSON.stringify(part)}`,
           );
         }
       }
@@ -759,7 +759,7 @@ export class ApiDocsTransformer {
   private async makeSourceRelativeToMonorepoRoot(source: SourceReference) {
     source.fileName = pathlib.relative(
       this.config.gitDir,
-      pathlib.resolve(this.config.typedocRoot, '..', source.fileName)
+      pathlib.resolve(this.config.typedocRoot, '..', source.fileName),
     );
   }
 
@@ -776,7 +776,7 @@ export class ApiDocsTransformer {
       }
       const mapFilename = pathlib.join(
         this.config.gitDir,
-        source.fileName + '.map'
+        source.fileName + '.map',
       );
       let mapStr;
       try {
@@ -799,7 +799,7 @@ export class ApiDocsTransformer {
     }
     source.fileName = pathlib.join(
       pathlib.dirname(source.fileName),
-      pos.source
+      pos.source,
     );
     source.line = pos.line ?? 0;
     source.character = pos.column ?? 0;
@@ -841,7 +841,7 @@ export class ApiDocsTransformer {
         let page = slugToPage.get(location.page);
         if (page === undefined) {
           const match = this.config.pages.find(
-            ({slug}) => slug === location.page
+            ({slug}) => slug === location.page,
           );
           if (!match) {
             throw new Error(`No page definition for ${location.page}`);
@@ -864,11 +864,11 @@ export class ApiDocsTransformer {
     pagesArray.sort(({slug: a}, {slug: b}) => {
       const idxA = findIndexOrInfinity(
         this.config.pages,
-        ({slug}) => slug === a
+        ({slug}) => slug === a,
       );
       const idxB = findIndexOrInfinity(
         this.config.pages,
-        ({slug}) => slug === b
+        ({slug}) => slug === b,
       );
       if (idxA !== idxB) {
         return idxA - idxB;
@@ -939,7 +939,7 @@ export function linkifySymbolsInCommentsBuilder({
 
     if (results && results.length === 1) {
       return `[${hyperlinkTextFormat(label || symbol)}](${locationToUrl(
-        results[0]
+        results[0],
       )})`;
     }
     return hyperlinkTextFormat(label || symbol);
@@ -950,6 +950,6 @@ export function linkifySymbolsInCommentsBuilder({
       .replace(/\[\[[\s`]*(.+?)(?:[\s`]*\|[\s`]*(.+?))?[\s`]*\]\]/g, replacer)
       .replace(
         /\{\@(?:link\b|linkcode\b)[\s`]*(.+?)(?:[\s`]*[\|\s][\s`]*(.+?))?[\s`]*\}/g,
-        replacer
+        replacer,
       );
 }
diff --git a/packages/lit-dev-tools-cjs/src/lit-dev-environments.ts b/packages/lit-dev-tools-cjs/src/lit-dev-environments.ts
index 2c9be59e3..f1fb0f041 100644
--- a/packages/lit-dev-tools-cjs/src/lit-dev-environments.ts
+++ b/packages/lit-dev-tools-cjs/src/lit-dev-environments.ts
@@ -40,7 +40,7 @@ const integerEnv = (name: string): number => {
   if (!val || val.match(/^\d+$/) === null) {
     throw new Error(
       `Expected environment variable ${name} to be an integer` +
-        ` but was ${JSON.stringify(val)}.`
+        ` but was ${JSON.stringify(val)}.`,
     );
   }
   return Number(val);
@@ -55,7 +55,7 @@ const stringEnv = (name: string): string => {
   if (!val) {
     throw new Error(
       `Expected environment variable ${name} to be set and non-empty` +
-        ` but was ${JSON.stringify(val)}.`
+        ` but was ${JSON.stringify(val)}.`,
     );
   }
   return val;
@@ -226,7 +226,7 @@ export const getEnvironment = (): LitDevEnvironment => {
     throw new Error(
       `Expected environment variable LITDEV_ENV to be` +
         ` one of ${Object.keys(environments).join(', ')},` +
-        ` but was ${JSON.stringify(name)}.`
+        ` but was ${JSON.stringify(name)}.`,
     );
   }
   return env;
diff --git a/packages/lit-dev-tools-cjs/src/playground-inline.ts b/packages/lit-dev-tools-cjs/src/playground-inline.ts
index 6ecf49594..8360cf2fd 100644
--- a/packages/lit-dev-tools-cjs/src/playground-inline.ts
+++ b/packages/lit-dev-tools-cjs/src/playground-inline.ts
@@ -15,7 +15,7 @@ import {ProjectManifest} from 'playground-elements/shared/worker-api.js';
  * original project files.
  */
 export const inlinePlaygroundFilesIntoManifests = async (
-  globPattern: string
+  globPattern: string,
 ) => {
   const files = (await glob(globPattern)) as string[];
   const toDelete = new Set<string>();
@@ -37,7 +37,7 @@ export const inlinePlaygroundFilesIntoManifests = async (
       if (updated !== manifestStr) {
         await fs.writeFile(manifestPath, updated, 'utf8');
       }
-    })
+    }),
   );
 
   // Delete files after inlining, in case two manifests referenced the same file
diff --git a/packages/lit-dev-tools-cjs/src/playground-plugin/blocking-renderer-worker.ts b/packages/lit-dev-tools-cjs/src/playground-plugin/blocking-renderer-worker.ts
index 94fdf759e..dd7e1beca 100644
--- a/packages/lit-dev-tools-cjs/src/playground-plugin/blocking-renderer-worker.ts
+++ b/packages/lit-dev-tools-cjs/src/playground-plugin/blocking-renderer-worker.ts
@@ -39,7 +39,7 @@ workerthreads.parentPort.on('message', (msg: WorkerMessage) => {
     default:
       throw unreachable(
         msg,
-        `Unknown or missing message type: ${(msg as WorkerMessage).type}`
+        `Unknown or missing message type: ${(msg as WorkerMessage).type}`,
       );
   }
 });
@@ -56,7 +56,7 @@ const onRender = async (msg: Render) => {
   if (length > shared.htmlBuffer.length) {
     throw new Error(
       `Shared HTML buffer was too short ` +
-        `(${shared.htmlBuffer.length} < ${html.length} bytes)`
+        `(${shared.htmlBuffer.length} < ${html.length} bytes)`,
     );
   }
   shared.htmlBufferLength[0] = length;
diff --git a/packages/lit-dev-tools-cjs/src/playground-plugin/blocking-renderer.ts b/packages/lit-dev-tools-cjs/src/playground-plugin/blocking-renderer.ts
index 3225ef97f..4e2860e4b 100644
--- a/packages/lit-dev-tools-cjs/src/playground-plugin/blocking-renderer.ts
+++ b/packages/lit-dev-tools-cjs/src/playground-plugin/blocking-renderer.ts
@@ -10,7 +10,7 @@ import * as fs from 'fs';
 
 const cachedHighlightsDir = pathlib.resolve(
   __dirname,
-  '../../.highlights_cache/'
+  '../../.highlights_cache/',
 );
 
 export type WorkerMessage = HandshakeMessage | Render | Shutdown;
@@ -100,18 +100,18 @@ export class BlockingRenderer {
     this.renderTimeout = renderTimeout;
     this.sharedHtml = new Uint8Array(new SharedArrayBuffer(maxHtmlBytes));
     this.worker = new workerthreads.Worker(
-      pathlib.join(__dirname, 'blocking-renderer-worker.js')
+      pathlib.join(__dirname, 'blocking-renderer-worker.js'),
     );
     this.worker.on('error', (error) => {
       throw new Error(
-        `BlockingRenderer worker encountered error: ${error.message}`
+        `BlockingRenderer worker encountered error: ${error.message}`,
       );
     });
     this.worker.on('exit', (code) => {
       this.exited = true;
       if (code !== 0) {
         throw new Error(
-          `BlockingRenderer worker unexpectedly exited with code ${code}`
+          `BlockingRenderer worker unexpectedly exited with code ${code}`,
         );
       }
     });
@@ -145,7 +145,7 @@ export class BlockingRenderer {
   private getCachedRender(cachedFileName: string): string | null {
     const absoluteFilePath = pathlib.resolve(
       cachedHighlightsDir,
-      cachedFileName
+      cachedFileName,
     );
     if (fs.existsSync(absoluteFilePath)) {
       return fs.readFileSync(absoluteFilePath, {encoding: 'utf8'});
@@ -156,7 +156,7 @@ export class BlockingRenderer {
   private writeCachedRender(cachedFileName: string, html: string) {
     const absoluteFilePath = pathlib.resolve(
       cachedHighlightsDir,
-      cachedFileName
+      cachedFileName,
     );
     fs.writeFileSync(absoluteFilePath, html);
   }
@@ -180,7 +180,7 @@ export class BlockingRenderer {
 
   private renderWithWorker(
     lang: 'js' | 'ts' | 'html' | 'css',
-    code: string
+    code: string,
   ): {html: string} {
     if (this.exited) {
       throw new Error('BlockingRenderer worker has already exited');
@@ -190,7 +190,7 @@ export class BlockingRenderer {
       Atomics.wait(this.sharedNotify, 0, 0, this.renderTimeout) === 'timed-out'
     ) {
       throw new Error(
-        `BlockingRenderer timed out waiting for worker to render ${lang}`
+        `BlockingRenderer timed out waiting for worker to render ${lang}`,
       );
     }
     const raw = this.decoder.decode(this.sharedHtml);
diff --git a/packages/lit-dev-tools-cjs/src/playground-plugin/plugin.ts b/packages/lit-dev-tools-cjs/src/playground-plugin/plugin.ts
index 0d970cf5c..f48e999d4 100644
--- a/packages/lit-dev-tools-cjs/src/playground-plugin/plugin.ts
+++ b/packages/lit-dev-tools-cjs/src/playground-plugin/plugin.ts
@@ -17,11 +17,11 @@ export type AsideVariant = 'positive' | 'negative' | 'warn' | 'info' | 'labs';
 interface EleventyConfig {
   addShortcode(
     name: string,
-    shortcode: (...args: any[]) => string | Promise<string>
+    shortcode: (...args: any[]) => string | Promise<string>,
   ): void | Promise<string>;
   addPairedShortcode(
     name: string,
-    shortcode: (content: string, ...args: any[]) => string | Promise<string>
+    shortcode: (content: string, ...args: any[]) => string | Promise<string>,
   ): void;
   addMarkdownHighlighter(fn: (content: string, lang: any) => string): void;
   on(name: string, fn: () => void): void;
@@ -33,7 +33,7 @@ interface EleventyConfig {
  */
 const getNumVisibleLinesForProjectFile = async (
   project: string,
-  filename: string
+  filename: string,
 ): Promise<{ts: number; js: number}> => {
   const tsData = await fs.readFile(`samples/${project}/${filename}`, 'utf8');
   const tsLines = countVisibleLines(filename, tsData);
@@ -42,7 +42,7 @@ const getNumVisibleLinesForProjectFile = async (
     const jsFilename = filename.replace(/\.ts$/, '.js');
     const jsData = await fs.readFile(
       `samples/js/${project}/${jsFilename}`,
-      'utf8'
+      'utf8',
     );
     jsLines = countVisibleLines(jsFilename, jsData);
   } else {
@@ -93,7 +93,7 @@ export const playgroundPlugin = (
     sandboxUrl,
     isDevMode,
     cdnBaseUrl,
-  }: {sandboxUrl: string; isDevMode: boolean; cdnBaseUrl: string}
+  }: {sandboxUrl: string; isDevMode: boolean; cdnBaseUrl: string},
 ) => {
   let renderer: BlockingRenderer | undefined;
 
@@ -113,7 +113,7 @@ export const playgroundPlugin = (
     if (!renderer) {
       throw new Error(
         'Internal error: expected Playground renderer to have been ' +
-          'initialized in "eleventy.before" event.'
+          'initialized in "eleventy.before" event.',
       );
     }
     const {html} = renderer.render(lang, outdent`${code}`);
@@ -121,7 +121,7 @@ export const playgroundPlugin = (
   };
 
   const readProjectConfig = async (
-    project: string
+    project: string,
   ): Promise<LitProjectConfig> => {
     const path = `samples/${project}/project.json`;
 
@@ -131,7 +131,7 @@ export const playgroundPlugin = (
     } catch (e) {
       throw new Error(
         `Invalid playground project "${project}". ` +
-          `Could not read file "${path}": ${e}`
+          `Could not read file "${path}": ${e}`,
       );
     }
 
@@ -140,7 +140,7 @@ export const playgroundPlugin = (
       parsed = JSON.parse(json);
     } catch (e) {
       throw new Error(
-        `Invalid JSON in playground project config "${path}": ${e}`
+        `Invalid JSON in playground project config "${path}": ${e}`,
       );
     }
 
@@ -150,7 +150,7 @@ export const playgroundPlugin = (
         await fs.readFile(filepath, 'utf8');
       } catch (e) {
         throw new Error(
-          `Missing playground file "${filename}" in project "${project}": ${e}`
+          `Missing playground file "${filename}" in project "${project}": ${e}`,
         );
       }
     }
@@ -160,11 +160,11 @@ export const playgroundPlugin = (
 
   eleventyConfig.addPairedShortcode(
     'highlight',
-    (code: string, lang: 'js' | 'ts' | 'html' | 'css') => render(code, lang)
+    (code: string, lang: 'js' | 'ts' | 'html' | 'css') => render(code, lang),
   );
 
   eleventyConfig.addMarkdownHighlighter(
-    (code: string, lang: 'js' | 'ts' | 'html' | 'css') => render(code, lang)
+    (code: string, lang: 'js' | 'ts' | 'html' | 'css') => render(code, lang),
   );
 
   eleventyConfig.addShortcode(
@@ -173,7 +173,7 @@ export const playgroundPlugin = (
       if (!project) {
         throw new Error(
           `Invalid playground-ide invocation.` +
-            `Usage {% playground-ide "path/to/project" %}`
+            `Usage {% playground-ide "path/to/project" %}`,
         );
       }
       project = trimTrailingSlash(project);
@@ -181,7 +181,7 @@ export const playgroundPlugin = (
       const firstFilename = Object.keys(config.files ?? {})[0];
       const numVisibleLines = await getNumVisibleLinesForProjectFile(
         project,
-        firstFilename
+        firstFilename,
       );
       const previewHeight = config.previewHeight ?? '120px';
       // in the case `lazy` is false, we need to keep the ">" character on the
@@ -197,7 +197,7 @@ export const playgroundPlugin = (
       ${lazy ? 'lazy' : ''}>
     </litdev-example>
   `.trim();
-    }
+    },
   );
 
   type LitProjectConfig = ProjectManifest & {
@@ -215,19 +215,19 @@ export const playgroundPlugin = (
       if (!project || !filename) {
         throw new Error(
           `Invalid playground-example invocation.` +
-            `Usage {% playground-example "project/dir" "filename.js" %}`
+            `Usage {% playground-example "project/dir" "filename.js" %}`,
         );
       }
       project = trimTrailingSlash(project);
       const config = await readProjectConfig(project);
       if (!config.files?.[filename]) {
         throw new Error(
-          `Could not find file "${filename}" in playground project "${project}"`
+          `Could not find file "${filename}" in playground project "${project}"`,
         );
       }
       const numVisibleLines = await getNumVisibleLinesForProjectFile(
         project,
-        filename
+        filename,
       );
       const previewHeight = config.previewHeight ?? '120px';
       return `
@@ -241,7 +241,7 @@ export const playgroundPlugin = (
       >
       </litdev-example>
     `.trim();
-    }
+    },
   );
 
   /**
@@ -264,13 +264,13 @@ export const playgroundPlugin = (
    */
   eleventyConfig.addPairedShortcode('switchable-sample', (content: string) => {
     const match = content.match(
-      /^\s*\n\n\s*```ts\n(.+)\n\s*```\s+```js\n(.+)\n\s*```\s*$/s
+      /^\s*\n\n\s*```ts\n(.+)\n\s*```\s+```js\n(.+)\n\s*```\s*$/s,
     );
     if (match === null) {
       throw new Error(
         'Invalid {% switchable-sample %}.' +
           ' Expected one ```ts block followed by one ```js block.' +
-          ' There also must be a blank line between the {% switchable-sample %} and the ```ts block.'
+          ' There also must be a blank line between the {% switchable-sample %} and the ```ts block.',
       );
     }
     return `<litdev-switchable-sample>${content}</litdev-switchable-sample>`;
@@ -327,7 +327,7 @@ export const playgroundPlugin = (
           variant,
           `Invalid {% aside ${variant} %}.` +
             ` variant "${variant}" is not an acceptable variant of:` +
-            ` ${acceptableVariants.join(', ')}.`
+            ` ${acceptableVariants.join(', ')}.`,
         );
       }
 
@@ -347,7 +347,7 @@ export const playgroundPlugin = (
         `\n\n${contentIndent}<!-- htmlmin:ignore -->` +
         `\n${contentIndent}</litdev-aside>`
       );
-    }
+    },
   );
 
   eleventyConfig.addShortcode('labs-disclaimer', () => {
@@ -357,7 +357,7 @@ export const playgroundPlugin = (
   });
 
   eleventyConfig.addMarkdownHighlighter(
-    (code: string, lang: 'js' | 'ts' | 'html' | 'css') => render(code, lang)
+    (code: string, lang: 'js' | 'ts' | 'html' | 'css') => render(code, lang),
   );
 };
 
diff --git a/packages/lit-dev-tools-cjs/src/playground-plugin/renderer.ts b/packages/lit-dev-tools-cjs/src/playground-plugin/renderer.ts
index abd826e34..7bbb18a15 100644
--- a/packages/lit-dev-tools-cjs/src/playground-plugin/renderer.ts
+++ b/packages/lit-dev-tools-cjs/src/playground-plugin/renderer.ts
@@ -21,7 +21,7 @@ export class Renderer {
   private constructor(
     server: RendererServer,
     browser: playwright.Browser,
-    page: playwright.Page
+    page: playwright.Page,
   ) {
     this.server = server;
     this.browser = browser;
@@ -41,7 +41,7 @@ export class Renderer {
         if (status < 200 || status >= 300) {
           console.error(
             `ERROR: playground-plugin renderer encountered HTTP ` +
-              `${status} error fetching ${response.url()}`
+              `${status} error fetching ${response.url()}`,
           );
         }
       });
@@ -49,7 +49,7 @@ export class Renderer {
       page.on('pageerror', (error) => {
         console.error(
           `ERROR: playground-plugin renderer encountered page error: ` +
-            error.message
+            error.message,
         );
       });
 
@@ -79,7 +79,7 @@ export class Renderer {
 
   async render(
     lang: 'html' | 'css' | 'js' | 'ts',
-    code: string
+    code: string,
   ): Promise<{html: string}> {
     if (this.stopped) {
       throw new Error('Renderer has already stopped');
@@ -110,7 +110,7 @@ export class Renderer {
           const cm = editor.shadowRoot.querySelector('.CodeMirror-code');
           if (cm === null) {
             throw new Error(
-              '<codemirror-editor> did not render a ".CodeMirror-code" element'
+              '<codemirror-editor> did not render a ".CodeMirror-code" element',
             );
           }
           // The final line is sometimes (always?) an empty line containing just
@@ -124,7 +124,7 @@ export class Renderer {
           // Replace zero width newlines that don't copy paste well with a line
           // feed unicode character that pastes correctly.
           const codeLines = cm.querySelectorAll(
-            '.CodeMirror-line > span > span[cm-text]'
+            '.CodeMirror-line > span > span[cm-text]',
           );
           for (const line of codeLines) {
             if (line?.textContent?.match(/^[\u200B]*$/)) {
@@ -134,7 +134,7 @@ export class Renderer {
 
           return cm.innerHTML;
         },
-        [lang, code]
+        [lang, code],
       );
       const html = `<figure class="CodeMirror cm-s-default">${codemirrorHtml}</figure>`;
       return {html};
diff --git a/packages/lit-dev-tools-cjs/src/pre-compress.ts b/packages/lit-dev-tools-cjs/src/pre-compress.ts
index f7e9526a0..ff8774059 100644
--- a/packages/lit-dev-tools-cjs/src/pre-compress.ts
+++ b/packages/lit-dev-tools-cjs/src/pre-compress.ts
@@ -102,24 +102,24 @@ export const preCompress = async (opts: {glob: string}) => {
   const mib = (b: number) => (b / 1024 / 1024).toFixed(2) + ' MiB';
   console.log(
     `[Compress] Processed ${stats.numFiles} files (${mib(
-      stats.inBytes
-    )}) in ${seconds.toFixed(1)} seconds`
+      stats.inBytes,
+    )}) in ${seconds.toFixed(1)} seconds`,
   );
 
   const brSaved = stats.brInBytes - stats.brOutBytes;
   const brRatio = stats.brInBytes / stats.brOutBytes;
   console.log(
     `[Compress] Created ${stats.brNumFiles} .br files / Ratio ${brRatio.toFixed(
-      1
-    )} to 1 / Saved ${mib(brSaved)}`
+      1,
+    )} to 1 / Saved ${mib(brSaved)}`,
   );
 
   const gzSaved = stats.gzInBytes - stats.gzOutBytes;
   const gzRatio = stats.gzInBytes / stats.gzOutBytes;
   console.log(
     `[Compress] Created ${stats.gzNumFiles} .gz files / Ratio ${gzRatio.toFixed(
-      1
-    )} to 1 / Saved ${mib(gzSaved)}`
+      1,
+    )} to 1 / Saved ${mib(gzSaved)}`,
   );
 };
 
diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/PageSearchChunker.ts b/packages/lit-dev-tools-cjs/src/search/indexers/PageSearchChunker.ts
index 7e74856ff..cdd8ebf7b 100644
--- a/packages/lit-dev-tools-cjs/src/search/indexers/PageSearchChunker.ts
+++ b/packages/lit-dev-tools-cjs/src/search/indexers/PageSearchChunker.ts
@@ -45,7 +45,7 @@ interface PageDataChunk {
  */
 function dataChunktoSearchChunk(
   {heading, fragment, nodeCollection, isParent}: PageDataChunk,
-  title: string
+  title: string,
 ): PageSearchDataChunk {
   const withoutComments = stripcomments(nodeCollection.outerHTML);
   // Leave a space when removing tags so we don't accidentally concat text from
@@ -105,11 +105,11 @@ export class PageSearchChunker {
       this.parsedPage.window.document.querySelector('article#content');
     if (!article) {
       throw new Error(
-        `Expect every lit.dev page to have an article#content element.`
+        `Expect every lit.dev page to have an article#content element.`,
       );
     }
     const removedSections = article.querySelectorAll(
-      'nav#inlineToc, header.articleHeader'
+      'nav#inlineToc, header.articleHeader',
     );
     [...removedSections].forEach((section) => section.remove());
     return article;
@@ -165,7 +165,7 @@ export class PageSearchChunker {
       const headerText = possibleHeading.textContent;
       if (!headerText) {
         throw new Error(
-          `No textContent on header with fragment: '${fragment}'`
+          `No textContent on header with fragment: '${fragment}'`,
         );
       }
       return this.newPageDataChunk({
diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/index-api.ts b/packages/lit-dev-tools-cjs/src/search/indexers/index-api.ts
index f4ca1c9d1..25d75f030 100644
--- a/packages/lit-dev-tools-cjs/src/search/indexers/index-api.ts
+++ b/packages/lit-dev-tools-cjs/src/search/indexers/index-api.ts
@@ -11,18 +11,18 @@ export const indexApi = async (outputDir: string, idOffset = 0) => {
   const API_PATH = path.resolve(
     __dirname,
     // Load the unversioned api content.
-    `../../../../lit-dev-content/${outputDir}/docs/api`
+    `../../../../lit-dev-content/${outputDir}/docs/api`,
   );
 
   const relativeLinksToHTMLFile: UrlToFile = await walkDir(
     API_PATH,
     new Map(),
-    outputDir
+    outputDir,
   );
 
   return await docIndexer(
     relativeLinksToHTMLFile,
     {tag: 'api', type: 'API'},
-    idOffset
+    idOffset,
   );
 };
diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/index-articles.ts b/packages/lit-dev-tools-cjs/src/search/indexers/index-articles.ts
index 2f73714ff..728683f18 100644
--- a/packages/lit-dev-tools-cjs/src/search/indexers/index-articles.ts
+++ b/packages/lit-dev-tools-cjs/src/search/indexers/index-articles.ts
@@ -11,7 +11,7 @@ export const indexArticles = async (outputDir: string, idOffset = 0) => {
   const ARTICLES_PATH = path.resolve(
     __dirname,
     // Load the article content itself not the tags pages.
-    `../../../../lit-dev-content/${outputDir}/articles`
+    `../../../../lit-dev-content/${outputDir}/articles`,
   );
 
   /**
@@ -43,12 +43,12 @@ export const indexArticles = async (outputDir: string, idOffset = 0) => {
     ARTICLES_PATH,
     new Map(),
     outputDir,
-    skipFiles
+    skipFiles,
   );
 
   return await docIndexer(
     relativeLinksToHTMLFile,
     {tag: 'article', type: 'Article'},
-    idOffset
+    idOffset,
   );
 };
diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/index-docs.ts b/packages/lit-dev-tools-cjs/src/search/indexers/index-docs.ts
index 03460ce56..546fc4bba 100644
--- a/packages/lit-dev-tools-cjs/src/search/indexers/index-docs.ts
+++ b/packages/lit-dev-tools-cjs/src/search/indexers/index-docs.ts
@@ -10,7 +10,7 @@ export const indexDocs = async (outputDir: string, idOffset = 0) => {
   // Root path of the starting point for indexing.
   const DOCS_PATH = path.resolve(
     __dirname,
-    `../../../../lit-dev-content/${outputDir}/docs`
+    `../../../../lit-dev-content/${outputDir}/docs`,
   );
 
   /**
@@ -45,12 +45,12 @@ export const indexDocs = async (outputDir: string, idOffset = 0) => {
     DOCS_PATH,
     new Map(),
     outputDir,
-    skipFiles
+    skipFiles,
   );
 
   return await docIndexer(
     relativeLinksToHTMLFile,
     {tag: 'docs', type: 'Docs'},
-    idOffset
+    idOffset,
   );
 };
diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/index-external-data.ts b/packages/lit-dev-tools-cjs/src/search/indexers/index-external-data.ts
index 887fb9840..39f3fa1dc 100644
--- a/packages/lit-dev-tools-cjs/src/search/indexers/index-external-data.ts
+++ b/packages/lit-dev-tools-cjs/src/search/indexers/index-external-data.ts
@@ -10,7 +10,7 @@ import type {UserFacingPageData} from '../plugin';
 
 export async function indexExternalData(
   outputDir: '_dev' | '_site',
-  idOffset = 0
+  idOffset = 0,
 ) {
   if (outputDir === '_dev') {
     return [];
@@ -19,7 +19,7 @@ export async function indexExternalData(
   // Path of the external data index.
   const EXTERNAL_DATA_INDEX_PATH = path.resolve(
     __dirname,
-    `../../../../lit-dev-content/${outputDir}/search-modifiers/external-data.json`
+    `../../../../lit-dev-content/${outputDir}/search-modifiers/external-data.json`,
   );
 
   const fileContents = await fs.readFile(EXTERNAL_DATA_INDEX_PATH, 'utf-8');
diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/index-tutorials.ts b/packages/lit-dev-tools-cjs/src/search/indexers/index-tutorials.ts
index 5ca997b64..eb62504d7 100644
--- a/packages/lit-dev-tools-cjs/src/search/indexers/index-tutorials.ts
+++ b/packages/lit-dev-tools-cjs/src/search/indexers/index-tutorials.ts
@@ -27,7 +27,7 @@ interface Tutorial {
 
 export const indexTutorials = async (
   outputDir: string,
-  idOffset = 0
+  idOffset = 0,
 ): Promise<UserFacingPageData[]> => {
   if (outputDir === '_dev') {
     return [];
@@ -35,12 +35,12 @@ export const indexTutorials = async (
 
   const TUTORIAL_PATH = path.resolve(
     __dirname,
-    `../../../../lit-dev-content/${outputDir}/tutorials`
+    `../../../../lit-dev-content/${outputDir}/tutorials`,
   );
 
   // Pulls the metadata from all the tutorials rendered by 11ty.
   const tutorialJson: {tutorials: Tutorial[]} = JSON.parse(
-    await fs.readFile(path.join(TUTORIAL_PATH, 'tutorials.json'), 'utf-8')
+    await fs.readFile(path.join(TUTORIAL_PATH, 'tutorials.json'), 'utf-8'),
   );
 
   let id = idOffset;
@@ -82,7 +82,7 @@ export const indexTutorials = async (
       // Get the step's description HTML content.
       const stepContent = await fs.readFile(
         path.join(tutorialPath, stepDir.name, 'index.html'),
-        'utf-8'
+        'utf-8',
       );
 
       const jsdoc = new JSDOM(stepContent, {contentType: 'text/html'});
diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/index-videos.ts b/packages/lit-dev-tools-cjs/src/search/indexers/index-videos.ts
index 9e0d89eca..f0af725c7 100644
--- a/packages/lit-dev-tools-cjs/src/search/indexers/index-videos.ts
+++ b/packages/lit-dev-tools-cjs/src/search/indexers/index-videos.ts
@@ -16,7 +16,7 @@ export async function indexVideos(outputDir: '_dev' | '_site', idOffset = 0) {
   // Path of the video index.
   const VIDEO_INDEX_PATH = path.resolve(
     __dirname,
-    `../../../../lit-dev-content/${outputDir}/search-modifiers/videos.json`
+    `../../../../lit-dev-content/${outputDir}/search-modifiers/videos.json`,
   );
 
   const fileContents = await fs.readFile(VIDEO_INDEX_PATH, 'utf-8');
diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/keywords.ts b/packages/lit-dev-tools-cjs/src/search/indexers/keywords.ts
index da9cb6c5c..06c03c164 100644
--- a/packages/lit-dev-tools-cjs/src/search/indexers/keywords.ts
+++ b/packages/lit-dev-tools-cjs/src/search/indexers/keywords.ts
@@ -27,7 +27,7 @@ interface KeywordModifiers {
  */
 export async function addKeywords(
   outputDir: '_dev' | '_site',
-  index: UserFacingPageData[]
+  index: UserFacingPageData[],
 ) {
   if (outputDir === '_dev') {
     return index;
@@ -36,7 +36,7 @@ export async function addKeywords(
   // Path to the keyword modifiers JSON file.
   const KEYWORD_MODIFIERS_PATH = path.resolve(
     __dirname,
-    `../../../../lit-dev-content/${outputDir}/search-modifiers/keywords.json`
+    `../../../../lit-dev-content/${outputDir}/search-modifiers/keywords.json`,
   );
 
   const fileContents = await fs.readFile(KEYWORD_MODIFIERS_PATH, 'utf-8');
diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/utils.ts b/packages/lit-dev-tools-cjs/src/search/indexers/utils.ts
index 6c6113ee0..d570cc4d9 100644
--- a/packages/lit-dev-tools-cjs/src/search/indexers/utils.ts
+++ b/packages/lit-dev-tools-cjs/src/search/indexers/utils.ts
@@ -27,7 +27,7 @@ export const walkDir = async (
   dir: string,
   results: UrlToFile,
   projectDir: string,
-  shouldSkip = (_path: string) => false
+  shouldSkip = (_path: string) => false,
 ): Promise<UrlToFile> => {
   const dirContents = await fs.readdir(dir);
   for (const contents of dirContents) {
@@ -37,7 +37,7 @@ export const walkDir = async (
     if (path.extname(contents) === '.html') {
       const basePath = path.resolve(
         __dirname,
-        `../../../../lit-dev-content/${projectDir}`
+        `../../../../lit-dev-content/${projectDir}`,
       );
       const relPathBase = path.relative(basePath, dir);
       const relPath = path.join(relPathBase, contents);
@@ -47,7 +47,7 @@ export const walkDir = async (
         path.resolve(dir, contents),
         results,
         projectDir,
-        shouldSkip
+        shouldSkip,
       );
     }
   }
@@ -67,7 +67,7 @@ export const walkDir = async (
 export const docIndexer = async (
   relativeLinksToHTMLFile: UrlToFile,
   docType: DocType<'docs'> | DocType<'api'> | DocType<'article'>,
-  idOffset: number
+  idOffset: number,
 ) => {
   let id = idOffset;
   const searchIndex: UserFacingPageData[] = [];
@@ -88,7 +88,7 @@ export const docIndexer = async (
       // the search interface.
       if (parents.length !== 1) {
         throw new Error(
-          `Error finding parent page chunk for ${relUrl}. Potential parent chunks found: ${parents.length}`
+          `Error finding parent page chunk for ${relUrl}. Potential parent chunks found: ${parents.length}`,
         );
       }
 
@@ -99,7 +99,7 @@ export const docIndexer = async (
       // parentID is indeed the current id.
       if (parent !== sanitizedPageChunks[0]) {
         throw new Error(
-          `Parent page chunk for ${relUrl} was not the first chunk.`
+          `Parent page chunk for ${relUrl} was not the first chunk.`,
         );
       }
 
@@ -133,7 +133,7 @@ export const docIndexer = async (
     } catch (e: unknown) {
       throw new Error(
         `Failure while creating search index for page ` +
-          `'${relUrl}': ${(e as Error).message}`
+          `'${relUrl}': ${(e as Error).message}`,
       );
     }
   }
diff --git a/packages/lit-dev-tools-cjs/src/search/plugin.ts b/packages/lit-dev-tools-cjs/src/search/plugin.ts
index a98e1a226..bd00218a5 100644
--- a/packages/lit-dev-tools-cjs/src/search/plugin.ts
+++ b/packages/lit-dev-tools-cjs/src/search/plugin.ts
@@ -58,13 +58,13 @@ export interface UserFacingPageData {
 export async function createSearchIndex(outputDir: '_dev' | '_site') {
   const OUT_PATH = path.resolve(
     __dirname,
-    `../../../lit-dev-content/${outputDir}/searchIndex.json`
+    `../../../lit-dev-content/${outputDir}/searchIndex.json`,
   );
   const docs: UserFacingPageData[] = await indexDocs(outputDir);
   let idOffset = Number(docs[docs.length - 1].objectID);
   const articles: UserFacingPageData[] = await indexArticles(
     outputDir,
-    idOffset
+    idOffset,
   );
 
   idOffset = Number(articles[articles.length - 1].objectID);
@@ -73,7 +73,7 @@ export async function createSearchIndex(outputDir: '_dev' | '_site') {
   idOffset = Number(api[api.length - 1].objectID);
   const tutorials: UserFacingPageData[] = await indexTutorials(
     outputDir,
-    idOffset
+    idOffset,
   );
 
   idOffset = Number(tutorials[tutorials.length - 1].objectID);
@@ -82,7 +82,7 @@ export async function createSearchIndex(outputDir: '_dev' | '_site') {
   idOffset = Number(videos[videos.length - 1].objectID);
   const externalSearchData: UserFacingPageData[] = await indexExternalData(
     outputDir,
-    idOffset
+    idOffset,
   );
 
   const searchIndex: UserFacingPageData[] = [
diff --git a/packages/lit-dev-tools-esm/package.json b/packages/lit-dev-tools-esm/package.json
index efc6d05ea..78c53e314 100644
--- a/packages/lit-dev-tools-esm/package.json
+++ b/packages/lit-dev-tools-esm/package.json
@@ -55,6 +55,6 @@
     "fast-glob": "^3.2.9",
     "lit-dev-server": "^0.0.0",
     "lit-dev-tools-cjs": "^0.0.0",
-    "prettier": "^2.3.2"
+    "prettier": "^3.5.3"
   }
 }
diff --git a/packages/lit-dev-tools-esm/src/build-unversioned-docs.ts b/packages/lit-dev-tools-esm/src/build-unversioned-docs.ts
index 0610b8c42..d51824ce6 100644
--- a/packages/lit-dev-tools-esm/src/build-unversioned-docs.ts
+++ b/packages/lit-dev-tools-esm/src/build-unversioned-docs.ts
@@ -27,13 +27,13 @@ const LATEST_VERSION_CONTENT = pathlib.resolve(
   CONTENT_PKG,
   'site',
   'docs',
-  SITE_LATEST_VERSION
+  SITE_LATEST_VERSION,
 );
 const UNVERSIONED_VERSION_LOCATION = pathlib.resolve(
   CONTENT_PKG,
   'site',
   'docs',
-  'unversioned'
+  'unversioned',
 );
 
 /**
@@ -61,7 +61,7 @@ const buildAndTransformUnverionedDocs = async () => {
         } else {
           return transformFile(childPath);
         }
-      })
+      }),
     );
   };
 
@@ -83,26 +83,26 @@ async function transformFile(path: string) {
   let fileContents = await fs.readFile(path, {encoding: 'utf8'});
   let unversionedLocation = pathlib.join(
     UNVERSIONED_VERSION_LOCATION,
-    relativeChildPath
+    relativeChildPath,
   );
   switch (ext) {
     case '.md':
       const [frontMatterData, restOfFile] = getFrontMatterData(fileContents);
       const hasExistingPermalink = frontMatterData.find((val) =>
-        val.includes('permalink:')
+        val.includes('permalink:'),
       );
       if (hasExistingPermalink) {
         throw new Error(
-          `Unhandled case: Handle existing permalink in '${path}'`
+          `Unhandled case: Handle existing permalink in '${path}'`,
         );
       }
       if (fileBasename === 'index') {
         frontMatterData.push(
-          `permalink: docs/${relativeChildPathWithoutExt}.html`
+          `permalink: docs/${relativeChildPathWithoutExt}.html`,
         );
       } else {
         frontMatterData.push(
-          `permalink: docs/${relativeChildPathWithoutExt}/index.html`
+          `permalink: docs/${relativeChildPathWithoutExt}/index.html`,
         );
       }
 
@@ -117,7 +117,7 @@ async function transformFile(path: string) {
       if (fileBasename === SITE_LATEST_VERSION) {
         unversionedLocation = pathlib.join(
           pathlib.dirname(unversionedLocation),
-          'unversioned.json'
+          'unversioned.json',
         );
         fileContents = JSON.stringify({
           collection: 'docs-unversioned',
@@ -146,8 +146,8 @@ async function transformFile(path: string) {
   console.log(
     `Writing: ${pathlib.relative(
       CONTENT_PKG,
-      unversionedLocation
-    )} from ${pathlib.relative(CONTENT_PKG, path)}`
+      unversionedLocation,
+    )} from ${pathlib.relative(CONTENT_PKG, path)}`,
   );
   await fs.mkdir(pathlib.dirname(unversionedLocation), {recursive: true});
   await fs.writeFile(unversionedLocation, fileContents);
@@ -158,7 +158,7 @@ async function transformFile(path: string) {
  * parser.
  */
 function getFrontMatterData(
-  fileData: string
+  fileData: string,
 ): [EleventyFrontMatterData, string] {
   const splitFile = fileData.split(/^---$/m);
   const frontMatterData = splitFile[1].split('\n').slice(1, -1);
diff --git a/packages/lit-dev-tools-esm/src/dev-server.ts b/packages/lit-dev-tools-esm/src/dev-server.ts
index 107c15ddb..f3595ee37 100644
--- a/packages/lit-dev-tools-esm/src/dev-server.ts
+++ b/packages/lit-dev-tools-esm/src/dev-server.ts
@@ -65,7 +65,7 @@ const removeWatchScriptFromPlaygroundFiles: DevServerPlugin = {
       return {
         body: (ctx.body as string).replace(
           /<!-- injected by web-dev-server.*<\/script>/gs,
-          ''
+          '',
         ),
       };
     }
diff --git a/packages/lit-dev-tools-esm/src/fake-github-middleware.ts b/packages/lit-dev-tools-esm/src/fake-github-middleware.ts
index 4acd33e3e..c6c0a8497 100644
--- a/packages/lit-dev-tools-esm/src/fake-github-middleware.ts
+++ b/packages/lit-dev-tools-esm/src/fake-github-middleware.ts
@@ -42,7 +42,7 @@ export interface FakeGitHubMiddlewareOptions {
  * used by the lit.dev Playground.
  */
 export const fakeGitHubMiddleware = (
-  options: FakeGitHubMiddlewareOptions
+  options: FakeGitHubMiddlewareOptions,
 ): Koa.Middleware => {
   let fake = new FakeGitHub(options);
   let failNextRequest = false;
@@ -123,7 +123,7 @@ interface UserDetails {
 const jsonResponse = (
   ctx: Koa.Context,
   status: number,
-  response: any
+  response: any,
 ): void => {
   ctx.status = status;
   ctx.type = 'application/json';
@@ -174,7 +174,7 @@ class FakeGitHub {
 
   private _checkAuthentication(ctx: Koa.Context): UserAndScope | undefined {
     const match = (ctx.get('authorization') ?? '').match(
-      /^\s*(?:token|bearer)\s(?<token>.+)$/
+      /^\s*(?:token|bearer)\s(?<token>.+)$/,
     );
     const token = match?.groups?.token?.trim() ?? '';
     const userAndScope = this._accessTokens.get(token);
@@ -383,8 +383,8 @@ class FakeGitHub {
     // given.
     gist.files = Object.fromEntries(
       Object.entries(gist.files).sort(([aName], [bName]) =>
-        aName.localeCompare(bName)
-      )
+        aName.localeCompare(bName),
+      ),
     );
     return jsonResponse(ctx, 200, gist);
   }
diff --git a/packages/lit-dev-tools-esm/src/fake-github-server.ts b/packages/lit-dev-tools-esm/src/fake-github-server.ts
index db6b87d2e..eacb44557 100644
--- a/packages/lit-dev-tools-esm/src/fake-github-server.ts
+++ b/packages/lit-dev-tools-esm/src/fake-github-server.ts
@@ -15,7 +15,7 @@ const envRequired = <T extends keyof typeof ENV>(name: T) => {
   if (!val) {
     throw new Error(`Expected ENV.${name} to be defined.`);
   }
-  return val as Exclude<typeof ENV[T], undefined>;
+  return val as Exclude<(typeof ENV)[T], undefined>;
 };
 
 const app = new Koa();
@@ -24,7 +24,7 @@ app.use(
     clientId: envRequired('githubClientId'),
     clientSecret: envRequired('githubClientSecret'),
     redirectUrl: envRequired('githubAuthorizeRedirectUrl'),
-  })
+  }),
 );
 app.listen(ENV.fakeGithubPort);
 console.log(`fake github server listening on port ${ENV.fakeGithubPort}`);
diff --git a/packages/lit-dev-tools-esm/src/generate-js-samples.ts b/packages/lit-dev-tools-esm/src/generate-js-samples.ts
index f1c61a137..c023ddda0 100644
--- a/packages/lit-dev-tools-esm/src/generate-js-samples.ts
+++ b/packages/lit-dev-tools-esm/src/generate-js-samples.ts
@@ -31,7 +31,7 @@ const TS_SAMPLES_DIR = pathlib.join(
   REPO_DIR,
   'packages',
   'lit-dev-content',
-  'samples'
+  'samples',
 );
 const JS_SAMPLES_DIR = pathlib.join(TS_SAMPLES_DIR, 'js');
 
@@ -41,7 +41,7 @@ const JS_SAMPLES_DIR = pathlib.join(TS_SAMPLES_DIR, 'js');
  */
 const updateAndWriteProjectConfig = async (
   relPath: string,
-  ignoreJsonError = false
+  ignoreJsonError = false,
 ) => {
   const absPath = pathlib.join(TS_SAMPLES_DIR, relPath);
   const oldJson = await fs.readFile(absPath, 'utf8');
@@ -143,10 +143,10 @@ const tsCompileOpts: InvokeTypeScriptOpts = {
       .replace(/\.jsx$/, '.tsx');
     const ts = fsSync.readFileSync(tsPath, 'utf8');
     const tsPlaygroundComments = [...ts.matchAll(playgroundCommentRegexp)].map(
-      ([, kind]) => kind
+      ([, kind]) => kind,
     );
     const jsPlaygroundComments = [...js.matchAll(playgroundCommentRegexp)].map(
-      ([, kind]) => kind
+      ([, kind]) => kind,
     );
     if (tsPlaygroundComments.join(';') !== jsPlaygroundComments.join(';')) {
       const msg =
diff --git a/packages/lit-dev-tools-esm/src/typescript-util.ts b/packages/lit-dev-tools-esm/src/typescript-util.ts
index d82b2694f..4eafcb952 100644
--- a/packages/lit-dev-tools-esm/src/typescript-util.ts
+++ b/packages/lit-dev-tools-esm/src/typescript-util.ts
@@ -40,7 +40,7 @@ export const compileTypeScriptOnce = (opts: InvokeTypeScriptOpts): boolean => {
   const config = ts.parseJsonConfigFileContent(
     rawConfig.config,
     ts.sys,
-    pathlib.dirname(opts.tsConfigPath)
+    pathlib.dirname(opts.tsConfigPath),
   );
   const program = ts.createProgram(config.fileNames, config.options);
   const emitResult = program.emit(
@@ -48,7 +48,7 @@ export const compileTypeScriptOnce = (opts: InvokeTypeScriptOpts): boolean => {
     wrapWriteFile(opts),
     undefined,
     undefined,
-    opts.transformersFactory?.(program)
+    opts.transformersFactory?.(program),
   );
   const diagnostics = [
     ...ts.getPreEmitDiagnostics(program),
@@ -69,7 +69,7 @@ const formatHost: ts.FormatDiagnosticsHost = {
 
 const logDiagnostic = (diagnostic: ts.Diagnostic) =>
   console.error(
-    ts.formatDiagnosticsWithColorAndContext([diagnostic], formatHost)
+    ts.formatDiagnosticsWithColorAndContext([diagnostic], formatHost),
   );
 
 const wrapWriteFile =
@@ -78,5 +78,5 @@ const wrapWriteFile =
     ts.sys.writeFile(
       path,
       opts.transformJs ? opts.transformJs(data, path) : data,
-      byteOrderMark
+      byteOrderMark,
     );
diff --git a/packages/lit-dev-tools-esm/src/upload-algolia-index.ts b/packages/lit-dev-tools-esm/src/upload-algolia-index.ts
index ff65f6f76..53ff1f5cf 100644
--- a/packages/lit-dev-tools-esm/src/upload-algolia-index.ts
+++ b/packages/lit-dev-tools-esm/src/upload-algolia-index.ts
@@ -10,7 +10,7 @@ import {publicVars} from './configs.js';
 
 const searchIndexRaw = fs.readFileSync(
   '../lit-dev-content/_site/searchIndex.json',
-  'utf8'
+  'utf8',
 );
 const searchIndex = JSON.parse(searchIndexRaw);
 const ALGOLIA_WRITE_KEY = process.env.ALGOLIA_WRITE_KEY;