From e37c93881bedfd3e07a3c91817a8110f8a0a9ba4 Mon Sep 17 00:00:00 2001
From: Borna Cafuk <borna.c@netgen.io>
Date: Fri, 9 Sep 2022 16:34:02 +0200
Subject: [PATCH] Run Prettier

---
 components/avatar/element.js   |  50 +++++++-------
 components/avatar/spec.js      |  32 ++++++---
 components/avatar/style.js     |   4 +-
 components/badge/element.js    |   8 +--
 components/badge/spec.js       |  15 +++--
 components/badge/style.js      |   6 +-
 components/block/element.js    |  31 +++++----
 components/block/spec.js       |   7 +-
 components/block/style.js      |  48 ++++++-------
 components/dropdown/element.js | 120 ++++++++++++++++++++++-----------
 components/dropdown/spec.js    |  49 +++++++-------
 components/dropdown/style.js   |   6 +-
 dev/ngl-block.html             |  45 +++++++++++--
 rollup.config.js               |   2 +-
 web-test-runner.config.js      |   3 +-
 15 files changed, 260 insertions(+), 166 deletions(-)

diff --git a/components/avatar/element.js b/components/avatar/element.js
index e291f37..083cc69 100644
--- a/components/avatar/element.js
+++ b/components/avatar/element.js
@@ -1,23 +1,23 @@
-import { LitElement, html } from 'lit';
-import { colorFromString } from './lib/color_from_string.js';
+import {LitElement, html} from 'lit';
+import {colorFromString} from './lib/color_from_string.js';
 import style from './style.js';
 
 export default class Avatar extends LitElement {
   static styles = [style];
 
   static properties = {
-    name: { type: String },
-    picture: { type: String },
-    icon: { type: String },
-    label: { type: String },
-    rounded: { type: Boolean },
-    layout: { type: String, reflect: true },
+    name: {type: String},
+    picture: {type: String},
+    icon: {type: String},
+    label: {type: String},
+    rounded: {type: Boolean},
+    layout: {type: String, reflect: true},
   };
 
   constructor() {
     super();
-    this.icon = "user";
-    this.layout = "md";
+    this.icon = 'user';
+    this.layout = 'md';
   }
 
   get bgColor() {
@@ -25,47 +25,45 @@ export default class Avatar extends LitElement {
   }
 
   get initials() {
-    return this.name.split(/\s+/).map(part => part[0]).slice(0, 2).join('');
+    return this.name
+      .split(/\s+/)
+      .map((part) => part[0])
+      .slice(0, 2)
+      .join('');
   }
 
   renderPicture() {
-    return html`
-      <img src="${this.picture}" />
-    `;
+    return html` <img src="${this.picture}" /> `;
   }
 
   renderPlaceholder() {
-    return html`
-      <bu-icon name="${this.icon}"></bu-icon>
-    `;
+    return html` <bu-icon name="${this.icon}"></bu-icon> `;
   }
 
   renderInitials() {
     return html`
-      <span class="name" style="background-color: ${this.bgColor}">${this.initials}</span>
+      <span class="name" style="background-color: ${this.bgColor}"
+        >${this.initials}</span
+      >
     `;
   }
 
   renderLabel() {
-    return html`
-      <span class="label">${this.label}</span>
-    `;
+    return html` <span class="label">${this.label}</span> `;
   }
 
   renderContent() {
     if (this.picture) {
       return this.renderPicture();
-    } if (this.name) {
+    }
+    if (this.name) {
       return this.renderInitials();
     }
     return this.renderPlaceholder();
   }
 
   render() {
-    return html`
-      ${this.renderContent()}
-      ${this.label && this.renderLabel()}
-    `;
+    return html` ${this.renderContent()} ${this.label && this.renderLabel()} `;
   }
 }
 
diff --git a/components/avatar/spec.js b/components/avatar/spec.js
index 16a584c..dc83aae 100644
--- a/components/avatar/spec.js
+++ b/components/avatar/spec.js
@@ -6,24 +6,40 @@ describe('bu-avatar', () => {
   it('renders with placeholder', async () => {
     const element = await fixture(html`<bu-avatar></bu-avatar>`);
 
-    assert.shadowDom.equal(element, `
+    assert.shadowDom.equal(
+      element,
+      `
       <bu-icon name="user"></bu-icon>
-    `);
+    `
+    );
   });
 
   it('renders with initials and background color', async () => {
-    const element = await fixture(html`<bu-avatar name="John Doe"></bu-avatar>`);
+    const element = await fixture(
+      html`<bu-avatar name="John Doe"></bu-avatar>`
+    );
 
-    assert.shadowDom.equal(element, `
+    assert.shadowDom.equal(
+      element,
+      `
       <span class="name" style="background-color: hsl(-147, 50%, 52%)">JD</span>
-    `);
+    `
+    );
   });
 
   it('renders with picture', async () => {
-    const element = await fixture(html`<bu-avatar name="John Doe" picture="https://i.pravatar.cc/120"></bu-avatar>`);
+    const element = await fixture(
+      html`<bu-avatar
+        name="John Doe"
+        picture="https://i.pravatar.cc/120"
+      ></bu-avatar>`
+    );
 
-    assert.shadowDom.equal(element, `
+    assert.shadowDom.equal(
+      element,
+      `
       <img src="https://i.pravatar.cc/120">
-    `);
+    `
+    );
   });
 });
diff --git a/components/avatar/style.js b/components/avatar/style.js
index 2aaf46c..8b19d00 100644
--- a/components/avatar/style.js
+++ b/components/avatar/style.js
@@ -56,13 +56,13 @@ export default css`
     border-radius: 50%;
   }
 
-  :host([layout=md]) {
+  :host([layout='md']) {
     width: var(--avatar-size, var(--md));
     height: var(--avatar-size, var(--md));
     font-size: calc(var(--avatar-size, var(--md)) * 0.4);
   }
 
-  :host([layout=lg]) {
+  :host([layout='lg']) {
     width: var(--avatar-size, var(--lg));
     height: var(--avatar-size, var(--lg));
     font-size: calc(var(--avatar-size, var(--lg)) * 0.4);
diff --git a/components/badge/element.js b/components/badge/element.js
index c81c027..c2abad1 100644
--- a/components/badge/element.js
+++ b/components/badge/element.js
@@ -5,14 +5,14 @@ export default class Badge extends LitElement {
   static styles = [style];
 
   static properties = {
-    count: { type: Number, reflect: true },
-    theme: { type: String, reflect: true },
-    showZero: { type: Boolean },
+    count: {type: Number, reflect: true},
+    theme: {type: String, reflect: true},
+    showZero: {type: Boolean},
   };
 
   constructor() {
     super();
-    this.theme = "secondary";
+    this.theme = 'secondary';
   }
 
   render() {
diff --git a/components/badge/spec.js b/components/badge/spec.js
index 82d23a1..0cf3a1b 100644
--- a/components/badge/spec.js
+++ b/components/badge/spec.js
@@ -11,22 +11,27 @@ describe('bu-badge', () => {
   it('default render', async () => {
     const element = await fixture(html`<bu-badge count="1"></bu-badge>`);
 
-    assert.dom.equal(element, `
+    assert.dom.equal(
+      element,
+      `
       <bu-badge count=1 theme="secondary"></bu-badge>
-    `);
+    `
+    );
   });
 
   it('hidden if count is 0', async () => {
     const element = await fixture(html`<bu-badge count="0"></bu-badge>`);
 
-    assert.shadowDom.equal(element, "");
+    assert.shadowDom.equal(element, '');
     assert.equal(getComputedStyle(element).display, 'none');
   });
 
   it('visible if count is 0 and showZero set to true', async () => {
-    const element = await fixture(html`<bu-badge count="0" showZero></bu-badge>`);
+    const element = await fixture(
+      html`<bu-badge count="0" showZero></bu-badge>`
+    );
 
-    assert.shadowDom.equal(element, "0");
+    assert.shadowDom.equal(element, '0');
     assert.equal(getComputedStyle(element).display, 'inline-flex');
   });
 });
diff --git a/components/badge/style.js b/components/badge/style.js
index 9c9a6b0..c65eca5 100644
--- a/components/badge/style.js
+++ b/components/badge/style.js
@@ -20,11 +20,11 @@ export default css`
     border-radius: 10px;
   }
 
