diff --git a/.changeset/yellow-mails-exist.md b/.changeset/yellow-mails-exist.md
new file mode 100644
index 000000000..eae484171
--- /dev/null
+++ b/.changeset/yellow-mails-exist.md
@@ -0,0 +1,7 @@
+---
+'@lion/nodejs-helpers': minor
+---
+
+Update underlying code-formatter prettier to major version 3 and updated the prettify API accordingly.
+
+Consumers of this package need to make sure to await any calls to `prettify` as the function now returns a promise.
diff --git a/docs/blog/extending-documentation.md b/docs/blog/extending-documentation.md
index bf8cd476c..911bfd647 100644
--- a/docs/blog/extending-documentation.md
+++ b/docs/blog/extending-documentation.md
@@ -262,15 +262,14 @@ Or you can add an extra paragraph below the content. Create a fenced codeblock:
 ### Lea Tabs Special Feature
 
 ```js
-export const specialFeature = () =>
-  html`
-    <lea-tabs>
-      <lea-tab slot="tab">Info</lea-tab>
-      <lea-tab-panel slot="panel"> Info page with lots of information about us. </lea-tab-panel>
-      <lea-tab slot="tab">Work</lea-tab>
-      <lea-tab-panel slot="panel"> Work page that showcases our work. </lea-tab-panel>
-    </lea-tabs>
-  `;
+export const specialFeature = () => html`
+  <lea-tabs>
+    <lea-tab slot="tab">Info</lea-tab>
+    <lea-tab-panel slot="panel"> Info page with lots of information about us. </lea-tab-panel>
+    <lea-tab slot="tab">Work</lea-tab>
+    <lea-tab-panel slot="panel"> Work page that showcases our work. </lea-tab-panel>
+  </lea-tabs>
+`;
 ```
 
 ## Summary
diff --git a/docs/components/button/use-cases.md b/docs/components/button/use-cases.md
index dd32cff89..8ba83e0b9 100644
--- a/docs/components/button/use-cases.md
+++ b/docs/components/button/use-cases.md
@@ -28,16 +28,17 @@ export const disabled = () => html`<lion-button disabled>Disabled</lion-button>`
 The minimum click area needs to be at least `44px` by `44px` according to [WCAG Success Criterion 2.5.5 Target Size (Enhanced)](https://www.w3.org/TR/WCAG22/#target-size-enhanced).
 
 ```js preview-story
-export const minimumClickArea = () => html` <style>
-    .small {
-      padding: 4px;
-      line-height: 1em;
-    }
-    .small::before {
-      border: 1px dashed #000;
-    }
-  </style>
-  <lion-button class="small">xs</lion-button>`;
+export const minimumClickArea = () =>
+  html` <style>
+      .small {
+        padding: 4px;
+        line-height: 1em;
+      }
+      .small::before {
+        border: 1px dashed #000;
+      }
+    </style>
+    <lion-button class="small">xs</lion-button>`;
 ```
 
 ## Usage with native form
diff --git a/docs/components/collapsible/assets/applyDemoCollapsibleStyles.js b/docs/components/collapsible/assets/applyDemoCollapsibleStyles.js
index caba2de06..dd5b6b8ee 100644
--- a/docs/components/collapsible/assets/applyDemoCollapsibleStyles.js
+++ b/docs/components/collapsible/assets/applyDemoCollapsibleStyles.js
@@ -7,7 +7,9 @@ const applyDemoCollapsibleStyles = () => {
       margin: 16px;
       border-radius: 4px;
       width: 400px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      box-shadow:
+        0 1px 3px rgba(0, 0, 0, 0.12),
+        0 1px 2px rgba(0, 0, 0, 0.24);
     }
 
     .demo-custom-collapsible-body {
@@ -18,7 +20,9 @@ const applyDemoCollapsibleStyles = () => {
       border-width: 0;
       border-radius: 2px;
       padding: 12px 24px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      box-shadow:
+        0 1px 3px rgba(0, 0, 0, 0.12),
+        0 1px 2px rgba(0, 0, 0, 0.24);
       font-weight: bold;
       color: #3f51b5;
     }
diff --git a/docs/components/combobox/overview.md b/docs/components/combobox/overview.md
index dcee94177..b5f7fc9c1 100644
--- a/docs/components/combobox/overview.md
+++ b/docs/components/combobox/overview.md
@@ -25,8 +25,9 @@ export const main = () => html`
   <lion-combobox name="combo" label="Default">
     ${lazyRender(
       listboxData.map(
-        (entry, i) =>
-          html` <lion-option .checked="${i === 0}" .choiceValue="${entry}">${entry}</lion-option> `,
+        (entry, i) => html`
+          <lion-option .checked="${i === 0}" .choiceValue="${entry}">${entry}</lion-option>
+        `,
       ),
     )}
   </lion-combobox>
diff --git a/docs/components/combobox/src/gh-combobox/gh-button.js b/docs/components/combobox/src/gh-combobox/gh-button.js
index c24f2d33a..65f8f5505 100644
--- a/docs/components/combobox/src/gh-combobox/gh-button.js
+++ b/docs/components/combobox/src/gh-combobox/gh-button.js
@@ -35,7 +35,9 @@ export class GhButton extends LionButton {
         color: #24292e;
         background-color: #fafbfc;
         border-color: rgba(27, 31, 35, 0.15);
-        box-shadow: 0 1px 0 rgba(27, 31, 35, 0.04), inset 0 1px 0 hsla(0, 0%, 100%, 0.25);
+        box-shadow:
+          0 1px 0 rgba(27, 31, 35, 0.04),
+          inset 0 1px 0 hsla(0, 0%, 100%, 0.25);
         transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
       }
 
diff --git a/docs/components/combobox/src/gh-combobox/gh-combobox.js b/docs/components/combobox/src/gh-combobox/gh-combobox.js
index c4c6a47e5..cee9f254d 100644
--- a/docs/components/combobox/src/gh-combobox/gh-combobox.js
+++ b/docs/components/combobox/src/gh-combobox/gh-combobox.js
@@ -123,8 +123,15 @@ export class GhCombobox extends LionCombobox {
         /** @configure LionCombobox */
 
         :host {
-          font-family: apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
-            Apple Color Emoji, Segoe UI Emoji;
+          font-family:
+            apple-system,
+            BlinkMacSystemFont,
+            Segoe UI,
+            Helvetica,
+            Arial,
+            sans-serif,
+            Apple Color Emoji,
+            Segoe UI Emoji;
           font-size: 14px;
         }
 
diff --git a/docs/components/combobox/src/google-combobox/google-combobox.js b/docs/components/combobox/src/google-combobox/google-combobox.js
index 128bb78b5..e5881c9e7 100644
--- a/docs/components/combobox/src/google-combobox/google-combobox.js
+++ b/docs/components/combobox/src/google-combobox/google-combobox.js
@@ -403,15 +403,13 @@ export class GoogleCombobox extends LionCombobox {
         ),
       prefix: () => renderLitAsNode(html` <span>${googleSearchIcon}</span> `),
       suffix: () =>
-        renderLitAsNode(
-          html` <button aria-label="Search by voice">${googleVoiceSearchIcon}</button> `,
-        ),
+        renderLitAsNode(html`
+          <button aria-label="Search by voice">${googleVoiceSearchIcon}</button>
+        `),
       'clear-btn': () =>
-        renderLitAsNode(
-          html`
-            <button @click="${this.__clearText}" aria-label="Clear text">${googleClearIcon}</button>
-          `,
-        ),
+        renderLitAsNode(html`
+          <button @click="${this.__clearText}" aria-label="Clear text">${googleClearIcon}</button>
+        `),
     };
   }
 
diff --git a/docs/components/combobox/src/md-combobox/MdFieldMixin.js b/docs/components/combobox/src/md-combobox/MdFieldMixin.js
index 1c813f9c9..c0f9e1aa5 100644
--- a/docs/components/combobox/src/md-combobox/MdFieldMixin.js
+++ b/docs/components/combobox/src/md-combobox/MdFieldMixin.js
@@ -48,7 +48,8 @@ export const MdFieldMixin = dedupeMixin(
               transform: perspective(100px);
               -ms-transform: none;
               transform-origin: 0 0;
-              transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
+              transition:
+                transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                 color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                 width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
               /* z-index: 1; */
@@ -205,7 +206,9 @@ export const MdFieldMixin = dedupeMixin(
               background-position: 50%;
               transform: scale(10, 10);
               opacity: 0;
-              transition: transform 0.25s, opacity 0.5s;
+              transition:
+                transform 0.25s,
+                opacity 0.5s;
             }
 
             .input-group__container > .input-group__prefix ::slotted(button:active)::after,
@@ -288,7 +291,8 @@ export const MdFieldMixin = dedupeMixin(
               visibility: visible;
               opacity: 1;
               transform: scaleX(1);
-              transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
+              transition:
+                transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                 opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1),
                 background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
             }
diff --git a/docs/components/combobox/src/wa-combobox/wa-combobox.js b/docs/components/combobox/src/wa-combobox/wa-combobox.js
index 70180c9f9..be3f0dbaf 100644
--- a/docs/components/combobox/src/wa-combobox/wa-combobox.js
+++ b/docs/components/combobox/src/wa-combobox/wa-combobox.js
@@ -28,7 +28,9 @@ class WaOption extends LionOption {
         cursor: pointer;
         color: rgb(74, 74, 74);
         padding: 0;
-        transition: max-height 0.4s ease, opacity 0.3s ease;
+        transition:
+          max-height 0.4s ease,
+          opacity 0.3s ease;
         max-height: 500px;
       }
 
@@ -287,8 +289,18 @@ class WaCombobox extends LionCombobox {
     ...super.styles,
     css`
       :host {
-        font-family: SF Pro Text, SF Pro Icons, system, -apple-system, system-ui, BlinkMacSystemFont,
-          Helvetica Neue, Helvetica, Lucida Grande, Kohinoor Devanagari, sans-serif;
+        font-family:
+          SF Pro Text,
+          SF Pro Icons,
+          system,
+          -apple-system,
+          system-ui,
+          BlinkMacSystemFont,
+          Helvetica Neue,
+          Helvetica,
+          Lucida Grande,
+          Kohinoor Devanagari,
+          sans-serif;
       }
 
       .input-group__container {
diff --git a/docs/components/combobox/use-cases.md b/docs/components/combobox/use-cases.md
index 6fb52e918..d213efb39 100644
--- a/docs/components/combobox/use-cases.md
+++ b/docs/components/combobox/use-cases.md
@@ -242,8 +242,9 @@ export const multipleChoice = () => html`
     ></demo-selection-display>
     ${lazyRender(
       listboxData.map(
-        (entry, i) =>
-          html` <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option> `,
+        (entry, i) => html`
+          <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option>
+        `,
       ),
     )}
   </lion-combobox>
@@ -264,8 +265,9 @@ export const multipleCustomizableChoice = () => html`
     ></demo-selection-display>
     ${lazyRender(
       listboxData.map(
-        (entry, i) =>
-          html` <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option> `,
+        (entry, i) => html`
+          <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option>
+        `,
       ),
     )}
   </lion-combobox>
@@ -434,23 +436,23 @@ const onModelValueChanged = event => {
   console.log(`event.target.modelValue: ${JSON.stringify(event.target.modelValue)}`);
 };
 
-export const complexObjectChoiceValue = () => html` <complex-object-combobox
-  name="combo"
-  label="Display only the label once selected"
-  @model-value-changed="${onModelValueChanged}"
->
-  ${lazyRender(
-    listboxComplexData.map(
-      entry =>
-        html`
+export const complexObjectChoiceValue = () =>
+  html` <complex-object-combobox
+    name="combo"
+    label="Display only the label once selected"
+    @model-value-changed="${onModelValueChanged}"
+  >
+    ${lazyRender(
+      listboxComplexData.map(
+        entry => html`
           <lion-option .choiceValue="${entry.label}">
             <div data-key>${entry.label}</div>
             <small>${entry.description}</small>
           </lion-option>
         `,
-    ),
-  )}
-</complex-object-combobox>`;
+      ),
+    )}
+  </complex-object-combobox>`;
 ```
 
 ## Listbox compatibility
