Allow Prettier default for trailing commas, run Prettier on repo

per convo with @claviska

custom-elements-manifest.js

@@ -28,7 +28,7 @@ export default {
       name: 'wa-package-data',
       packageLinkPhase({ customElementsManifest }) {
         customElementsManifest.package = { name, description, version, author, homepage, license };
-      }
+      },
     },
 
     // Parse custom jsDoc tags
@@ -83,13 +83,13 @@ export default {
                   classDoc[t.tag].push({
                     name: t.name,
                     description: t.description,
-                    type: t.type || undefined
+                    type: t.type || undefined,
                   });
               }
             });
           }
         }
-      }
+      },
     },
 
     {
@@ -109,7 +109,7 @@ export default {
             }
           }
         }
-      }
+      },
     },
 
     {
@@ -127,7 +127,7 @@ export default {
           //
           const terms = [
             { from: /^src\//, to: '' }, // Strip the src/ prefix
-            { from: /\.(t|j)sx?$/, to: '.js' } // Convert .ts to .js
+            { from: /\.(t|j)sx?$/, to: '.js' }, // Convert .ts to .js
           ];
 
           mod.path = replace(mod.path, terms);
@@ -146,7 +146,7 @@ export default {
             }
           }
         });
-      }
+      },
     },
 
     // Generate custom VS Code data
@@ -156,9 +156,9 @@ export default {
       referencesTemplate: (_, tag) => [
         {
           name: 'Documentation',
-          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`
-        }
-      ]
+          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`,
+        },
+      ],
     }),
 
     customElementJetBrainsPlugin({
@@ -168,10 +168,10 @@ export default {
       referencesTemplate: (_, tag) => {
         return {
           name: 'Documentation',
-          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`
+          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`,
         };
-      }
-    })
+      },
+    }),
 
     //
     // TODO - figure out why this broke when events were updated
@@ -181,5 +181,5 @@ export default {
     //   fileName: 'index.d.ts',
     //   componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.js`
     // })
-  ]
+  ],
 };

docs/.eleventy.js

@@ -71,8 +71,8 @@ export default function (eleventyConfig) {
       selector: 'h2, h3',
       ifEmpty: doc => {
         doc.querySelector('#outline')?.remove();
-      }
-    })
+      },
+    }),
   );
 
   // Add current link classes
@@ -93,19 +93,19 @@ export default function (eleventyConfig) {
       // Replace [issue:1234] with a link to the issue on GitHub
       {
         replace: /\[pr:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>'
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>',
       },
       // Replace [pr:1234] with a link to the pull request on GitHub
       {
         replace: /\[issue:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>'
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>',
       },
       // Replace [discuss:1234] with a link to the discussion on GitHub
       {
         replace: /\[discuss:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>'
-      }
-    ])
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>',
+      },
+    ]),
   );
 
   const omittedModules = [];
@@ -124,7 +124,7 @@ export default function (eleventyConfig) {
 
   eleventyConfig.addPlugin(litPlugin, {
     mode: 'worker',
-    componentModules
+    componentModules,
   });
 
   // Build the search index
@@ -132,8 +132,8 @@ export default function (eleventyConfig) {
     searchPlugin({
       filename: '',
       selectorsToIgnore: ['code.example'],
-      getContent: doc => doc.querySelector('#content')?.textContent ?? ''
-    })
+      getContent: doc => doc.querySelector('#content')?.textContent ?? '',
+    }),
   );
 
   // Production-only plugins
@@ -149,8 +149,8 @@ export default function (eleventyConfig) {
     markdownTemplateEngine: 'njk',
     dir: {
       includes: '_includes',
-      layouts: '_layouts'
+      layouts: '_layouts',
     },
-    templateFormats: ['njk', 'md']
+    templateFormats: ['njk', 'md'],
   };
 }

docs/_data/componentList.js

@@ -36,7 +36,7 @@ const components = manifest.modules.flatMap(module => {
         slug: declaration.tagName.replace(/^wa-/, ''),
         methods,
         attributes,
-        properties
+        properties,
       };
     });
 });

docs/_data/componentsBy.js

@@ -6,7 +6,7 @@ const by = {
   event: {},
   method: {},
   cssPart: {},
-  cssProperty: {}
+  cssProperty: {},
 };
 
 function getAll(component, type) {

docs/_utils/anchor-headings.js

@@ -5,7 +5,7 @@ import { v4 as uuid } from 'uuid';
 function createId(text) {
   let slug = slugify(String(text), {
     remove: /[^\w|\s]/g,
-    lower: true
+    lower: true,
   });
 
   // ids must start with a letter
@@ -24,7 +24,7 @@ export function anchorHeadingsPlugin(options = {}) {
     container: 'body',
     headingSelector: 'h2, h3, h4, h5, h6',
     anchorLabel: 'Jump to heading',
-    ...options
+    ...options,
   };
 
   return function (eleventyConfig) {

docs/_utils/code-examples.js

@@ -53,7 +53,7 @@ const templates = {
     attributes = {
       open,
       include: `link[rel=stylesheet][href^='/dist/']`,
-      ...attributes
+      ...attributes,
     };
 
     const attributesString = Object.entries(attributes)
@@ -93,7 +93,7 @@ const templates = {
         ${pre.outerHTML}
       </wa-code-demo>
     `;
-  }
+  },
 };
 
 /**
@@ -107,13 +107,13 @@ export function codeExamplesPlugin(eleventyConfig, options = {}) {
         outputPathIndex === 1 && // is first
         code.textContent.length < 500
       ); // is short
-    }
+    },
   };
   options = { ...defaultOptions, ...options };
 
   const stats = {
     inputPaths: {},
-    outputPaths: {}
+    outputPaths: {},
   };
 
   eleventyConfig.addTransform('code-examples', function (content) {
@@ -144,7 +144,7 @@ export function codeExamplesPlugin(eleventyConfig, options = {}) {
         edit: true,
         buttons: true,
         new: true, // comment this line to default back to the old demos
-        attributes: {}
+        attributes: {},
       };
 
       for (const prop of ['new', 'open', 'buttons', 'edit']) {
@@ -174,7 +174,7 @@ export function codeExamplesPlugin(eleventyConfig, options = {}) {
           localOptions.open = localOptions.defaultOpen(code, {
             pre,
             inputPathIndex: stats.inputPaths[inputPath],
-            outputPathIndex: stats.outputPaths[outputPath]
+            outputPathIndex: stats.outputPaths[outputPath],
           });
         }
       }

docs/_utils/copy-code.js

@@ -6,7 +6,7 @@ import { parse } from 'node-html-parser';
 export function copyCodePlugin(options = {}) {
   options = {
     container: 'body',
-    ...options
+    ...options,
   };
 
   return function (eleventyConfig) {

docs/_utils/current-link.js

@@ -28,7 +28,7 @@ export function currentLink(options = {}) {
   options = {
     container: 'body',
     className: 'current',
-    ...options
+    ...options,
   };
 
   return function (eleventyConfig) {

docs/_utils/format-code.js

@@ -11,7 +11,7 @@ import defaultOptions from '../../prettier.config.js';
 export async function formatCode(string, options) {
   return await format(string, {
     ...defaultOptions,
-    ...options
+    ...options,
   });
 }
 
@@ -21,7 +21,7 @@ export async function formatCode(string, options) {
 export function formatCodePlugin(options = {}) {
   options = {
     parser: 'html',
-    ...options
+    ...options,
   };
 
   return function (eleventyConfig) {

docs/_utils/highlight-code.js

@@ -40,7 +40,7 @@ export function highlightCode(code, language = 'plain') {
 export function highlightCodePlugin(options = {}) {
   options = {
     container: 'body',
-    ...options
+    ...options,
   };
 
   return function (eleventyConfig) {

docs/_utils/markdown.js

@@ -14,7 +14,7 @@ export const markdown = MarkdownIt({
   breaks: false,
   langPrefix: 'language-',
   linkify: false,
-  typographer: false
+  typographer: false,
 });
 
 markdown.use(markdownItIns);
@@ -34,7 +34,7 @@ markdown.use(markdownItMark);
         `;
       }
       return '</div></div>\n';
-    }
+    },
   });
 });
 
@@ -44,7 +44,7 @@ markdown.use(markdownItContainer, 'aside', {
       return `<aside>`;
     }
     return '</aside>\n';
-  }
+  },
 });
 
 markdown.use(markdownItContainer, 'details', {
@@ -55,9 +55,9 @@ markdown.use(markdownItContainer, 'details', {
       return `<details>\n<summary><span>${markdown.utils.escapeHtml(m[1])}</span></summary>\n`;
     }
     return '</details>\n';
-  }
+  },
 });
 
 markdown.use(markdownItAttrs, {
-  allowedAttributes: []
+  allowedAttributes: [],
 });

docs/_utils/outline.js

@@ -15,7 +15,7 @@ export function outlinePlugin(options = {}) {
     target: '.outline',
     selector: 'h2,h3',
     ifEmpty: () => null,
-    ...options
+    ...options,
   };
 
   return function (eleventyConfig) {

docs/_utils/remove-data-alpha-elements.js

@@ -6,7 +6,7 @@ import { parse } from 'node-html-parser';
 export function removeDataAlphaElements(options = {}) {
   options = {
     isAlpha: false,
-    ...options
+    ...options,
   };
 
   return function (eleventyConfig) {

docs/_utils/search.js

@@ -19,7 +19,7 @@ export function searchPlugin(options = {}) {
     getDescription: doc => doc.querySelector('meta[name="description"]')?.getAttribute('content') ?? '',
     getHeadings: doc => [...doc.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(heading => heading.textContent ?? ''),
     getContent: doc => doc.querySelector('body')?.textContent ?? '',
-    ...options
+    ...options,
   };
 
   return function (eleventyConfig) {
@@ -32,8 +32,8 @@ export function searchPlugin(options = {}) {
           noscript: false,
           style: false,
           pre: false,
-          code: false
-        }
+          code: false,
+        },
       });
 
       // Remove content that shouldn't be searchable to reduce the index size
@@ -46,7 +46,7 @@ export function searchPlugin(options = {}) {
         description: collapseWhitespace(options.getDescription(doc)),
         headings: options.getHeadings(doc).map(collapseWhitespace),
         content: collapseWhitespace(options.getContent(doc)),
-        url: this.page.url === '/' ? '/' : this.page.url.replace(/\/$/, '')
+        url: this.page.url === '/' ? '/' : this.page.url.replace(/\/$/, ''),
       });
 
       return content;

docs/assets/scripts/cheatsheet.js

@@ -13,7 +13,7 @@ const matchers = {
   regexp(textContent, query) {
     query.lastIndex = 0;
     return query.test(textContent);
-  }
+  },
 };
 
 matchers.iregexp = matchers.regexp; // i is baked into the query

docs/assets/scripts/code-examples.js

@@ -43,7 +43,7 @@ document.addEventListener('click', event => {
       js_pre_processor: 'none',
       html,
       css,
-      js
+      js,
     };
 
     const input = document.createElement('input');

docs/assets/scripts/hydration-errors.js

@@ -79,8 +79,8 @@
       diffViewer.appendChild(
         createDiff({
           serverHTML,
-          clientHTML
-        })
+          clientHTML,
+        }),
       );
     });
   }
@@ -88,7 +88,7 @@
   function createDiff({ serverHTML, clientHTML }) {
     const diff = diffLines(serverHTML, clientHTML, {
       ignoreWhitespace: false,
-      newLineIsToken: true
+      newLineIsToken: true,
     });
     const fragment = document.createDocumentFragment();
     for (var i = 0; i < diff.length; i++) {

docs/assets/scripts/preset-theme.js

@@ -11,7 +11,7 @@
     const newStylesheet = Object.assign(document.createElement('link'), {
       href: `/dist/styles/themes/${presetTheme}.css`,
       rel: 'preload',
-      as: 'style'
+      as: 'style',
     });
 
     newStylesheet.addEventListener(
@@ -23,7 +23,7 @@
           stylesheet.remove();
         });
       },
-      { once: true }
+      { once: true },
     );
 
     document.head.append(newStylesheet);

docs/assets/scripts/scroll.js

