Run Prettier on repo

Turns out `prettier-plugin-organize-imports` sorts imports differently than the old one so this will prevent spreading the change across multiple commits whenever we touch a file (and potentially introducing conflicts)

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;

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';
 

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));
 

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), {

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;

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, ' ');

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');

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,

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';

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));
 

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>', () => {

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.

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>', () => {

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).

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

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.

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

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.

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>', () => {

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.

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

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.

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>', () => {

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.

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'];

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';
 
 /**

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>', () => {

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.

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>', () => {

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.

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) {

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).

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>', () => {

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.

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;

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>', () => {

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
         })}
       >

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';

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>', () => {

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;

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

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.

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>', () => {

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.

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>', () => {

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.

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>', () => {

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.

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>', () => {

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.

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>', () => {

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.

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>', () => {

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.

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>', () => {

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.

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>', () => {

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.

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';

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';
 
 /**

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';

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';
 

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;

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>', () => {

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.

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 = {

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.

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>', () => {

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.

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>', () => {

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.

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 {

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>', () => {

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.

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>', () => {

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;

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) {

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).

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>', () => {

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).

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) {

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';

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>', () => {

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;

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>', () => {

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.

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>', () => {

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.

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 => {

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;
 

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) {

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';

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';
 

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.

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) {

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';
 
 /**

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>', () => {

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>
     `;
   }

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>', () => {

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.