diff --git a/docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js b/docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js
index 8c32d01cc..e263edcb2 100644
--- a/docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js
+++ b/docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js
@@ -46,9 +46,15 @@ export class IntlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdo
         border-radius: 4px;
         -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
         box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-        -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
-        -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-        transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+        -webkit-transition:
+          border-color ease-in-out 0.15s,
+          -webkit-box-shadow ease-in-out 0.15s;
+        -o-transition:
+          border-color ease-in-out 0.15s,
+          box-shadow ease-in-out 0.15s;
+        transition:
+          border-color ease-in-out 0.15s,
+          box-shadow ease-in-out 0.15s;
       }
 
       .input-group__input {
@@ -64,8 +70,12 @@ export class IntlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdo
       :host([focused]) .input-group__container {
         border-color: #66afe9;
         outline: 0;
-        -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
-        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
+        -webkit-box-shadow:
+          inset 0 1px 1px rgb(0 0 0 / 8%),
+          0 0 8px rgb(102 175 233 / 60%);
+        box-shadow:
+          inset 0 1px 1px rgb(0 0 0 / 8%),
+          0 0 8px rgb(102 175 233 / 60%);
       }
     `,
   ];
diff --git a/docs/components/input/use-cases.md b/docs/components/input/use-cases.md
index 613faa79a..f1d170ca0 100644
--- a/docs/components/input/use-cases.md
+++ b/docs/components/input/use-cases.md
@@ -20,8 +20,9 @@ Can be provided via the `label-sr-only` boolean attribute.
 The label will be hidden, but still readable by screen readers.
 
 ```js preview-story
-export const labelSrOnly = () =>
-  html` <lion-input label-sr-only label="Input" name="input"></lion-input> `;
+export const labelSrOnly = () => html`
+  <lion-input label-sr-only label="Input" name="input"></lion-input>
+`;
 ```
 
 > Note: Once we support the ElementInternals API, the equivalent will be `<lion-input aria-label="Input" name="input"></lion-input>`
diff --git a/docs/components/progress-indicator/examples.md b/docs/components/progress-indicator/examples.md
index 1f91a1517..3cf24cb97 100644
--- a/docs/components/progress-indicator/examples.md
+++ b/docs/components/progress-indicator/examples.md
@@ -51,15 +51,14 @@ By given the progress-indicator a value it becomes determinate.
 The min is automatically set to "0" and max to "100", but they can be set to your local needs.
 
 ```js preview-story
-export const progressBarDemo = () =>
-  html`
-    <my-determinate-progress-bar
-      aria-label="Interest rate"
-      name="my-bar"
-      value="50"
-    ></my-determinate-progress-bar>
-    <button @click="${changeProgress}">Randomize Value</button>
-  `;
+export const progressBarDemo = () => html`
+  <my-determinate-progress-bar
+    aria-label="Interest rate"
+    name="my-bar"
+    value="50"
+  ></my-determinate-progress-bar>
+  <button @click="${changeProgress}">Randomize Value</button>
+`;
 ```
 
 ## Styled progress spinner example
@@ -120,6 +119,7 @@ class MyIndeterminateProgressSpinner extends LionProgressIndicator {
 ```
 
 ```js preview-story
-export const main = () =>
-  html` <my-indeterminate-progress-spinner></my-indeterminate-progress-spinner> `;
+export const main = () => html`
+  <my-indeterminate-progress-spinner></my-indeterminate-progress-spinner>
+`;
 ```
diff --git a/docs/components/tabs/src/lea-tab-panel.js b/docs/components/tabs/src/lea-tab-panel.js
index dfe27f1e2..42b1aed8b 100644
--- a/docs/components/tabs/src/lea-tab-panel.js
+++ b/docs/components/tabs/src/lea-tab-panel.js
@@ -7,7 +7,9 @@ export class LeaTabPanel extends LitElement {
         background-color: #fff;
         background-image: linear-gradient(top, #fff, #ddd);
         border-radius: 0 2px 2px 2px;
-        box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
+        box-shadow:
+          0 2px 2px #000,
+          0 -1px 0 #fff inset;
         padding: 30px;
       }
     `;
diff --git a/docs/components/tabs/src/lea-tab.js b/docs/components/tabs/src/lea-tab.js
index 752cd5a4d..07e269ae6 100644
--- a/docs/components/tabs/src/lea-tab.js
+++ b/docs/components/tabs/src/lea-tab.js
@@ -10,7 +10,10 @@ export class LeaTab extends LitElement {
         text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
         color: #fff;
         float: left;
-        font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
+        font:
+          bold 12px/35px 'Lucida sans',
+          Arial,
+          Helvetica;
         height: 35px;
         padding: 0 30px;
         text-decoration: none;
@@ -23,7 +26,9 @@ export class LeaTab extends LitElement {
 
       :host(:focus) {
         border-radius: 4px;
-        box-shadow: 0 0 8px #9fcaea, 0 0 0 1px #559bd1;
+        box-shadow:
+          0 0 8px #9fcaea,
+          0 0 0 1px #559bd1;
 
         /* outline: 0; */
       }
diff --git a/docs/fundamentals/node-tools/providence-analytics/assets/_mermaid.svg.js b/docs/fundamentals/node-tools/providence-analytics/assets/_mermaid.svg.js
index 189e03117..4a6d15d55 100644
--- a/docs/fundamentals/node-tools/providence-analytics/assets/_mermaid.svg.js
+++ b/docs/fundamentals/node-tools/providence-analytics/assets/_mermaid.svg.js
@@ -19,7 +19,10 @@ export const providenceFlowSvg = html` <svg
 >
   <style>
     #mermaid-1592918098747 .label {
-      font-family: trebuchet ms, verdana, arial;
+      font-family:
+        trebuchet ms,
+        verdana,
+        arial;
       color: #333;
     }
     #mermaid-1592918098747 .node circle,
@@ -57,7 +60,10 @@ export const providenceFlowSvg = html` <svg
       max-width: 200px;
       max-height: 400px;
       padding: 2px;
-      font-family: trebuchet ms, verdana, arial;
+      font-family:
+        trebuchet ms,
+        verdana,
+        arial;
       font-size: 12px;
       background: #ffffde;
       border: 1px solid #aa3;
@@ -118,7 +124,10 @@ export const providenceFlowSvg = html` <svg
     #mermaid-1592918098747 .noteText {
       fill: #000;
       stroke: none;
-      font-family: trebuchet ms, verdana, arial;
+      font-family:
+        trebuchet ms,
+        verdana,
+        arial;
       font-size: 14px;
     }
     #mermaid-1592918098747 .section {