@@ -15,7 +15,7 @@ document.addEventListener('click', event => {
       event.preventDefault();
       window.scroll({
         top: target.offsetTop - headerHeight,
-        behavior: 'smooth'
+        behavior: 'smooth',
       });
       history.pushState(undefined, undefined, `#${id}`);
     }

docs/assets/scripts/search.js

@@ -9,7 +9,7 @@ const icons = {
   component: 'puzzle-piece',
   document: 'file',
   home: 'house',
-  theme: 'palette'
+  theme: 'palette',
 };
 let searchTimeout;
 
@@ -18,7 +18,7 @@ function getElements() {
   return {
     dialog: document.getElementById('site-search'),
     input: document.getElementById('site-search-input'),
-    results: document.getElementById('site-search-listbox')
+    results: document.getElementById('site-search-listbox'),
   };
 }
 

docs/assets/scripts/turbo.js

@@ -9,7 +9,7 @@ function saveScrollPosition() {
     if (element.id) {
       positions[element.id] = {
         top: element.scrollTop,
-        left: element.scrollLeft
+        left: element.scrollLeft,
       };
     } else {
       console.warn(`Can't save scroll position for elements without an id.`, el);

lint-staged.config.js

@@ -1,5 +1,5 @@
 export default {
   '*.{js,ts,json,html,xml,css,scss,sass,md}': 'cspell --no-must-find-files',
   'src/**/*.{js,ts}': 'eslint --max-warnings 0 --fix',
-  '*': 'prettier --write --ignore-unknown'
+  '*': 'prettier --write --ignore-unknown',
 };

prettier.config.js

@@ -13,10 +13,9 @@ const config = {
   semi: true,
   singleQuote: true,
   tabWidth: 2,
-  trailingComma: 'none',
   useTabs: false,
   organizeImportsSkipDestructiveCodeActions: true,
-  plugins: ['prettier-plugin-organize-imports']
+  plugins: ['prettier-plugin-organize-imports'],
 };
 
 export default config;

scripts/build.js

@@ -23,7 +23,7 @@ const packageData = JSON.parse(await readFile(join(rootDir, 'package.json'), 'ut
 const version = JSON.stringify(packageData.version.toString());
 let buildContexts = {
   bundledContext: {},
-  unbundledContext: {}
+  unbundledContext: {},
 };
 
 /**
@@ -112,15 +112,15 @@ async function generateStyles() {
       'themes/default.css',
       'forms.css',
       'utilities',
-      'utilities.css'
+      'utilities.css',
     ];
 
     await Promise.all(
       alphaStyles.map(file =>
         copy(join(rootDir, `src/styles/${file}`), join(cdnDir, `styles/${file}.css`), {
-          overwrite: true
-        })
-      )
+          overwrite: true,
+        }),
+      ),
     );
   } else {
     await copy(join(rootDir, 'src/styles'), join(cdnDir, 'styles'), { overwrite: true });
@@ -172,20 +172,20 @@ async function generateBundle() {
       // Translations
       ...(await globby('./src/translations/**/*.ts')),
       // React wrappers
-      ...(await globby('./src/react/**/*.ts'))
+      ...(await globby('./src/react/**/*.ts')),
     ],
     outdir: cdnDir,
     chunkNames: 'chunks/[name].[hash]',
     define: {
-      'process.env.NODE_ENV': '"production"' // required by Floating UI
+      'process.env.NODE_ENV': '"production"', // required by Floating UI
     },
     bundle: true,
     splitting: true,
     minify: false,
     plugins: [replace({ __WEBAWESOME_VERSION__: version }), litCssPlugin()],
     loader: {
-      '.css': 'text'
-    }
+      '.css': 'text',
+    },
   };
 
   const unbundledConfig = {
@@ -194,7 +194,7 @@ async function generateBundle() {
     treeShaking: true,
     // Don't inline libraries like Lit etc.
     packages: 'external',
-    outdir: distDir
+    outdir: distDir,
   };
 
   try {
@@ -297,8 +297,8 @@ if (isDeveloping) {
       server: {
         baseDir: siteDir,
         routes: {
-          '/dist/': './dist-cdn/'
-        }
+          '/dist/': './dist-cdn/',
+        },
       },
       callbacks: {
         ready: (_err, instance) => {
@@ -319,13 +319,13 @@ if (isDeveloping) {
 
             res.end();
           });
-        }
-      }
+        },
+      },
     },
     () => {
       spinner.succeed();
       console.log(`\nThe dev server is running at ${chalk.cyan(url)}\n`);
-    }
+    },
   );
 
   // Rebuild and reload when source files change

scripts/docs.js

@@ -5,7 +5,7 @@ import { docsDir, siteDir } from './utils.js';
 
 const elev = new Eleventy(docsDir, siteDir, {
   quietMode: true,
-  configPath: join(docsDir, '.eleventy.js')
+  configPath: join(docsDir, '.eleventy.js'),
 });
 
 // Cleanup

scripts/make-react.js

@@ -65,8 +65,8 @@ for await (const component of components) {
       export default reactWrapper
     `,
     Object.assign(prettierConfig, {
-      parser: 'babel-ts'
-    })
+      parser: 'babel-ts',
+    }),
   );
 
   index.push(`export { default as ${component.name} } from './${tagWithoutPrefix}/index.js';`);

scripts/plop/plopfile.js

@@ -26,30 +26,30 @@ export default function (plop) {
           }
 
           return true;
-        }
-      }
+        },
+      },
     ],
     actions: [
       {
         type: 'add',
         path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.ts',
-        templateFile: 'templates/component/component.hbs'
+        templateFile: 'templates/component/component.hbs',
       },
       {
         type: 'add',
         path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.styles.ts',
-        templateFile: 'templates/component/styles.hbs'
+        templateFile: 'templates/component/styles.hbs',
       },
       {
         type: 'add',
         path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.test.ts',
-        templateFile: 'templates/component/tests.hbs'
+        templateFile: 'templates/component/tests.hbs',
       },
       {
         type: 'add',
         path: '../../docs/docs/components/{{ tagWithoutPrefix tag }}.md',
-        templateFile: 'templates/component/docs.hbs'
-      }
-    ]
+        templateFile: 'templates/component/docs.hbs',
+      },
+    ],
   });
 }

src/components/animation/animation.test.ts

@@ -14,7 +14,7 @@ describe('<wa-animation>', () => {
     describe(`with "${fixture.type}" rendering`, () => {
       it('renders', async () => {
         const animationContainer = await fixture<WaAnimation>(
-          html`<wa-animation>${unsafeHTML(boxToAnimate)}</wa-animation>`
+          html`<wa-animation>${unsafeHTML(boxToAnimate)}</wa-animation>`,
         );
 
         expect(animationContainer).to.exist;
@@ -22,7 +22,7 @@ describe('<wa-animation>', () => {
 
       it('is accessible', async () => {
         const animationContainer = await fixture<WaAnimation>(
-          html`<wa-animation>${unsafeHTML(boxToAnimate)}</wa-animation>`
+          html`<wa-animation>${unsafeHTML(boxToAnimate)}</wa-animation>`,
         );
 
         await expect(animationContainer).to.be.accessible();
@@ -33,7 +33,7 @@ describe('<wa-animation>', () => {
           const animationContainer = await fixture<WaAnimation>(
             html`<wa-animation name="bounce" easing="ease-in-out" duration="10"
               >${unsafeHTML(boxToAnimate)}</wa-animation
-            >`
+            >`,
           );
           await aTimeout(0);
 
