diff --git a/custom-elements-manifest.js b/custom-elements-manifest.js
index 2c1853295..7162d8f5c 100644
--- a/custom-elements-manifest.js
+++ b/custom-elements-manifest.js
@@ -2,8 +2,8 @@ import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integrat
 import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
 // import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
 import { parse } from 'comment-parser';
-import { pascalCase } from 'pascal-case';
 import fs from 'fs';
+import { pascalCase } from 'pascal-case';
 
 const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 const { name, description, version, author, homepage, license } = packageData;
diff --git a/docs/.eleventy.js b/docs/.eleventy.js
index d68c3cd2d..11c6880fa 100644
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -1,18 +1,18 @@
 import { parse } from 'path';
-import { markdown } from './_utils/markdown.js';
 import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
 import { codeExamplesPlugin } from './_utils/code-examples.js';
 import { copyCodePlugin } from './_utils/copy-code.js';
-import { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js';
 import { currentLink } from './_utils/current-link.js';
 import { highlightCodePlugin } from './_utils/highlight-code.js';
+import { markdown } from './_utils/markdown.js';
+import { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js';
 // import { formatCodePlugin } from './_utils/format-code.js';
+import litPlugin from '@lit-labs/eleventy-plugin-lit';
+import { readFile } from 'fs/promises';
+import componentList from './_data/componentList.js';
+import { outlinePlugin } from './_utils/outline.js';
 import { replaceTextPlugin } from './_utils/replace-text.js';
 import { searchPlugin } from './_utils/search.js';
-import { readFile } from 'fs/promises';
-import { outlinePlugin } from './_utils/outline.js';
-import componentList from './_data/componentList.js';
-import litPlugin from '@lit-labs/eleventy-plugin-lit';
 
 import process from 'process';
 
diff --git a/docs/_data/componentList.js b/docs/_data/componentList.js
index 11843d7da..c0c981399 100644
--- a/docs/_data/componentList.js
+++ b/docs/_data/componentList.js
@@ -1,9 +1,9 @@
 /**
  * @module components Fetches components from custom-elements.json and exposes them in a saner format.
  */
+import { readFileSync } from 'fs';
 import { dirname, resolve } from 'path';
 import { fileURLToPath } from 'url';
-import { readFileSync } from 'fs';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
diff --git a/docs/_utils/anchor-headings.js b/docs/_utils/anchor-headings.js
index a842611f7..ec5bac928 100644
--- a/docs/_utils/anchor-headings.js
+++ b/docs/_utils/anchor-headings.js
@@ -1,6 +1,6 @@
 import { parse } from 'node-html-parser';
-import { v4 as uuid } from 'uuid';
 import slugify from 'slugify';
+import { v4 as uuid } from 'uuid';
 
 function createId(text) {
   let slug = slugify(String(text), {
diff --git a/docs/_utils/highlight-code.js b/docs/_utils/highlight-code.js
index 08303f1ba..8a48c0492 100644
--- a/docs/_utils/highlight-code.js
+++ b/docs/_utils/highlight-code.js
@@ -1,8 +1,8 @@
 /* eslint sort-imports-es6-autofix/sort-imports-es6: 0 */
 import { parse } from 'node-html-parser';
 import Prism from 'prismjs';
-import 'prismjs/plugins/custom-class/prism-custom-class.js';
 import PrismLoader from 'prismjs/components/index.js';
+import 'prismjs/plugins/custom-class/prism-custom-class.js';
 
 PrismLoader('diff');
 PrismLoader.silent = true;
diff --git a/docs/_utils/search.js b/docs/_utils/search.js
index 58965b544..5c583eb0c 100644
--- a/docs/_utils/search.js
+++ b/docs/_utils/search.js
@@ -1,8 +1,8 @@
 /* eslint-disable no-invalid-this */
-import { dirname, join } from 'path';
 import { mkdir, writeFile } from 'fs/promises';
-import { parse } from 'node-html-parser';
 import lunr from 'lunr';
+import { parse } from 'node-html-parser';
+import { dirname, join } from 'path';
 
 function collapseWhitespace(string) {
   return string.replace(/\s+/g, ' ');
diff --git a/scripts/build.js b/scripts/build.js
index 715125110..914bed218 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -1,19 +1,19 @@
-import { deleteAsync } from 'del';
-import { dirname, join, relative } from 'path';
-import { distDir, docsDir, cdnDir, rootDir, runScript, siteDir } from './utils.js';
-import { execSync } from 'child_process';
-import { fileURLToPath } from 'url';
-import { globby } from 'globby';
-import { mkdir, readFile } from 'fs/promises';
-import { replace } from 'esbuild-plugin-replace';
+import { litCssPlugin } from '@konnorr/esbuild-plugin-lit-css';
 import browserSync from 'browser-sync';
 import chalk from 'chalk';
-import copy from 'recursive-copy';
+import { execSync } from 'child_process';
+import { deleteAsync } from 'del';
 import esbuild from 'esbuild';
+import { replace } from 'esbuild-plugin-replace';
+import { mkdir, readFile } from 'fs/promises';
 import getPort, { portNumbers } from 'get-port';
+import { globby } from 'globby';
 import ora from 'ora';
+import { dirname, join, relative } from 'path';
 import process from 'process';
-import { litCssPlugin } from '@konnorr/esbuild-plugin-lit-css';
+import copy from 'recursive-copy';
+import { fileURLToPath } from 'url';
+import { cdnDir, distDir, docsDir, rootDir, runScript, siteDir } from './utils.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const isDeveloping = process.argv.includes('--develop');
diff --git a/scripts/docs.js b/scripts/docs.js
index dd0bf5113..11f20289a 100644
--- a/scripts/docs.js
+++ b/scripts/docs.js
@@ -1,7 +1,7 @@
-import { deleteAsync } from 'del';
-import { docsDir, siteDir } from './utils.js';
-import { join } from 'path';
 import Eleventy from '@11ty/eleventy';
+import { deleteAsync } from 'del';
+import { join } from 'path';
+import { docsDir, siteDir } from './utils.js';
 
 const elev = new Eleventy(docsDir, siteDir, {
   quietMode: true,
diff --git a/scripts/make-react.js b/scripts/make-react.js
index 7efffee82..9d68b1f2e 100644
--- a/scripts/make-react.js
+++ b/scripts/make-react.js
@@ -1,7 +1,7 @@
 import commandLineArgs from 'command-line-args';
+import { deleteSync } from 'del';
 import fs from 'fs';
 import path from 'path';
-import { deleteSync } from 'del';
 import prettier from 'prettier';
 import { default as prettierConfig } from '../prettier.config.js';
 import { getAllComponents } from './shared.js';
diff --git a/scripts/utils.js b/scripts/utils.js
index 363616d75..8580aff88 100644
--- a/scripts/utils.js
+++ b/scripts/utils.js
@@ -1,6 +1,6 @@
+import childProcess from 'child_process';
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
-import childProcess from 'child_process';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
diff --git a/src/components/animated-image/animated-image.test.ts b/src/components/animated-image/animated-image.test.ts
index cb6ee3be6..ee37cd45a 100644
--- a/src/components/animated-image/animated-image.test.ts
+++ b/src/components/animated-image/animated-image.test.ts
@@ -1,7 +1,7 @@
-import { clickOnElement } from '../../internal/test.js';
-import { clientFixture } from '../../internal/test/fixture.js';
 import { expect, oneEvent } from '@open-wc/testing';
 import { html } from 'lit';
+import { clickOnElement } from '../../internal/test.js';
+import { clientFixture } from '../../internal/test/fixture.js';
 import type WaAnimatedImage from './animated-image.js';
 
 describe('<wa-animated-image>', () => {
diff --git a/src/components/animated-image/animated-image.ts b/src/components/animated-image/animated-image.ts
index b7e0e4246..8e1e26de0 100644
--- a/src/components/animated-image/animated-image.ts
+++ b/src/components/animated-image/animated-image.ts
@@ -1,11 +1,11 @@
-import '../icon/icon.js';
-import { customElement, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { WaErrorEvent } from '../../events/error.js';
 import { WaLoadEvent } from '../../events/load.js';
 import { watch } from '../../internal/watch.js';
-import styles from './animated-image.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import '../icon/icon.js';
+import styles from './animated-image.css';
 
 /**
  * @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.
diff --git a/src/components/animation/animation.test.ts b/src/components/animation/animation.test.ts
index 61a9c6fd8..fbafdd4b6 100644
--- a/src/components/animation/animation.test.ts
+++ b/src/components/animation/animation.test.ts
@@ -1,10 +1,7 @@
 import { aTimeout, expect, oneEvent } from '@open-wc/testing';
-import {
-  clientFixture
-  // hydratedFixture
-} from '../../internal/test/fixture.js';
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { clientFixture } from '../../internal/test/fixture.js';
 import type WaAnimation from './animation.js';
 
 describe('<wa-animation>', () => {
diff --git a/src/components/animation/animation.ts b/src/components/animation/animation.ts
index 0b9438c05..f6acbd544 100644
--- a/src/components/animation/animation.ts
+++ b/src/components/animation/animation.ts
@@ -1,12 +1,12 @@
-import { animations } from './animations.js';
-import { customElement, property, queryAsync } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement, property, queryAsync } from 'lit/decorators.js';
 import { WaCancelEvent } from '../../events/cancel.js';
 import { WaFinishEvent } from '../../events/finish.js';
 import { WaStartEvent } from '../../events/start.js';
 import { watch } from '../../internal/watch.js';
-import styles from './animation.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './animation.css';
+import { animations } from './animations.js';
 
 /**
  * @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
diff --git a/src/components/avatar/avatar.test.ts b/src/components/avatar/avatar.test.ts
index 73fce3b23..74de5b0c4 100644
--- a/src/components/avatar/avatar.test.ts
+++ b/src/components/avatar/avatar.test.ts
@@ -1,6 +1,6 @@
 import { aTimeout, expect, waitUntil } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaAvatar from './avatar.js';
 
 // The default avatar background just misses AA contrast, but the next step up is way too dark. Since avatars aren't
diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
index 15438d4ce..4d42881a8 100644
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -1,11 +1,11 @@
-import '../icon/icon.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, state } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { WaErrorEvent } from '../../events/error.js';
 import { watch } from '../../internal/watch.js';
-import styles from './avatar.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import '../icon/icon.js';
+import styles from './avatar.css';
 
 /**
  * @summary Avatars are used to represent a person or object.
diff --git a/src/components/badge/badge.test.ts b/src/components/badge/badge.test.ts
index ce29de849..fb0bdcc7f 100644
--- a/src/components/badge/badge.test.ts
+++ b/src/components/badge/badge.test.ts
@@ -1,6 +1,6 @@
 import { aTimeout, expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaBadge from './badge.js';
 
 // The default badge background just misses AA contrast, but the next step up is way too dark. We're going to relax this
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index 70709077a..068985895 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -1,8 +1,8 @@
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
-import styles from './badge.css';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './badge.css';
 
 /**
  * @summary Badges are used to draw attention and display statuses or counts.
diff --git a/src/components/breadcrumb-item/breadcrumb-item.test.ts b/src/components/breadcrumb-item/breadcrumb-item.test.ts
index 8ebcc9d1d..1479dcb3e 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.test.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaBreadcrumbItem from './breadcrumb-item.js';
 
 describe('<wa-breadcrumb-item>', () => {
diff --git a/src/components/breadcrumb-item/breadcrumb-item.ts b/src/components/breadcrumb-item/breadcrumb-item.ts
index 2727a5fe5..42dc570aa 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.ts
@@ -1,9 +1,9 @@
-import { customElement, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { watch } from '../../internal/watch.js';
-import styles from './breadcrumb-item.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './breadcrumb-item.css';
 
 /**
  * @summary Breadcrumb Items are used inside [breadcrumbs](/docs/components/breadcrumb) to represent different links.
diff --git a/src/components/breadcrumb/breadcrumb.test.ts b/src/components/breadcrumb/breadcrumb.test.ts
index 47a7aab75..1c2feeb96 100644
--- a/src/components/breadcrumb/breadcrumb.test.ts
+++ b/src/components/breadcrumb/breadcrumb.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaBreadcrumb from './breadcrumb.js';
 
 // The default link color just misses AA contrast, but the next step up is way too dark. Maybe we can solve this in the
diff --git a/src/components/breadcrumb/breadcrumb.ts b/src/components/breadcrumb/breadcrumb.ts
index edeb4d4f5..d0d1bef20 100644
--- a/src/components/breadcrumb/breadcrumb.ts
+++ b/src/components/breadcrumb/breadcrumb.ts
@@ -1,10 +1,10 @@
-import '../icon/icon.js';
-import { customElement, property, query } from 'lit/decorators.js';
 import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
-import styles from './breadcrumb.css';
+import { customElement, property, query } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
 import type WaBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.js';
+import '../icon/icon.js';
+import styles from './breadcrumb.css';
 
 /**
  * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
diff --git a/src/components/button-group/button-group.test.ts b/src/components/button-group/button-group.test.ts
index 48554a5fe..758b3df5b 100644
--- a/src/components/button-group/button-group.test.ts
+++ b/src/components/button-group/button-group.test.ts
@@ -1,6 +1,6 @@
 import { elementUpdated, expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaButtonGroup from './button-group.js';
 
 describe('<wa-button-group>', () => {
diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts
index ef5be5856..656a3bd2e 100644
--- a/src/components/button-group/button-group.ts
+++ b/src/components/button-group/button-group.ts
@@ -1,7 +1,7 @@
-import { customElement, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
-import styles from './button-group.css';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './button-group.css';
 
 /**
  * @summary Button groups can be used to group related buttons into sections.
diff --git a/src/components/button/button.test.ts b/src/components/button/button.test.ts
index 8632eb233..1f29517d5 100644
--- a/src/components/button/button.test.ts
+++ b/src/components/button/button.test.ts
@@ -1,8 +1,8 @@
 import { aTimeout, expect, waitUntil } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
-import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import sinon from 'sinon';
+import { fixtures } from '../../internal/test/fixture.js';
+import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import type WaButton from './button.js';
 
 const variants = ['brand', 'success', 'neutral', 'warning', 'danger'];
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 19a6d7292..f3994775c 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -1,16 +1,16 @@
-import '../icon/icon.js';
-import '../spinner/spinner.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { html, literal } from 'lit/static-html.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { LocalizeController } from '../../utilities/localize.js';
-import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
+import { html, literal } from 'lit/static-html.js';
 import { WaBlurEvent } from '../../events/blur.js';
 import { WaFocusEvent } from '../../events/focus.js';
 import { WaInvalidEvent } from '../../events/invalid.js';
+import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import '../icon/icon.js';
+import '../spinner/spinner.js';
 import styles from './button.css';
 
 /**
diff --git a/src/components/callout/callout.test.ts b/src/components/callout/callout.test.ts
index 99489a357..f3c6cabf9 100644
--- a/src/components/callout/callout.test.ts
+++ b/src/components/callout/callout.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaCallout from './callout.js';
 
 describe('<wa-callout>', () => {
diff --git a/src/components/callout/callout.ts b/src/components/callout/callout.ts
index 3fadb6091..ddbf4d944 100644
--- a/src/components/callout/callout.ts
+++ b/src/components/callout/callout.ts
@@ -1,7 +1,7 @@
-import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
-import styles from './callout.css';
+import { customElement, property } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './callout.css';
 
 /**
  * @summary Callouts are used to display important messages inline.
diff --git a/src/components/card/card.test.ts b/src/components/card/card.test.ts
index 393a83b0b..06d88d887 100644
--- a/src/components/card/card.test.ts
+++ b/src/components/card/card.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaCard from './card.js';
 
 describe('<wa-card>', () => {
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index ee956ded0..152a48036 100644
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -1,8 +1,8 @@
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
-import styles from './card.css';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './card.css';
 
 /**
  * @summary Cards can be used to group related subjects in a container.
diff --git a/src/components/carousel-item/carousel-item.test.ts b/src/components/carousel-item/carousel-item.test.ts
index 718ac9223..db85f843a 100644
--- a/src/components/carousel-item/carousel-item.test.ts
+++ b/src/components/carousel-item/carousel-item.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 
 describe('<wa-carousel-item>', () => {
   for (const fixture of fixtures) {
diff --git a/src/components/carousel-item/carousel-item.ts b/src/components/carousel-item/carousel-item.ts
index 6654ff748..76fac9d19 100644
--- a/src/components/carousel-item/carousel-item.ts
+++ b/src/components/carousel-item/carousel-item.ts
@@ -1,7 +1,7 @@
-import { customElement } from 'lit/decorators.js';
 import { html } from 'lit';
-import styles from './carousel-item.css';
+import { customElement } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './carousel-item.css';
 
 /**
  * @summary A carousel item represent a slide within a [carousel](/docs/components/carousel).
diff --git a/src/components/carousel/carousel.test.ts b/src/components/carousel/carousel.test.ts
index 07b2b871c..30ebff69b 100644
--- a/src/components/carousel/carousel.test.ts
+++ b/src/components/carousel/carousel.test.ts
@@ -1,12 +1,12 @@
 import { aTimeout, expect, nextFrame, oneEvent, waitUntil } from '@open-wc/testing';
-import { clickOnElement, dragElement, moveMouseOnElement } from '../../internal/test.js';
-import { clientFixture } from '../../internal/test/fixture.js';
+import { resetMouse } from '@web/test-runner-commands';
 import { html } from 'lit';
 import { map } from 'lit/directives/map.js';
 import { range } from 'lit/directives/range.js';
-import { resetMouse } from '@web/test-runner-commands';
-import sinon from 'sinon';
 import type { SinonStub } from 'sinon';
+import sinon from 'sinon';
+import { clickOnElement, dragElement, moveMouseOnElement } from '../../internal/test.js';
+import { clientFixture } from '../../internal/test/fixture.js';
 import type WaCarousel from './carousel.js';
 
 describe('<wa-carousel>', () => {
diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts
index 0893954b0..9604882d2 100644
--- a/src/components/carousel/carousel.ts
+++ b/src/components/carousel/carousel.ts
@@ -1,22 +1,22 @@
 import '../../internal/scrollend-polyfill.js';
 
+import type { PropertyValueMap } from 'lit';
+import { html, isServer } from 'lit';
+import { customElement, eventOptions, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { map } from 'lit/directives/map.js';
+import { range } from 'lit/directives/range.js';
+import { WaSlideChangeEvent } from '../../events/slide-change.js';
+import { prefersReducedMotion } from '../../internal/animate.js';
+import { waitForEvent } from '../../internal/event.js';
+import { clamp } from '../../internal/math.js';
+import { watch } from '../../internal/watch.js';
+import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import type WaCarouselItem from '../carousel-item/carousel-item.js';
 import '../icon/icon.js';
 import { AutoplayController } from './autoplay-controller.js';
-import { clamp } from '../../internal/math.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, eventOptions, property, query, state } from 'lit/decorators.js';
-import { html, isServer } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
-import { map } from 'lit/directives/map.js';
-import { prefersReducedMotion } from '../../internal/animate.js';
-import { range } from 'lit/directives/range.js';
-import { waitForEvent } from '../../internal/event.js';
-import { WaSlideChangeEvent } from '../../events/slide-change.js';
-import { watch } from '../../internal/watch.js';
 import styles from './carousel.css';
-import WebAwesomeElement from '../../internal/webawesome-element.js';
-import type { PropertyValueMap } from 'lit';
-import type WaCarouselItem from '../carousel-item/carousel-item.js';
 
 /**
  * @summary Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
diff --git a/src/components/carousel/scroll-controller.ts b/src/components/carousel/scroll-controller.ts
index 3871f000b..38718dad8 100644
--- a/src/components/carousel/scroll-controller.ts
+++ b/src/components/carousel/scroll-controller.ts
@@ -1,6 +1,6 @@
+import type { ReactiveController, ReactiveElement } from 'lit';
 import { prefersReducedMotion } from '../../internal/animate.js';
 import { waitForEvent } from '../../internal/event.js';
-import type { ReactiveController, ReactiveElement } from 'lit';
 
 interface ScrollHost extends ReactiveElement {
   scrollContainer: HTMLElement;
diff --git a/src/components/checkbox/checkbox.test.ts b/src/components/checkbox/checkbox.test.ts
index 8bb2392e1..12556db62 100644
--- a/src/components/checkbox/checkbox.test.ts
+++ b/src/components/checkbox/checkbox.test.ts
@@ -1,10 +1,10 @@
 import { aTimeout, expect, oneEvent, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import { html } from 'lit';
+import sinon from 'sinon';
 import { clickOnElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
-import { sendKeys } from '@web/test-runner-commands';
-import sinon from 'sinon';
 import type WaCheckbox from './checkbox.js';
 
 describe('<wa-checkbox>', () => {
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index dcd28bbf4..9cd9f89b7 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -1,21 +1,21 @@
-import '../icon/icon.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query } from 'lit/decorators.js';
-import { HasSlotController } from '../../internal/slot.js';
+import type { PropertyValues } from 'lit';
 import { html, isServer } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-import { RequiredValidator } from '../../internal/validators/required-validator.js';
 import { WaBlurEvent } from '../../events/blur.js';
 import { WaChangeEvent } from '../../events/change.js';
 import { WaFocusEvent } from '../../events/focus.js';
 import { WaInputEvent } from '../../events/input.js';
+import { HasSlotController } from '../../internal/slot.js';
+import { RequiredValidator } from '../../internal/validators/required-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import sizeStyles from '../../styles/shadow/size.css';
+import '../icon/icon.js';
 import styles from './checkbox.css';
-import type { PropertyValues } from 'lit';
 
 /**
  * @summary Checkboxes allow the user to toggle an option on or off.
@@ -222,7 +222,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
     return html`
       <div
         class=${classMap({
-          'form-control--has-hint': hasHint
+          'form-control--has-hint': hasHint,
           'form-control': true
         })}
       >
diff --git a/src/components/code-demo/code-demo.ts b/src/components/code-demo/code-demo.ts
index 0af0c79b5..c36f2c30d 100644
--- a/src/components/code-demo/code-demo.ts
+++ b/src/components/code-demo/code-demo.ts
@@ -1,11 +1,11 @@
-import '../icon/icon.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query } from 'lit/decorators.js';
-import { getInnerHTML, HasSlotController } from '../../internal/slot.js';
 import { html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { HasSlotController, getInnerHTML } from '../../internal/slot.js';
+import WebAwesomeElement from '../../internal/webawesome-element.js';
+import '../icon/icon.js';
 import { viewportPropertyConverter } from '../viewport-demo/viewport-demo.js';
 import styles from './code-demo.css';
-import WebAwesomeElement from '../../internal/webawesome-element.js';
 
 import type { TemplateResult } from 'lit';
 import type { ViewportDimensions } from '../viewport-demo/viewport-demo.js';
diff --git a/src/components/color-picker/color-picker.test.ts b/src/components/color-picker/color-picker.test.ts
index 94068ef7c..9510ce387 100644
--- a/src/components/color-picker/color-picker.test.ts
+++ b/src/components/color-picker/color-picker.test.ts
@@ -1,11 +1,11 @@
 import { aTimeout, expect, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import { html } from 'lit';
+import sinon from 'sinon';
 import { clickOnElement, dragElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
-import { sendKeys } from '@web/test-runner-commands';
 import { serialize } from '../../utilities/form.js';
-import sinon from 'sinon';
 import type WaColorPicker from './color-picker.js';
 
 describe('<wa-color-picker>', () => {
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index 4a1fcdb35..c30891994 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -1,32 +1,32 @@
-import '../button-group/button-group.js';
-import '../button/button.js';
-import '../dropdown/dropdown.js';
-import '../icon/icon.js';
-import '../input/input.js';
-import '../visually-hidden/visually-hidden.js';
-import { clamp } from '../../internal/math.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, eventOptions, property, query, state } from 'lit/decorators.js';
-import { drag } from '../../internal/drag.js';
-import { HasSlotController } from '../../internal/slot.js';
-import { html, isServer } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { LocalizeController } from '../../utilities/localize.js';
-import { RequiredValidator } from '../../internal/validators/required-validator.js';
-import { styleMap } from 'lit/directives/style-map.js';
 import { TinyColor } from '@ctrl/tinycolor';
+import type { PropertyValues } from 'lit';
+import { html, isServer } from 'lit';
+import { customElement, eventOptions, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { WaBlurEvent } from '../../events/blur.js';
 import { WaChangeEvent } from '../../events/change.js';
 import { WaFocusEvent } from '../../events/focus.js';
 import { WaInputEvent } from '../../events/input.js';
 import { WaInvalidEvent } from '../../events/invalid.js';
+import { drag } from '../../internal/drag.js';
+import { clamp } from '../../internal/math.js';
+import { HasSlotController } from '../../internal/slot.js';
+import { RequiredValidator } from '../../internal/validators/required-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
-import styles from './color-picker.css';
-import type { PropertyValues } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
+import '../button-group/button-group.js';
+import '../button/button.js';
+import '../dropdown/dropdown.js';
 import type WaDropdown from '../dropdown/dropdown.js';
+import '../icon/icon.js';
+import '../input/input.js';
 import type WaInput from '../input/input.js';
+import '../visually-hidden/visually-hidden.js';
+import styles from './color-picker.css';
 
 interface EyeDropperConstructor {
   new (): EyeDropperInterface;
diff --git a/src/components/copy-button/copy-button.test.ts b/src/components/copy-button/copy-button.test.ts
index 529964c10..24115739b 100644
--- a/src/components/copy-button/copy-button.test.ts
+++ b/src/components/copy-button/copy-button.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaCopyButton from './copy-button.js';
 
 // We use aria-live to announce labels via tooltips
diff --git a/src/components/copy-button/copy-button.ts b/src/components/copy-button/copy-button.ts
index 82563bf49..472d14a5a 100644
--- a/src/components/copy-button/copy-button.ts
+++ b/src/components/copy-button/copy-button.ts
@@ -1,16 +1,16 @@
-import '../icon/icon.js';
-import '../tooltip/tooltip.js';
-import '../visually-hidden/visually-hidden.js';
-import { animateWithClass } from '../../internal/animate.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { WaCopyEvent } from '../../events/copy.js';
 import { WaErrorEvent } from '../../events/error.js';
-import styles from './copy-button.css';
+import { animateWithClass } from '../../internal/animate.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import '../icon/icon.js';
+import '../tooltip/tooltip.js';
 import type WaTooltip from '../tooltip/tooltip.js';
+import '../visually-hidden/visually-hidden.js';
+import styles from './copy-button.css';
 
 /**
  * @summary Copies text data to the clipboard when the user clicks the trigger.
diff --git a/src/components/details/details.test.ts b/src/components/details/details.test.ts
index 371abe103..800e5064c 100644
--- a/src/components/details/details.test.ts
+++ b/src/components/details/details.test.ts
@@ -1,10 +1,10 @@
 // cspell:dictionaries lorem-ipsum
 import { expect, waitUntil } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
 import sinon from 'sinon';
 import type { WaHideEvent } from '../../events/hide.js';
 import type { WaShowEvent } from '../../events/show.js';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaDetails from './details.js';
 
 describe('<wa-details>', () => {
diff --git a/src/components/details/details.ts b/src/components/details/details.ts
index 1a40c5c05..933ed46df 100644
--- a/src/components/details/details.ts
+++ b/src/components/details/details.ts
@@ -1,17 +1,17 @@
-import '../icon/icon.js';
-import { animate, parseDuration } from '../../internal/animate.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query } from 'lit/decorators.js';
 import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { WaAfterHideEvent } from '../../events/after-hide.js';
 import { WaAfterShowEvent } from '../../events/after-show.js';
 import { WaHideEvent } from '../../events/hide.js';
-import { waitForEvent } from '../../internal/event.js';
 import { WaShowEvent } from '../../events/show.js';
+import { animate, parseDuration } from '../../internal/animate.js';
+import { waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
-import styles from './details.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import '../icon/icon.js';
+import styles from './details.css';
 
 /**
  * @summary Details show a brief summary and expand to show additional content.
diff --git a/src/components/dialog/dialog.test.ts b/src/components/dialog/dialog.test.ts
index b39ae303b..c9d7482e2 100644
--- a/src/components/dialog/dialog.test.ts
+++ b/src/components/dialog/dialog.test.ts
@@ -1,10 +1,10 @@
 // cspell:dictionaries lorem-ipsum
 import { aTimeout, expect, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import { html } from 'lit';
+import sinon from 'sinon';
 import { clickOnElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
-import { sendKeys } from '@web/test-runner-commands';
-import sinon from 'sinon';
 import type WaDialog from './dialog.js';
 
 describe('<wa-dialog>', () => {
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 51bfd7557..1ec52a40b 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -1,17 +1,17 @@
-import '../icon-button/icon-button.js';
-import { animateWithClass } from '../../internal/animate.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query } from 'lit/decorators.js';
 import { html, isServer } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
-import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { WaAfterHideEvent } from '../../events/after-hide.js';
 import { WaAfterShowEvent } from '../../events/after-show.js';
 import { WaHideEvent } from '../../events/hide.js';
 import { WaShowEvent } from '../../events/show.js';
+import { animateWithClass } from '../../internal/animate.js';
+import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js';
 import { watch } from '../../internal/watch.js';
-import styles from './dialog.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import '../icon-button/icon-button.js';
+import styles from './dialog.css';
 
 /**
  * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
diff --git a/src/components/divider/divider.test.ts b/src/components/divider/divider.test.ts
index df34d20ff..c15168f8c 100644
--- a/src/components/divider/divider.test.ts
+++ b/src/components/divider/divider.test.ts
@@ -1,6 +1,6 @@
 import { elementUpdated, expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaDivider from './divider.js';
 
 describe('<wa-divider>', () => {
diff --git a/src/components/divider/divider.ts b/src/components/divider/divider.ts
index 54ba8a189..43303c073 100644
--- a/src/components/divider/divider.ts
+++ b/src/components/divider/divider.ts
@@ -1,7 +1,7 @@
 import { customElement, property } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
-import styles from './divider.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './divider.css';
 
 /**
  * @summary Dividers are used to visually separate or group elements.
diff --git a/src/components/drawer/drawer.test.ts b/src/components/drawer/drawer.test.ts
index f67c588b3..eae5d7aab 100644
--- a/src/components/drawer/drawer.test.ts
+++ b/src/components/drawer/drawer.test.ts
@@ -1,10 +1,10 @@
 // cspell:dictionaries lorem-ipsum
 import { aTimeout, expect, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import { html } from 'lit';
+import sinon from 'sinon';
 import { clickOnElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
-import { sendKeys } from '@web/test-runner-commands';
-import sinon from 'sinon';
 import type WaDrawer from './drawer.js';
 
 describe('<wa-drawer>', () => {
diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts
index 5f1a43bfa..f8ac6f085 100644
--- a/src/components/drawer/drawer.ts
+++ b/src/components/drawer/drawer.ts
@@ -1,17 +1,17 @@
-import '../icon-button/icon-button.js';
-import { animateWithClass } from '../../internal/animate.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query } from 'lit/decorators.js';
 import { html, isServer } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
-import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { WaAfterHideEvent } from '../../events/after-hide.js';
 import { WaAfterShowEvent } from '../../events/after-show.js';
 import { WaHideEvent } from '../../events/hide.js';
 import { WaShowEvent } from '../../events/show.js';
+import { animateWithClass } from '../../internal/animate.js';
+import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js';
 import { watch } from '../../internal/watch.js';
-import styles from './drawer.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import '../icon-button/icon-button.js';
+import styles from './drawer.css';
 
 /**
  * @summary Drawers slide in from a container to expose additional options and information.
diff --git a/src/components/dropdown/dropdown.test.ts b/src/components/dropdown/dropdown.test.ts
index 344c52bbf..a64a7d547 100644
--- a/src/components/dropdown/dropdown.test.ts
+++ b/src/components/dropdown/dropdown.test.ts
@@ -1,9 +1,9 @@
-import { clickOnElement } from '../../internal/test.js';
 import { expect, waitUntil } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
 import { sendKeys, sendMouse } from '@web/test-runner-commands';
+import { html } from 'lit';
 import sinon from 'sinon';
+import { clickOnElement } from '../../internal/test.js';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaDropdown from './dropdown.js';
 
 describe('<wa-dropdown>', () => {
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index d9a714190..536d874f5 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -1,22 +1,22 @@
-import '../popup/popup.js';
-import { animateWithClass } from '../../internal/animate.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { WaAfterHideEvent } from '../../events/after-hide.js';
 import { WaAfterShowEvent } from '../../events/after-show.js';
 import { WaHideEvent } from '../../events/hide.js';
-import { waitForEvent } from '../../internal/event.js';
-import { WaShowEvent } from '../../events/show.js';
-import { watch } from '../../internal/watch.js';
-import styles from './dropdown.css';
-import WebAwesomeElement from '../../internal/webawesome-element.js';
 import type { WaSelectEvent } from '../../events/select.js';
+import { WaShowEvent } from '../../events/show.js';
+import { animateWithClass } from '../../internal/animate.js';
+import { waitForEvent } from '../../internal/event.js';
+import { watch } from '../../internal/watch.js';
+import WebAwesomeElement from '../../internal/webawesome-element.js';
 import type WaButton from '../button/button.js';
 import type WaIconButton from '../icon-button/icon-button.js';
 import type WaMenu from '../menu/menu.js';
+import '../popup/popup.js';
 import type WaPopup from '../popup/popup.js';
+import styles from './dropdown.css';
 
 /**
  * @summary Dropdowns expose additional content that "drops down" in a panel.
diff --git a/src/components/format-bytes/format-bytes.test.ts b/src/components/format-bytes/format-bytes.test.ts
index 2c7227e6f..d4a8dcb90 100644
--- a/src/components/format-bytes/format-bytes.test.ts
+++ b/src/components/format-bytes/format-bytes.test.ts
@@ -1,6 +1,6 @@
 import { elementUpdated, expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaFormatBytes from './format-bytes.js';
 
 describe('<wa-format-bytes>', () => {
diff --git a/src/components/format-bytes/format-bytes.ts b/src/components/format-bytes/format-bytes.ts
index f900d3bce..96ce9536f 100644
--- a/src/components/format-bytes/format-bytes.ts
+++ b/src/components/format-bytes/format-bytes.ts
@@ -1,6 +1,6 @@
 import { customElement, property } from 'lit/decorators.js';
-import { LocalizeController } from '../../utilities/localize.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
 
 /**
  * @summary Formats a number as a human readable bytes value.
diff --git a/src/components/format-date/format-date.test.ts b/src/components/format-date/format-date.test.ts
index 3d6f2ee4f..acebe4a30 100644
--- a/src/components/format-date/format-date.test.ts
+++ b/src/components/format-date/format-date.test.ts
@@ -1,7 +1,7 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
 import sinon from 'sinon';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaFormatDate from './format-date.js';
 
 describe('<wa-format-date>', () => {
diff --git a/src/components/format-date/format-date.ts b/src/components/format-date/format-date.ts
index a135061ac..3e297d4b5 100644
--- a/src/components/format-date/format-date.ts
+++ b/src/components/format-date/format-date.ts
@@ -1,7 +1,7 @@
-import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
+import { customElement, property } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
 
 /**
  * @summary Formats a date/time using the specified locale and options.
diff --git a/src/components/format-number/format-number.test.ts b/src/components/format-number/format-number.test.ts
index 4b15270a9..8badd4840 100644
--- a/src/components/format-number/format-number.test.ts
+++ b/src/components/format-number/format-number.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaFormatNumber from './format-number.js';
 
 describe('<wa-format-number>', () => {
diff --git a/src/components/format-number/format-number.ts b/src/components/format-number/format-number.ts
index ed03dd24b..a975005bb 100644
--- a/src/components/format-number/format-number.ts
+++ b/src/components/format-number/format-number.ts
@@ -1,6 +1,6 @@
 import { customElement, property } from 'lit/decorators.js';
-import { LocalizeController } from '../../utilities/localize.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
 
 /**
  * @summary Formats a number using the specified locale and options.
diff --git a/src/components/icon-button/icon-button.test.ts b/src/components/icon-button/icon-button.test.ts
index fad81cfd5..b30766687 100644
--- a/src/components/icon-button/icon-button.test.ts
+++ b/src/components/icon-button/icon-button.test.ts
@@ -1,7 +1,7 @@
 import { expect, waitUntil } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
 import sinon from 'sinon';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaIconButton from './icon-button.js';
 
 type LinkTarget = '_self' | '_blank' | '_parent' | '_top';
diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts
index d6426af9f..f2a163e0f 100644
--- a/src/components/icon-button/icon-button.ts
+++ b/src/components/icon-button/icon-button.ts
@@ -1,11 +1,11 @@
-import '../icon/icon.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { html, literal } from 'lit/static-html.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { html, literal } from 'lit/static-html.js';
 import { WaBlurEvent } from '../../events/blur.js';
 import { WaFocusEvent } from '../../events/focus.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import '../icon/icon.js';
 import styles from './icon-button.css';
 
 /**
diff --git a/src/components/icon/icon.test.ts b/src/components/icon/icon.test.ts
index bad1d57c6..27cc2c41c 100644
--- a/src/components/icon/icon.test.ts
+++ b/src/components/icon/icon.test.ts
@@ -1,6 +1,6 @@
 import { aTimeout, elementUpdated, expect, oneEvent } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 
 // Make sure this is `dist-cdn/` otherwise you will get an error.
 import { registerIconLibrary } from '../../../dist-cdn/webawesome.js';
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 249918086..23cd614fe 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -1,12 +1,12 @@
-import { customElement, property, state } from 'lit/decorators.js';
-import { getIconLibrary, type IconLibrary, unwatchIcon, watchIcon } from './library.js';
 import { html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import { isTemplateResult } from 'lit/directive-helpers.js';
 import { WaErrorEvent } from '../../events/error.js';
 import { WaLoadEvent } from '../../events/load.js';
 import { watch } from '../../internal/watch.js';
-import styles from './icon.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './icon.css';
+import { getIconLibrary, unwatchIcon, watchIcon, type IconLibrary } from './library.js';
 
 import type { HTMLTemplateResult, PropertyValues } from 'lit';
 
diff --git a/src/components/icon/library.ts b/src/components/icon/library.ts
index 9e1adbba5..e034c48eb 100644
--- a/src/components/icon/library.ts
+++ b/src/components/icon/library.ts
@@ -1,6 +1,6 @@
+import type WaIcon from '../icon/icon.js';
 import defaultLibrary from './library.default.js';
 import systemLibrary from './library.system.js';
-import type WaIcon from '../icon/icon.js';
 
 export type IconLibraryResolver = (name: string, family: string, variant: string) => string;
 export type IconLibraryMutator = (svg: SVGElement) => void;
diff --git a/src/components/image-comparer/image-comparer.test.ts b/src/components/image-comparer/image-comparer.test.ts
index 5200df07d..f9c4871e8 100644
--- a/src/components/image-comparer/image-comparer.test.ts
+++ b/src/components/image-comparer/image-comparer.test.ts
@@ -1,7 +1,7 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
 import sinon from 'sinon';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaImageComparer from './image-comparer.js';
 
 describe('<wa-image-comparer>', () => {
diff --git a/src/components/image-comparer/image-comparer.ts b/src/components/image-comparer/image-comparer.ts
index 61b6ada79..66bb9916f 100644
--- a/src/components/image-comparer/image-comparer.ts
+++ b/src/components/image-comparer/image-comparer.ts
@@ -1,15 +1,15 @@
-import '../icon/icon.js';
-import { clamp } from '../../internal/math.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query } from 'lit/decorators.js';
-import { drag } from '../../internal/drag.js';
 import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { WaChangeEvent } from '../../events/change.js';
+import { drag } from '../../internal/drag.js';
+import { clamp } from '../../internal/math.js';
 import { watch } from '../../internal/watch.js';
-import styles from './image-comparer.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import '../icon/icon.js';
+import styles from './image-comparer.css';
 
 /**
  * @summary Compare visual differences between similar photos with a sliding panel.
diff --git a/src/components/include/include.test.ts b/src/components/include/include.test.ts
index c9b59a264..71ae98579 100644
--- a/src/components/include/include.test.ts
+++ b/src/components/include/include.test.ts
@@ -1,7 +1,7 @@
 import { aTimeout, expect, waitUntil } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
 import sinon from 'sinon';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaInclude from './include.js';
 
 const stubbedFetchResponse: Response = {
diff --git a/src/components/include/include.ts b/src/components/include/include.ts
index 493eb9172..ee232beb5 100644
--- a/src/components/include/include.ts
+++ b/src/components/include/include.ts
@@ -1,11 +1,11 @@
-import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
-import { requestInclude } from './request.js';
+import { customElement, property } from 'lit/decorators.js';
 import { WaIncludeErrorEvent } from '../../events/include-error.js';
 import { WaLoadEvent } from '../../events/load.js';
 import { watch } from '../../internal/watch.js';
-import styles from './include.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './include.css';
+import { requestInclude } from './request.js';
 
 /**
  * @summary Includes give you the power to embed external HTML files into the page.
diff --git a/src/components/input/input.test.ts b/src/components/input/input.test.ts
index edfac9fd6..4748d7e19 100644
--- a/src/components/input/input.test.ts
+++ b/src/components/input/input.test.ts
@@ -1,12 +1,12 @@
 // eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
 import { aTimeout, expect, oneEvent, waitUntil } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
-import { isSafari } from '../../internal/test.js';
-import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import { sendKeys } from '@web/test-runner-commands'; // must come from the same module
-import { serialize } from '../../../dist-cdn/webawesome.js';
+import { html } from 'lit';
 import sinon from 'sinon';
+import { serialize } from '../../../dist-cdn/webawesome.js';
+import { isSafari } from '../../internal/test.js';
+import { fixtures } from '../../internal/test/fixture.js';
+import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import type WaInput from './input.js';
 
 describe('<wa-input>', () => {
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 10f555b38..fc1b56233 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -1,22 +1,22 @@
-import '../icon/icon.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { HasSlotController } from '../../internal/slot.js';
 import { html, isServer } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-import { LocalizeController } from '../../utilities/localize.js';
-import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { WaBlurEvent } from '../../events/blur.js';
 import { WaChangeEvent } from '../../events/change.js';
 import { WaClearEvent } from '../../events/clear.js';
 import { WaFocusEvent } from '../../events/focus.js';
 import { WaInputEvent } from '../../events/input.js';
+import { HasSlotController } from '../../internal/slot.js';
+import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
-import styles from './input.css';
+import { LocalizeController } from '../../utilities/localize.js';
 import type WaButton from '../button/button.js';
+import '../icon/icon.js';
+import styles from './input.css';
 
 /**
  * @summary Inputs collect data from the user.
diff --git a/src/components/menu-item/menu-item.test.ts b/src/components/menu-item/menu-item.test.ts
index 4566b3703..9135dd30b 100644
--- a/src/components/menu-item/menu-item.test.ts
+++ b/src/components/menu-item/menu-item.test.ts
@@ -1,9 +1,9 @@
 import { expect, waitUntil } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
 import { sendKeys } from '@web/test-runner-commands';
+import { html } from 'lit';
 import sinon from 'sinon';
 import type { WaSelectEvent } from '../../events/select.js';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaMenuItem from './menu-item.js';
 
 describe('<wa-menu-item>', () => {
diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts
index be1549c60..3aedfc2bd 100644
--- a/src/components/menu-item/menu-item.ts
+++ b/src/components/menu-item/menu-item.ts
@@ -1,16 +1,16 @@
+import type { PropertyValues } from 'lit';
+import { html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { getTextContent } from '../../internal/slot.js';
+import { watch } from '../../internal/watch.js';
+import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
 import '../popup/popup.js';
 import '../spinner/spinner.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query } from 'lit/decorators.js';
-import { getTextContent } from '../../internal/slot.js';
-import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
-import { SubmenuController } from './submenu-controller.js';
-import { watch } from '../../internal/watch.js';
 import styles from './menu-item.css';
-import WebAwesomeElement from '../../internal/webawesome-element.js';
-import type { PropertyValues } from 'lit';
+import { SubmenuController } from './submenu-controller.js';
 
 /**
  * @summary Menu items provide options for the user to pick from in a menu.
diff --git a/src/components/menu-item/submenu-controller.ts b/src/components/menu-item/submenu-controller.ts
index 74ff2606b..b5bf98952 100644
--- a/src/components/menu-item/submenu-controller.ts
+++ b/src/components/menu-item/submenu-controller.ts
@@ -1,8 +1,8 @@
-import { createRef, ref, type Ref } from 'lit/directives/ref.js';
-import { html } from 'lit';
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
-import type WaMenuItem from './menu-item.js';
+import { html } from 'lit';
+import { createRef, ref, type Ref } from 'lit/directives/ref.js';
 import type WaPopup from '../popup/popup.js';
+import type WaMenuItem from './menu-item.js';
 
 /** A reactive controller to manage the registration of event listeners for submenus. */
 export class SubmenuController implements ReactiveController {
diff --git a/src/components/menu-label/menu-label.test.ts b/src/components/menu-label/menu-label.test.ts
index 8ea168d07..f82c8f3fe 100644
--- a/src/components/menu-label/menu-label.test.ts
+++ b/src/components/menu-label/menu-label.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaMenuLabel from './menu-label.js';
 
 describe('<wa-menu-label>', () => {
diff --git a/src/components/menu-label/menu-label.ts b/src/components/menu-label/menu-label.ts
index 8eeeff2ba..bddc40d23 100644
--- a/src/components/menu-label/menu-label.ts
+++ b/src/components/menu-label/menu-label.ts
@@ -1,7 +1,7 @@
-import { customElement } from 'lit/decorators.js';
 import { html } from 'lit';
-import styles from './menu-label.css';
+import { customElement } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './menu-label.css';
 
 /**
  * @summary Menu labels are used to describe a group of menu items.
diff --git a/src/components/menu/menu.test.ts b/src/components/menu/menu.test.ts
index 875e0dcc0..1d1afb512 100644
--- a/src/components/menu/menu.test.ts
+++ b/src/components/menu/menu.test.ts
@@ -1,10 +1,10 @@
-import { clickOnElement } from '../../internal/test.js';
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
 import { sendKeys } from '@web/test-runner-commands';
+import { html } from 'lit';
 import sinon from 'sinon';
 import type { WaSelectEvent } from '../../events/select.js';
+import { clickOnElement } from '../../internal/test.js';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaMenu from './menu.js';
 
 describe('<wa-menu>', () => {
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index 1e2a567f7..a81255536 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -1,10 +1,10 @@
-import '../menu-item/menu-item.js';
-import { customElement, query } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
 import { WaSelectEvent } from '../../events/select.js';
-import styles from './menu.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import '../menu-item/menu-item.js';
 import type WaMenuItem from '../menu-item/menu-item.js';
+import styles from './menu.css';
 
 export interface MenuSelectEventDetail {
   item: WaMenuItem;
diff --git a/src/components/mutation-observer/mutation-observer.test.ts b/src/components/mutation-observer/mutation-observer.test.ts
index 5af68e44c..780a29061 100644
--- a/src/components/mutation-observer/mutation-observer.test.ts
+++ b/src/components/mutation-observer/mutation-observer.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 
 describe('<wa-mutation-observer>', () => {
   for (const fixture of fixtures) {
diff --git a/src/components/mutation-observer/mutation-observer.ts b/src/components/mutation-observer/mutation-observer.ts
index 05a04aa7d..0d7bc4499 100644
--- a/src/components/mutation-observer/mutation-observer.ts
+++ b/src/components/mutation-observer/mutation-observer.ts
@@ -1,9 +1,9 @@
-import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { WaMutationEvent } from '../../events/mutation.js';
 import { watch } from '../../internal/watch.js';
-import styles from './mutation-observer.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './mutation-observer.css';
 
 /**
  * @summary The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
diff --git a/src/components/option/option.test.ts b/src/components/option/option.test.ts
index 74ae3b20e..307eca961 100644
--- a/src/components/option/option.test.ts
+++ b/src/components/option/option.test.ts
@@ -1,6 +1,6 @@
 import { aTimeout, expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaOption from './option.js';
 
 describe('<wa-option>', () => {
diff --git a/src/components/option/option.ts b/src/components/option/option.ts
index 0e4b6e9a1..6a172cf47 100644
--- a/src/components/option/option.ts
+++ b/src/components/option/option.ts
@@ -1,11 +1,11 @@
-import '../icon/icon.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { watch } from '../../internal/watch.js';
-import styles from './option.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import '../icon/icon.js';
+import styles from './option.css';
 
 /**
  * @summary Options define the selectable items within various form controls such as [select](/docs/components/select).
diff --git a/src/components/page/page.test.ts b/src/components/page/page.test.ts
index fa589370f..b5e049e4d 100644
--- a/src/components/page/page.test.ts
+++ b/src/components/page/page.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 
 describe('<wa-page>', () => {
   for (const fixture of fixtures) {
diff --git a/src/components/page/page.ts b/src/components/page/page.ts
index b96eb20e7..36e81f66c 100644
--- a/src/components/page/page.ts
+++ b/src/components/page/page.ts
@@ -1,12 +1,12 @@
-import '../drawer/drawer.js';
-import { customElement, property, query } from 'lit/decorators.js';
 import { html, isServer } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
-import { toLength, toPx } from '../../internal/css-values.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import mobileStyles from './page.mobile.styles.js';
-import styles from './page.css';
+import { toLength, toPx } from '../../internal/css-values.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import '../drawer/drawer.js';
+import styles from './page.css';
+import mobileStyles from './page.mobile.styles.js';
 
 import type { PropertyValues } from 'lit';
 import type WaDrawer from '../drawer/drawer.js';
diff --git a/src/components/popup/popup.test.ts b/src/components/popup/popup.test.ts
index e8bc38d31..39e08968b 100644
--- a/src/components/popup/popup.test.ts
+++ b/src/components/popup/popup.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaPopup from './popup.js';
 
 describe('<wa-popup>', () => {
diff --git a/src/components/popup/popup.ts b/src/components/popup/popup.ts
index b39388e17..823647fef 100644
--- a/src/components/popup/popup.ts
+++ b/src/components/popup/popup.ts
@@ -1,12 +1,12 @@
 import { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query } from 'lit/decorators.js';
-import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
 import { offsetParent } from 'composed-offset-position';
+import { html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { WaRepositionEvent } from '../../events/reposition.js';
-import styles from './popup.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import styles from './popup.css';
 
 export interface VirtualElement {
   getBoundingClientRect: () => DOMRect;
diff --git a/src/components/progress-bar/progress-bar.test.ts b/src/components/progress-bar/progress-bar.test.ts
index 51c12003a..b03195f91 100644
--- a/src/components/progress-bar/progress-bar.test.ts
+++ b/src/components/progress-bar/progress-bar.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaProgressBar from './progress-bar.js';
 
 describe('<wa-progress-bar>', () => {
diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts
index 26bf54e05..9d706099d 100644
--- a/src/components/progress-bar/progress-bar.ts
+++ b/src/components/progress-bar/progress-bar.ts
@@ -1,11 +1,11 @@
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { LocalizeController } from '../../utilities/localize.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import styles from './progress-bar.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import styles from './progress-bar.css';
 
 /**
  * @summary Progress bars are used to show the status of an ongoing operation.
diff --git a/src/components/progress-ring/progress-ring.test.ts b/src/components/progress-ring/progress-ring.test.ts
index 04c9436a2..e521890fb 100644
--- a/src/components/progress-ring/progress-ring.test.ts
+++ b/src/components/progress-ring/progress-ring.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaProgressRing from './progress-ring.js';
 
 describe('<wa-progress-ring>', () => {
diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts
index 1717a4fa1..d4746523d 100644
--- a/src/components/progress-ring/progress-ring.ts
+++ b/src/components/progress-ring/progress-ring.ts
@@ -1,8 +1,8 @@
-import { customElement, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import styles from './progress-ring.css';
-import WebAwesomeElement from '../../internal/webawesome-element.js';
 
 /**
  * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
diff --git a/src/components/qr-code/qr-code.test.ts b/src/components/qr-code/qr-code.test.ts
index 379c15966..4e3e186c1 100644
--- a/src/components/qr-code/qr-code.test.ts
+++ b/src/components/qr-code/qr-code.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaQrCode from './qr-code.js';
 
 const getCanvas = (qrCode: WaQrCode): HTMLCanvasElement => {
diff --git a/src/components/qr-code/qr-code.ts b/src/components/qr-code/qr-code.ts
index d90c7f1ad..25bd1c698 100644
--- a/src/components/qr-code/qr-code.ts
+++ b/src/components/qr-code/qr-code.ts
@@ -1,10 +1,10 @@
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { html } from 'lit';
-import { watch } from '../../internal/watch.js';
-import styles from './qr-code.css';
-import WebAwesomeElement from '../../internal/webawesome-element.js';
 import type { PropertyValues } from 'lit';
+import { html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import type _QrCreator from 'qr-creator';
+import { watch } from '../../internal/watch.js';
+import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './qr-code.css';
 
 let QrCreator: _QrCreator.default;
 
diff --git a/src/components/radio-button/radio-button.test.ts b/src/components/radio-button/radio-button.test.ts
index c2f776c47..87a6aca41 100644
--- a/src/components/radio-button/radio-button.test.ts
+++ b/src/components/radio-button/radio-button.test.ts
@@ -1,8 +1,8 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
-import type WaRadioButton from './radio-button.js';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaRadioGroup from '../radio-group/radio-group.js';
+import type WaRadioButton from './radio-button.js';
 
 describe('<wa-radio-button>', () => {
   for (const fixture of fixtures) {
diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts
index fae2c5aea..869d67615 100644
--- a/src/components/radio-button/radio-button.ts
+++ b/src/components/radio-button/radio-button.ts
@@ -1,10 +1,10 @@
-import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { HasSlotController } from '../../internal/slot.js';
-import { html } from 'lit/static-html.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { html } from 'lit/static-html.js';
 import { WaBlurEvent } from '../../events/blur.js';
 import { WaFocusEvent } from '../../events/focus.js';
+import { HasSlotController } from '../../internal/slot.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import buttonStyles from '../button/button.css';
diff --git a/src/components/radio-group/radio-group.test.ts b/src/components/radio-group/radio-group.test.ts
index 1bbba970e..16798a96c 100644
--- a/src/components/radio-group/radio-group.test.ts
+++ b/src/components/radio-group/radio-group.test.ts
@@ -1,11 +1,11 @@
 import { aTimeout, expect, oneEvent } from '@open-wc/testing';
-import { clickOnElement } from '../../internal/test.js';
-import { fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
-import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import { sendKeys } from '@web/test-runner-commands';
+import { html } from 'lit';
 import sinon from 'sinon';
 import type { WaChangeEvent } from '../../events/change.js';
+import { clickOnElement } from '../../internal/test.js';
+import { fixtures } from '../../internal/test/fixture.js';
+import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import type WaRadio from '../radio/radio.js';
 import type WaRadioGroup from './radio-group.js';
 
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index 659352059..dcc9147ae 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -1,19 +1,19 @@
-import '../button-group/button-group.js';
-import '../radio/radio.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { HasSlotController } from '../../internal/slot.js';
 import { html, isServer } from 'lit';
-import { RequiredValidator } from '../../internal/validators/required-validator.js';
-import { uniqueId } from '../../internal/math.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { WaChangeEvent } from '../../events/change.js';
 import { WaInputEvent } from '../../events/input.js';
+import { uniqueId } from '../../internal/math.js';
+import { HasSlotController } from '../../internal/slot.js';
+import { RequiredValidator } from '../../internal/validators/required-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
-import styles from './radio-group.css';
-import type WaRadio from '../radio/radio.js';
+import '../button-group/button-group.js';
 import type WaRadioButton from '../radio-button/radio-button.js';
+import '../radio/radio.js';
+import type WaRadio from '../radio/radio.js';
+import styles from './radio-group.css';
 
 /**
  * @summary Radio groups are used to group multiple [radios](/docs/components/radio) or [radio buttons](/docs/components/radio-button) so they function as a single form control.
diff --git a/src/components/radio/radio.test.ts b/src/components/radio/radio.test.ts
index 90932d25d..0b0550123 100644
--- a/src/components/radio/radio.test.ts
+++ b/src/components/radio/radio.test.ts
@@ -1,8 +1,8 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
-import type WaRadio from './radio.js';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaRadioGroup from '../radio-group/radio-group.js';
+import type WaRadio from './radio.js';
 
 describe('<wa-radio>', () => {
   for (const fixture of fixtures) {
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index d200749ec..654644fbb 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -1,11 +1,11 @@
-import '../icon/icon.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, state } from 'lit/decorators.js';
 import { html, isServer } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { WaBlurEvent } from '../../events/blur.js';
 import { WaFocusEvent } from '../../events/focus.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import '../icon/icon.js';
 import styles from './radio.css';
 
 /**
diff --git a/src/components/range/range.test.ts b/src/components/range/range.test.ts
index 47e0c87e6..70f011788 100644
--- a/src/components/range/range.test.ts
+++ b/src/components/range/range.test.ts
@@ -1,11 +1,11 @@
-import { clickOnElement } from '../../internal/test.js';
 import { expect, oneEvent } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
-import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import { sendKeys } from '@web/test-runner-commands';
-import { serialize } from '../../utilities/form.js';
+import { html } from 'lit';
 import sinon from 'sinon';
+import { clickOnElement } from '../../internal/test.js';
+import { fixtures } from '../../internal/test/fixture.js';
+import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
+import { serialize } from '../../utilities/form.js';
 import type WaRange from './range.js';
 
 describe('<wa-range>', () => {
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index 0eed8130c..50023e9f9 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -1,18 +1,18 @@
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, eventOptions, property, query, state } from 'lit/decorators.js';
-import { HasSlotController } from '../../internal/slot.js';
 import { html } from 'lit';
+import { customElement, eventOptions, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-import { LocalizeController } from '../../utilities/localize.js';
-import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { WaBlurEvent } from '../../events/blur.js';
 import { WaChangeEvent } from '../../events/change.js';
 import { WaFocusEvent } from '../../events/focus.js';
 import { WaInputEvent } from '../../events/input.js';
+import { HasSlotController } from '../../internal/slot.js';
+import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
+import { LocalizeController } from '../../utilities/localize.js';
 import styles from './range.css';
 
 /**
@@ -33,7 +33,7 @@ import styles from './range.css';
  * @csspart form-control - The form control that wraps the label, input, and hint.
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The range's wrapper.
- * @csspart form-control-hint - The hint's wrapper.
+ * @csspart hint - The hint's wrapper.
  * @csspart base - The component's base wrapper.
  * @csspart input - The internal `<input>` element.
  * @csspart tooltip - The range's tooltip.
@@ -284,8 +284,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
         class=${classMap({
           'form-control': true,
           'form-control--medium': true, // range only has one size
-          'form-control--has-label': hasLabel,
-          'form-control--has-hint': hasHint
+          'form-control--has-label': hasLabel
         })}
       >
         <label
@@ -342,9 +341,15 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
           </div>
         </div>
 
-        <div part="form-control-hint" id="hint" class="form-control__hint" aria-hidden=${hasHint ? 'false' : 'true'}>
-          <slot name="hint">${this.hint}</slot>
-        </div>
+        <slot
+          name="hint"
+          part="hint"
+          class=${classMap({
+            'has-slotted': hasHint
+          })}
+          aria-hidden=${hasHint ? 'false' : 'true'}
+          >${this.hint}</slot
+        >
       </div>
     `;
   }
diff --git a/src/components/rating/rating.test.ts b/src/components/rating/rating.test.ts
index a8ce936dd..cf00b3586 100644
--- a/src/components/rating/rating.test.ts
+++ b/src/components/rating/rating.test.ts
@@ -1,9 +1,9 @@
-import { clickOnElement } from '../../internal/test.js';
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
 import { sendKeys } from '@web/test-runner-commands';
+import { html } from 'lit';
 import sinon from 'sinon';
+import { clickOnElement } from '../../internal/test.js';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaRating from './rating.js';
 
 describe('<wa-rating>', () => {
diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts
index 0df37ba05..d02f9707c 100644
--- a/src/components/rating/rating.ts
+++ b/src/components/rating/rating.ts
@@ -1,16 +1,16 @@
-import '../icon/icon.js';
-import { clamp } from '../../internal/math.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, eventOptions, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
+import { customElement, eventOptions, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { WaChangeEvent } from '../../events/change.js';
 import { WaHoverEvent } from '../../events/hover.js';
+import { clamp } from '../../internal/math.js';
 import { watch } from '../../internal/watch.js';
-import styles from './rating.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import '../icon/icon.js';
+import styles from './rating.css';
 
 /**
  * @summary Ratings give users a way to quickly view and provide feedback.
diff --git a/src/components/relative-time/relative-time.test.ts b/src/components/relative-time/relative-time.test.ts
index ee40d286d..20954b5c9 100644
--- a/src/components/relative-time/relative-time.test.ts
+++ b/src/components/relative-time/relative-time.test.ts
@@ -1,8 +1,8 @@
-import { clientFixture } from '../../internal/test/fixture.js';
 import { expect } from '@open-wc/testing';
 import { html } from 'lit';
 import sinon from 'sinon';
 import type { hydratedFixture } from '../../internal/test/fixture.js';
+import { clientFixture } from '../../internal/test/fixture.js';
 import type WaRelativeTime from './relative-time.js';
 
 interface WaRelativeTimeTestCase {
diff --git a/src/components/relative-time/relative-time.ts b/src/components/relative-time/relative-time.ts
index 4a0e37ce7..4b52230b1 100644
--- a/src/components/relative-time/relative-time.ts
+++ b/src/components/relative-time/relative-time.ts
@@ -1,7 +1,7 @@
-import { customElement, property, state } from 'lit/decorators.js';
 import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
 
 interface UnitConfig {
   max: number;
diff --git a/src/components/resize-observer/resize-observer.test.ts b/src/components/resize-observer/resize-observer.test.ts
index 0307e5407..fcabb3afa 100644
--- a/src/components/resize-observer/resize-observer.test.ts
+++ b/src/components/resize-observer/resize-observer.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 
 describe('<wa-resize-observer>', () => {
   for (const fixture of fixtures) {
diff --git a/src/components/resize-observer/resize-observer.ts b/src/components/resize-observer/resize-observer.ts
index 22cc27b1c..40c17d2b3 100644
--- a/src/components/resize-observer/resize-observer.ts
+++ b/src/components/resize-observer/resize-observer.ts
@@ -1,9 +1,9 @@
-import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { WaResizeEvent } from '../../events/resize.js';
 import { watch } from '../../internal/watch.js';
-import styles from './resize-observer.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './resize-observer.css';
 
 /**
  * @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts
index f39d528ea..a90117d2a 100644
--- a/src/components/select/select.test.ts
+++ b/src/components/select/select.test.ts
@@ -1,11 +1,11 @@
 import { aTimeout, expect, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import { html } from 'lit';
+import sinon from 'sinon';
 import { clickOnElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
-import { sendKeys } from '@web/test-runner-commands';
 import { serialize } from '../../utilities/form.js';
-import sinon from 'sinon';
 import type WaOption from '../option/option.js';
 import type WaSelect from './select.js';
 
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 261b5c367..dd0b9aa0d 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -1,14 +1,7 @@
-import '../icon/icon.js';
-import '../popup/popup.js';
-import '../tag/tag.js';
-import { animateWithClass } from '../../internal/animate.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { HasSlotController } from '../../internal/slot.js';
+import type { TemplateResult } from 'lit';
 import { html, isServer } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
-import { RequiredValidator } from '../../internal/validators/required-validator.js';
-import { scrollIntoView } from '../../internal/scroll.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { WaAfterHideEvent } from '../../events/after-hide.js';
 import { WaAfterShowEvent } from '../../events/after-show.js';
@@ -18,16 +11,23 @@ import { WaClearEvent } from '../../events/clear.js';
 import { WaFocusEvent } from '../../events/focus.js';
 import { WaHideEvent } from '../../events/hide.js';
 import { WaInputEvent } from '../../events/input.js';
-import { waitForEvent } from '../../internal/event.js';
+import type { WaRemoveEvent } from '../../events/remove.js';
 import { WaShowEvent } from '../../events/show.js';
+import { animateWithClass } from '../../internal/animate.js';
+import { waitForEvent } from '../../internal/event.js';
+import { scrollIntoView } from '../../internal/scroll.js';
+import { HasSlotController } from '../../internal/slot.js';
+import { RequiredValidator } from '../../internal/validators/required-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
-import styles from './select.css';
-import type { TemplateResult } from 'lit';
-import type { WaRemoveEvent } from '../../events/remove.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import '../icon/icon.js';
 import type WaOption from '../option/option.js';
+import '../popup/popup.js';
 import type WaPopup from '../popup/popup.js';
+import '../tag/tag.js';
+import styles from './select.css';
 
 /**
  * @summary Selects allow you to choose items from a menu of predefined options.
diff --git a/src/components/skeleton/skeleton.test.ts b/src/components/skeleton/skeleton.test.ts
index a6e08cd27..3dfb8ad6b 100644
--- a/src/components/skeleton/skeleton.test.ts
+++ b/src/components/skeleton/skeleton.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaSkeleton from './skeleton.js';
 
 describe('<wa-skeleton>', () => {
diff --git a/src/components/skeleton/skeleton.ts b/src/components/skeleton/skeleton.ts
index 0c3febaf5..851d9f77a 100644
--- a/src/components/skeleton/skeleton.ts
+++ b/src/components/skeleton/skeleton.ts
@@ -1,8 +1,8 @@
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
-import styles from './skeleton.css';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './skeleton.css';
 
 /**
  * @summary Skeletons are used to provide a visual representation of where content will eventually be drawn.
diff --git a/src/components/spinner/spinner.test.ts b/src/components/spinner/spinner.test.ts
index acae65ea0..f9dd7bd46 100644
--- a/src/components/spinner/spinner.test.ts
+++ b/src/components/spinner/spinner.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaSpinner from './spinner.js';
 
 describe('<wa-spinner>', () => {
diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts
index b49f6a038..3ef6fed90 100644
--- a/src/components/spinner/spinner.ts
+++ b/src/components/spinner/spinner.ts
@@ -1,8 +1,8 @@
-import { customElement } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import styles from './spinner.css';
-import WebAwesomeElement from '../../internal/webawesome-element.js';
 
 /**
  * @summary Spinners are used to show the progress of an indeterminate operation.
diff --git a/src/components/split-panel/split-panel.test.ts b/src/components/split-panel/split-panel.test.ts
index 67bc82e72..802501ac7 100644
--- a/src/components/split-panel/split-panel.test.ts
+++ b/src/components/split-panel/split-panel.test.ts
@@ -1,9 +1,9 @@
-import { dragElement } from '../../internal/test.js';
 import { expect, oneEvent } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
-import { queryByTestId } from '../../internal/test/data-testid-helpers.js';
 import { resetMouse } from '@web/test-runner-commands';
+import { html } from 'lit';
+import { dragElement } from '../../internal/test.js';
+import { queryByTestId } from '../../internal/test/data-testid-helpers.js';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaSplitPanel from './split-panel.js';
 
 const DIVIDER_WIDTH_IN_PX = 4;
diff --git a/src/components/split-panel/split-panel.ts b/src/components/split-panel/split-panel.ts
index bb0e2f4c8..4b80d64c7 100644
--- a/src/components/split-panel/split-panel.ts
+++ b/src/components/split-panel/split-panel.ts
@@ -1,13 +1,13 @@
-import { clamp } from '../../internal/math.js';
-import { customElement, property, query } from 'lit/decorators.js';
-import { drag } from '../../internal/drag.js';
 import { html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { LocalizeController } from '../../utilities/localize.js';
 import { WaRepositionEvent } from '../../events/reposition.js';
+import { drag } from '../../internal/drag.js';
+import { clamp } from '../../internal/math.js';
 import { watch } from '../../internal/watch.js';
-import styles from './split-panel.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import styles from './split-panel.css';
 
 /**
  * @summary Split panels display two adjacent panels, allowing the user to reposition them.
diff --git a/src/components/switch/switch.test.ts b/src/components/switch/switch.test.ts
index e7c791873..ab923f904 100644
--- a/src/components/switch/switch.test.ts
+++ b/src/components/switch/switch.test.ts
@@ -1,9 +1,9 @@
 import { aTimeout, expect, oneEvent, waitUntil } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
-import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import { sendKeys } from '@web/test-runner-commands';
+import { html } from 'lit';
 import sinon from 'sinon';
+import { fixtures } from '../../internal/test/fixture.js';
+import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import type WaSwitch from './switch.js';
 
 describe('<wa-switch>', () => {
diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts
index 46618fde2..5f607a933 100644
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -1,19 +1,19 @@
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { HasSlotController } from '../../internal/slot.js';
+import type { PropertyValues } from 'lit';
 import { html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { WaBlurEvent } from '../../events/blur.js';
 import { WaChangeEvent } from '../../events/change.js';
 import { WaFocusEvent } from '../../events/focus.js';
 import { WaInputEvent } from '../../events/input.js';
+import { HasSlotController } from '../../internal/slot.js';
+import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import styles from './switch.css';
-import type { PropertyValues } from 'lit';
 
 /**
  * @summary Switches allow the user to toggle an option on or off.
diff --git a/src/components/tab-group/tab-group.test.ts b/src/components/tab-group/tab-group.test.ts
index f88f07540..ed90459ed 100644
--- a/src/components/tab-group/tab-group.test.ts
+++ b/src/components/tab-group/tab-group.test.ts
@@ -1,16 +1,16 @@
 import { aTimeout, elementUpdated, expect, oneEvent, waitUntil } from '@open-wc/testing';
-import { clickOnElement } from '../../internal/test.js';
-import { clientFixture, fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
-import { isElementVisibleFromOverflow } from '../../internal/test/element-visible-overflow.js';
-import { queryByTestId } from '../../internal/test/data-testid-helpers.js';
 import { sendKeys } from '@web/test-runner-commands';
-import { waitForScrollingToEnd } from '../../internal/test/wait-for-scrolling.js';
 import type { HTMLTemplateResult } from 'lit';
+import { html } from 'lit';
 import type { WaTabShowEvent } from '../../events/tab-show.js';
+import { clickOnElement } from '../../internal/test.js';
+import { queryByTestId } from '../../internal/test/data-testid-helpers.js';
+import { isElementVisibleFromOverflow } from '../../internal/test/element-visible-overflow.js';
+import { clientFixture, fixtures } from '../../internal/test/fixture.js';
+import { waitForScrollingToEnd } from '../../internal/test/wait-for-scrolling.js';
+import type WaTabPanel from '../tab-panel/tab-panel.js';
 import type WaTab from '../tab/tab.js';
 import type WaTabGroup from './tab-group.js';
-import type WaTabPanel from '../tab-panel/tab-panel.js';
 
 interface ClientRectangles {
   body?: DOMRect;
diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index 8118322d6..984b0e3f0 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -1,18 +1,18 @@
-import '../icon-button/icon-button.js';
-import '../tab-panel/tab-panel.js';
-import '../tab/tab.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
-import { scrollIntoView } from '../../internal/scroll.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { WaTabHideEvent } from '../../events/tab-hide.js';
 import { WaTabShowEvent } from '../../events/tab-show.js';
+import { scrollIntoView } from '../../internal/scroll.js';
 import { watch } from '../../internal/watch.js';
-import styles from './tab-group.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import type WaTab from '../tab/tab.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import '../icon-button/icon-button.js';
+import '../tab-panel/tab-panel.js';
 import type WaTabPanel from '../tab-panel/tab-panel.js';
+import '../tab/tab.js';
+import type WaTab from '../tab/tab.js';
+import styles from './tab-group.css';
 
 /**
  * @summary Tab groups organize content into a container that shows one section at a time.
diff --git a/src/components/tab-panel/tab-panel.test.ts b/src/components/tab-panel/tab-panel.test.ts
index 029a0e1fa..e3f888dae 100644
--- a/src/components/tab-panel/tab-panel.test.ts
+++ b/src/components/tab-panel/tab-panel.test.ts
@@ -1,6 +1,6 @@
 import { aTimeout, expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaTabPanel from './tab-panel.js';
 
 describe('<wa-tab-panel>', () => {
diff --git a/src/components/tab-panel/tab-panel.ts b/src/components/tab-panel/tab-panel.ts
index 6ccd557ff..ceeb00b07 100644
--- a/src/components/tab-panel/tab-panel.ts
+++ b/src/components/tab-panel/tab-panel.ts
@@ -1,9 +1,9 @@
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { watch } from '../../internal/watch.js';
-import styles from './tab-panel.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './tab-panel.css';
 
 let id = 0;
 
diff --git a/src/components/tab/tab.test.ts b/src/components/tab/tab.test.ts
index a52e14757..d17142683 100644
--- a/src/components/tab/tab.test.ts
+++ b/src/components/tab/tab.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaTab from './tab.js';
 
 describe('<wa-tab>', () => {
diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts
index 3a3297450..e6745be26 100644
--- a/src/components/tab/tab.ts
+++ b/src/components/tab/tab.ts
@@ -1,9 +1,9 @@
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { watch } from '../../internal/watch.js';
-import styles from './tab.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './tab.css';
 
 let id = 0;
 
diff --git a/src/components/tag/tag.test.ts b/src/components/tag/tag.test.ts
index 166dded0c..01f4c823b 100644
--- a/src/components/tag/tag.test.ts
+++ b/src/components/tag/tag.test.ts
@@ -1,7 +1,7 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
 import sinon from 'sinon';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaTag from './tag.js';
 
 describe('<wa-tag>', () => {
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index ae1d43ad0..b7bde8f27 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -1,11 +1,11 @@
-import '../icon-button/icon-button.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { WaRemoveEvent } from '../../events/remove.js';
-import styles from './tag.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import '../icon-button/icon-button.js';
+import styles from './tag.css';
 
 /**
  * @summary Tags are used as labels to organize things or to indicate a selection.
diff --git a/src/components/textarea/textarea.test.ts b/src/components/textarea/textarea.test.ts
index 5277fa399..4b794c0f5 100644
--- a/src/components/textarea/textarea.test.ts
+++ b/src/components/textarea/textarea.test.ts
@@ -1,10 +1,10 @@
 import { expect, oneEvent, waitUntil } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
-import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import { sendKeys } from '@web/test-runner-commands';
-import { serialize } from '../../utilities/form.js';
+import { html } from 'lit';
 import sinon from 'sinon';
+import { fixtures } from '../../internal/test/fixture.js';
+import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
+import { serialize } from '../../utilities/form.js';
 import type WaTextarea from './textarea.js';
 
 describe('<wa-textarea>', () => {
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index 84a1d58f8..3ce1b119d 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -1,14 +1,14 @@
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { HasSlotController } from '../../internal/slot.js';
 import { html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { WaBlurEvent } from '../../events/blur.js';
 import { WaChangeEvent } from '../../events/change.js';
 import { WaFocusEvent } from '../../events/focus.js';
 import { WaInputEvent } from '../../events/input.js';
+import { HasSlotController } from '../../internal/slot.js';
+import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
diff --git a/src/components/tooltip/tooltip.test.ts b/src/components/tooltip/tooltip.test.ts
index e146ab31e..4978e03ca 100644
--- a/src/components/tooltip/tooltip.test.ts
+++ b/src/components/tooltip/tooltip.test.ts
@@ -1,7 +1,7 @@
 import { expect, waitUntil } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
 import sinon from 'sinon';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaTooltip from './tooltip.js';
 
 describe('<wa-tooltip>', () => {
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
index e0fa7af2a..294f262e9 100644
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -1,17 +1,17 @@
-import { animateWithClass } from '../../internal/animate.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
-import { uniqueId } from '../../internal/math.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { WaAfterHideEvent } from '../../events/after-hide.js';
 import { WaAfterShowEvent } from '../../events/after-show.js';
 import { WaHideEvent } from '../../events/hide.js';
-import { waitForEvent } from '../../internal/event.js';
 import { WaShowEvent } from '../../events/show.js';
+import { animateWithClass } from '../../internal/animate.js';
+import { waitForEvent } from '../../internal/event.js';
+import { uniqueId } from '../../internal/math.js';
 import { watch } from '../../internal/watch.js';
-import styles from './tooltip.css';
-import WaPopup from '../popup/popup.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import WaPopup from '../popup/popup.js';
+import styles from './tooltip.css';
 
 /**
  * @summary Tooltips display additional information based on a specific action.
diff --git a/src/components/tree-item/tree-item.test.ts b/src/components/tree-item/tree-item.test.ts
index a9cb0ee9e..76a0ee339 100644
--- a/src/components/tree-item/tree-item.test.ts
+++ b/src/components/tree-item/tree-item.test.ts
@@ -1,7 +1,7 @@
 import { expect, oneEvent, waitUntil } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
 import sinon from 'sinon';
+import { fixtures } from '../../internal/test/fixture.js';
 import type WaTreeItem from './tree-item.js';
 
 describe('<wa-tree-item>', () => {
diff --git a/src/components/tree-item/tree-item.ts b/src/components/tree-item/tree-item.ts
index 5191d6482..f8345e829 100644
--- a/src/components/tree-item/tree-item.ts
+++ b/src/components/tree-item/tree-item.ts
@@ -1,23 +1,23 @@
-import '../checkbox/checkbox.js';
-import '../icon/icon.js';
-import '../spinner/spinner.js';
-import { animate, parseDuration } from '../../internal/animate.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import type { PropertyValueMap } from 'lit';
 import { html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { live } from 'lit/directives/live.js';
-import { LocalizeController } from '../../utilities/localize.js';
+import { when } from 'lit/directives/when.js';
 import { WaAfterCollapseEvent } from '../../events/after-collapse.js';
 import { WaAfterExpandEvent } from '../../events/after-expand.js';
 import { WaCollapseEvent } from '../../events/collapse.js';
 import { WaExpandEvent } from '../../events/expand.js';
 import { WaLazyChangeEvent } from '../../events/lazy-change.js';
 import { WaLazyLoadEvent } from '../../events/lazy-load.js';
+import { animate, parseDuration } from '../../internal/animate.js';
 import { watch } from '../../internal/watch.js';
-import { when } from 'lit/directives/when.js';
-import styles from './tree-item.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import type { PropertyValueMap } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
+import '../checkbox/checkbox.js';
+import '../icon/icon.js';
+import '../spinner/spinner.js';
+import styles from './tree-item.css';
 
 /**
  * @summary A tree item serves as a hierarchical node that lives inside a [tree](/docs/components/tree).
diff --git a/src/components/tree/tree.test.ts b/src/components/tree/tree.test.ts
index 6c88285e2..cb9f8e46f 100644
--- a/src/components/tree/tree.test.ts
+++ b/src/components/tree/tree.test.ts
@@ -1,11 +1,11 @@
 import { aTimeout, expect, triggerBlurFor, triggerFocusFor } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import { html } from 'lit';
+import sinon from 'sinon';
 import { clickOnElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
-import { html } from 'lit';
-import { sendKeys } from '@web/test-runner-commands';
-import sinon from 'sinon';
-import type WaTree from './tree.js';
 import type WaTreeItem from '../tree-item/tree-item.js';
+import type WaTree from './tree.js';
 
 describe('<wa-tree>', () => {
   let el: WaTree;
diff --git a/src/components/tree/tree.ts b/src/components/tree/tree.ts
index d4dac8a9d..7ee550030 100644
--- a/src/components/tree/tree.ts
+++ b/src/components/tree/tree.ts
@@ -1,12 +1,12 @@
-import { clamp } from '../../internal/math.js';
-import { customElement, property, query } from 'lit/decorators.js';
 import { html, isServer } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { WaSelectionChangeEvent } from '../../events/selection-change.js';
+import { clamp } from '../../internal/math.js';
 import { watch } from '../../internal/watch.js';
-import styles from './tree.css';
-import WaTreeItem from '../tree-item/tree-item.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import WaTreeItem from '../tree-item/tree-item.js';
+import styles from './tree.css';
 
 function syncCheckboxes(changedTreeItem: WaTreeItem, initialSync = false) {
   function syncParentItem(treeItem: WaTreeItem) {
diff --git a/src/components/viewport-demo/viewport-demo.ts b/src/components/viewport-demo/viewport-demo.ts
index 10b863eea..6ce9be492 100644
--- a/src/components/viewport-demo/viewport-demo.ts
+++ b/src/components/viewport-demo/viewport-demo.ts
@@ -1,12 +1,12 @@
-import '../icon-button/icon-button.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { getComputedStyle } from '../../internal/computedStyle.js';
 import { html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { getComputedStyle } from '../../internal/computedStyle.js';
 import { watch } from '../../internal/watch.js';
-import styles from './viewport-demo.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import '../icon-button/icon-button.js';
+import styles from './viewport-demo.css';
 
 export interface ViewportDimensions {
   width: number;
diff --git a/src/components/visually-hidden/visually-hidden.test.ts b/src/components/visually-hidden/visually-hidden.test.ts
index 09cc235b4..27cfda2eb 100644
--- a/src/components/visually-hidden/visually-hidden.test.ts
+++ b/src/components/visually-hidden/visually-hidden.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
 
 describe('<wa-visually-hidden>', () => {
   for (const fixture of fixtures) {
diff --git a/src/components/visually-hidden/visually-hidden.ts b/src/components/visually-hidden/visually-hidden.ts
index 2a7c65ed1..a0adb9ce7 100644
--- a/src/components/visually-hidden/visually-hidden.ts
+++ b/src/components/visually-hidden/visually-hidden.ts
@@ -1,7 +1,7 @@
-import { customElement } from 'lit/decorators.js';
 import { html } from 'lit';
-import styles from './visually-hidden.css';
+import { customElement } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './visually-hidden.css';
 
 /**
  * @summary The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
diff --git a/src/internal/default-value.ts b/src/internal/default-value.ts
index d1bf20b22..e2f7181c8 100644
--- a/src/internal/default-value.ts
+++ b/src/internal/default-value.ts
@@ -14,8 +14,8 @@
 //  @defaultValue('checked') defaultChecked = false;
 //
 
-import { defaultConverter } from 'lit';
 import type { ReactiveElement } from 'lit';
+import { defaultConverter } from 'lit';
 
 export const defaultValue =
   (propertyName = 'value') =>
diff --git a/src/internal/form.test.ts b/src/internal/form.test.ts
index 48b4e2ab4..e93ba1d88 100644
--- a/src/internal/form.test.ts
+++ b/src/internal/form.test.ts
@@ -1,8 +1,8 @@
 import { aTimeout, expect, waitUntil } from '@open-wc/testing';
-import { clickOnElement } from './test.js';
-import { fixtures } from './test/fixture.js';
 import { html } from 'lit';
 import sinon from 'sinon';
+import { clickOnElement } from './test.js';
+import { fixtures } from './test/fixture.js';
 
 describe('Form tests', () => {
   for (const fixture of fixtures) {
diff --git a/src/internal/test/fixture.ts b/src/internal/test/fixture.ts
index 39378d04b..e5f388c26 100644
--- a/src/internal/test/fixture.ts
+++ b/src/internal/test/fixture.ts
@@ -3,8 +3,8 @@
  * These fixtures will also auto-load all of our components.
  */
 
+import { ssrFixture as LitSSRFixture, cleanupFixtures } from '@lit-labs/testing/fixtures.js';
 import { aTimeout, expect, fixture } from '@open-wc/testing';
-import { cleanupFixtures, ssrFixture as LitSSRFixture } from '@lit-labs/testing/fixtures.js';
 import type { LitElement, TemplateResult } from 'lit';
 import type WebAwesomeElement from '../webawesome-element.js';
 
diff --git a/src/internal/test/form-control-base-tests.ts b/src/internal/test/form-control-base-tests.ts
index da567d99f..f2682b07d 100644
--- a/src/internal/test/form-control-base-tests.ts
+++ b/src/internal/test/form-control-base-tests.ts
@@ -1,10 +1,10 @@
 import { aTimeout, expect } from '@open-wc/testing';
-import { clickOnElement } from '../test.js';
-import { fixtures } from './fixture.js';
 import { html, type TemplateResult } from 'lit';
 import { html as staticHTML, unsafeStatic } from 'lit/static-html.js';
-import type { clientFixture, hydratedFixture } from './fixture.js';
+import { clickOnElement } from '../test.js';
 import type { WebAwesomeFormControl } from '../webawesome-element.js';
+import type { clientFixture, hydratedFixture } from './fixture.js';
+import { fixtures } from './fixture.js';
 
 type CreateControlFn = () => Promise<WebAwesomeFormControl>;
 
diff --git a/src/internal/webawesome-element.ts b/src/internal/webawesome-element.ts
index e0c0bbd30..adc3edaef 100644
--- a/src/internal/webawesome-element.ts
+++ b/src/internal/webawesome-element.ts
@@ -1,9 +1,9 @@
-import { CustomErrorValidator } from './validators/custom-error-validator.js';
-import { isServer, LitElement, unsafeCSS } from 'lit';
+import type { CSSResult, CSSResultGroup, PropertyValues } from 'lit';
+import { LitElement, isServer, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { WaInvalidEvent } from '../events/invalid.js';
 import componentStyles from '../styles/shadow/component.css';
-import type { CSSResult, CSSResultGroup, PropertyValues } from 'lit';
+import { CustomErrorValidator } from './validators/custom-error-validator.js';
 
 export default class WebAwesomeElement extends LitElement {
   // Make localization attributes reactive
diff --git a/src/translations/da.ts b/src/translations/da.ts
index 3925e68d5..813295cc7 100644
--- a/src/translations/da.ts
+++ b/src/translations/da.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'da',
diff --git a/src/translations/de-ch.ts b/src/translations/de-ch.ts
index 8990b7a7f..1993b80f7 100644
--- a/src/translations/de-ch.ts
+++ b/src/translations/de-ch.ts
@@ -1,6 +1,6 @@
+import type { Translation } from '../utilities/localize.js';
 import { registerTranslation } from '../utilities/localize.js';
 import baseTranslation from './de.js';
-import type { Translation } from '../utilities/localize.js';
 
 const translation: Translation = {
   ...baseTranslation,
diff --git a/src/translations/de.ts b/src/translations/de.ts
index 21b1e0697..c2b6dcc70 100644
--- a/src/translations/de.ts
+++ b/src/translations/de.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'de',
diff --git a/src/translations/en-gb.ts b/src/translations/en-gb.ts
index 196984e45..e82783bff 100644
--- a/src/translations/en-gb.ts
+++ b/src/translations/en-gb.ts
@@ -1,6 +1,6 @@
+import type { Translation } from '../utilities/localize.js';
 import { registerTranslation } from '../utilities/localize.js';
 import baseTranslation from './en.js';
-import type { Translation } from '../utilities/localize.js';
 
 const translation: Translation = {
   ...baseTranslation,
diff --git a/src/translations/es.ts b/src/translations/es.ts
index 4e9489673..cb5aaede7 100644
--- a/src/translations/es.ts
+++ b/src/translations/es.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'es',
diff --git a/src/translations/fa.ts b/src/translations/fa.ts
index 6b70bddbb..b19f53815 100644
--- a/src/translations/fa.ts
+++ b/src/translations/fa.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'fa',
diff --git a/src/translations/fr.ts b/src/translations/fr.ts
index e1386c976..9606c6a9d 100644
--- a/src/translations/fr.ts
+++ b/src/translations/fr.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'fr',
diff --git a/src/translations/he.ts b/src/translations/he.ts
index 91d0f2c99..18668deec 100644
--- a/src/translations/he.ts
+++ b/src/translations/he.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'he',
diff --git a/src/translations/hu.ts b/src/translations/hu.ts
index 8272af856..e2e142a02 100644
--- a/src/translations/hu.ts
+++ b/src/translations/hu.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'hu',
diff --git a/src/translations/ja.ts b/src/translations/ja.ts
index 62ba4ed6c..359fd0376 100644
--- a/src/translations/ja.ts
+++ b/src/translations/ja.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'ja',
diff --git a/src/translations/nb.ts b/src/translations/nb.ts
index bf3c06dbc..58917d113 100644
--- a/src/translations/nb.ts
+++ b/src/translations/nb.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'nb',
diff --git a/src/translations/nl.ts b/src/translations/nl.ts
index 6357fa7b2..a0cb98205 100644
--- a/src/translations/nl.ts
+++ b/src/translations/nl.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'nl',
diff --git a/src/translations/nn.ts b/src/translations/nn.ts
index cbd897cf3..bd830f471 100644
--- a/src/translations/nn.ts
+++ b/src/translations/nn.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'nn',
diff --git a/src/translations/pl.ts b/src/translations/pl.ts
index b22913c66..683ad8b49 100644
--- a/src/translations/pl.ts
+++ b/src/translations/pl.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'pl',
diff --git a/src/translations/pt.ts b/src/translations/pt.ts
index c093efac4..010d3b173 100644
--- a/src/translations/pt.ts
+++ b/src/translations/pt.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'pt',
diff --git a/src/translations/ru.ts b/src/translations/ru.ts
index 87eae99fb..78a0e39e0 100644
--- a/src/translations/ru.ts
+++ b/src/translations/ru.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'ru',
diff --git a/src/translations/sv.ts b/src/translations/sv.ts
index e9c9f546f..a345aa73b 100644
--- a/src/translations/sv.ts
+++ b/src/translations/sv.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'sv',
diff --git a/src/translations/tr.ts b/src/translations/tr.ts
index 5635963a7..3c9f59b59 100644
--- a/src/translations/tr.ts
+++ b/src/translations/tr.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'tr',
diff --git a/src/translations/uk.ts b/src/translations/uk.ts
index 5a106d53f..16620ef3b 100644
--- a/src/translations/uk.ts
+++ b/src/translations/uk.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'uk',
diff --git a/src/translations/zh-cn.ts b/src/translations/zh-cn.ts
index a77883810..f6bfe7809 100644
--- a/src/translations/zh-cn.ts
+++ b/src/translations/zh-cn.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'zh-cn',
diff --git a/src/translations/zh-tw.ts b/src/translations/zh-tw.ts
index dea65fa3d..d05881597 100644
--- a/src/translations/zh-tw.ts
+++ b/src/translations/zh-tw.ts
@@ -1,5 +1,5 @@
-import { registerTranslation } from '../utilities/localize.js';
 import type { Translation } from '../utilities/localize.js';
+import { registerTranslation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'zh-tw',
diff --git a/src/utilities/localize.ts b/src/utilities/localize.ts
index ccaf4e50d..91fe83912 100644
--- a/src/utilities/localize.ts
+++ b/src/utilities/localize.ts
@@ -1,6 +1,6 @@
+import type { Translation as DefaultTranslation } from '@shoelace-style/localize';
 import { LocalizeController as DefaultLocalizationController, registerTranslation } from '@shoelace-style/localize';
 import en from '../translations/en.js'; // Register English as the default/fallback language
-import type { Translation as DefaultTranslation } from '@shoelace-style/localize';
 
 // Extend the controller and apply our own translation interface for better typings
 export class LocalizeController extends DefaultLocalizationController<Translation> {
diff --git a/src/webawesome.ts b/src/webawesome.ts
index f574d3359..ae2a4bee2 100644
--- a/src/webawesome.ts
+++ b/src/webawesome.ts
@@ -1,7 +1,7 @@
-export { getBasePath, setBasePath, getKitCode, setKitCode } from './utilities/base-path.js';
 export { registerIconLibrary, unregisterIconLibrary } from './components/icon/library.js';
-export { registerTranslation } from './utilities/localize.js';
 export { discover, startLoader, stopLoader } from './utilities/autoloader.js';
+export { getBasePath, getKitCode, setBasePath, setKitCode } from './utilities/base-path.js';
+export { registerTranslation } from './utilities/localize.js';
 
 // Utilities
 export * from './utilities/animation.js';
diff --git a/web-test-runner.config.js b/web-test-runner.config.js
index d4b4ae869..d90213bdf 100644
--- a/web-test-runner.config.js
+++ b/web-test-runner.config.js
@@ -1,11 +1,11 @@
-import * as os from 'os';
-import * as process from 'process';
-import { esbuildPlugin } from '@web/dev-server-esbuild';
-import { getAllComponents } from './scripts/shared.js';
-import { globbySync } from 'globby';
 import { litSsrPlugin } from '@lit-labs/testing/web-test-runner-ssr-plugin.js';
+import { esbuildPlugin } from '@web/dev-server-esbuild';
 import { playwrightLauncher } from '@web/test-runner-playwright';
 import { readFileSync } from 'fs';
+import { globbySync } from 'globby';
+import * as os from 'os';
+import * as process from 'process';
+import { getAllComponents } from './scripts/shared.js';
 
 // Get a list of all Web Awesome component imports for the test runner
 const metadata = JSON.parse(readFileSync('./dist/custom-elements.json'), 'utf8');