@@ -267,7 +276,10 @@ export const providenceFlowSvg = html` <svg
     #mermaid-1592918098747 g.classGroup text {
       fill: #9370db;
       stroke: none;
-      font-family: trebuchet ms, verdana, arial;
+      font-family:
+        trebuchet ms,
+        verdana,
+        arial;
       font-size: 10px;
     }
     #mermaid-1592918098747 g.classGroup rect {
@@ -553,7 +565,10 @@ export const providenceInternalFlowSvg = html`
   >
     <style>
       #mermaid-1592918099462 .label {
-        font-family: trebuchet ms, verdana, arial;
+        font-family:
+          trebuchet ms,
+          verdana,
+          arial;
         color: #333;
       }
       #mermaid-1592918099462 .node circle,
@@ -591,7 +606,10 @@ export const providenceInternalFlowSvg = html`
         max-width: 200px;
         max-height: 400px;
         padding: 2px;
-        font-family: trebuchet ms, verdana, arial;
+        font-family:
+          trebuchet ms,
+          verdana,
+          arial;
         font-size: 12px;
         background: #ffffde;
         border: 1px solid #aa3;
@@ -652,7 +670,10 @@ export const providenceInternalFlowSvg = html`
       #mermaid-1592918099462 .noteText {
         fill: #000;
         stroke: none;
-        font-family: trebuchet ms, verdana, arial;
+        font-family:
+          trebuchet ms,
+          verdana,
+          arial;
         font-size: 14px;
       }
       #mermaid-1592918099462 .section {
@@ -801,7 +822,10 @@ export const providenceInternalFlowSvg = html`
       #mermaid-1592918099462 g.classGroup text {
         fill: #9370db;
         stroke: none;
-        font-family: trebuchet ms, verdana, arial;
+        font-family:
+          trebuchet ms,
+          verdana,
+          arial;
         font-size: 10px;
       }
       #mermaid-1592918099462 g.classGroup rect {
diff --git a/docs/fundamentals/systems/overlays/_edge-cases.md b/docs/fundamentals/systems/overlays/_edge-cases.md
index e6046833c..b0d47265d 100644
--- a/docs/fundamentals/systems/overlays/_edge-cases.md
+++ b/docs/fundamentals/systems/overlays/_edge-cases.md
@@ -33,21 +33,20 @@ See [css-tricks: popping-hidden-overflow](https://css-tricks.com/popping-hidden-
 #### Overflow: the problem
 
 ```js preview-story
-export const edgeCaseOverflowProblem = () =>
-  html`
-    <div style="padding: 54px 24px 36px;">
-      <div
-        style="overflow: hidden; border: 1px black dashed; padding-top: 44px; padding-bottom: 16px;"
-      >
-        <div style="display: flex; justify-content: space-evenly; position: relative;">
-          <demo-overlay-el opened use-absolute>
-            <button slot="invoker" aria-label="local, non modal"></button>
-            <div slot="content">absolute (for&nbsp;demo)</div>
-          </demo-overlay-el>
-        </div>
+export const edgeCaseOverflowProblem = () => html`
+  <div style="padding: 54px 24px 36px;">
+    <div
+      style="overflow: hidden; border: 1px black dashed; padding-top: 44px; padding-bottom: 16px;"
+    >
+      <div style="display: flex; justify-content: space-evenly; position: relative;">
+        <demo-overlay-el opened use-absolute>
+          <button slot="invoker" aria-label="local, non modal"></button>
+          <div slot="content">absolute (for&nbsp;demo)</div>
+        </demo-overlay-el>
       </div>
     </div>
-  `;
+  </div>
+`;
 ```
 
 #### Overflow: the solution
@@ -60,50 +59,46 @@ Two solutions are thinkable:
 Our overlay system makes sure that there's always a fixed layer that pops out of the hidden parent.
 
 ```js preview-story
-export const edgeCaseOverflowSolution = () =>
-  html`
-    <div style="padding: 54px 24px 36px;">
-      <div
-        style="overflow: hidden; border: 1px black dashed; padding-top: 36px; padding-bottom: 16px;"
-      >
-        <div style="display: flex; justify-content: space-evenly; position: relative;">
-          <demo-overlay-el
-            opened
-            .config="${{ placementMode: 'local', trapsKeyboardFocus: false }}"
-          >
-            <button slot="invoker" aria-label="local, non modal"></button>
-            <div slot="content">no matter</div>
-          </demo-overlay-el>
+export const edgeCaseOverflowSolution = () => html`
+  <div style="padding: 54px 24px 36px;">
+    <div
+      style="overflow: hidden; border: 1px black dashed; padding-top: 36px; padding-bottom: 16px;"
+    >
+      <div style="display: flex; justify-content: space-evenly; position: relative;">
+        <demo-overlay-el opened .config="${{ placementMode: 'local', trapsKeyboardFocus: false }}">
+          <button slot="invoker" aria-label="local, non modal"></button>
+          <div slot="content">no matter</div>
+        </demo-overlay-el>
 
-          <demo-overlay-el opened .config="${{ placementMode: 'local', trapsKeyboardFocus: true }}">
-            <button slot="invoker" aria-label="local, modal"></button>
-            <div slot="content">what configuration</div>
-          </demo-overlay-el>
+        <demo-overlay-el opened .config="${{ placementMode: 'local', trapsKeyboardFocus: true }}">
+          <button slot="invoker" aria-label="local, modal"></button>
+          <div slot="content">what configuration</div>
+        </demo-overlay-el>
 
-          <demo-overlay-el
-            opened
-            .config="${{ placementMode: 'local', popperConfig: { strategy: 'absolute' } }}"
-          >
-            <button slot="invoker" aria-label="local, absolute"></button>
-            <div slot="content">...it</div>
-          </demo-overlay-el>
+        <demo-overlay-el
+          opened
+          .config="${{ placementMode: 'local', popperConfig: { strategy: 'absolute' } }}"
+        >
+          <button slot="invoker" aria-label="local, absolute"></button>
+          <div slot="content">...it</div>
+        </demo-overlay-el>
 
-          <demo-overlay-el
-            opened
-            .config="${{ placementMode: 'local', popperConfig: { strategy: 'fixed' } }}"
-          >
-            <button slot="invoker" aria-label="local, fixed"></button>
-            <div slot="content">just</div>
-          </demo-overlay-el>
+        <demo-overlay-el
+          opened
+          .config="${{ placementMode: 'local', popperConfig: { strategy: 'fixed' } }}"
+        >
+          <button slot="invoker" aria-label="local, fixed"></button>
+          <div slot="content">just</div>
+        </demo-overlay-el>
 
-          <demo-overlay-el opened .config="${{ placementMode: 'global' }}">
-            <button slot="invoker" aria-label="global"></button>
-            <div slot="content">works</div>
-          </demo-overlay-el>
-        </div>
+        <demo-overlay-el opened .config="${{ placementMode: 'global' }}">
+          <button slot="invoker" aria-label="global"></button>
+          <div slot="content">works</div>
+        </demo-overlay-el>
       </div>
     </div>
-  `;
+  </div>
+`;
 ```
 
 ### Stacking context
@@ -114,32 +109,31 @@ The example below shows the difference between a modal and non-modal overlay pla
 #### Stacking context: the problem
 
 ```js preview-story