@@ -44,7 +44,7 @@ describe('<wa-animation>', () => {
           const animationContainer = await fixture<WaAnimation>(
             html`<wa-animation name="bounce" easing="ease-in-out" duration="10"
               >${unsafeHTML(boxToAnimate)}</wa-animation
-            >`
+            >`,
           );
 
           const startPromise = oneEvent(animationContainer, 'wa-start');
@@ -56,7 +56,9 @@ describe('<wa-animation>', () => {
 
       it('emits the correct event on animation end', async () => {
         const animationContainer = await fixture<WaAnimation>(
-          html`<wa-animation name="bounce" easing="ease-in-out" duration="1">${unsafeHTML(boxToAnimate)}</wa-animation>`
+          html`<wa-animation name="bounce" easing="ease-in-out" duration="1"
+            >${unsafeHTML(boxToAnimate)}</wa-animation
+          >`,
         );
 
         const endPromise = oneEvent(animationContainer, 'wa-finish');
@@ -69,7 +71,7 @@ describe('<wa-animation>', () => {
         const animationContainer = await fixture<WaAnimation>(
           html`<wa-animation name="bounce" easing="ease-in-out" duration="1000"
             >${unsafeHTML(boxToAnimate)}</wa-animation
-          >`
+          >`,
         );
 
         const endPromise = oneEvent(animationContainer, 'wa-finish');
@@ -84,7 +86,9 @@ describe('<wa-animation>', () => {
 
       it('can be cancelled', async () => {
         const animationContainer = await fixture<WaAnimation>(
-          html`<wa-animation name="bounce" easing="ease-in-out" duration="1">${unsafeHTML(boxToAnimate)}</wa-animation>`
+          html`<wa-animation name="bounce" easing="ease-in-out" duration="1"
+            >${unsafeHTML(boxToAnimate)}</wa-animation
+          >`,
         );
         let animationHasFinished = false;
         oneEvent(animationContainer, 'wa-finish').then(() => (animationHasFinished = true));

src/components/animation/animation.ts

@@ -136,7 +136,7 @@ export default class WaAnimation extends WebAwesomeElement {
       endDelay: this.endDelay,
       fill: this.fill,
       iterationStart: this.iterationStart,
-      iterations: this.iterations
+      iterations: this.iterations,
     });
     this.animation.playbackRate = this.playbackRate;
     this.animation.addEventListener('cancel', this.handleAnimationCancel);
@@ -171,7 +171,7 @@ export default class WaAnimation extends WebAwesomeElement {
     'fill',
     'iterations',
     'iterationsStart',
-    'keyframes'
+    'keyframes',
   ])
   handleAnimationChange() {
     if (!this.hasUpdated) {

src/components/avatar/avatar.test.ts

@@ -82,7 +82,7 @@ describe('<wa-avatar>', () => {
         const label = 'Small transparent square';
         beforeEach(async () => {
           el = await fixture<WaAvatar>(
-            html`<wa-avatar image="${image}" label="${label}" initials="${initials}"></wa-avatar>`
+            html`<wa-avatar image="${image}" label="${label}" initials="${initials}"></wa-avatar>`,
           );
         });
 
@@ -138,7 +138,7 @@ describe('<wa-avatar>', () => {
       describe('when passed a <span>, on slot "icon"', () => {
         beforeEach(async () => {
           el = await fixture<WaAvatar>(
-            html`<wa-avatar label="Avatar"><span slot="icon">random content</span></wa-avatar>`
+            html`<wa-avatar label="Avatar"><span slot="icon">random content</span></wa-avatar>`,
           );
         });
 

src/components/avatar/avatar.ts

@@ -94,7 +94,7 @@ export default class WaAvatar extends WebAwesomeElement {
           avatar: true,
           'avatar--circle': this.shape === 'circle',
           'avatar--rounded': this.shape === 'rounded',
-          'avatar--square': this.shape === 'square'
+          'avatar--square': this.shape === 'square',
         })}
         role="img"
         aria-label=${this.label}

src/components/badge/badge.ts

@@ -46,7 +46,7 @@ export default class WaBadge extends WebAwesomeElement {
           'badge--warning': this.variant === 'warning',
           'badge--danger': this.variant === 'danger',
           'badge--pill': this.pill,
-          'badge--pulse': this.pulse
+          'badge--pulse': this.pulse,
         })}
         role="status"
       >

src/components/breadcrumb/breadcrumb.ts

@@ -50,7 +50,7 @@ export default class WaBreadcrumb extends WebAwesomeElement {
 
   private handleSlotChange() {
     const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(
-      item => item.tagName.toLowerCase() === 'wa-breadcrumb-item'
+      item => item.tagName.toLowerCase() === 'wa-breadcrumb-item',
     ) as WaBreadcrumbItem[];
 
     items.forEach((item, index) => {

src/components/button-group/button-group.test.ts

@@ -41,7 +41,7 @@ describe('<wa-button-group>', () => {
 
           const allButtons = group.querySelectorAll('wa-button');
           const hasGroupClass = Array.from(allButtons).every(button =>
-            button.classList.contains('wa-button-group__button')
+            button.classList.contains('wa-button-group__button'),
           );
           expect(hasGroupClass).to.be.true;
 

src/components/button/button.test.ts

@@ -14,7 +14,7 @@ describe('<wa-button>', () => {
 
     init: (control: WaButton) => {
       control.type = 'button';
-    }
+    },
   });
   runFormControlBaseTests({
     tagName: 'wa-button',
@@ -22,7 +22,7 @@ describe('<wa-button>', () => {
 
     init: (control: WaButton) => {
       control.type = 'submit';
-    }
+    },
   });
   runFormControlBaseTests({
     tagName: 'wa-button',
@@ -30,7 +30,7 @@ describe('<wa-button>', () => {
 
     init: (control: WaButton) => {
       control.href = 'some-url';
-    }
+    },
   });
 
   for (const fixture of fixtures) {
@@ -282,7 +282,7 @@ describe('<wa-button>', () => {
             html`<form>
               <wa-button type="submit" name="btn-1" value="value-1">Button 1</wa-button>
               <wa-button type="submit" name="btn-2" value="value-2">Button 2</wa-button>
-            </form>`
+            </form>`,
           );
 
           let formData = new FormData(form);

src/components/button/button.ts

@@ -264,7 +264,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
           'button--text': this.appearance === 'text',
           'button--pill': this.pill,
           'button--rtl': this.localize.dir() === 'rtl',
-          'button--visually-hidden-label': this.visuallyHiddenLabel
+          'button--visually-hidden-label': this.visuallyHiddenLabel,
         })}
         ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
         type=${ifDefined(isLink ? undefined : this.type)}

src/components/card/card.test.ts

@@ -12,7 +12,7 @@ describe('<wa-card>', () => {
             <wa-card>This is just a basic card. No image, no header, and no footer. Just your content.</wa-card>
           `);
           expect(el.innerText).to.eq(
-            'This is just a basic card. No image, no header, and no footer. Just your content.'
+            'This is just a basic card. No image, no header, and no footer. Just your content.',
           );
         });
 
@@ -38,7 +38,7 @@ describe('<wa-card>', () => {
             html`<wa-card with-header>
               <div slot="header">Header Title</div>
               This card has a header. You can put all sorts of things in it!
-            </wa-card>`
+            </wa-card>`,
           );
           await expect(el).to.be.accessible();
         });
@@ -48,7 +48,7 @@ describe('<wa-card>', () => {
             html`<wa-card with-header>
               <div slot="header">Header Title</div>
               This card has a header. You can put all sorts of things in it!
-            </wa-card>`
+            </wa-card>`,
           );
           expect(el.innerText).to.contain('This card has a header. You can put all sorts of things in it!');
         });
@@ -58,7 +58,7 @@ describe('<wa-card>', () => {
             html`<wa-card with-header>
               <div slot="header">Header Title</div>
               This card has a header. You can put all sorts of things in it!
-            </wa-card>`
+            </wa-card>`,
           );
           const header = el.querySelector<HTMLElement>('div[slot=header]')!;
           expect(header.innerText).eq('Header Title');
@@ -69,7 +69,7 @@ describe('<wa-card>', () => {
             html`<wa-card with-header>
               <div slot="header">Header Title</div>
               This card has a header. You can put all sorts of things in it!
-            </wa-card>`
+            </wa-card>`,
           );
           const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=header]')!;
           const childNodes = slot.assignedNodes({ flatten: true });
@@ -82,7 +82,7 @@ describe('<wa-card>', () => {
             html`<wa-card with-header>
               <div slot="header">Header Title</div>
               This card has a header. You can put all sorts of things in it!
-            </wa-card>`
+            </wa-card>`,
           );
           const card = el.shadowRoot!.querySelector('.card')!;
           expect(card.classList.value.trim()).to.eq('card card--has-header');
@@ -96,7 +96,7 @@ describe('<wa-card>', () => {
               This card has a footer. You can put all sorts of things in it!
 
               <div slot="footer">Footer Content</div>
-            </wa-card>`
+            </wa-card>`,
           );
           await expect(el).to.be.accessible();
         });
@@ -107,7 +107,7 @@ describe('<wa-card>', () => {
               This card has a footer. You can put all sorts of things in it!
 
               <div slot="footer">Footer Content</div>
-            </wa-card>`
+            </wa-card>`,
           );
           expect(el.innerText).to.contain('This card has a footer. You can put all sorts of things in it!');
         });
@@ -118,7 +118,7 @@ describe('<wa-card>', () => {
               This card has a footer. You can put all sorts of things in it!
 
               <div slot="footer">Footer Content</div>
-            </wa-card>`
+            </wa-card>`,
           );
           const footer = el.querySelector<HTMLElement>('div[slot=footer]')!;
           expect(footer.innerText).eq('Footer Content');
@@ -130,7 +130,7 @@ describe('<wa-card>', () => {
               This card has a footer. You can put all sorts of things in it!
 
               <div slot="footer">Footer Content</div>
-            </wa-card>`
+            </wa-card>`,
           );
           const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=footer]')!;
           const childNodes = slot.assignedNodes({ flatten: true });
@@ -144,7 +144,7 @@ describe('<wa-card>', () => {
               This card has a footer. You can put all sorts of things in it!
 
               <div slot="footer">Footer Content</div>
-            </wa-card>`
+            </wa-card>`,
           );
 
           const card = el.shadowRoot!.querySelector('.card')!;
@@ -162,7 +162,7 @@ describe('<wa-card>', () => {
                 alt="A kitten walks towards camera on top of pallet."
               />
               This is a kitten, but not just any kitten. This kitten likes walking along pallets.
-            </wa-card>`
+            </wa-card>`,
           );
 
           await expect(el).to.be.accessible();
@@ -177,11 +177,11 @@ describe('<wa-card>', () => {
                 alt="A kitten walks towards camera on top of pallet."
               />
               This is a kitten, but not just any kitten. This kitten likes walking along pallets.
-            </wa-card>`
+            </wa-card>`,
           );
 
           expect(el.innerText).to.contain(
-            'This is a kitten, but not just any kitten. This kitten likes walking along pallets.'
+            'This is a kitten, but not just any kitten. This kitten likes walking along pallets.',
           );
         });
 
@@ -194,7 +194,7 @@ describe('<wa-card>', () => {
                 alt="A kitten walks towards camera on top of pallet."
               />
               This is a kitten, but not just any kitten. This kitten likes walking along pallets.
-            </wa-card>`
+            </wa-card>`,
           );
           const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=image]')!;
           const childNodes = slot.assignedNodes({ flatten: true });
@@ -211,7 +211,7 @@ describe('<wa-card>', () => {
                 alt="A kitten walks towards camera on top of pallet."
               />
               This is a kitten, but not just any kitten. This kitten likes walking along pallets.
-            </wa-card>`
+            </wa-card>`,
           );
 
           const card = el.shadowRoot!.querySelector('.card')!;

src/components/card/card.ts

@@ -50,7 +50,7 @@ export default class WaCard extends WebAwesomeElement {
           card: true,
           'card--has-footer': this.withFooter,
           'card--has-image': this.withImage,
-          'card--has-header': this.withHeader
+          'card--has-header': this.withHeader,
         })}
       >
         <slot name="image" part="image" class="card__image"></slot>

src/components/carousel/carousel.test.ts

@@ -63,7 +63,7 @@ describe('<wa-carousel>', () => {
 
         beforeEach(() => {
           clock = sandbox.useFakeTimers({
-            now: new Date()
+            now: new Date(),
           });
         });
 
@@ -262,7 +262,7 @@ describe('<wa-carousel>', () => {
           [10, 2, 2, false, 5],
           [7, 2, 1, true, 7],
           [5, 3, 3, true, 2],
-          [10, 2, 2, true, 5]
+          [10, 2, 2, true, 5],
         ].forEach(
           ([slides, slidesPerPage, slidesPerMove, loop, expected]: [number, number, number, boolean, number]) => {
             it(`should display ${expected} pages for ${slides} slides grouped by ${slidesPerPage} and scrolled by ${slidesPerMove}${
@@ -285,7 +285,7 @@ describe('<wa-carousel>', () => {
               const paginationItems = el.shadowRoot!.querySelectorAll('.carousel__pagination-item');
               expect(paginationItems.length).to.equal(expected);
             });
-          }
+          },
         );
       });
 
@@ -622,7 +622,7 @@ describe('<wa-carousel>', () => {
               `);
 
               const previousButton: HTMLElement = el.shadowRoot!.querySelector(
-                '.carousel__navigation-button--previous'
+                '.carousel__navigation-button--previous',
               )!;
               sandbox.stub(el, 'previous');
               await el.updateComplete;
@@ -648,7 +648,7 @@ describe('<wa-carousel>', () => {
                 `);
 
                 const previousButton: HTMLElement = el.shadowRoot!.querySelector(
-                  '.carousel__navigation-button--previous'
+                  '.carousel__navigation-button--previous',
                 )!;
                 await el.updateComplete;
 

src/components/carousel/carousel.ts

@@ -119,7 +119,7 @@ export default class WaCarousel extends WebAwesomeElement {
     this.mutationObserver = new MutationObserver(this.handleSlotChange);
     this.mutationObserver.observe(this, {
       childList: true,
-      subtree: true
+      subtree: true,
     });
   }
 
@@ -154,7 +154,7 @@ export default class WaCarousel extends WebAwesomeElement {
   /** @internal Gets all carousel items. */
   private getSlides({ excludeClones = true }: { excludeClones?: boolean } = {}) {
     return [...this.children].filter(
-      (el: HTMLElement) => this.isCarouselItem(el) && (!excludeClones || !el.hasAttribute('data-clone'))
+      (el: HTMLElement) => this.isCarouselItem(el) && (!excludeClones || !el.hasAttribute('data-clone')),
     ) as WaCarouselItem[];
   }
 
@@ -203,7 +203,7 @@ export default class WaCarousel extends WebAwesomeElement {
       if (isFocusInPagination) {
         this.updateComplete.then(() => {
           const activePaginationItem = this.shadowRoot?.querySelector<HTMLButtonElement>(
-            '[part~="pagination-item--active"]'
+            '[part~="pagination-item--active"]',
           );
 
           if (activePaginationItem) {
@@ -235,7 +235,7 @@ export default class WaCarousel extends WebAwesomeElement {
     this.scrollContainer.scrollBy({
       left: -event.movementX,
       top: -event.movementY,
-      behavior: 'instant'
+      behavior: 'instant',
     });
   };
 
@@ -269,7 +269,7 @@ export default class WaCarousel extends WebAwesomeElement {
         scrollContainer.scrollTo({
           left: finalLeft,
           top: finalTop,
-          behavior: prefersReducedMotion() ? 'auto' : 'smooth'
+          behavior: prefersReducedMotion() ? 'auto' : 'smooth',
         });
         await waitForEvent(scrollContainer, 'scrollend');
       }
@@ -333,8 +333,8 @@ export default class WaCarousel extends WebAwesomeElement {
       },
       {
         root: this.scrollContainer,
-        threshold: 0.6
-      }
+        threshold: 0.6,
+      },
     );
 
     this.getSlides({ excludeClones: false }).forEach(slide => {
@@ -359,8 +359,8 @@ export default class WaCarousel extends WebAwesomeElement {
   private handleSlotChange = (mutations: MutationRecord[]) => {
     const needsInitialization = mutations.some(mutation =>
       [...mutation.addedNodes, ...mutation.removedNodes].some(
-        (el: HTMLElement) => this.isCarouselItem(el) && !el.hasAttribute('data-clone')
-      )
+        (el: HTMLElement) => this.isCarouselItem(el) && !el.hasAttribute('data-clone'),
+      ),
     );
 
     // Reinitialize the carousel if a carousel item has been added or removed
@@ -430,8 +430,8 @@ export default class WaCarousel extends WebAwesomeElement {
       this.dispatchEvent(
         new WaSlideChangeEvent({
           index: this.activeSlide,
-          slide: slides[this.activeSlide]
-        })
+          slide: slides[this.activeSlide],
+        }),
       );
     }
   }
@@ -508,7 +508,7 @@ export default class WaCarousel extends WebAwesomeElement {
     const nextSlideIndex = clamp(
       index + (loop ? slidesPerPage : 0) + (isRtl ? slidesPerPage - 1 : 0),
       0,
-      slidesWithClones.length - 1
+      slidesWithClones.length - 1,
     );
 
     const nextSlide = slidesWithClones[nextSlideIndex];
@@ -541,7 +541,7 @@ export default class WaCarousel extends WebAwesomeElement {
         scrollContainer.scrollTo({
           left: nextLeft + scrollContainer.scrollLeft,
           top: nextTop + scrollContainer.scrollTop,
-          behavior
+          behavior,
         });
       } else {
         this.pendingSlideChange = false;
@@ -577,7 +577,7 @@ export default class WaCarousel extends WebAwesomeElement {
             carousel__slides: true,
             'carousel__slides--horizontal': this.orientation === 'horizontal',
             'carousel__slides--vertical': this.orientation === 'vertical',
-            'carousel__slides--dragging': this.dragging
+            'carousel__slides--dragging': this.dragging,
           })}"
           style="--slides-per-page: ${this.slidesPerPage};"
           aria-busy="${scrolling ? 'true' : 'false'}"
@@ -600,7 +600,7 @@ export default class WaCarousel extends WebAwesomeElement {
                   class="${classMap({
                     'carousel__navigation-button': true,
                     'carousel__navigation-button--previous': true,
-                    'carousel__navigation-button--disabled': !prevEnabled
+                    'carousel__navigation-button--disabled': !prevEnabled,
                   })}"
                   aria-label="${this.localize.term('previousSlide')}"
                   aria-controls="scroll-container"
@@ -617,7 +617,7 @@ export default class WaCarousel extends WebAwesomeElement {
                   class=${classMap({
                     'carousel__navigation-button': true,
                     'carousel__navigation-button--next': true,
-                    'carousel__navigation-button--disabled': !nextEnabled
+                    'carousel__navigation-button--disabled': !nextEnabled,
                   })}
                   aria-label="${this.localize.term('nextSlide')}"
                   aria-controls="scroll-container"
@@ -641,7 +641,7 @@ export default class WaCarousel extends WebAwesomeElement {
                       part="pagination-item ${isActive ? 'pagination-item--active' : ''}"
                       class="${classMap({
                         'carousel__pagination-item': true,
-                        'carousel__pagination-item--active': isActive
+                        'carousel__pagination-item--active': isActive,
                       })}"
                       role="tab"
                       aria-selected="${isActive ? 'true' : 'false'}"

src/components/carousel/scroll-controller.ts

@@ -104,7 +104,7 @@ export class ScrollController<T extends ScrollHost> implements ReactiveControlle
   handleDrag(event: PointerEvent) {
     this.host.scrollContainer.scrollBy({
       left: -event.movementX,
-      top: -event.movementY
+      top: -event.movementY,
     });
   }
 

src/components/checkbox/checkbox.test.ts

@@ -122,7 +122,7 @@ describe('<wa-checkbox>', () => {
 
       it('Should keep its form value when going from checked -> unchecked -> checked', async () => {
         const form = await fixture<HTMLFormElement>(
-          html`<form><wa-checkbox name="test" value="myvalue" checked>Checked</wa-checkbox></form>`
+          html`<form><wa-checkbox name="test" value="myvalue" checked>Checked</wa-checkbox></form>`,
         );
         const checkbox = form.querySelector('wa-checkbox')!;
 

src/components/checkbox/checkbox.ts

@@ -69,9 +69,9 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
             // Use a checkbox so we get "free" translation strings.
             validationElement: Object.assign(document.createElement('input'), {
               type: 'checkbox',
-              required: true
-            })
-          })
+              required: true,
+            }),
+          }),
         ];
     return [...super.validators, ...validators];
   }
@@ -223,7 +223,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
       <div
         class=${classMap({
           'form-control--has-hint': hasHint,
-          'form-control': true
+          'form-control': true,
         })}
       >
         <label part="base">

src/components/code-demo/code-demo.ts

@@ -68,7 +68,7 @@ export default class WaCodeDemo extends WebAwesomeElement {
   /** Renders in an iframe */
   @property({
     reflect: true,
-    converter: viewportPropertyConverter
+    converter: viewportPropertyConverter,
   })
   viewport?: boolean | ViewportDimensions;
 
@@ -237,7 +237,7 @@ export default class WaCodeDemo extends WebAwesomeElement {
     const blob = new Blob([markup], { type: 'text/html' });
     const a = Object.assign(document.createElement('a'), {
       href: URL.createObjectURL(blob),
-      target: '_blank'
+      target: '_blank',
     });
     document.documentElement.append(a);
     a.click();
@@ -255,7 +255,7 @@ export default class WaCodeDemo extends WebAwesomeElement {
     const form = Object.assign(document.createElement('form'), {
       action: 'https://codepen.io/pen/define',
       method: 'POST',
-      target: '_blank'
+      target: '_blank',
     });
 
     const data = {
@@ -271,13 +271,13 @@ export default class WaCodeDemo extends WebAwesomeElement {
       js_pre_processor: 'none',
       html: markup,
       css,
-      js
+      js,
     };
 
     const input = Object.assign(document.createElement('input'), {
       type: 'hidden',
       name: 'data',
-      value: JSON.stringify(data)
+      value: JSON.stringify(data),
     });
     form.append(input);
 
@@ -353,7 +353,7 @@ function dedent(code: string) {
   const indents = lines.map(line => line.match(/^\s*/)?.[0]).filter(Boolean) as string[];
   const minIndent = indents.reduce(
     (minIndentSoFar, indent) => (minIndentSoFar.length < indent.length ? minIndentSoFar : indent),
-    indents[0]
+    indents[0],
   );
 
   if (!minIndent || lines.some(line => !line.startsWith(minIndent))) {

src/components/color-picker/color-picker.test.ts

@@ -46,7 +46,7 @@ describe('<wa-color-picker>', () => {
             },
             afterMouseMove: () => {
               expect(inputHandler).to.have.been.calledTwice;
-            }
+            },
           });
 
           expect(changeHandler).to.have.been.calledOnce;
@@ -75,7 +75,7 @@ describe('<wa-color-picker>', () => {
             afterMouseMove: () => {
               // It's not twice because you can't change the hue of white!
               expect(inputHandler).to.have.been.calledOnce;
-            }
+            },
           });
 
           await el.updateComplete;
@@ -106,7 +106,7 @@ describe('<wa-color-picker>', () => {
             },
             afterMouseMove: () => {
               expect(inputHandler).to.have.been.calledTwice;
-            }
+            },
           });
 
           await el.updateComplete;

src/components/color-picker/color-picker.ts

@@ -308,7 +308,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
           this.dispatchEvent(new WaChangeEvent());
         }
       },
-      initialEvent: event
+      initialEvent: event,
     });
   }
 
@@ -338,7 +338,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
           this.dispatchEvent(new WaChangeEvent());
         }
       },
-      initialEvent: event
+      initialEvent: event,
     });
   }
 
@@ -372,7 +372,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
           this.dispatchEvent(new WaChangeEvent());
         }
       },