-  :host([theme=primary]) {
+  :host([theme='primary']) {
     background-color: var(--primary, rgb(13, 110, 253));
   }
 
-  :host([theme=secondary]) {
+  :host([theme='secondary']) {
     background-color: var(--secondary, rgb(50, 157, 125));
   }
 
@@ -36,4 +36,4 @@ export default css`
   :host([showZero][count='0']) {
     display: inline-flex;
   }
-`
+`;
diff --git a/components/block/element.js b/components/block/element.js
index 08ef972..545c3ef 100644
--- a/components/block/element.js
+++ b/components/block/element.js
@@ -9,10 +9,10 @@ export default class Block extends LitElement {
   static styles = [style];
 
   static properties = {
-    blockId: { type: Number},
+    blockId: {type: Number},
   };
 
-  renderMenu(){
+  renderMenu() {
     return html`
       <nav>
         <button @click=${this.edit}>Edit</button>
@@ -23,41 +23,44 @@ export default class Block extends LitElement {
     `;
   }
 
-  edit(e){
-    console.log(e.target.innerText)
+  edit(e) {
+    console.log(e.target.innerText);
     this.refresh();
   }
 
   delete(e) {
-    console.log(e.target.innerText)
+    console.log(e.target.innerText);
     this.remove();
   }
 
   moveUp(e) {
-    console.log(e.target.innerText)
+    console.log(e.target.innerText);
     const prevElement = this.previousElementSibling;
-    isBlock(prevElement) && this.parentNode.insertBefore(this, prevElement)
+    isBlock(prevElement) && this.parentNode.insertBefore(this, prevElement);
   }
 
   moveDown(e) {
-    console.log(e.target.innerText)
+    console.log(e.target.innerText);
     const nextElement = this.nextElementSibling;
-    isBlock(nextElement) && this.parentNode.insertBefore(nextElement, this)
+    isBlock(nextElement) && this.parentNode.insertBefore(nextElement, this);
   }
 
   async fetch() {
-    const resp = await fetch(window.location.href)
-    return resp.text()
+    const resp = await fetch(window.location.href);
+    return resp.text();
   }
 
   async refresh() {
     let html = await this.fetch();
-    const template = document.createElement('template')
+    const template = document.createElement('template');
     template.innerHTML = html;
-    const currentBlockHtml = template.content.querySelector(`ngl-block[blockId="${this.blockId}"]`)
+    const currentBlockHtml = template.content.querySelector(
+      `ngl-block[blockId="${this.blockId}"]`
+    );
 
     // Simulate text change
-    currentBlockHtml.querySelector('.timestamp').innerText = new Date().toLocaleTimeString();
+    currentBlockHtml.querySelector('.timestamp').innerText =
+      new Date().toLocaleTimeString();
     this.innerHTML = currentBlockHtml.innerHTML;
   }
 
diff --git a/components/block/spec.js b/components/block/spec.js
index 85e0b2b..70dcc88 100644
--- a/components/block/spec.js
+++ b/components/block/spec.js
@@ -11,7 +11,9 @@ describe('ngl-block', () => {
   it('default render', async () => {
     const element = await fixture(html`<ngl-block blockId="1"></ngl-block>`);
 
-    assert.shadowDom.equal(element, `
+    assert.shadowDom.equal(
+      element,
+      `
     <main>
       <nav>
         <button>Edit</button>
@@ -21,6 +23,7 @@ describe('ngl-block', () => {
       </nav>
       <slot></slot>
     </main>
-    `);
+    `
+    );
   });
 });
diff --git a/components/block/style.js b/components/block/style.js
index f1b3a95..8c174a1 100644
--- a/components/block/style.js
+++ b/components/block/style.js
@@ -1,55 +1,57 @@
-import { css } from 'lit';
+import {css} from 'lit';
 
 export default css`
   :host {
     --ngl-block-outline-color: #333;
     --ngl-block-outline-color-active: #f66;
 
-    display:contents;
+    display: contents;
   }
 
   ::slotted(.ngl-block) {
-    outline:2px solid var(--ngl-block-outline-color) !important;
-    outline-offset:4px;
+    outline: 2px solid var(--ngl-block-outline-color) !important;
+    outline-offset: 4px;
   }
 
   :hover ::slotted(.ngl-block) {
     outline-color: var(--ngl-block-outline-color-active) !important;
   }
 
-  main{
-    position:relative;
+  main {
+    position: relative;
   }
 
-  nav{
+  nav {
     display: none;
-    position:absolute;
-    right:0px;
-    top:0;
+    position: absolute;
+    right: 0px;
+    top: 0;
     background: #fff;
     border: 1px solid #ccc;
-    padding:5px;
+    padding: 5px;
     border-radius: 5px;
   }
 
   main:hover nav {
-    display:block;
+    display: block;
   }
 
-  button{
-    background:none;
-    border:none;
-    margin:0;
-    padding:0;
-    margin:0;
+  button {
+    background: none;
+    border: none;
+    margin: 0;
+    padding: 0;
+    margin: 0;
     border-left: 1px solid #ccc;
     padding: 4px;
-    text-align:center;
+    text-align: center;
   }
-  button:first-child{
+  button:first-child {
     border: none;
-    margin-left:0;
+    margin-left: 0;
   }
 
-  button:hover{background-color: #ccc;}
-`
+  button:hover {
+    background-color: #ccc;
+  }
+`;
diff --git a/components/dropdown/element.js b/components/dropdown/element.js
index 5139b43..0fc4c3c 100644
--- a/components/dropdown/element.js
+++ b/components/dropdown/element.js
@@ -1,16 +1,24 @@
-import { LitElement, html } from 'lit';
-import { autoUpdate, arrow, computePosition, flip, offset, shift, size } from '@floating-ui/dom';
+import {LitElement, html} from 'lit';
+import {
+  autoUpdate,
+  arrow,
+  computePosition,
+  flip,
+  offset,
+  shift,
+  size,
+} from '@floating-ui/dom';
 import style from './style.js';
 
 export default class Dropdown extends LitElement {
   static styles = [style];
 
   static properties = {
-    open: { type: Boolean, reflect: true },
-    placement: { type: String },
-    offsetVertical: { type: Number },
-    offsetHorizontal: { type: Number },
-    caret: { type: Boolean },
+    open: {type: Boolean, reflect: true},
+    placement: {type: String},
+    offsetVertical: {type: Number},
+    offsetHorizontal: {type: Number},
+    caret: {type: Boolean},
   };
 
   constructor() {
@@ -56,10 +64,14 @@ export default class Dropdown extends LitElement {
   }
 
   get tabbableElements() {
-    const tabbleMenuItems = this.dropdownContentElement.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])');
+    const tabbleMenuItems = this.dropdownContentElement.querySelectorAll(
+      'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+    );
 
     const filteredMenuItems = Array.from(tabbleMenuItems).filter(
-      element => !element.hasAttribute('disabled') && !element.getAttribute('aria-hidden')
+      (element) =>
+        !element.hasAttribute('disabled') &&
+        !element.getAttribute('aria-hidden')
     );
 
     return filteredMenuItems;
@@ -74,7 +86,7 @@ export default class Dropdown extends LitElement {
   }
 
   updateAccessibleTrigger() {
-    const { triggerElement } = this;
+    const {triggerElement} = this;
 
     if (triggerElement.tagName.toLowerCase() === 'a') {
       triggerElement.setAttribute('role', 'button');
@@ -90,20 +102,29 @@ export default class Dropdown extends LitElement {
   }
 
   handleDocumentKeyDown(event) {
-
     if (event.key === 'Escape') {
       this.closeAndRefocus();
-    } else if (['Tab', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
-
+    } else if (
+      ['Tab', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)
+    ) {
       event.preventDefault();
 
-      let menuIndex = this.tabbableElements.findIndex(item => item === event.target);
+      let menuIndex = this.tabbableElements.findIndex(
+        (item) => item === event.target
+      );
 
-      if ((event.key === 'ArrowUp' || (event.shiftKey && event.key === 'Tab')) && menuIndex > 0) {
+      if (
+        (event.key === 'ArrowUp' || (event.shiftKey && event.key === 'Tab')) &&
+        menuIndex > 0
+      ) {
         menuIndex--;
       }
 
-      if ((event.key === 'ArrowDown' || (!event.shiftKey && event.key === 'Tab')) && menuIndex < this.tabbableElements.length - 1) {
+      if (
+        (event.key === 'ArrowDown' ||
+          (!event.shiftKey && event.key === 'Tab')) &&
+        menuIndex < this.tabbableElements.length - 1
+      ) {
         menuIndex++;
       }
 
@@ -116,7 +137,11 @@ export default class Dropdown extends LitElement {
       }
 
       this.tabbableElements[menuIndex].focus();
-    } else if (event.key === 'Enter' && this.open && this.dropdownContent.contains(event.target)) {
+    } else if (
+      event.key === 'Enter' &&
+      this.open &&
+      this.dropdownContent.contains(event.target)
+    ) {
       this.closeAndRefocus();
     }
   }
@@ -131,7 +156,11 @@ export default class Dropdown extends LitElement {
     }
 
     // Close dropdown if click event is on dropdown content element that is anchor or button element
-    if (this.open && path.includes(this.dropdownContent) && ['a', 'button'].includes(targetTagName)) {
+    if (
+      this.open &&
+      path.includes(this.dropdownContent) &&
+      ['a', 'button'].includes(targetTagName)
+    ) {
       this.closeAndRefocus();
     }
   }
@@ -153,7 +182,6 @@ export default class Dropdown extends LitElement {
   }
 
   handleTriggerKeyDown(event) {
-
     if (event.key === 'Escape') {
       this.closeAndRefocus();
     } else if ([' ', 'Enter'].includes(event.key)) {
@@ -182,7 +210,6 @@ export default class Dropdown extends LitElement {
   }
 
   setCaretPosition(dropdownPlacement, middlewareData) {
-
     const {x: arrowX, y: arrowY} = middlewareData.arrow;
     const staticSide = {
       top: 'bottom',
@@ -194,7 +221,10 @@ export default class Dropdown extends LitElement {
     const arrowXcorrection = staticSide === 'bottom' ? arrowX + 9 : arrowX - 9;
 
     Object.assign(this.caretElement.style, {
-      left: arrowX != null ? `${this.offsetHorizontal ? arrowX : arrowXcorrection}px` : '',
+      left:
+        arrowX != null
+          ? `${this.offsetHorizontal ? arrowX : arrowXcorrection}px`
+          : '',
       top: arrowY != null ? `${arrowY}px` : '',
       right: '',
       bottom: '',
@@ -207,28 +237,33 @@ export default class Dropdown extends LitElement {
     if (!this.open || !this.trigger || !this.dropdownContent) return;
 
     const middlewareFunctions = [
-      offset({ mainAxis: this.offsetVertical, crossAxis: this.offsetHorizontal }),
+      offset({mainAxis: this.offsetVertical, crossAxis: this.offsetHorizontal}),
       flip(),
-      shift({ padding: 16 }),
+      shift({padding: 16}),
       size({
-        apply: ({ width, height }) => {
+        apply: ({width, height}) => {
           Object.assign(this.dropdownContent.style, {
             maxWidth: `${width}px`,
             maxHeight: `${height}px`,
-            overflow: this.dropdownContentElement.offsetHeight > height ? 'auto' : 'unset'
+            overflow:
+              this.dropdownContentElement.offsetHeight > height
+                ? 'auto'
+                : 'unset',
           });
         },
-        padding: 16
+        padding: 16,
       }),
     ];
 
     if (this.caret) {
-      middlewareFunctions.push(arrow({
-        element: this.caretElement,
-        // This describes the padding between the arrow and the edges of the floating element.
-        // If your floating element has border-radius, this will prevent it from overflowing the corners.
-        padding: 4
-      }));
+      middlewareFunctions.push(
+        arrow({
+          element: this.caretElement,
+          // This describes the padding between the arrow and the edges of the floating element.
+          // If your floating element has border-radius, this will prevent it from overflowing the corners.
+          padding: 4,
+        })
+      );
     }
 
     computePosition(this.trigger, this.dropdownContent, {
@@ -246,7 +281,11 @@ export default class Dropdown extends LitElement {
   startPositioner() {
     this.stopPositioner();
     this.updatePositioner();
-    this.positionerCleanup = autoUpdate(this.trigger, this.dropdownContent, this.updatePositioner.bind(this));
+    this.positionerCleanup = autoUpdate(
+      this.trigger,
+      this.dropdownContent,
+      this.updatePositioner.bind(this)
+    );
   }
 
   stopPositioner() {
@@ -282,27 +321,26 @@ export default class Dropdown extends LitElement {
   render() {
     return html`
       <div class="dropdown">
-
         <span
           class="dropdown-trigger"
           @click=${this.handleTriggerClick}
           @keydown=${this.handleTriggerKeyDown}
           @keyup=${this.handleTriggerKeyUp}
         >
-          <slot name="trigger" @slotchange=${this.handleTriggerSlotChange}></slot>
+          <slot
+            name="trigger"
+            @slotchange=${this.handleTriggerSlotChange}
+          ></slot>
         </span>
 
-        <div
-          class="dropdown-content"
-          aria-hidden="${!this.open}"
-        >
+        <div class="dropdown-content" aria-hidden="${!this.open}">
           ${this.caret ? this.renderCaret() : null}
           <slot></slot>
         </div>
-
       </div>
     `;
   }
 }
 
-customElements.get('bu-dropdown') || customElements.define('bu-dropdown', Dropdown);
+customElements.get('bu-dropdown') ||
+  customElements.define('bu-dropdown', Dropdown);
diff --git a/components/dropdown/spec.js b/components/dropdown/spec.js
index 5b286a6..950be44 100644
--- a/components/dropdown/spec.js
+++ b/components/dropdown/spec.js
@@ -1,10 +1,9 @@
-import { fixture, assert } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import { html } from 'lit/static-html.js';
+import {fixture, assert} from '@open-wc/testing';
+import {sendKeys} from '@web/test-runner-commands';
+import {html} from 'lit/static-html.js';
 import './element.js';
 
 const createDropdown = async (properties) => {
-
   const element = await fixture(html`
     <bu-dropdown>
       <button slot="trigger">Click</button>
@@ -21,10 +20,9 @@ const createDropdown = async (properties) => {
   }
 
   return element;
-}
+};
 
 describe('bu-dropdown', () => {
-
   it('should be visible with the open attribute', async () => {
     const element = await createDropdown({open: true});
 
@@ -65,12 +63,11 @@ describe('bu-dropdown', () => {
   });
 
   describe('should open dropdown on key press', () => {
-
     it('on Enter', async () => {
       const element = await createDropdown();
       element.triggerElement.focus();
 
-      await sendKeys({ press: 'Enter' });
+      await sendKeys({press: 'Enter'});
       await element.updateComplete;
 
       assert.isTrue(element.open);
@@ -80,7 +77,7 @@ describe('bu-dropdown', () => {
       const element = await createDropdown();
       element.triggerElement.focus();
 
-      await sendKeys({ press: 'Space' });
+      await sendKeys({press: 'Space'});
       await element.updateComplete;
 
       assert.isTrue(element.open);
@@ -90,7 +87,7 @@ describe('bu-dropdown', () => {
       const element = await createDropdown();
       element.triggerElement.focus();
 
-      await sendKeys({ press: 'ArrowDown' });
+      await sendKeys({press: 'ArrowDown'});
       await element.updateComplete;
 
       assert.isTrue(element.open);
@@ -98,12 +95,11 @@ describe('bu-dropdown', () => {
   });
 
   describe('should close dropdown on key press if dropdown was opened, and focus is on trigger element', () => {
-
     it('on Escape', async () => {
       const element = await createDropdown({open: true});
       element.triggerElement.focus();
 
-      await sendKeys({ press: 'Escape' });
+      await sendKeys({press: 'Escape'});
       await element.updateComplete;
 
       assert.isFalse(element.open);
@@ -113,7 +109,7 @@ describe('bu-dropdown', () => {
       const element = await createDropdown({open: true});
       element.triggerElement.focus();
 
-      await sendKeys({ press: 'Enter' });
+      await sendKeys({press: 'Enter'});
       await element.updateComplete;
 
       assert.isFalse(element.open);
@@ -123,7 +119,7 @@ describe('bu-dropdown', () => {
       const element = await createDropdown({open: true});
       element.triggerElement.focus();
 
-      await sendKeys({ press: 'Space' });
+      await sendKeys({press: 'Space'});
       await element.updateComplete;
 
       assert.isFalse(element.open);
@@ -131,7 +127,6 @@ describe('bu-dropdown', () => {
   });
 
   describe('should have accessibility attributes', () => {
-
     it('should have aria-haspopup on trigger', async () => {
       const element = await createDropdown();
 
@@ -142,7 +137,10 @@ describe('bu-dropdown', () => {
       const element = await createDropdown();
       element.triggerElement.click();
 
-      assert.equal(element.triggerElement.getAttribute('aria-expanded'), 'true');
+      assert.equal(
+        element.triggerElement.getAttribute('aria-expanded'),
+        'true'
+      );
     });
 
     it('should have aria-hidden as true if dropdown is not opened', async () => {
@@ -159,18 +157,17 @@ describe('bu-dropdown', () => {
   });
 
   describe('should focus on tabbable element on specific key press', () => {
-
     it('on Tab key press tabbable element should be focused', async () => {
       const element = await createDropdown({open: true});
       element.triggerElement.focus();
 
-      await sendKeys({ press: 'Tab' });
+      await sendKeys({press: 'Tab'});
       await element.updateComplete;
 
       // First tabbable element is focused
       assert.equal(document.activeElement, element.tabbableElements[0]);
 
-      await sendKeys({ press: 'Tab' });
+      await sendKeys({press: 'Tab'});
       await element.updateComplete;
 
       // Second tabbable element is focused
@@ -181,7 +178,7 @@ describe('bu-dropdown', () => {
       const element = await createDropdown({open: true});
       element.triggerElement.focus();
 
-      await sendKeys({ press: 'ArrowDown' });
+      await sendKeys({press: 'ArrowDown'});
       await element.updateComplete;
 
       assert.equal(document.activeElement, element.tabbableElements[0]);
@@ -191,7 +188,7 @@ describe('bu-dropdown', () => {
       const element = await createDropdown({open: true});
       element.tabbableElements[1].focus();
 
-      await sendKeys({ press: 'ArrowUp' });
+      await sendKeys({press: 'ArrowUp'});
       await element.updateComplete;
 
       assert.equal(document.activeElement, element.tabbableElements[0]);
@@ -201,7 +198,7 @@ describe('bu-dropdown', () => {
       const element = await createDropdown({open: true});
       element.triggerElement.focus();
 
-      await sendKeys({ press: 'Home' });
+      await sendKeys({press: 'Home'});
       await element.updateComplete;
 
       assert.equal(document.activeElement, element.tabbableElements[0]);
@@ -211,11 +208,13 @@ describe('bu-dropdown', () => {
       const element = await createDropdown({open: true});
       element.triggerElement.focus();
 
-      await sendKeys({ press: 'End' });
+      await sendKeys({press: 'End'});
       await element.updateComplete;
 
-      assert.equal(document.activeElement, element.tabbableElements[element.tabbableElements.length - 1]);
+      assert.equal(
+        document.activeElement,
+        element.tabbableElements[element.tabbableElements.length - 1]
+      );
     });
   });
-
 });
diff --git a/components/dropdown/style.js b/components/dropdown/style.js
index 9356140..57f26dd 100644
--- a/components/dropdown/style.js
+++ b/components/dropdown/style.js
@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import {css} from 'lit';
 
 export default css`
   :host {
@@ -38,7 +38,7 @@ export default css`
   }
 
   .caret:before {
-    content: " ";
+    content: ' ';
     position: absolute;
     top: 0;
     left: 0;
@@ -48,7 +48,7 @@ export default css`
   }
 
   .caret:after {
-    content: " ";
+    content: ' ';
     position: absolute;
     left: 1px;
     top: 1px;
diff --git a/dev/ngl-block.html b/dev/ngl-block.html
index 7995476..407aa87 100644
--- a/dev/ngl-block.html
+++ b/dev/ngl-block.html
@@ -8,10 +8,20 @@
     <script src="../node_modules/lit/polyfill-support.js"></script>
     <script type="module" src="../components/block/element.js"></script>
     <style>
-      body{margin:0; padding: 50px;}
-      .ngl-block{padding:10px; background: #ffe; margin:20px 0; }
-      button{padding: 10px; margin:10px; background-color: #9f9;}
-
+      body {
+        margin: 0;
+        padding: 50px;
+      }
+      .ngl-block {
+        padding: 10px;
+        background: #ffe;
+        margin: 20px 0;
+      }
+      button {
+        padding: 10px;
+        margin: 10px;
+        background-color: #9f9;
+      }
     </style>
   </head>
   <body>
@@ -20,7 +30,18 @@ <h1>Demos</h1>
     <ngl-block blockId="1">
       <div class="ngl-block">
         <h1>This is inner content of block 1</h1>
-        <p>Eating carbs for breakfast and lunch gives me more cravings the rest of the day: especially for more carbs. Dinnertime carbs don’t matter much, because I’m winding down at that point of the day, and cravings will soon be precluded by sleep. Eliminating mid-day cravings has made it easier to eat in greater moderation. As a result, I’ve slowly but steadily lost weight since starting to do this. And since I’m not cutting out carbs totally, I’m avoiding the “no-carb flu” symptoms (massive fatigue, brain fog, and headaches) that hit me like a ton of bricks when I first adopted the ketogenic diet for a short time (and lost a lot of weight as a result) back in January.</p>
+        <p>
+          Eating carbs for breakfast and lunch gives me more cravings the rest
+          of the day: especially for more carbs. Dinnertime carbs don’t matter
+          much, because I’m winding down at that point of the day, and cravings
+          will soon be precluded by sleep. Eliminating mid-day cravings has made
+          it easier to eat in greater moderation. As a result, I’ve slowly but
+          steadily lost weight since starting to do this. And since I’m not
+          cutting out carbs totally, I’m avoiding the “no-carb flu” symptoms
+          (massive fatigue, brain fog, and headaches) that hit me like a ton of
+          bricks when I first adopted the ketogenic diet for a short time (and
+          lost a lot of weight as a result) back in January.
+        </p>
         <div class="timestamp"></div>
         <button>More</button>
       </div>
@@ -29,11 +50,21 @@ <h1>This is inner content of block 1</h1>
     <ngl-block blockId="2">
       <div class="ngl-block">
         <h1>This is inner content of block 2</h1>
-        <p>Eating carbs for breakfast and lunch gives me more cravings the rest of the day: especially for more carbs. Dinnertime carbs don’t matter much, because I’m winding down at that point of the day, and cravings will soon be precluded by sleep. Eliminating mid-day cravings has made it easier to eat in greater moderation. As a result, I’ve slowly but steadily lost weight since starting to do this. And since I’m not cutting out carbs totally, I’m avoiding the “no-carb flu” symptoms (massive fatigue, brain fog, and headaches) that hit me like a ton of bricks when I first adopted the ketogenic diet for a short time (and lost a lot of weight as a result) back in January.</p>
+        <p>
+          Eating carbs for breakfast and lunch gives me more cravings the rest
+          of the day: especially for more carbs. Dinnertime carbs don’t matter
+          much, because I’m winding down at that point of the day, and cravings
+          will soon be precluded by sleep. Eliminating mid-day cravings has made
+          it easier to eat in greater moderation. As a result, I’ve slowly but
+          steadily lost weight since starting to do this. And since I’m not
+          cutting out carbs totally, I’m avoiding the “no-carb flu” symptoms
+          (massive fatigue, brain fog, and headaches) that hit me like a ton of
+          bricks when I first adopted the ketogenic diet for a short time (and
+          lost a lot of weight as a result) back in January.
+        </p>
         <div class="timestamp"></div>
         <button>More</button>
       </div>
     </ngl-block>
-
   </body>
 </html>
diff --git a/rollup.config.js b/rollup.config.js
index e63bf02..186ac13 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -48,7 +48,7 @@ export default {
     }),
 
     // Print bundle summary
-    summary({ showGzippedSize: true }),
+    summary({showGzippedSize: true}),
 
     // Optional: copy any static assets to build directory
     copy({
diff --git a/web-test-runner.config.js b/web-test-runner.config.js
index fff3801..9f3d426 100644
--- a/web-test-runner.config.js
+++ b/web-test-runner.config.js
@@ -6,12 +6,11 @@
 
 import {legacyPlugin} from '@web/dev-server-legacy';
 import {playwrightLauncher} from '@web/test-runner-playwright';
-import { fromRollup } from '@web/dev-server-rollup';
+import {fromRollup} from '@web/dev-server-rollup';
 import rollupReplace from '@rollup/plugin-replace';
 
 const replace = fromRollup(rollupReplace);
 
-
 const mode = process.env.MODE || 'dev';
 if (!['dev', 'prod'].includes(mode)) {
   throw new Error(`MODE must be "dev" or "prod", was "${mode}"`);