-export const edgeCaseStackProblem = () =>
-  html`
-    <div style="width: 300px; height: 300px; position: relative;">
-      <div
-        id="stacking-context-a"
-        style="position: absolute; z-index: 2; top: 0; width: 100px; height: 200px;"
-      >
-        I am on top and I don't care about your 9999
-      </div>
-
-      <div
-        id="stacking-context-b"
-        style="position: absolute; z-index: 1; top: 0; width: 200px; height: 200px;"
-      >
-        <demo-overlay-el no-dialog-el style="overflow:hidden; position: relative;">
-          <button slot="invoker">invoke</button>
-          <div slot="content">
-            The overlay can never be in front, since the parent stacking context has a lower
-            priority than its sibling.
-            <div id="stacking-context-b-inner" style="position: absolute; z-index: 9999;">
-              So, even if we add a new stacking context in our overlay with z-index 9999, it will
-              never be painted on top.
-            </div>
-          </div>
-        </demo-overlay-el>
-      </div>
+export const edgeCaseStackProblem = () => html`
+  <div style="width: 300px; height: 300px; position: relative;">
+    <div
+      id="stacking-context-a"
+      style="position: absolute; z-index: 2; top: 0; width: 100px; height: 200px;"
+    >
+      I am on top and I don't care about your 9999
     </div>
-  `;
+
+    <div
+      id="stacking-context-b"
+      style="position: absolute; z-index: 1; top: 0; width: 200px; height: 200px;"
+    >
+      <demo-overlay-el no-dialog-el style="overflow:hidden; position: relative;">
+        <button slot="invoker">invoke</button>
+        <div slot="content">
+          The overlay can never be in front, since the parent stacking context has a lower priority
+          than its sibling.
+          <div id="stacking-context-b-inner" style="position: absolute; z-index: 9999;">
+            So, even if we add a new stacking context in our overlay with z-index 9999, it will
+            never be painted on top.
+          </div>
+        </div>
+      </demo-overlay-el>
+    </div>
+  </div>
+`;
 ```
diff --git a/docs/fundamentals/systems/overlays/use-cases.md b/docs/fundamentals/systems/overlays/use-cases.md
index 8dd53b833..5db6e91ee 100644
--- a/docs/fundamentals/systems/overlays/use-cases.md
+++ b/docs/fundamentals/systems/overlays/use-cases.md
@@ -131,15 +131,12 @@ render() {
 
 or declaratively in your template with the `.config` property
 
-```html
-<demo-el-using-overlaymixin .config=${{ ...withModalDialogConfig() }}>
+```jsx
+<demo-el-using-overlaymixin .config="${{ ...withModalDialogConfig() }}">
   <button slot="invoker">Click me to open the overlay!</button>
   <div slot="content" class="demo-overlay">
     Hello! You can close this notification here:
-    <button
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
+    <button @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}">
     </button>
   </div>
 </demo-el-using-overlaymixin>
diff --git a/docs/fundamentals/tools/helpers/action-logger.md b/docs/fundamentals/tools/helpers/action-logger.md
index 5ef9aed9b..61941bd99 100644
--- a/docs/fundamentals/tools/helpers/action-logger.md
+++ b/docs/fundamentals/tools/helpers/action-logger.md
@@ -40,13 +40,10 @@ const uid = Math.random().toString(36).substr(2, 10);
 
 This connects the logger element to the trigger.
 
-```html
+```jsx
 <div>To log: <code>Hello, World!</code></div>
-<button
-  @click=${e => {
-    e.target.parentElement.querySelector('#logger-${uid}').log('Hello, World!')
-  }}
->Click this button</button>
+<button @click="${e => { e.target.parentElement.querySelector('#logger-${uid}').log('Hello, World!') }}">Click this button
+</button>
 <sb-action-logger id="logger-${uid}"></sb-action-logger>
 ```
 
diff --git a/docs/fundamentals/tools/singleton-manager/example-complex/demo-app.js b/docs/fundamentals/tools/singleton-manager/example-complex/demo-app.js
index 057392db9..671075191 100644
--- a/docs/fundamentals/tools/singleton-manager/example-complex/demo-app.js
+++ b/docs/fundamentals/tools/singleton-manager/example-complex/demo-app.js
@@ -37,7 +37,9 @@ class DemoApp extends LitElement {
         font-size: 1rem;
         cursor: pointer;
         text-align: center;
-        transition: background 250ms ease-in-out, transform 150ms ease;
+        transition:
+          background 250ms ease-in-out,
+          transform 150ms ease;
       }
 
       button:hover,
diff --git a/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js b/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js
index 802bb6d85..d5df13bce 100644
--- a/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js
+++ b/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js
@@ -35,7 +35,9 @@ class DemoApp extends LitElement {
         font-size: 1rem;
         cursor: pointer;
         text-align: center;
-        transition: background 250ms ease-in-out, transform 150ms ease;
+        transition:
+          background 250ms ease-in-out,
+          transform 150ms ease;
       }
 
       button:hover,
diff --git a/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js b/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js
index 057392db9..671075191 100644
--- a/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js
+++ b/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js
@@ -37,7 +37,9 @@ class DemoApp extends LitElement {
         font-size: 1rem;
         cursor: pointer;
         text-align: center;
-        transition: background 250ms ease-in-out, transform 150ms ease;
+        transition:
+          background 250ms ease-in-out,
+          transform 150ms ease;
       }
 
       button:hover,
diff --git a/package.json b/package.json
index 1104c857e..edef949df 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/glob": "^8.1.0",
     "@types/mocha": "^10.0.6",
-    "@types/prettier": "^2.7.3",
+    "@types/prettier": "^3.0.0",
     "@web/dev-server-legacy": "^0.1.7",
     "@web/test-runner": "^0.18.1",
     "@web/test-runner-browserstack": "^0.7.1",
@@ -82,7 +82,7 @@
     "mocha": "^10.4.0",
     "npm-run-all": "^4.1.5",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.2.5",
     "prettier-package-json": "^2.8.0",
     "remark-html": "^13.0.2",
     "rollup": "^2.79.1",