-      initialEvent: event
+      initialEvent: event,
     });
   }
 
@@ -542,7 +542,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
       h: hslColor.h,
       s: hslColor.s * 100,
       l: hslColor.l * 100,
-      a: hslColor.a
+      a: hslColor.a,
     };
 
     const rgb = color.toRgb();
@@ -556,7 +556,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
       h: hsvColor.h,
       s: hsvColor.s * 100,
       v: hsvColor.v * 100,
-      a: hsvColor.a
+      a: hsvColor.a,
     };
 
     return {
@@ -564,7 +564,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         h: hsl.h,
         s: hsl.s,
         l: hsl.l,
-        string: this.setLetterCase(`hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`)
+        string: this.setLetterCase(`hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`),
       },
       hsla: {
         h: hsl.h,
@@ -572,14 +572,14 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         l: hsl.l,
         a: hsl.a,
         string: this.setLetterCase(
-          `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${hsl.a.toFixed(2).toString()})`
-        )
+          `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${hsl.a.toFixed(2).toString()})`,
+        ),
       },
       hsv: {
         h: hsv.h,
         s: hsv.s,
         v: hsv.v,
-        string: this.setLetterCase(`hsv(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%)`)
+        string: this.setLetterCase(`hsv(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%)`),
       },
       hsva: {
         h: hsv.h,
@@ -587,14 +587,14 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         v: hsv.v,
         a: hsv.a,
         string: this.setLetterCase(
-          `hsva(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%, ${hsv.a.toFixed(2).toString()})`
-        )
+          `hsva(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%, ${hsv.a.toFixed(2).toString()})`,
+        ),
       },
       rgb: {
         r: rgb.r,
         g: rgb.g,
         b: rgb.b,
-        string: this.setLetterCase(`rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`)
+        string: this.setLetterCase(`rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`),
       },
       rgba: {
         r: rgb.r,
@@ -602,11 +602,11 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         b: rgb.b,
         a: rgb.a,
         string: this.setLetterCase(
-          `rgba(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}, ${rgb.a.toFixed(2).toString()})`
-        )
+          `rgba(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}, ${rgb.a.toFixed(2).toString()})`,
+        ),
       },
       hex: this.setLetterCase(hex),
-      hexa: this.setLetterCase(hexa)
+      hexa: this.setLetterCase(hexa),
     };
   }
 
@@ -636,7 +636,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
 
   private async syncValues() {
     const currentColor = this.parseColor(
-      `hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`
+      `hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`,
     );
 
     if (currentColor === null) {
@@ -800,7 +800,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
   /** Returns the current value as a string in the specified format. */
   getFormattedValue(format: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva' = 'hex') {
     const currentColor = this.parseColor(
-      `hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`
+      `hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`,
     );
 
     if (currentColor === null) {
@@ -887,7 +887,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         class=${classMap({
           'color-picker': true,
           'color-picker--disabled': this.disabled,
-          'color-picker--focused': this.hasFocus
+          'color-picker--focused': this.hasFocus,
         })}
         aria-disabled=${this.disabled ? 'true' : 'false'}
         tabindex="-1"
@@ -903,12 +903,12 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
             part="grid-handle"
             class=${classMap({
               'color-picker__grid-handle': true,
-              'color-picker__grid-handle--dragging': this.isDraggingGridHandle
+              'color-picker__grid-handle--dragging': this.isDraggingGridHandle,
             })}
             style=${styleMap({
               top: `${gridHandleY}%`,
               left: `${gridHandleX}%`,
-              backgroundColor: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
+              backgroundColor: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha),
             })}
             role="application"
             aria-label="HSV"
@@ -930,7 +930,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
                 class="color-picker__slider-handle"
                 style=${styleMap({
                   left: `${this.hue === 0 ? 0 : 100 / (360 / this.hue)}%`,
-                  backgroundColor: this.getHexString(this.hue, 100, 100)
+                  backgroundColor: this.getHexString(this.hue, 100, 100),
                 })}
                 role="slider"
                 aria-label="hue"
@@ -958,7 +958,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
                           to right,
                           ${this.getHexString(this.hue, this.saturation, this.brightness, 0)} 0%,
                           ${this.getHexString(this.hue, this.saturation, this.brightness, 100)} 100%
-                        )`
+                        )`,
                       })}
                     ></div>
                     <span
@@ -966,7 +966,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
                       class="color-picker__slider-handle"
                       style=${styleMap({
                         left: `${this.alpha}%`,
-                        backgroundColor: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
+                        backgroundColor: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha),
                       })}
                       role="slider"
                       aria-label="alpha"
@@ -988,7 +988,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
             class="color-picker__preview color-picker__transparent-bg"
             aria-label=${this.localize.term('copy')}
             style=${styleMap({
-              '--preview-color': this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
+              '--preview-color': this.getHexString(this.hue, this.saturation, this.brightness, this.alpha),
             })}
             @click=${this.handleCopy}
           ></button>
@@ -1157,10 +1157,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
               'color-dropdown__trigger--empty': this.isEmpty,
               'color-dropdown__trigger--focused': this.hasFocus,
               'color-picker__transparent-bg': true,
-              'form-control-input': true
+              'form-control-input': true,
             })}
             style=${styleMap({
-              color: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
+              color: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha),
             })}
             type="button"
             aria-labelledby="form-control-label"
@@ -1171,7 +1171,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
             name="hint"
             part="hint"
             class=${classMap({
-              'has-slotted': hasHint
+              'has-slotted': hasHint,
             })}
             >${this.hint}</slot
           >

src/components/copy-button/copy-button.ts

@@ -215,7 +215,7 @@ export default class WaCopyButton extends WebAwesomeElement {
           class=${classMap({
             'copy-button': true,
             'copy-button--success': this.status === 'success',
-            'copy-button--error': this.status === 'error'
+            'copy-button--error': this.status === 'error',
           })}
           for="copy-button"
           placement=${this.tooltipPlacement}

src/components/details/details.ts

@@ -150,12 +150,12 @@ export default class WaDetails extends WebAwesomeElement {
         this.body,
         [
           { height: '0', opacity: '0' },
-          { height: `${this.body.scrollHeight}px`, opacity: '1' }
+          { height: `${this.body.scrollHeight}px`, opacity: '1' },
         ],
         {
           duration,
-          easing: 'linear'
-        }
+          easing: 'linear',
+        },
       );
       this.body.style.height = 'auto';
 
@@ -176,9 +176,9 @@ export default class WaDetails extends WebAwesomeElement {
         this.body,
         [
           { height: `${this.body.scrollHeight}px`, opacity: '1' },
-          { height: '0', opacity: '0' }
+          { height: '0', opacity: '0' },
         ],
-        { duration, easing: 'linear' }
+        { duration, easing: 'linear' },
       );
       this.body.style.height = 'auto';
 
@@ -217,7 +217,7 @@ export default class WaDetails extends WebAwesomeElement {
           details: true,
           'details--open': this.open,
           'details--disabled': this.disabled,
-          'details--rtl': isRtl
+          'details--rtl': isRtl,
         })}
       >
         <summary

src/components/dialog/dialog.ts

@@ -228,7 +228,7 @@ export default class WaDialog extends WebAwesomeElement {
           dialog: true,
           'dialog--open': this.open,
           'dialog--with-header': this.withHeader,
-          'dialog--with-footer': this.withFooter
+          'dialog--with-footer': this.withFooter,
         })}
         @cancel=${this.handleDialogCancel}
         @click=${this.handleDialogClick}

src/components/drawer/drawer.ts

@@ -245,7 +245,7 @@ export default class WaDrawer extends WebAwesomeElement {
           'drawer--start': this.placement === 'start',
           'drawer--rtl': this.localize.dir() === 'rtl',
           'drawer--with-header': this.withHeader,
-          'drawer--with-footer': this.withFooter
+          'drawer--with-footer': this.withFooter,
         })}
         @cancel=${this.handleDialogCancel}
         @click=${this.handleDialogClick}

src/components/dropdown/dropdown.ts

@@ -424,7 +424,7 @@ export default class WaDropdown extends WebAwesomeElement {
         sync=${ifDefined(this.sync ? this.sync : undefined)}
         class=${classMap({
           dropdown: true,
-          'dropdown--open': this.open
+          'dropdown--open': this.open,
         })}
       >
         <slot

src/components/format-bytes/format-bytes.test.ts

@@ -23,26 +23,26 @@ describe('<wa-format-bytes>', () => {
             value: 12,
             short: '12 byte',
             long: '12 bytes',
-            narrow: '12B'
+            narrow: '12B',
           },
           {
             value: 1200,
             short: '1.2 kB',
             long: '1.2 kilobytes',
-            narrow: '1.2kB'
+            narrow: '1.2kB',
           },
           {
             value: 1200000,
             short: '1.2 MB',
             long: '1.2 megabytes',
-            narrow: '1.2MB'
+            narrow: '1.2MB',
           },
           {
             value: 1200000000,
             short: '1.2 GB',
             long: '1.2 gigabytes',
-            narrow: '1.2GB'
-          }
+            narrow: '1.2GB',
+          },
         ];
 
         results.forEach(expected => {
@@ -74,26 +74,26 @@ describe('<wa-format-bytes>', () => {
             value: 12,
             short: '12 bit',
             long: '12 bits',
-            narrow: '12bit'
+            narrow: '12bit',
           },
           {
             value: 1200,
             short: '1.2 kb',
             long: '1.2 kilobits',
-            narrow: '1.2kb'
+            narrow: '1.2kb',
           },
           {
             value: 1200000,
             short: '1.2 Mb',
             long: '1.2 megabits',
-            narrow: '1.2Mb'
+            narrow: '1.2Mb',
           },
           {
             value: 1200000000,
             short: '1.2 Gb',
             long: '1.2 gigabits',
-            narrow: '1.2Gb'
-          }
+            narrow: '1.2Gb',
+          },
         ];
 
         results.forEach(expected => {

src/components/format-bytes/format-bytes.ts

@@ -36,7 +36,7 @@ export default class WaFormatBytes extends WebAwesomeElement {
     return this.localize.number(valueToFormat, {
       style: 'unit',
       unit,
-      unitDisplay: this.display
+      unitDisplay: this.display,
     });
   }
 }

src/components/format-date/format-date.test.ts

@@ -13,7 +13,7 @@ describe('<wa-format-date>', () => {
         beforeEach(() => {
           // fake timer so `new Date()` can be tested
           clock = sinon.useFakeTimers({
-            now: new Date()
+            now: new Date(),
           });
         });
 
@@ -51,7 +51,7 @@ describe('<wa-format-date>', () => {
           { lang: 'nl', result: `1-1-${new Date().getFullYear()}` },
           { lang: 'pl', result: `1.01.${new Date().getFullYear()}` },
           { lang: 'pt', result: `01/01/${new Date().getFullYear()}` },
-          { lang: 'ru', result: `01.01.${new Date().getFullYear()}` }
+          { lang: 'ru', result: `01.01.${new Date().getFullYear()}` },
         ];
         results.forEach(setup => {
           it(`date has correct language format: ${setup.lang}`, async () => {
@@ -75,7 +75,7 @@ describe('<wa-format-date>', () => {
             `);
 
             const expected = new Intl.DateTimeFormat('en-US', { weekday: weekdayFormat }).format(
-              new Date(new Date().getFullYear(), 0, 1)
+              new Date(new Date().getFullYear(), 0, 1),
             );
             expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
           });
@@ -91,7 +91,7 @@ describe('<wa-format-date>', () => {
             `);
 
             const expected = new Intl.DateTimeFormat('en-US', { era: eraFormat }).format(
-              new Date(new Date().getFullYear(), 0, 1)
+              new Date(new Date().getFullYear(), 0, 1),
             );
             expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
           });
@@ -107,7 +107,7 @@ describe('<wa-format-date>', () => {
             `);
 
             const expected = new Intl.DateTimeFormat('en-US', { year: yearFormat }).format(
-              new Date(new Date().getFullYear(), 0, 1)
+              new Date(new Date().getFullYear(), 0, 1),
             );
             expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
           });
@@ -126,7 +126,7 @@ describe('<wa-format-date>', () => {
             `);
 
             const expected = new Intl.DateTimeFormat('en-US', { month: monthFormat }).format(
-              new Date(new Date().getFullYear(), 0, 1)
+              new Date(new Date().getFullYear(), 0, 1),
             );
             expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
           });
@@ -142,7 +142,7 @@ describe('<wa-format-date>', () => {
             `);
 
             const expected = new Intl.DateTimeFormat('en-US', { day: dayFormat }).format(
-              new Date(new Date().getFullYear(), 0, 1)
+              new Date(new Date().getFullYear(), 0, 1),
             );
             expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
           });
@@ -158,7 +158,7 @@ describe('<wa-format-date>', () => {
             `);
 
             const expected = new Intl.DateTimeFormat('en-US', { hour: hourFormat }).format(
-              new Date(new Date().getFullYear(), 0, 1)
+              new Date(new Date().getFullYear(), 0, 1),
             );
             expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
           });
@@ -177,7 +177,7 @@ describe('<wa-format-date>', () => {
             `);
 
             const expected = new Intl.DateTimeFormat('en-US', { minute: minuteFormat }).format(
-              new Date(new Date().getFullYear(), 0, 1)
+              new Date(new Date().getFullYear(), 0, 1),
             );
 
             // @TODO: Some weird browser / Node issue only in firefox.
@@ -202,7 +202,7 @@ describe('<wa-format-date>', () => {
             `);
 
             const expected = new Intl.DateTimeFormat('en-US', { second: secondFormat }).format(
-              new Date(new Date().getFullYear(), 0, 1)
+              new Date(new Date().getFullYear(), 0, 1),
             );
 
             // @TODO: Some weird browser / Node issue only in firefox.
@@ -226,7 +226,7 @@ describe('<wa-format-date>', () => {
             `);
 
             const expected = new Intl.DateTimeFormat('en-US', { timeZoneName: timeZoneNameFormat }).format(
-              new Date(new Date().getFullYear(), 0, 1)
+              new Date(new Date().getFullYear(), 0, 1),
             );
             expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
           });
@@ -245,7 +245,7 @@ describe('<wa-format-date>', () => {
             `);
 
             const expected = new Intl.DateTimeFormat('en-US', { timeZone: timeZone }).format(
-              new Date(new Date().getFullYear(), 0, 1)
+              new Date(new Date().getFullYear(), 0, 1),
             );
             expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
           });
@@ -264,7 +264,7 @@ describe('<wa-format-date>', () => {
             `);
 
             const expected = new Intl.DateTimeFormat('en-US', {
-              hour12: hourFormatValue === 'auto' ? undefined : hourFormatValue === '12'
+              hour12: hourFormatValue === 'auto' ? undefined : hourFormatValue === '12',
             }).format(new Date(new Date().getFullYear(), 0, 1));
             expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
           });

src/components/format-date/format-date.ts

@@ -75,7 +75,7 @@ export default class WaFormatDate extends WebAwesomeElement {
           second: this.second,
           timeZoneName: this.timeZoneName,
           timeZone: this.timeZone,
-          hour12: hour12
+          hour12: hour12,
         })}
       </time>
     `;

src/components/format-number/format-number.test.ts

@@ -84,7 +84,7 @@ describe('<wa-format-number>', () => {
             `);
             const expected = new Intl.NumberFormat('en-US', {
               style: 'decimal',
-              currencyDisplay: currencyDisplay
+              currencyDisplay: currencyDisplay,
             }).format(1000);
             expect(el.shadowRoot?.textContent).to.equal(expected);
           });
@@ -100,7 +100,7 @@ describe('<wa-format-number>', () => {
             const expected = new Intl.NumberFormat('en-US', {
               style: 'decimal',
               currencyDisplay: 'symbol',
-              minimumIntegerDigits: minDigits
+              minimumIntegerDigits: minDigits,
             }).format(1000);
             expect(el.shadowRoot?.textContent).to.equal(expected);
           });
@@ -116,7 +116,7 @@ describe('<wa-format-number>', () => {
             const expected = new Intl.NumberFormat('en-US', {
               style: 'decimal',
               currencyDisplay: 'symbol',
-              minimumFractionDigits: minFractionDigits
+              minimumFractionDigits: minFractionDigits,
             }).format(1000);
             expect(el.shadowRoot?.textContent).to.equal(expected);
           });
@@ -132,7 +132,7 @@ describe('<wa-format-number>', () => {
             const expected = new Intl.NumberFormat('en-US', {
               style: 'decimal',
               currencyDisplay: 'symbol',
-              maximumFractionDigits: maxFractionDigits
+              maximumFractionDigits: maxFractionDigits,
             }).format(1000);
             expect(el.shadowRoot?.textContent).to.equal(expected);
           });
@@ -148,7 +148,7 @@ describe('<wa-format-number>', () => {
             const expected = new Intl.NumberFormat('en-US', {
               style: 'decimal',
               currencyDisplay: 'symbol',
-              minimumSignificantDigits: minSignificantDigits
+              minimumSignificantDigits: minSignificantDigits,
             }).format(1000);
             expect(el.shadowRoot?.textContent).to.equal(expected);
           });
@@ -164,7 +164,7 @@ describe('<wa-format-number>', () => {
             const expected = new Intl.NumberFormat('en-US', {
               style: 'decimal',
               currencyDisplay: 'symbol',
-              maximumSignificantDigits: maxSignificantDigits
+              maximumSignificantDigits: maxSignificantDigits,
             }).format(1000);
             expect(el.shadowRoot?.textContent).to.equal(expected);
           });

src/components/format-number/format-number.ts

@@ -56,7 +56,7 @@ export default class WaFormatNumber extends WebAwesomeElement {
       minimumFractionDigits: this.minimumFractionDigits,
       maximumFractionDigits: this.maximumFractionDigits,
       minimumSignificantDigits: this.minimumSignificantDigits,
-      maximumSignificantDigits: this.maximumSignificantDigits
+      maximumSignificantDigits: this.maximumSignificantDigits,
     });
   }
 }

src/components/icon-button/icon-button.ts

@@ -116,7 +116,7 @@ export default class WaIconButton extends WebAwesomeFormAssociatedElement {
         class=${classMap({
           'icon-button': true,
           'icon-button--disabled': !isLink && this.disabled,
-          'icon-button--focused': this.hasFocus
+          'icon-button--focused': this.hasFocus,
         })}
         ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
         type=${ifDefined(isLink ? undefined : 'button')}

src/components/icon/icon.test.ts

@@ -19,7 +19,7 @@ const testLibraryIcons = {
     <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"></path>
     </svg>
   `,
-  'bad-icon': `<div></div>`
+  'bad-icon': `<div></div>`,
 };
 
 describe('<wa-icon>', () => {
@@ -36,7 +36,7 @@ describe('<wa-icon>', () => {
         }
         return '';
       },
-      mutator: (svg: SVGElement) => svg.setAttribute('fill', 'currentColor')
+      mutator: (svg: SVGElement) => svg.setAttribute('fill', 'currentColor'),
     });
   });
 
@@ -177,7 +177,7 @@ describe('<wa-icon>', () => {
           registerIconLibrary('sprite', {
             resolver: name => `/docs/assets/images/sprite.svg#${name}`,
             mutator: svg => svg.setAttribute('fill', 'currentColor'),
-            spriteSheet: true
+            spriteSheet: true,
           });
 
           const el = await fixture<WaIcon>(html`<wa-icon name="arrow-left" library="sprite"></wa-icon>`);
@@ -204,7 +204,7 @@ describe('<wa-icon>', () => {
           registerIconLibrary('sprite', {
             resolver: name => `/docs/assets/images/sprite.svg#${name}`,
             mutator: svg => svg.setAttribute('fill', 'currentColor'),
-            spriteSheet: true
+            spriteSheet: true,
           });
 
           const el = await fixture<WaIcon>(html`<wa-icon name="non-existent" library="sprite"></wa-icon>`);
@@ -235,7 +235,7 @@ describe('<wa-icon>', () => {
             mutator(svg) {
               return svg.setAttribute('fill', 'currentColor');
             },
-            spriteSheet: true
+            spriteSheet: true,
           });
 
           const el = await fixture<WaIcon>(html`<wa-icon name="bad-icon" library="sprite"></wa-icon>`);

src/components/icon/icon.ts

@@ -102,13 +102,13 @@ export default class WaIcon extends WebAwesomeElement {
     if (this.name && library) {
       return {
         url: library.resolver(this.name, this.family, this.variant),
-        fromLibrary: true
+        fromLibrary: true,
       };
     }
 
     return {
       url: this.src,
-      fromLibrary: false
+      fromLibrary: false,
     };
   }
 

src/components/icon/library.default.ts

@@ -42,7 +42,7 @@ const library: IconLibrary = {
   name: 'default',
   resolver: (name: string, family = 'classic', variant = 'solid') => {
     return getIconUrl(name, family, variant);
-  }
+  },
 };
 
 export default library;

src/components/icon/library.system.ts

@@ -19,37 +19,37 @@ const systemLibrary: IconLibrary = {
       switch (name) {
         case 'check':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>`,
           );
 
         case 'chevron-down':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>`,
           );
 
         case 'chevron-left':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>`,
           );
 
         case 'chevron-right':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`,
           );
 
         case 'circle':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>`,
           );
 
         case 'eye-dropper':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>`,
           );
 
         case 'grip-vertical':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>`,
           );
 
         case 'indeterminate':
@@ -59,32 +59,32 @@ const systemLibrary: IconLibrary = {
 
         case 'minus':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>`,
           );
 
         case 'pause':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>`,
           );
 
         case 'play':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>`,
           );
 
         case 'star':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>`,
           );
 
         case 'user':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>`,
           );
 
         case 'xmark':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg`,
           );
       }
     }
@@ -96,28 +96,28 @@ const systemLibrary: IconLibrary = {
       switch (name) {
         case 'circle-xmark':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>`,
           );
 
         case 'copy':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg>`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg>`,
           );
 
         case 'eye':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>`,
           );
 
         case 'eye-slash':
           return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"/></svg>`
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"/></svg>`,
           );
       }
     }
 
     return '';
-  }
+  },
 };
 
 export default systemLibrary;

src/components/icon/library.ts

@@ -36,7 +36,7 @@ export function registerIconLibrary(name: string, options: Omit<IconLibrary, 'na
     name,
     resolver: options.resolver,
     mutator: options.mutator,
-    spriteSheet: options.spriteSheet
+    spriteSheet: options.spriteSheet,
   });
 
   // Redraw watched icons

src/components/image-comparer/image-comparer.test.ts

@@ -57,8 +57,8 @@ describe('<wa-image-comparer>', () => {
 
         base.dispatchEvent(
           new KeyboardEvent('keydown', {
-            key: 'ArrowRight'
-          })
+            key: 'ArrowRight',
+          }),
         );
         await el.updateComplete;
 
@@ -77,8 +77,8 @@ describe('<wa-image-comparer>', () => {
 
         base.dispatchEvent(
           new KeyboardEvent('keydown', {
-            key: 'ArrowLeft'
-          })
+            key: 'ArrowLeft',
+          }),
         );
         await el.updateComplete;
 
@@ -97,8 +97,8 @@ describe('<wa-image-comparer>', () => {
 
         base.dispatchEvent(
           new KeyboardEvent('keydown', {
-            key: 'Home'
-          })
+            key: 'Home',
+          }),
         );
         await el.updateComplete;
 
@@ -117,8 +117,8 @@ describe('<wa-image-comparer>', () => {
 
         base.dispatchEvent(
           new KeyboardEvent('keydown', {
-            key: 'End'
-          })
+            key: 'End',
+          }),
         );
         await el.updateComplete;
 
@@ -140,8 +140,8 @@ describe('<wa-image-comparer>', () => {
 
         base.dispatchEvent(
           new KeyboardEvent('keydown', {
-            key: 'ArrowLeft'
-          })
+            key: 'ArrowLeft',
+          }),
         );
         await el.updateComplete;
 
@@ -163,8 +163,8 @@ describe('<wa-image-comparer>', () => {
 
         base.dispatchEvent(
           new KeyboardEvent('keydown', {
-            key: 'ArrowRight'
-          })
+            key: 'ArrowRight',
+          }),
         );
         await el.updateComplete;
 
@@ -184,8 +184,8 @@ describe('<wa-image-comparer>', () => {
         base.dispatchEvent(
           new KeyboardEvent('keydown', {
             key: 'ArrowRight',
-            shiftKey: true
-          })
+            shiftKey: true,
+          }),
         );
         await el.updateComplete;
 