diff --git a/packages-node/nodejs-helpers/package.json b/packages-node/nodejs-helpers/package.json
index 9243f2d1a..a3940e977 100644
--- a/packages-node/nodejs-helpers/package.json
+++ b/packages-node/nodejs-helpers/package.json
@@ -29,13 +29,13 @@
     "types": "wireit"
   },
   "dependencies": {
-    "@babel/generator": "^7.24.4",
-    "@babel/parser": "^7.24.4",
-    "@babel/traverse": "^7.24.1",
-    "@babel/types": "^7.24.0",
+    "@babel/generator": "^7.24.5",
+    "@babel/parser": "^7.24.5",
+    "@babel/traverse": "^7.24.5",
+    "@babel/types": "^7.24.5",
     "es-module-lexer": "^0.3.26",
     "globby": "^14.0.1",
-    "prettier": "^2.8.8"
+    "prettier": "^3.2.5"
   },
   "keywords": [
     "lion-tools",
diff --git a/packages-node/nodejs-helpers/src/prettify.js b/packages-node/nodejs-helpers/src/prettify.js
index 0f3f33320..3849c6807 100644
--- a/packages-node/nodejs-helpers/src/prettify.js
+++ b/packages-node/nodejs-helpers/src/prettify.js
@@ -48,14 +48,14 @@ const getPrettierParser = fileExtension => {
  * Prettifies text using the prettier.
  * - Supported file extensions are: js | cjs | mjs | md | html | json | css | yaml | yml
  * @example
- *   prettify('some js code');
- *   prettify('<html>some html</html>', 'html');
- *   prettify('some-markdown', 'md', {printWidth: 120});
+ *   await prettify('some js code');
+ *   await prettify('<html>some html</html>', 'html');
+ *   await prettify('some-markdown', 'md', {printWidth: 120});
  * @param {string} text
  * @param {string} fileExtension ['js']
  * @param {PrettierOptions} [options] [{ printWidth = 100, singleQuote = true }]
  * @see {@link https://prettier.io/docs/en/options.html}
- * @returns {string}
+ * @returns {Promise<string>}
  * @throws ERROR_UNSUPPORTED_FILE_EXTENSION
  */
 export const prettify = (text, fileExtension = 'js', options = {}) => {
diff --git a/packages-node/nodejs-helpers/src/tasks/bypass-export-map.js b/packages-node/nodejs-helpers/src/tasks/bypass-export-map.js
index 34ad64cbe..4e0a70878 100644
--- a/packages-node/nodejs-helpers/src/tasks/bypass-export-map.js
+++ b/packages-node/nodejs-helpers/src/tasks/bypass-export-map.js
@@ -115,7 +115,7 @@ const generateAdjustedExportFile = async (fileName, exportsDir, outputDir) => {
   const initialCode = await readFile(inputPath, 'utf-8');
   const adjustImportExportVisitor = getAdjustImportExportVisitor(exportsDir, outputDir);
   const adjustedCode = transformCode(initialCode, adjustImportExportVisitor);
-  return writeFile(outputPath, prettify(adjustedCode));
+  return writeFile(outputPath, await prettify(adjustedCode));
 };
 
 /**
diff --git a/packages-node/nodejs-helpers/src/tasks/bypass-import-map.js b/packages-node/nodejs-helpers/src/tasks/bypass-import-map.js
index 3bfd98c04..f57a9460b 100644
--- a/packages-node/nodejs-helpers/src/tasks/bypass-import-map.js
+++ b/packages-node/nodejs-helpers/src/tasks/bypass-import-map.js
@@ -95,8 +95,8 @@ const bypassImportMapForFile = async (filePath, packageDir, importMap) => {
   const initialCode = await readFile(filePath, 'utf-8');
   const adjustImportVisitor = getAdjustImportVisitor(filePath, packageDir, importMap);
   const updatedCode = transformCode(initialCode, adjustImportVisitor);
-  const prettyInitialCode = prettify(initialCode);
-  const prettyUpdatedCode = prettify(updatedCode);
+  const prettyInitialCode = await prettify(initialCode);
+  const prettyUpdatedCode = await prettify(updatedCode);
   if (prettyInitialCode === prettyUpdatedCode) {
     return Promise.resolve();
   }
diff --git a/packages-node/nodejs-helpers/test-node/tasks/bypass-export-map.test.js b/packages-node/nodejs-helpers/test-node/tasks/bypass-export-map.test.js
index 4fa736c0c..9beaaa079 100644
--- a/packages-node/nodejs-helpers/test-node/tasks/bypass-export-map.test.js
+++ b/packages-node/nodejs-helpers/test-node/tasks/bypass-export-map.test.js
@@ -194,7 +194,7 @@ describe('components import other components and native + 3rd party imports', ()
         'utf-8',
       );
       // Then
-      expect(prettify(adjustedCode)).to.equal(prettify(expectedCode));
+      expect(await prettify(adjustedCode)).to.equal(await prettify(expectedCode));
     }
   });
 
@@ -216,7 +216,7 @@ describe('components import other components and native + 3rd party imports', ()
       );
 
       // Then
-      expect(prettify(adjustedCode)).to.equal(prettify(expectedCode));
+      expect(await prettify(adjustedCode)).to.equal(await prettify(expectedCode));
     }
   });
 });
diff --git a/packages-node/nodejs-helpers/test-node/tasks/bypass-import-map.test.js b/packages-node/nodejs-helpers/test-node/tasks/bypass-import-map.test.js
index 70b0ff475..1e54120b1 100644
--- a/packages-node/nodejs-helpers/test-node/tasks/bypass-import-map.test.js
+++ b/packages-node/nodejs-helpers/test-node/tasks/bypass-import-map.test.js
@@ -58,8 +58,8 @@ describe('Bypass import map task', () => {
     // Then
     if (process.platform !== 'win32') {
       // FIXME: skipping test for windows case
-      expect(prettify(adjustedCodeArrowDown)).to.equal(prettify(expectedCodeArrowDown));
-      expect(prettify(adjustedCodeArrowUp)).to.equal(prettify(expectedCodeArrowUp));
+      expect(await prettify(adjustedCodeArrowDown)).to.equal(await prettify(expectedCodeArrowDown));
+      expect(await prettify(adjustedCodeArrowUp)).to.equal(await prettify(expectedCodeArrowUp));
     }
   });
 
@@ -101,8 +101,8 @@ describe('Bypass import map task', () => {
     // Then
     if (process.platform !== 'win32') {
       // FIXME: skipping test for windows case
-      expect(prettify(adjustedCodeArrowDown)).to.equal(prettify(expectedCodeArrowDown));
-      expect(prettify(adjustedCodeArrowUp)).to.equal(prettify(expectedCodeArrowUp));
+      expect(await prettify(adjustedCodeArrowDown)).to.equal(await prettify(expectedCodeArrowDown));
+      expect(await prettify(adjustedCodeArrowUp)).to.equal(await prettify(expectedCodeArrowUp));
     }
   });
 });
diff --git a/packages-node/providence-analytics/test-node/program/analyzers/match-imports.test.js b/packages-node/providence-analytics/test-node/program/analyzers/match-imports.test.js
index 672f93c5e..7e0063bdb 100644
--- a/packages-node/providence-analytics/test-node/program/analyzers/match-imports.test.js
+++ b/packages-node/providence-analytics/test-node/program/analyzers/match-imports.test.js
@@ -15,9 +15,8 @@ import MatchImportsAnalyzer from '../../../src/program/analyzers/match-imports.j
 setupAnalyzerTest();
 //
 describe('Analyzer "match-imports"', async () => {
-  const matchImportsQueryConfig = await QueryService.getQueryConfigFromAnalyzer(
-    MatchImportsAnalyzer,
-  );
+  const matchImportsQueryConfig =
+    await QueryService.getQueryConfigFromAnalyzer(MatchImportsAnalyzer);
   /** @type {Partial<ProvidenceConfig>} */
   const _providenceCfg = {
     targetProjectPaths: ['/importing/target/project'],
diff --git a/packages-node/providence-analytics/test-node/program/analyzers/match-subclasses.test.js b/packages-node/providence-analytics/test-node/program/analyzers/match-subclasses.test.js
index 47b5ae3b6..5a649a026 100644
--- a/packages-node/providence-analytics/test-node/program/analyzers/match-subclasses.test.js
+++ b/packages-node/providence-analytics/test-node/program/analyzers/match-subclasses.test.js
@@ -84,9 +84,8 @@ describe('Analyzer "match-subclasses"', async () => {
     ],
   };
 
-  const matchSubclassesQueryConfig = await QueryService.getQueryConfigFromAnalyzer(
-    MatchSubclassesAnalyzer,
-  );
+  const matchSubclassesQueryConfig =
+    await QueryService.getQueryConfigFromAnalyzer(MatchSubclassesAnalyzer);
   /** @type {Partial<ProvidenceConfig>} */
   const _providenceCfg = {
     targetProjectPaths: [searchTargetProject.path],
diff --git a/packages/ui/components/button/test-suites/LionButtonReset.suite.js b/packages/ui/components/button/test-suites/LionButtonReset.suite.js
index fdc06b2f8..fb773e540 100644
--- a/packages/ui/components/button/test-suites/LionButtonReset.suite.js
+++ b/packages/ui/components/button/test-suites/LionButtonReset.suite.js
@@ -164,15 +164,13 @@ export function LionButtonResetSuite({ klass = LionButtonReset } = {}) {
       const formSpyLater = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
 
       const form2El = /** @type {HTMLFormElement} */ (
-        await fixture(
-          html`
-            <div @click="${outsideSpy}">
-              <form @click="${formSpyEarly}">
-                <div @click="${insideSpy}">${lionButton}</div>
-              </form>
-            </div>
-          `,
-        )
+        await fixture(html`
+          <div @click="${outsideSpy}">
+            <form @click="${formSpyEarly}">
+              <div @click="${insideSpy}">${lionButton}</div>
+            </form>
+          </div>
+        `)
       );
       const form2Node = /** @type {HTMLFormElement} */ (form2El.querySelector('form'));
 
diff --git a/packages/ui/components/calendar/test/lion-calendar.test.js b/packages/ui/components/calendar/test/lion-calendar.test.js
index 03bc71889..1e0daa591 100644
--- a/packages/ui/components/calendar/test/lion-calendar.test.js
+++ b/packages/ui/components/calendar/test/lion-calendar.test.js
@@ -355,10 +355,12 @@ describe('<lion-calendar>', () => {
     it('has a initCentralDate() method for external contexts like datepickers', async () => {
       const initialCentralDate = new Date('2014/07/05');
       const initialSelectedDate = new Date('2014/07/07');
-      const el = await fixture(html`<lion-calendar
-        .centralDate="${initialCentralDate}"
-        .selectedDate="${initialSelectedDate}"
-      ></lion-calendar>`);
+      const el = await fixture(
+        html`<lion-calendar
+          .centralDate="${initialCentralDate}"
+          .selectedDate="${initialSelectedDate}"
+        ></lion-calendar>`,
+      );
 
       expect(el.selectedDate).to.equal(initialSelectedDate);
       expect(el.centralDate).to.equal(initialCentralDate);
@@ -408,14 +410,12 @@ describe('<lion-calendar>', () => {
       it('disables a date with disableDates function', async () => {
         /** @param {Date} d */
         const disable15th = d => d.getDate() === 15;
-        const el = await fixture(
-          html`
-            <lion-calendar
-              .selectedDate="${new Date('2000/12/01')}"
-              .disableDates=${disable15th}
-            ></lion-calendar>
-          `,
-        );
+        const el = await fixture(html`
+          <lion-calendar
+            .selectedDate="${new Date('2000/12/01')}"
+            .disableDates=${disable15th}
+          ></lion-calendar>
+        `);
         const elObj = new CalendarObject(el);
         elObj.dayEls.forEach((d, i) => {
           const shouldBeDisabled = i === 15 - 1;
@@ -490,15 +490,13 @@ describe('<lion-calendar>', () => {
           // without normalization, selectedDate < minDate would wrongfully be disabled
           const minDate = new Date('2000-11-02T04:00:00');
 
-          const el = await fixture(
-            html`
-              <lion-calendar
-                .selectedDate="${selectedDate}"
-                .minDate="${minDate}"
-                .maxDate="${maxDate}"
-              ></lion-calendar>
-            `,
-          );
+          const el = await fixture(html`
+            <lion-calendar
+              .selectedDate="${selectedDate}"
+              .minDate="${minDate}"
+              .maxDate="${maxDate}"
+            ></lion-calendar>
+          `);
           const elObj = new CalendarObject(el);
 
           expect(elObj.getDayObj(29).isDisabled).to.equal(false);
@@ -1531,15 +1529,13 @@ describe('<lion-calendar>', () => {
     });
 
     it('is accessible with disabled dates', async () => {
-      const el = await fixture(
-        html`
-          <lion-calendar
-            .disableDates=${
-              /** @param {Date} date */ date => date.getDay() === 6 || date.getDay() === 0
-            }
-          ></lion-calendar>
-        `,
-      );
+      const el = await fixture(html`
+        <lion-calendar
+          .disableDates=${
+            /** @param {Date} date */ date => date.getDay() === 6 || date.getDay() === 0
+          }
+        ></lion-calendar>
+      `);
       await expect(el).to.be.accessible();
     });
 
diff --git a/packages/ui/components/combobox/test/lion-combobox.test.js b/packages/ui/components/combobox/test/lion-combobox.test.js
index 554e0769e..d56e9e4ed 100644
--- a/packages/ui/components/combobox/test/lion-combobox.test.js
+++ b/packages/ui/components/combobox/test/lion-combobox.test.js
@@ -2300,17 +2300,17 @@ describe('lion-combobox', () => {
             await fixture(html`
             <${tag} name="foo" autocomplete="both" multiple-choice>
               <lion-option .label="${'Artichoke as label'}" .choiceValue="${{
-              value: 'Artichoke',
-            }}">Artichoke</lion-option>
+                value: 'Artichoke',
+              }}">Artichoke</lion-option>
               <lion-option .label="${'Chard as label'}" .choiceValue="${{
-              value: 'Chard',
-            }}">Chard</lion-option>
+                value: 'Chard',
+              }}">Chard</lion-option>
               <lion-option .label="${'Chicory as label'}" .choiceValue="${{
-              value: 'Chicory',
-            }}">Chicory</lion-option>
+                value: 'Chicory',
+              }}">Chicory</lion-option>
               <lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{
-              value: 'Victoria Plum',
-            }}">Victoria Plum</lion-option>
+                value: 'Victoria Plum',
+              }}">Victoria Plum</lion-option>
             </${tag}>
           `)
           );
@@ -2353,17 +2353,17 @@ describe('lion-combobox', () => {
             await fixture(html`
             <${tag} name="foo">
               <lion-option .label="${'Artichoke as label'}" .choiceValue="${{
-              value: 'Artichoke',
-            }}">Artichoke</lion-option>
+                value: 'Artichoke',
+              }}">Artichoke</lion-option>
               <lion-option .label="${'Chard as label'}" .choiceValue="${{
-              value: 'Chard',
-            }}" checked>Chard</lion-option>
+                value: 'Chard',
+              }}" checked>Chard</lion-option>
               <lion-option .label="${'Chicory as label'}" .choiceValue="${{
-              value: 'Chicory',
-            }}">Chicory</lion-option>
+                value: 'Chicory',
+              }}">Chicory</lion-option>
               <lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{
-              value: 'Victoria Plum',
-            }}">Victoria Plum</lion-option>
+                value: 'Victoria Plum',
+              }}">Victoria Plum</lion-option>
             </${tag}>
           `)
           );
@@ -2403,17 +2403,17 @@ describe('lion-combobox', () => {
             await fixture(html`
             <${tag} name="foo" .modelValue="${{ value: 'Artichoke' }}">
               <lion-option .label="${'Artichoke as label'}" .choiceValue="${{
-              value: 'Artichoke',
-            }}">Artichoke</lion-option>
+                value: 'Artichoke',
+              }}">Artichoke</lion-option>
               <lion-option .label="${'Chard as label'}" .choiceValue="${{
-              value: 'Chard',
-            }}">Chard</lion-option>
+                value: 'Chard',
+              }}">Chard</lion-option>
               <lion-option .label="${'Chicory as label'}" .choiceValue="${{
-              value: 'Chicory',
-            }}">Chicory</lion-option>
+                value: 'Chicory',
+              }}">Chicory</lion-option>
               <lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{
-              value: 'Victoria Plum',
-            }}">Victoria Plum</lion-option>
+                value: 'Victoria Plum',
+              }}">Victoria Plum</lion-option>
             </${tag}>
           `)
           );
@@ -2450,17 +2450,17 @@ describe('lion-combobox', () => {
             await fixture(html`
             <${tag} name="foo">
               <lion-option .label="${'Artichoke as label'}" .choiceValue="${{
-              value: 'Artichoke',
-            }}">Artichoke</lion-option>
+                value: 'Artichoke',
+              }}">Artichoke</lion-option>
               <lion-option .label="${'Chard as label'}" .choiceValue="${{
-              value: 'Chard',
-            }}">Chard</lion-option>
+                value: 'Chard',
+              }}">Chard</lion-option>
               <lion-option .label="${'Chicory as label'}" .choiceValue="${{
-              value: 'Chicory',
-            }}">Chicory</lion-option>
+                value: 'Chicory',
+              }}">Chicory</lion-option>
               <lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{
-              value: 'Victoria Plum',
-            }}">Victoria Plum</lion-option>
+                value: 'Victoria Plum',
+              }}">Victoria Plum</lion-option>
             </${tag}>
           `)
           );
diff --git a/packages/ui/components/form-core/test-suites/form-group/FormGroupMixin.suite.js b/packages/ui/components/form-core/test-suites/form-group/FormGroupMixin.suite.js
index b48ce3ff2..85f57a7f2 100644
--- a/packages/ui/components/form-core/test-suites/form-group/FormGroupMixin.suite.js
+++ b/packages/ui/components/form-core/test-suites/form-group/FormGroupMixin.suite.js
@@ -1485,9 +1485,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .modelValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );
@@ -1503,9 +1503,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el2 = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .serializedValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );
@@ -1530,9 +1530,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .modelValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );
@@ -1551,9 +1551,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el2 = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .serializedValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );
@@ -1574,9 +1574,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag}  .modelValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );
@@ -1595,9 +1595,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el2 = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag} .serializedValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );
diff --git a/packages/ui/components/form-integrations/test/dialog-integrations.test.js b/packages/ui/components/form-integrations/test/dialog-integrations.test.js
index fb4758c4d..0b5da6bc4 100644
--- a/packages/ui/components/form-integrations/test/dialog-integrations.test.js
+++ b/packages/ui/components/form-integrations/test/dialog-integrations.test.js
@@ -17,10 +17,12 @@ import '@lion/ui/define/lion-radio.js';
 // Test umbrella form inside dialog
 describe('Form inside dialog Integrations', () => {
   it('Successfully registers all form components inside a dialog', async () => {
-    const el = /** @type {LionDialog} */ await fixture(html` <lion-dialog>
-      <button slot="invoker">Open Dialog</button>
-      <umbrella-form slot="content"></umbrella-form>
-    </lion-dialog>`);
+    const el = /** @type {LionDialog} */ await fixture(
+      html` <lion-dialog>
+        <button slot="invoker">Open Dialog</button>
+        <umbrella-form slot="content"></umbrella-form>
+      </lion-dialog>`,
+    );
 
     // @ts-ignore
     const formEl = /** @type {LionForm} */ (el._overlayCtrl.contentNode._lionFormNode);
diff --git a/packages/ui/components/form/test/lion-form.test.js b/packages/ui/components/form/test/lion-form.test.js
index 9b8420d92..74c9e6eba 100644
--- a/packages/ui/components/form/test/lion-form.test.js
+++ b/packages/ui/components/form/test/lion-form.test.js
@@ -208,8 +208,8 @@ describe('<lion-form>', () => {
       <lion-form>
         <form>
           <${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[
-      new Required(),
-    ]}></${childTag}>
+            new Required(),
+          ]}></${childTag}>
           <${childTag} name="lastName" .validators=${[new Required()]}></${childTag}>
           <button type="submit">submit</button>
         </form>
@@ -229,8 +229,8 @@ describe('<lion-form>', () => {
         <form>
           <lion-fieldset name="name">
             <${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[
-      new Required(),
-    ]}></${childTag}>
+              new Required(),
+            ]}></${childTag}>
             <${childTag} name="lastName" .validators=${[new Required()]}></${childTag}>
           </lion-fieldset>
           <button type="submit">submit</button>
diff --git a/packages/ui/components/helpers/src/SbActionLogger.js b/packages/ui/components/helpers/src/SbActionLogger.js
index e29e5e0d7..089aa3f8b 100644
--- a/packages/ui/components/helpers/src/SbActionLogger.js
+++ b/packages/ui/components/helpers/src/SbActionLogger.js
@@ -25,8 +25,17 @@ export class SbActionLogger extends LitElement {
 
           box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
           display: block;
-          font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
-            BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+          font-family:
+            'Nunito Sans',
+            -apple-system,
+            '.SFNSText-Regular',
+            'San Francisco',
+            BlinkMacSystemFont,
+            'Segoe UI',
+            'Helvetica Neue',
+            Helvetica,
+            Arial,
+            sans-serif;
         }
 
         .header__info {
diff --git a/packages/ui/components/icon/test/lion-icon.test.js b/packages/ui/components/icon/test/lion-icon.test.js
index b09dd2f74..c9ad9c8f2 100644
--- a/packages/ui/components/icon/test/lion-icon.test.js
+++ b/packages/ui/components/icon/test/lion-icon.test.js
@@ -118,20 +118,18 @@ describe('lion-icon', () => {
       window.addEventListener('importDone', resolve);
     });
 
-    const el = await fixture(
-      html`
-        <lion-icon
-          .svg=${until(
-            import('./heart.svg.js').then(e => {
-              dispatchEvent(new CustomEvent('importDone'));
-              return e.default;
-            }),
-            html``,
-          )}
-          aria-label="Love"
-        ></lion-icon>
-      `,
-    );
+    const el = await fixture(html`
+      <lion-icon
+        .svg=${until(
+          import('./heart.svg.js').then(e => {
+            dispatchEvent(new CustomEvent('importDone'));
+            return e.default;
+          }),
+          html``,
+        )}
+        aria-label="Love"
+      ></lion-icon>
+    `);
 
     await svgLoading;
     // We need to await the until directive is resolved and rendered to the dom
diff --git a/packages/ui/components/input-amount/test/lion-input-amount.test.js b/packages/ui/components/input-amount/test/lion-input-amount.test.js
index 1b4e56b85..8cb38ebcd 100644
--- a/packages/ui/components/input-amount/test/lion-input-amount.test.js
+++ b/packages/ui/components/input-amount/test/lion-input-amount.test.js
@@ -36,24 +36,20 @@ describe('<lion-input-amount>', () => {
 
   it('formatAmount uses locale provided in formatOptions', async () => {
     let el = /** @type {LionInputAmount} */ (
-      await fixture(
-        html`
-          <lion-input-amount
-            .formatOptions="${{ locale: 'en-GB' }}"
-            .modelValue="${123}"
-          ></lion-input-amount>
-        `,
-      )
-    );
-    expect(el.formattedValue).to.equal('123.00');
-    el = await fixture(
-      html`
+      await fixture(html`
         <lion-input-amount
-          .formatOptions="${{ locale: 'nl-NL' }}"
+          .formatOptions="${{ locale: 'en-GB' }}"
           .modelValue="${123}"
         ></lion-input-amount>
-      `,
+      `)
     );
+    expect(el.formattedValue).to.equal('123.00');
+    el = await fixture(html`
+      <lion-input-amount
+        .formatOptions="${{ locale: 'nl-NL' }}"
+        .modelValue="${123}"
+      ></lion-input-amount>
+    `);
     expect(el.formattedValue).to.equal('123,00');
   });
 
diff --git a/packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js b/packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js
index 09b43933c..85c1b2446 100644
--- a/packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js
+++ b/packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js
@@ -286,10 +286,10 @@ describe('<lion-input-datepicker>', () => {
 
       it('converts MinDate validator to "minDate" property', async () => {
         const myMinDate = new Date('2019/06/15');
-        const el = await fixture(html` <lion-input-datepicker
-          .validators="${[new MinDate(myMinDate)]}"
-        >
-        </lion-input-datepicker>`);
+        const el = await fixture(
+          html` <lion-input-datepicker .validators="${[new MinDate(myMinDate)]}">
+          </lion-input-datepicker>`,
+        );
         const elObj = new DatepickerInputObject(el);
         await elObj.openCalendar();
 
diff --git a/packages/ui/components/input-file/test/lion-input-file.test.js b/packages/ui/components/input-file/test/lion-input-file.test.js
index 40558b53e..8ac170ed6 100644
--- a/packages/ui/components/input-file/test/lion-input-file.test.js
+++ b/packages/ui/components/input-file/test/lion-input-file.test.js
@@ -637,9 +637,9 @@ describe('lion-input-file', () => {
         })
       );
 
-      const el = await fixture(
-        html` <lion-input-file multiple max-file-size="3" accept=".txt"></lion-input-file> `,
-      );
+      const el = await fixture(html`
+        <lion-input-file multiple max-file-size="3" accept=".txt"></lion-input-file>
+      `);
 
       setTimeout(() => {
         mimicSelectFile(el, [file, fileWrongSize, file2, fileWrongType]);
diff --git a/packages/ui/components/input-tel-dropdown/test/LionInputTelDropdown.test.js b/packages/ui/components/input-tel-dropdown/test/LionInputTelDropdown.test.js
index 9da8ebad2..e1e6a8558 100644
--- a/packages/ui/components/input-tel-dropdown/test/LionInputTelDropdown.test.js
+++ b/packages/ui/components/input-tel-dropdown/test/LionInputTelDropdown.test.js
@@ -46,8 +46,9 @@ class WithFormControlInputTelDropdown extends ScopedElementsMixin(LionInputTelDr
           ${repeat(
             data.regionMetaList,
             regionMeta => regionMeta.regionCode,
-            regionMeta =>
-              html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
+            regionMeta => html`
+              <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
+            `,
           )}
         </lion-select-rich>
       `;
@@ -86,8 +87,9 @@ describe('WithFormControlInputTelDropdown', () => {
               ${repeat(
                 data.regionMetaList,
                 regionMeta => regionMeta.regionCode,
-                regionMeta =>
-                  html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
+                regionMeta => html`
+                  <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
+                `,
               )}
             </lion-select-rich>
           `;
@@ -96,14 +98,12 @@ describe('WithFormControlInputTelDropdown', () => {
     }
     customElements.define('input-tel-dropdown-mac', InputTelDropdownMac);
     const el = /** @type {LionInputTelDropdown} */ (
-      await fixture(
-        html`
-          <input-tel-dropdown-mac
-            .allowedRegions="${['NL', 'BE']}"
-            .modelValue="${'+31612345678'}"
-          ></input-tel-dropdown-mac>
-        `,
-      )
+      await fixture(html`
+        <input-tel-dropdown-mac
+          .allowedRegions="${['NL', 'BE']}"
+          .modelValue="${'+31612345678'}"
+        ></input-tel-dropdown-mac>
+      `)
     );
     const dropdownElement = el.refs.dropdown.value;
     // @ts-expect-error [allow-protected-in-tests]
@@ -140,8 +140,9 @@ describe('WithFormControlInputTelDropdown', () => {
               ${repeat(
                 data.regionMetaList,
                 regionMeta => regionMeta.regionCode,
-                regionMeta =>
-                  html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
+                regionMeta => html`
+                  <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
+                `,
               )}
             </lion-select-rich>
           `;
@@ -150,14 +151,12 @@ describe('WithFormControlInputTelDropdown', () => {
     }
     customElements.define('input-tel-dropdown-windows', InputTelDropdownWindows);
     const el = /** @type {LionInputTelDropdown} */ (
-      await fixture(
-        html`
-          <input-tel-dropdown-windows
-            .allowedRegions="${['NL', 'BE']}"
-            .modelValue="${'+31612345678'}"
-          ></input-tel-dropdown-windows>
-        `,
-      )
+      await fixture(html`
+        <input-tel-dropdown-windows
+          .allowedRegions="${['NL', 'BE']}"
+          .modelValue="${'+31612345678'}"
+        ></input-tel-dropdown-windows>
+      `)
     );
     const dropdownElement = el.refs.dropdown.value;
     // @ts-expect-error [allow-protected-in-tests]
diff --git a/packages/ui/components/listbox/test-suites/ListboxMixin.suite.js b/packages/ui/components/listbox/test-suites/ListboxMixin.suite.js
index 1fcc4a8a7..ff241c2fc 100644
--- a/packages/ui/components/listbox/test-suites/ListboxMixin.suite.js
+++ b/packages/ui/components/listbox/test-suites/ListboxMixin.suite.js
@@ -1639,8 +1639,9 @@ export function runListboxMixinSuite(customConfig = {}) {
               ${repeat(
                 this.options,
                 (/** @type {string} */ option) => option,
-                (/** @type {string} */ option) =>
-                  html` <lion-option .choiceValue="${option}">${option}</lion-option> `,
+                (/** @type {string} */ option) => html`
+                  <lion-option .choiceValue="${option}">${option}</lion-option>
+                `,
               )}
             </${tag}>
           `;
diff --git a/packages/ui/components/progress-indicator/test/lion-progress-indicator.test.js b/packages/ui/components/progress-indicator/test/lion-progress-indicator.test.js
index 7fafe6c3c..a418b8bb4 100644
--- a/packages/ui/components/progress-indicator/test/lion-progress-indicator.test.js
+++ b/packages/ui/components/progress-indicator/test/lion-progress-indicator.test.js
@@ -24,9 +24,9 @@ describe('lion-progress-indicator', () => {
     });
 
     it('can override a label with "aria-label"', async () => {
-      const el = await fixture(
-        html` <lion-progress-indicator aria-label="foo"></lion-progress-indicator> `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator aria-label="foo"></lion-progress-indicator>
+      `);
       await el.localizeNamespacesLoaded;
       expect(el.getAttribute('aria-label')).to.equal('foo');
       el.setAttribute('aria-label', 'bar');
@@ -37,9 +37,9 @@ describe('lion-progress-indicator', () => {
     });
 
     it('can override a label with "aria-labelledby"', async () => {
-      const el = await fixture(
-        html` <lion-progress-indicator aria-labelledby="foo-id"></lion-progress-indicator> `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator aria-labelledby="foo-id"></lion-progress-indicator>
+      `);
       await el.localizeNamespacesLoaded;
       expect(el.getAttribute('aria-labelledby')).to.equal('foo-id');
       expect(el.hasAttribute('aria-label')).to.be.false;
@@ -62,9 +62,9 @@ describe('lion-progress-indicator', () => {
     });
 
     it('keeps own aria-label when switch to determinate state', async () => {
-      const el = await fixture(
-        html` <lion-progress-indicator aria-label="foo"></lion-progress-indicator> `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator aria-label="foo"></lion-progress-indicator>
+      `);
       expect(el.getAttribute('aria-label')).to.equal('foo');
       el.setAttribute('value', '30');
       await el.updateComplete;
@@ -74,16 +74,16 @@ describe('lion-progress-indicator', () => {
 
   describe('determinate', async () => {
     it('is determinate when it has a value', async () => {
-      const el = await fixture(
-        html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
+      `);
       expect(el.indeterminate).to.be.false;
     });
 
     it('can update value', async () => {
-      const el = await fixture(
-        html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
+      `);
       expect(el.getAttribute('aria-valuenow')).to.equal('25');
       el.value = 30;
       await el.updateComplete;
@@ -91,9 +91,9 @@ describe('lion-progress-indicator', () => {
     });
 
     it('can update min', async () => {
-      const el = await fixture(
-        html` <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator> `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator>
+      `);
       expect(el.getAttribute('aria-valuemin')).to.equal('0');
       el.min = 30;
       await el.updateComplete;
@@ -101,9 +101,9 @@ describe('lion-progress-indicator', () => {
     });
 
     it('can update max', async () => {
-      const el = await fixture(
-        html` <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator> `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator>
+      `);
       expect(el.getAttribute('aria-valuemax')).to.equal('100');
       el.max = 70;
       await el.updateComplete;
@@ -111,9 +111,9 @@ describe('lion-progress-indicator', () => {
     });
 
     it('min & max limits value', async () => {
-      const el = await fixture(
-        html` <lion-progress-indicator value="150" aria-label="foo"></lion-progress-indicator> `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator value="150" aria-label="foo"></lion-progress-indicator>
+      `);
       // sets to default max: 100
       expect(el.getAttribute('aria-valuenow')).to.equal('100');
       el.value = -20;
@@ -124,14 +124,12 @@ describe('lion-progress-indicator', () => {
 
     // TODO make this feature available
     it.skip('supports valuetext', async () => {
-      const el = await fixture(
-        html`
-          <lion-progress-indicator
-            value="8"
-            value-text="{value}% (34 minutes) remaining"
-          ></lion-progress-indicator>
-        `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator
+          value="8"
+          value-text="{value}% (34 minutes) remaining"
+        ></lion-progress-indicator>
+      `);
       expect(el.getAttribute('aria-valuetext')).to.equal('8% (34 minutes) remaining');
     });
 
@@ -179,11 +177,9 @@ describe('lion-progress-indicator', () => {
 
   describe('Subclasers', () => {
     it('can use _progressPercentage getter to get the progress percentage', async () => {
-      const el = await fixture(
-        html`
-          <lion-progress-indicator max="50" value="10" aria-label="foo"></lion-progress-indicator>
-        `,
-      );
+      const el = await fixture(html`
+        <lion-progress-indicator max="50" value="10" aria-label="foo"></lion-progress-indicator>
+      `);
       expect(el._progressPercentage).to.equal(20);
     });
   });
@@ -203,23 +199,23 @@ describe('lion-progress-indicator', () => {
 
     describe('determinate', () => {
       it('passes a11y test', async () => {
-        const el = await fixture(
-          html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
-        );
+        const el = await fixture(html`
+          <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
+        `);
         await expect(el).to.be.accessible();
       });
 
       it('once value is set', async () => {
-        const el = await fixture(
-          html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
-        );
+        const el = await fixture(html`
+          <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
+        `);
         expect(el.getAttribute('aria-valuenow')).to.equal('25');
       });
 
       it('allows to set min & max values', async () => {
-        const el = await fixture(
-          html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
-        );
+        const el = await fixture(html`
+          <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
+        `);
         expect(el.getAttribute('aria-valuemin')).to.equal('0');
         expect(el.getAttribute('aria-valuemax')).to.equal('100');
       });
diff --git a/packages/ui/components/select-rich/test/lion-select-rich.test.js b/packages/ui/components/select-rich/test/lion-select-rich.test.js
index 11a72728d..11d9e578a 100644
--- a/packages/ui/components/select-rich/test/lion-select-rich.test.js
+++ b/packages/ui/components/select-rich/test/lion-select-rich.test.js
@@ -444,9 +444,9 @@ describe('lion-select-rich', () => {
     });
 
     it('adds focus to element with [role=listbox] when trapsKeyboardFocus is true', async () => {
-      const el = await fixture(
-        html` <lion-select-rich .config=${{ trapsKeyboardFocus: true }}></lion-select-rich> `,
-      );
+      const el = await fixture(html`
+        <lion-select-rich .config=${{ trapsKeyboardFocus: true }}></lion-select-rich>
+      `);
       const { _listboxNode } = getSelectRichMembers(el);
       expect(document.activeElement).to.not.equal(_listboxNode);
 
@@ -503,11 +503,9 @@ describe('lion-select-rich', () => {
     });
 
     it('does not close the listbox with [Tab] key once opened when trapsKeyboardFocus is true', async () => {
-      const el = await fixture(
-        html`
-          <lion-select-rich opened .config=${{ trapsKeyboardFocus: true }}> </lion-select-rich>
-        `,
-      );
+      const el = await fixture(html`
+        <lion-select-rich opened .config=${{ trapsKeyboardFocus: true }}> </lion-select-rich>
+      `);
       // tab can only be caught via keydown
       const { _listboxNode } = getSelectRichMembers(el);
       _listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
diff --git a/packages/ui/components/steps/test/lion-step.test.js b/packages/ui/components/steps/test/lion-step.test.js
index 1c9b6e5d0..f05699964 100644
--- a/packages/ui/components/steps/test/lion-step.test.js
+++ b/packages/ui/components/steps/test/lion-step.test.js
@@ -50,13 +50,11 @@ describe('lion-step', () => {
   });
 
   it('is hidden when attribute hidden is true', async () => {
-    const el = await fixture(
-      html`
-        <fake-lion-steps>
-          <lion-step hidden>Step 1</lion-step>
-        </fake-lion-steps>
-      `,
-    );
+    const el = await fixture(html`
+      <fake-lion-steps>
+        <lion-step hidden>Step 1</lion-step>
+      </fake-lion-steps>
+    `);
     expect(el.children[0]).not.to.be.displayed;
   });
 
diff --git a/packages/ui/components/switch/test/lion-switch.test.js b/packages/ui/components/switch/test/lion-switch.test.js
index 37b1af4b2..f3dfe2e10 100644
--- a/packages/ui/components/switch/test/lion-switch.test.js
+++ b/packages/ui/components/switch/test/lion-switch.test.js
@@ -160,13 +160,11 @@ describe('lion-switch', () => {
   it('should not propagate the "checked-changed" event further up when caught by switch', async () => {
     const handlerSpy = sinon.spy();
     const parentHandlerSpy = sinon.spy();
-    const el = await fixture(
-      html`
-        <div @checked-changed=${parentHandlerSpy}>
-          <lion-switch @checked-changed=${handlerSpy} .choiceValue=${'foo'}></lion-switch>
-        </div>
-      `,
-    );
+    const el = await fixture(html`
+      <div @checked-changed=${parentHandlerSpy}>
+        <lion-switch @checked-changed=${handlerSpy} .choiceValue=${'foo'}></lion-switch>
+      </div>
+    `);
     const switchEl = /** @type {LionSwitch} */ (el.firstElementChild);
     switchEl.checked = true;
     await switchEl.updateComplete;