@@ -205,8 +205,8 @@ describe('<wa-image-comparer>', () => {
         base.dispatchEvent(
           new KeyboardEvent('keydown', {
             key: 'ArrowLeft',
-            shiftKey: true
-          })
+            shiftKey: true,
+          }),
         );
         await el.updateComplete;
 
@@ -242,8 +242,8 @@ describe('<wa-image-comparer>', () => {
         document.dispatchEvent(
           new PointerEvent('pointermove', {
             clientX: offsetX + 20,
-            clientY: offsetY
-          })
+            clientY: offsetY,
+          }),
         );
 
         document.dispatchEvent(new PointerEvent('pointerup'));

src/components/image-comparer/image-comparer.ts

@@ -59,7 +59,7 @@ export default class WaImageComparer extends WebAwesomeElement {
         this.position = parseFloat(clamp((x / width) * 100, 0, 100).toFixed(2));
         if (isRtl) this.position = 100 - this.position;
       },
-      initialEvent: event
+      initialEvent: event,
     });
   }
 
@@ -105,7 +105,7 @@ export default class WaImageComparer extends WebAwesomeElement {
         id="image-comparer"
         class=${classMap({
           'image-comparer': true,
-          'image-comparer--rtl': isRtl
+          'image-comparer--rtl': isRtl,
         })}
         @keydown=${this.handleKeyDown}
       >
@@ -118,7 +118,7 @@ export default class WaImageComparer extends WebAwesomeElement {
             part="after"
             class="image-comparer__after"
             style=${styleMap({
-              clipPath: isRtl ? `inset(0 0 0 ${100 - this.position}%)` : `inset(0 ${100 - this.position}% 0 0)`
+              clipPath: isRtl ? `inset(0 0 0 ${100 - this.position}%)` : `inset(0 ${100 - this.position}% 0 0)`,
             })}
           >
             <slot name="after"></slot>
@@ -129,7 +129,7 @@ export default class WaImageComparer extends WebAwesomeElement {
           part="divider"
           class="image-comparer__divider"
           style=${styleMap({
-            left: isRtl ? `${100 - this.position}%` : `${this.position}%`
+            left: isRtl ? `${100 - this.position}%` : `${this.position}%`,
           })}
           @mousedown=${this.handleDrag}
           @touchstart=${this.handleDrag}

src/components/include/include.test.ts

@@ -19,7 +19,7 @@ const stubbedFetchResponse: Response = {
   formData: sinon.fake(),
   bodyUsed: false,
   body: null,
-  clone: sinon.fake()
+  clone: sinon.fake(),
 };
 
 async function delayResolve(resolveValue: string) {
@@ -40,7 +40,7 @@ describe('<wa-include>', () => {
           ...stubbedFetchResponse,
           ok: true,
           status: 200,
-          text: () => delayResolve('"id": 1')
+          text: () => delayResolve('"id": 1'),
         });
         const loadHandler = sinon.spy();
         document.addEventListener('wa-load', loadHandler);
@@ -59,7 +59,7 @@ describe('<wa-include>', () => {
           ...stubbedFetchResponse,
           ok: false,
           status: 404,
-          text: () => delayResolve('{}')
+          text: () => delayResolve('{}'),
         });
         const loadHandler = sinon.spy();
         document.addEventListener('wa-include-error', loadHandler);

src/components/include/request.ts

@@ -17,7 +17,7 @@ export function requestInclude(src: string, mode: 'cors' | 'no-cors' | 'same-ori
     const res = {
       ok: response.ok,
       status: response.status,
-      html: await response.text()
+      html: await response.text(),
     };
     // Replace the cached promise with its result to avoid having buggy browser Promises retain memory as mentioned in #1284 and #1249
     includeFiles.set(src, res);

src/components/input/input.test.ts

@@ -105,7 +105,7 @@ describe('<wa-input>', () => {
 
         it('should not add a value to the form if disabled', async () => {
           const form = await fixture<HTMLFormElement>(
-            html` <form><wa-input name="name" disabled required></wa-input></form>`
+            html` <form><wa-input name="name" disabled required></wa-input></form>`,
           );
           const el = form.querySelector('wa-input')!;
           el.value = 'blah';

src/components/input/input.ts

@@ -206,8 +206,8 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
     converter: {
       // Allow "true|false" attribute values but keep the property boolean
       fromAttribute: value => (!value || value === 'false' ? false : true),
-      toAttribute: value => (value ? 'true' : 'false')
-    }
+      toAttribute: value => (value ? 'true' : 'false'),
+    },
   })
   spellcheck = true;
 
@@ -289,7 +289,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
           }
 
           const button = formElements.find(
-            (el: HTMLButtonElement) => el.type === 'submit' && !el.matches(':disabled')
+            (el: HTMLButtonElement) => el.type === 'submit' && !el.matches(':disabled'),
           ) as undefined | HTMLButtonElement | WaButton;
 
           // No button found, don't submit.
@@ -339,7 +339,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
   setSelectionRange(
     selectionStart: number,
     selectionEnd: number,
-    selectionDirection: 'forward' | 'backward' | 'none' = 'none'
+    selectionDirection: 'forward' | 'backward' | 'none' = 'none',
   ) {
     this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
   }
@@ -349,7 +349,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
     replacement: string,
     start?: number,
     end?: number,
-    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'
+    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve',
   ) {
     const selectionStart = start ?? this.input.selectionStart!;
     const selectionEnd = end ?? this.input.selectionEnd!;
@@ -440,7 +440,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
               'input--disabled': this.disabled,
               'input--focused': this.hasFocus,
               'input--empty': !this.value,
-              'input--no-spin-buttons': this.noSpinButtons
+              'input--no-spin-buttons': this.noSpinButtons,
             })}
           >
             <span part="prefix" class="input__prefix">
@@ -531,7 +531,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
           name="hint"
           part="hint"
           class=${classMap({
-            'has-slotted': hasHint
+            'has-slotted': hasHint,
           })}
           aria-hidden=${hasHint ? 'false' : 'true'}
           >${this.hint}</slot

src/components/menu-item/menu-item.ts

@@ -178,7 +178,7 @@ export default class WaMenuItem extends WebAwesomeElement {
           'menu-item--disabled': this.disabled,
           'menu-item--loading': this.loading,
           'menu-item--has-submenu': this.isSubmenu(),
-          'menu-item--submenu-expanded': isSubmenuExpanded
+          'menu-item--submenu-expanded': isSubmenuExpanded,
         })}
         ?aria-haspopup="${this.isSubmenu()}"
         ?aria-expanded="${isSubmenuExpanded ? true : false}"

src/components/mutation-observer/mutation-observer.ts

@@ -75,7 +75,7 @@ export default class WaMutationObserver extends WebAwesomeElement {
         attributeFilter,
         attributeOldValue: this.attrOldValue,
         characterData: this.charData,
-        characterDataOldValue: this.charDataOldValue
+        characterDataOldValue: this.charDataOldValue,
       });
     } catch {
       //

src/components/option/option.ts

@@ -131,7 +131,7 @@ export default class WaOption extends WebAwesomeElement {
           'option--current': this.current,
           'option--disabled': this.disabled,
           'option--selected': this.selected,
-          'option--hover': this.hasHover
+          'option--hover': this.hasHover,
         })}
         @mouseenter=${this.handleMouseEnter}
         @mouseleave=${this.handleMouseLeave}

src/components/popup/popup.ts

@@ -150,8 +150,8 @@ export default class WaPopup extends WebAwesomeElement {
       },
       toAttribute: (value: []) => {
         return value.join(' ');
-      }
-    }
+      },
+    },
   })
   flipFallbackPlacements = '';
 
@@ -312,7 +312,7 @@ export default class WaPopup extends WebAwesomeElement {
     //
     const middleware = [
       // The offset middleware goes first
-      offset({ mainAxis: this.distance, crossAxis: this.skidding })
+      offset({ mainAxis: this.distance, crossAxis: this.skidding }),
     ];
 
     // First we sync width/height
@@ -324,8 +324,8 @@ export default class WaPopup extends WebAwesomeElement {
             const syncHeight = this.sync === 'height' || this.sync === 'both';
             this.popup.style.width = syncWidth ? `${rects.reference.width}px` : '';
             this.popup.style.height = syncHeight ? `${rects.reference.height}px` : '';
-          }
-        })
+          },
+        }),
       );
     } else {
       // Cleanup styles if we're not matching width/height
@@ -341,8 +341,8 @@ export default class WaPopup extends WebAwesomeElement {
           // @ts-expect-error - We're converting a string attribute to an array here
           fallbackPlacements: this.flipFallbackPlacements,
           fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',
-          padding: this.flipPadding
-        })
+          padding: this.flipPadding,
+        }),
       );
     }
 
@@ -351,8 +351,8 @@ export default class WaPopup extends WebAwesomeElement {
       middleware.push(
         shift({
           boundary: this.shiftBoundary,
-          padding: this.shiftPadding
-        })
+          padding: this.shiftPadding,
+        }),
       );
     }
 
@@ -374,8 +374,8 @@ export default class WaPopup extends WebAwesomeElement {
             } else {
               this.style.removeProperty('--auto-size-available-width');
             }
-          }
-        })
+          },
+        }),
       );
     } else {
       // Cleanup styles if we're no longer using auto-size
@@ -388,8 +388,8 @@ export default class WaPopup extends WebAwesomeElement {
       middleware.push(
         arrow({
           element: this.arrowEl,
-          padding: this.arrowPadding
-        })
+          padding: this.arrowPadding,
+        }),
       );
     }
 
@@ -409,8 +409,8 @@ export default class WaPopup extends WebAwesomeElement {
       strategy: this.strategy,
       platform: {
         ...platform,
-        getOffsetParent
-      }
+        getOffsetParent,
+      },
     }).then(({ x, y, middlewareData, placement }) => {
       //
       // Even though we have our own localization utility, it uses different heuristics to determine RTL. Because of
@@ -425,7 +425,7 @@ export default class WaPopup extends WebAwesomeElement {
 
       Object.assign(this.popup.style, {
         left: `${x}px`,
-        top: `${y}px`
+        top: `${y}px`,
       });
 
       if (this.arrow) {
@@ -463,7 +463,7 @@ export default class WaPopup extends WebAwesomeElement {
           right,
           bottom,
           left,
-          [staticSide]: 'calc(var(--arrow-size-diagonal) * -1)'
+          [staticSide]: 'calc(var(--arrow-size-diagonal) * -1)',
         });
       }
     });
@@ -557,7 +557,7 @@ export default class WaPopup extends WebAwesomeElement {
         part="hover-bridge"
         class=${classMap({
           'popup-hover-bridge': true,
-          'popup-hover-bridge--visible': this.hoverBridge && this.active
+          'popup-hover-bridge--visible': this.hoverBridge && this.active,
         })}
       ></span>
 
@@ -567,7 +567,7 @@ export default class WaPopup extends WebAwesomeElement {
           popup: true,
           'popup--active': this.active,
           'popup--fixed': this.strategy === 'fixed',
-          'popup--has-arrow': this.arrow
+          'popup--has-arrow': this.arrow,
         })}
       >
         <slot></slot>

src/components/progress-bar/progress-bar.test.ts

@@ -24,7 +24,7 @@ describe('<wa-progress-bar>', () => {
 
         beforeEach(async () => {
           el = await fixture<WaProgressBar>(
-            html`<wa-progress-bar title="Titled Progress Ring" value="25"></wa-progress-bar>`
+            html`<wa-progress-bar title="Titled Progress Ring" value="25"></wa-progress-bar>`,
           );
           base = el.shadowRoot!.querySelector('[part~="base"]')!;
           indicator = el.shadowRoot!.querySelector('[part~="indicator"]')!;
@@ -48,7 +48,7 @@ describe('<wa-progress-bar>', () => {
 
         beforeEach(async () => {
           el = await fixture<WaProgressBar>(
-            html`<wa-progress-bar title="Titled Progress Ring" indeterminate></wa-progress-bar>`
+            html`<wa-progress-bar title="Titled Progress Ring" indeterminate></wa-progress-bar>`,
           );
           base = el.shadowRoot!.querySelector('[part~="base"]')!;
         });
@@ -65,7 +65,7 @@ describe('<wa-progress-bar>', () => {
       describe('when provided a ariaLabel, and value parameter', () => {
         beforeEach(async () => {
           el = await fixture<WaProgressBar>(
-            html`<wa-progress-bar ariaLabel="Labelled Progress Ring" value="25"></wa-progress-bar>`
+            html`<wa-progress-bar ariaLabel="Labelled Progress Ring" value="25"></wa-progress-bar>`,
           );
         });
 

src/components/progress-bar/progress-bar.ts

@@ -46,7 +46,7 @@ export default class WaProgressBar extends WebAwesomeElement {
         class=${classMap({
           'progress-bar': true,
           'progress-bar--indeterminate': this.indeterminate,
-          'progress-bar--rtl': this.localize.dir() === 'rtl'
+          'progress-bar--rtl': this.localize.dir() === 'rtl',
         })}
         role="progressbar"
         title=${ifDefined(this.title)}

src/components/progress-ring/progress-ring.test.ts

@@ -23,7 +23,7 @@ describe('<wa-progress-ring>', () => {
 
         beforeEach(async () => {
           el = await fixture<WaProgressRing>(
-            html`<wa-progress-ring title="Titled Progress Ring" value="25"></wa-progress-ring>`
+            html`<wa-progress-ring title="Titled Progress Ring" value="25"></wa-progress-ring>`,
           );
           base = el.shadowRoot!.querySelector('[part~="base"]')!;
         });
@@ -44,7 +44,7 @@ describe('<wa-progress-ring>', () => {
       describe('when provided a ariaLabel, and value parameter', () => {
         beforeEach(async () => {
           el = await fixture<WaProgressRing>(
-            html`<wa-progress-ring ariaLabel="Labelled Progress Ring" value="25"></wa-progress-ring>`
+            html`<wa-progress-ring ariaLabel="Labelled Progress Ring" value="25"></wa-progress-ring>`,
           );
         });
 

src/components/qr-code/qr-code.test.ts

@@ -49,7 +49,7 @@ const getColorFromPixel = (colorArray: Uint8ClampedArray, pixelNumber: number):
     colorArray[startEntryNumber],
     colorArray[startEntryNumber + 1],
     colorArray[startEntryNumber + 2],
-    colorArray[startEntryNumber + 3]
+    colorArray[startEntryNumber + 3],
   );
 };
 
@@ -71,7 +71,7 @@ const getQrCodeColors = (qrCode: WaQrCode): QrCodeColors => {
   }
   return {
     foreground: foregroundColor,
-    background: backgroundColor!
+    background: backgroundColor!,
   };
 };
 
@@ -130,7 +130,7 @@ describe('<wa-qr-code>', () => {
 
       it('sets the correct background for the qr code', async () => {
         const qrCode = await fixture<WaQrCode>(
-          html` <wa-qr-code value="test data" fill="red" background="blue"></wa-qr-code>`
+          html` <wa-qr-code value="test data" fill="red" background="blue"></wa-qr-code>`,
         );
 
         expectQrCodeColorsToBe(qrCode, { foreground: red, background: blue });

src/components/qr-code/qr-code.ts

@@ -82,9 +82,9 @@ export default class WaQrCode extends WebAwesomeElement {
         fill: this.fill,
         background: this.background,
         // We draw the canvas larger and scale its container down to avoid blurring on high-density displays
-        size: this.size * 2
+        size: this.size * 2,
       },
-      this.canvas
+      this.canvas,
     );
 
     this.generated = true;

src/components/radio-button/radio-button.test.ts

@@ -40,7 +40,7 @@ describe('<wa-radio-button>', () => {
           radioGroup.updateComplete,
           radio1.updateComplete,
           radio2.updateComplete,
-          radio3.updateComplete
+          radio3.updateComplete,
         ]);
 
         expect(radio1.classList.contains('wa-button-group__button')).to.be.true;

src/components/radio-button/radio-button.ts

@@ -166,7 +166,7 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
             'button--pill': this.pill,
             'button--has-label': hasLabel,
             'button--has-prefix': hasPrefix,
-            'button--has-suffix': hasSuffix
+            'button--has-suffix': hasSuffix,
           })}
           aria-disabled=${this.disabled}
           type="button"

src/components/radio-group/radio-group.test.ts

@@ -326,7 +326,7 @@ describe('<wa-radio-group>', () => {
             const validFocusHandler = sinon.spy();
 
             Array.from(el.querySelectorAll<WaRadio>('wa-radio')).forEach(radio =>
-              radio.addEventListener('wa-focus', validFocusHandler)
+              radio.addEventListener('wa-focus', validFocusHandler),
             );
 
             expect(validFocusHandler).to.not.have.been.called;

src/components/radio-group/radio-group.ts

@@ -52,9 +52,9 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
               required: true,
               type: 'radio',
               // we need an id that's guaranteed to be unique; users will never see this
-              name: uniqueId('__wa-radio')
-            })
-          })
+              name: uniqueId('__wa-radio'),
+            }),
+          }),
         ];
     return [...super.validators, ...validators];
   }
@@ -185,7 +185,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
         } else {
           radio.checked = false;
         }
-      })
+      }),
     );
 
     this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'wa-radio-button');
@@ -356,7 +356,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
           name="hint"
           part="hint"
           class=${classMap({
-            'has-slotted': hasHint
+            'has-slotted': hasHint,
           })}
           aria-hidden=${hasHint ? 'false' : 'true'}
           >${this.hint}</slot

src/components/radio/radio.css

@@ -26,18 +26,6 @@
   cursor: pointer;
 }
 
-.radio--small {
-  font-size: var(--wa-font-size-s);
-}
-
-.radio--medium {
-  font-size: var(--wa-font-size-m);
-}
-
-.radio--large {
-  font-size: var(--wa-font-size-l);
-}
-
 .radio__checked-icon {
   display: flex;
   fill: currentColor;
@@ -90,7 +78,7 @@
 }
 
 /* Disabled */
-.radio--disabled {
+[part='radio']:has(:disabled) {
   opacity: 0.5;
   cursor: not-allowed;
 }

src/components/radio/radio.ts

@@ -5,6 +5,7 @@ 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 sizeStyles from '../../styles/shadow/size.css';
 import '../icon/icon.js';
 import styles from './radio.css';
 
@@ -40,10 +41,9 @@ import styles from './radio.css';
  */
 @customElement('wa-radio')
 export default class WaRadio extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = styles;
+  static shadowStyle = [sizeStyles, styles];
 
   @state() checked = false;
-  @state() protected hasFocus = false;
 
   /**
    * The string pointing to a form's id.
@@ -77,12 +77,10 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
   }
 
   private handleBlur = () => {
-    this.hasFocus = false;
     this.dispatchEvent(new WaBlurEvent());
   };
 
   private handleFocus = () => {
-    this.hasFocus = true;
     this.dispatchEvent(new WaFocusEvent());
   };
 
@@ -124,10 +122,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
           radio: true,
           'radio--checked': this.checked,
           'radio--disabled': this.disabled,
-          'radio--focused': this.hasFocus,
-          'radio--small': this.size === 'small',
-          'radio--medium': this.size === 'medium',
-          'radio--large': this.size === 'large'
         })}
       >
         <span part="${`control${this.checked ? ' control--checked' : ''}`}" class="radio__control">

src/components/range/range.ts

@@ -284,7 +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-label': hasLabel,
         })}
       >
         <label
@@ -306,7 +306,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
               'range--rtl': this.localize.dir() === 'rtl',
               'range--tooltip-visible': this.hasTooltip,
               'range--tooltip-top': this.tooltip === 'top',
-              'range--tooltip-bottom': this.tooltip === 'bottom'
+              'range--tooltip-bottom': this.tooltip === 'bottom',
             })}
             @mousedown=${this.handleThumbDragStart}
             @mouseup=${this.handleThumbDragEnd}
@@ -345,7 +345,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
           name="hint"
           part="hint"
           class=${classMap({
-            'has-slotted': hasHint
+            'has-slotted': hasHint,
           })}
           aria-hidden=${hasHint ? 'false' : 'true'}
           >${this.hint}</slot

src/components/rating/rating.ts

@@ -189,8 +189,8 @@ export default class WaRating extends WebAwesomeElement {
     this.dispatchEvent(
       new WaHoverEvent({
         phase: 'move',
-        value: this.hoverValue
-      })
+        value: this.hoverValue,
+      }),
     );
   }
 
@@ -199,8 +199,8 @@ export default class WaRating extends WebAwesomeElement {
     this.dispatchEvent(
       new WaHoverEvent({
         phase: this.isHovering ? 'start' : 'end',
-        value: this.hoverValue
-      })
+        value: this.hoverValue,
+      }),
     );
   }
 
@@ -232,7 +232,7 @@ export default class WaRating extends WebAwesomeElement {
           rating: true,
           'rating--readonly': this.readonly,
           'rating--disabled': this.disabled,
-          'rating--rtl': isRtl
+          'rating--rtl': isRtl,
         })}
         role="slider"
         aria-label=${this.label}
@@ -262,7 +262,7 @@ export default class WaRating extends WebAwesomeElement {
                   class=${classMap({
                     rating__symbol: true,
                     'rating__partial-symbol-container': true,
-                    'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1
+                    'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
                   })}
                   role="presentation"
                 >
@@ -270,7 +270,7 @@ export default class WaRating extends WebAwesomeElement {
                     style=${styleMap({
                       clipPath: isRtl
                         ? `inset(0 ${(displayValue - index) * 100}% 0 0)`
-                        : `inset(0 0 0 ${(displayValue - index) * 100}%)`
+                        : `inset(0 0 0 ${(displayValue - index) * 100}%)`,
                     })}
                   >
                     ${unsafeHTML(this.getSymbol(index + 1))}
@@ -280,7 +280,7 @@ export default class WaRating extends WebAwesomeElement {
                     style=${styleMap({
                       clipPath: isRtl
                         ? `inset(0 0 0 ${100 - (displayValue - index) * 100}%)`
-                        : `inset(0 ${100 - (displayValue - index) * 100}% 0 0)`
+                        : `inset(0 ${100 - (displayValue - index) * 100}% 0 0)`,
                     })}
                   >
                     ${unsafeHTML(this.getSymbol(index + 1))}
@@ -294,7 +294,7 @@ export default class WaRating extends WebAwesomeElement {
                 class=${classMap({
                   rating__symbol: true,
                   'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
-                  'rating__symbol--active': displayValue >= index + 1
+                  'rating__symbol--active': displayValue >= index + 1,
                 })}
                 role="presentation"
               >

src/components/relative-time/relative-time.test.ts

@@ -22,7 +22,7 @@ const expectFormattedRelativeTimeToBe = async (relativeTime: WaRelativeTime, exp
 
 const createRelativeTimeWithDate = async (
   relativeDate: Date,
-  fixture: typeof hydratedFixture | typeof clientFixture
+  fixture: typeof hydratedFixture | typeof clientFixture,
 ): Promise<WaRelativeTime> => {
   const relativeTime: WaRelativeTime = await fixture<WaRelativeTime>(html`
     <wa-relative-time lang="en-US"></wa-relative-time>
@@ -43,36 +43,36 @@ const yesterday = new Date(currentTime.getTime() - dayInSeconds);
 const testCases: WaRelativeTimeTestCase[] = [
   {
     date: new Date(currentTime.getTime() - minuteInSeconds),
-    expectedOutput: '1 minute ago'
+    expectedOutput: '1 minute ago',
   },
   {
     date: new Date(currentTime.getTime() - hourInSeconds),
-    expectedOutput: '1 hour ago'
+    expectedOutput: '1 hour ago',
   },
   {
     date: yesterday,
-    expectedOutput: 'yesterday'
+    expectedOutput: 'yesterday',
   },
   {
     date: new Date(currentTime.getTime() - 4 * dayInSeconds),
-    expectedOutput: '4 days ago'
+    expectedOutput: '4 days ago',
   },
   {
     date: new Date(currentTime.getTime() - weekInSeconds),
-    expectedOutput: 'last week'
+    expectedOutput: 'last week',
   },
   {
     date: new Date(currentTime.getTime() - monthInSeconds),
-    expectedOutput: 'last month'
+    expectedOutput: 'last month',
   },
   {
     date: new Date(currentTime.getTime() - nonLeapYearInSeconds),
-    expectedOutput: 'last year'
+    expectedOutput: 'last year',
   },
   {
     date: new Date(currentTime.getTime() + minuteInSeconds),
-    expectedOutput: 'in 1 minute'
-  }
+    expectedOutput: 'in 1 minute',
+  },
 ];
 
 describe('wa-relative-time', () => {

src/components/relative-time/relative-time.ts

@@ -15,7 +15,7 @@ const availableUnits: UnitConfig[] = [
   { max: 518400000, value: 86400000, unit: 'day' }, // max 6 days
   { max: 2419200000, value: 604800000, unit: 'week' }, // max 28 days
   { max: 28512000000, value: 2592000000, unit: 'month' }, // max 11 months
-  { max: Infinity, value: 31536000000, unit: 'year' }
+  { max: Infinity, value: 31536000000, unit: 'year' },
 ];
 
 /**
@@ -73,7 +73,7 @@ export default class WaRelativeTime extends WebAwesomeElement {
     this.isoTime = then.toISOString();
     this.relativeTime = this.localize.relativeTime(Math.round(diff / value), unit, {
       numeric: this.numeric,
-      style: this.format
+      style: this.format,
     });
 
     // If sync is enabled, update as time passes

src/components/resize-observer/resize-observer.test.ts

@@ -9,7 +9,7 @@ describe('<wa-resize-observer>', () => {
         const el = await fixture(
           html`<wa-resize-observer>
             <div>Resize this box and watch the console 👉</div>
-          </wa-resize-observer>`
+          </wa-resize-observer>`,
         );
 
         await expect(el).to.be.accessible();

src/components/select/select.test.ts

@@ -642,7 +642,7 @@ describe('<wa-select>', () => {
         describe('With no existing options', () => {
           it('Should wait to select the option when the option exists for single select', async () => {
             const form = await fixture<HTMLFormElement>(
-              html`<form><wa-select name="select" value="option-1"></wa-select></form>`
+              html`<form><wa-select name="select" value="option-1"></wa-select></form>`,
             );
             const el = form.querySelector<WaSelect>('wa-select')!;
 
@@ -662,7 +662,7 @@ describe('<wa-select>', () => {
 
           it('Should wait to select the option when the option exists for multiple select', async () => {
             const form = await fixture<HTMLFormElement>(
-              html`<form><wa-select name="select" value="option-1" multiple></wa-select></form>`
+              html`<form><wa-select name="select" value="option-1" multiple></wa-select></form>`,
             );
 
             const el = form.querySelector<WaSelect>('wa-select')!;
@@ -690,7 +690,7 @@ describe('<wa-select>', () => {
                   <wa-option value="bar">Bar</wa-option>
                   <wa-option value="baz">Baz</wa-option>
                 </wa-select>
-              </form>`
+              </form>`,
             );
 
             const el = form.querySelector<WaSelect>('wa-select')!;
@@ -715,7 +715,7 @@ describe('<wa-select>', () => {
                   <wa-option value="bar">Bar</wa-option>
                   <wa-option value="baz">Baz</wa-option>
                 </wa-select>
-              </form>`
+              </form>`,
             );
 
             const el = form.querySelector<WaSelect>('wa-select')!;
@@ -740,7 +740,7 @@ describe('<wa-select>', () => {
                   <wa-option value="bar">Bar</wa-option>
                   <wa-option value="baz">Baz</wa-option>
                 </wa-select>
-              </form>`
+              </form>`,
             );
 
             const el = form.querySelector<WaSelect>('wa-select')!;

src/components/select/select.ts

@@ -92,8 +92,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
       ? []
       : [
           RequiredValidator({
-            validationElement: Object.assign(document.createElement('select'), { required: true })
-          })
+            validationElement: Object.assign(document.createElement('select'), { required: true }),
+          }),
         ];
     return [...super.validators, ...validators];
   }
@@ -132,8 +132,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     reflect: true,
     converter: {
       fromAttribute: (value: string) => value.split(' '),
-      toAttribute: (value: string | string[]) => (Array.isArray(value) ? value.join(' ') : value)
-    }
+      toAttribute: (value: string | string[]) => (Array.isArray(value) ? value.join(' ') : value),
+    },
   })
   set defaultValue(val: string | string[]) {
     this._defaultValue = this.convertDefaultValue(val);
@@ -799,7 +799,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
           'form-control--medium': this.size === 'medium',
           'form-control--large': this.size === 'large',
           'form-control--has-label': hasLabel,
-          'form-control--has-hint': hasHint
         })}
       >
         <label
@@ -935,7 +934,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
           name="hint"
           part="hint"
           class=${classMap({
-            'has-slotted': hasHint
+            'has-slotted': hasHint,
           })}
           aria-hidden=${hasHint ? 'false' : 'true'}
           >${this.hint}</slot

src/components/skeleton/skeleton.ts

@@ -31,7 +31,7 @@ export default class WaSkeleton extends WebAwesomeElement {
         class=${classMap({
           skeleton: true,
           'skeleton--pulse': this.effect === 'pulse',
-          'skeleton--sheen': this.effect === 'sheen'
+          'skeleton--sheen': this.effect === 'sheen',
         })}
       >
         <div part="indicator" class="skeleton__indicator"></div>

src/components/split-panel/split-panel.test.ts

@@ -51,7 +51,7 @@ describe('<wa-split-panel>', () => {
           html`<wa-split-panel>
             <div slot="start">Start</div>
             <div slot="end">End</div>
-          </wa-split-panel>`
+          </wa-split-panel>`,
         );
 
         await expect(splitPanel).to.be.accessible();
@@ -62,7 +62,7 @@ describe('<wa-split-panel>', () => {
           html`<wa-split-panel>
             <div slot="start">Start</div>
             <div slot="end">End</div>
-          </wa-split-panel>`
+          </wa-split-panel>`,
         );
 
         expect(splitPanel).to.contain.text('Start');
@@ -75,7 +75,7 @@ describe('<wa-split-panel>', () => {
             html`<wa-split-panel>
               <div slot="start" data-testid="start-panel">Start</div>
               <div slot="end" data-testid="end-panel">End</div>
-            </wa-split-panel>`
+            </wa-split-panel>`,
           );
 
           const startPanelWidth = getPanelWidth(splitPanel, 'start-panel');
@@ -89,7 +89,7 @@ describe('<wa-split-panel>', () => {
             html`<wa-split-panel position="25">
               <div slot="start" data-testid="start-panel">Start</div>
               <div slot="end" data-testid="end-panel">End</div>
-            </wa-split-panel>`
+            </wa-split-panel>`,
           );
 
           const startPanelWidth = getPanelWidth(splitPanel, 'start-panel');
@@ -103,7 +103,7 @@ describe('<wa-split-panel>', () => {
             html`<wa-split-panel position="25">
               <div slot="start" data-testid="start-panel">Start</div>
               <div slot="end" data-testid="end-panel">End</div>
-            </wa-split-panel>`
+            </wa-split-panel>`,
           );
 
           splitPanel.position = 10;
@@ -118,7 +118,7 @@ describe('<wa-split-panel>', () => {
             html`<wa-split-panel>
               <div slot="start">Start</div>
               <div slot="end">End</div>
-            </wa-split-panel>`
+            </wa-split-panel>`,
           );
 
           const repositionPromise = oneEvent(splitPanel, 'wa-reposition');
@@ -131,7 +131,7 @@ describe('<wa-split-panel>', () => {
             html`<wa-split-panel>
               <div slot="start">Start</div>
               <div slot="end">End</div>
-            </wa-split-panel>`
+            </wa-split-panel>`,
           );
 
           const positionInPixels = Math.round(splitPanel.positionInPixels);
@@ -149,7 +149,7 @@ describe('<wa-split-panel>', () => {
             html`<wa-split-panel disabled>
               <div slot="start">Start</div>
               <div slot="end">End</div>
-            </wa-split-panel>`
+            </wa-split-panel>`,
           );
 
           const positionInPixels = Math.round(splitPanel.positionInPixels);
@@ -167,7 +167,7 @@ describe('<wa-split-panel>', () => {
             html`<wa-split-panel>
               <div slot="start">Start</div>
               <div slot="end">End</div>
-            </wa-split-panel>`
+            </wa-split-panel>`,
           );
 
           const positionInPixels = Math.round(splitPanel.positionInPixels);
@@ -188,7 +188,7 @@ describe('<wa-split-panel>', () => {
             html`<wa-split-panel vertical style="height: 400px;">
               <div slot="start" data-testid="start-panel">Start</div>
               <div slot="end" data-testid="end-panel">End</div>
-            </wa-split-panel>`
+            </wa-split-panel>`,
           );
 
           const startPanelHeight = getPanelHeight(splitPanel, 'start-panel');
@@ -202,7 +202,7 @@ describe('<wa-split-panel>', () => {
             html`<wa-split-panel position="25" vertical style="height: 400px;">
               <div slot="start" data-testid="start-panel">Start</div>
               <div slot="end" data-testid="end-panel">End</div>
-            </wa-split-panel>`
+            </wa-split-panel>`,
           );
 
           const startPanelHeight = getPanelHeight(splitPanel, 'start-panel');
@@ -216,7 +216,7 @@ describe('<wa-split-panel>', () => {
             html`<wa-split-panel position="25" vertical style="height: 400px;">
               <div slot="start" data-testid="start-panel">Start</div>
               <div slot="end" data-testid="end-panel">End</div>
-            </wa-split-panel>`
+            </wa-split-panel>`,
           );
 
           splitPanel.position = 10;
@@ -231,7 +231,7 @@ describe('<wa-split-panel>', () => {
             html`<wa-split-panel vertical style="height: 400px;">
               <div slot="start">Start</div>
               <div slot="end">End</div>
-            </wa-split-panel>`
+            </wa-split-panel>`,
           );
 
           const repositionPromise = oneEvent(splitPanel, 'wa-reposition');
@@ -244,7 +244,7 @@ describe('<wa-split-panel>', () => {
             html`<wa-split-panel vertical style="height: 400px;">
               <div slot="start">Start</div>
               <div slot="end">End</div>
-            </wa-split-panel>`
+            </wa-split-panel>`,
           );
 
           const positionInPixels = Math.round(splitPanel.positionInPixels);
@@ -262,7 +262,7 @@ describe('<wa-split-panel>', () => {
             html`<wa-split-panel disabled vertical style="height: 400px;">
               <div slot="start">Start</div>
               <div slot="end">End</div>
-            </wa-split-panel>`
+            </wa-split-panel>`,
           );
 
           const positionInPixels = Math.round(splitPanel.positionInPixels);
@@ -280,7 +280,7 @@ describe('<wa-split-panel>', () => {
             html`<wa-split-panel vertical style="height: 400px;">
               <div slot="start">Start</div>
               <div slot="end">End</div>
-            </wa-split-panel>`
+            </wa-split-panel>`,
           );
 
           const positionInPixels = Math.round(splitPanel.positionInPixels);

src/components/split-panel/split-panel.ts

@@ -153,7 +153,7 @@ export default class WaSplitPanel extends WebAwesomeElement {
 
         this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);
       },
-      initialEvent: event
+      initialEvent: event,
     });
   }
 

src/components/switch/switch.ts

@@ -254,7 +254,7 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
             'switch--focused': this.hasFocus,
             'switch--small': this.size === 'small',
             'switch--medium': this.size === 'medium',
-            'switch--large': this.size === 'large'
+            'switch--large': this.size === 'large',
           })}
         >
           <input
@@ -289,7 +289,7 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
           name="hint"
           part="hint"
           class=${classMap({
-            'has-slotted': hasHint
+            'has-slotted': hasHint,
           })}
           aria-hidden=${hasHint ? 'false' : 'true'}
           >${this.hint}</slot

src/components/tab-group/tab-group.test.ts

@@ -31,7 +31,7 @@ const getClientRectangles = (tabGroup: WaTabGroup): ClientRectangles => {
     const body = shadowRoot.querySelector<HTMLElement>('[part=body]');
     return {
       body: body?.getBoundingClientRect(),
-      navigation: nav?.getBoundingClientRect()
+      navigation: nav?.getBoundingClientRect(),
     };
   }
   return {};
@@ -198,7 +198,7 @@ describe('<wa-tab-group>', () => {
           for (let i = 0; i < n; i++) {
             result.push(
               html`<wa-tab panel="tab-${i}">Tab ${i}</wa-tab>
-                <wa-tab-panel name="tab-${i}">Content of tab ${i}0</wa-tab-panel> `
+                <wa-tab-panel name="tab-${i}">Content of tab ${i}0</wa-tab-panel> `,
             );
           }
           return result;
@@ -214,7 +214,7 @@ describe('<wa-tab-group>', () => {
             source?: string | undefined,
             lineno?: number | undefined,
             colno?: number | undefined,
-            error?: Error | undefined
+            error?: Error | undefined,
           ) => {
             if ((event as string).includes('ResizeObserver') || event === 'Script error.') {
               return true;
@@ -289,7 +289,7 @@ describe('<wa-tab-group>', () => {
         it.skip('does scroll on scroll button click', async () => {
           const numberOfElements = 15;
           const tabGroup = await fixture<WaTabGroup>(
-            html`<wa-tab-group> ${generateTabs(numberOfElements)} </wa-tab-group>`
+            html`<wa-tab-group> ${generateTabs(numberOfElements)} </wa-tab-group>`,
           );
 
           await waitForScrollButtonsToBeRendered(tabGroup);
@@ -319,7 +319,7 @@ describe('<wa-tab-group>', () => {
       describe('tab selection', () => {
         const expectCustomTabToBeActiveAfter = async (
           tabGroup: WaTabGroup,
-          action: () => Promise<void>
+          action: () => Promise<void>,
         ): Promise<void> => {
           const generalHeader = await waitForHeaderToBeActive(tabGroup, 'general-header');
           generalHeader.focus();
@@ -337,7 +337,7 @@ describe('<wa-tab-group>', () => {
 
         const expectGeneralTabToBeStillActiveAfter = async (
           tabGroup: WaTabGroup,
-          action: () => Promise<void>
+          action: () => Promise<void>,
         ): Promise<void> => {
           const generalHeader = await waitForHeaderToBeActive(tabGroup, 'general-header');
           generalHeader.focus();

src/components/tab-group/tab-group.ts

@@ -276,7 +276,7 @@ export default class WaTabGroup extends WebAwesomeElement {
         this.localize.dir() === 'rtl'
           ? this.nav.scrollLeft + this.nav.clientWidth
           : this.nav.scrollLeft - this.nav.clientWidth,
-      behavior: 'smooth'
+      behavior: 'smooth',
     });
   }
 
@@ -286,7 +286,7 @@ export default class WaTabGroup extends WebAwesomeElement {
         this.localize.dir() === 'rtl'
           ? this.nav.scrollLeft - this.nav.clientWidth
           : this.nav.scrollLeft + this.nav.clientWidth,
-      behavior: 'smooth'
+      behavior: 'smooth',
     });
   }
 
@@ -294,7 +294,7 @@ export default class WaTabGroup extends WebAwesomeElement {
     options = {
       emitEvents: true,
       scrollBehavior: 'auto',
-      ...options
+      ...options,
     };
 
     if (tab !== this.activeTab && !tab.disabled) {
@@ -383,7 +383,7 @@ export default class WaTabGroup extends WebAwesomeElement {
           'tab-group--start': this.placement === 'start',
           'tab-group--end': this.placement === 'end',
           'tab-group--rtl': isRtl,
-          'tab-group--has-scroll-controls': this.hasScrollControls
+          'tab-group--has-scroll-controls': this.hasScrollControls,
         })}
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}

src/components/tab-panel/tab-panel.ts

@@ -49,7 +49,7 @@ export default class WaTabPanel extends WebAwesomeElement {
         part="base"
         class=${classMap({
           'tab-panel': true,
-          'tab-panel--active': this.active
+          'tab-panel--active': this.active,
         })}
       ></slot>
     `;

src/components/tab/tab.ts

@@ -77,7 +77,7 @@ export default class WaTab extends WebAwesomeElement {
         class=${classMap({
           tab: true,
           'tab--active': this.active,
-          'tab--disabled': this.disabled
+          'tab--disabled': this.disabled,
         })}
       >
         <slot></slot>

src/components/tag/tag.ts

@@ -75,7 +75,7 @@ export default class WaTag extends WebAwesomeElement {
 
           // Modifiers
           'tag--pill': this.pill,
-          'tag--removable': this.removable
+          'tag--removable': this.removable,
         })}
       >
         <slot part="content" class="tag__content"></slot>