fix: tests

cypress/integration/components/button.spec.ts

@@ -1,24 +1,32 @@
 /// <reference types="cypress" />
 
 describe('MyButtonComponent Test', () => {
-
   beforeEach(() => {
     cy.visit('/test');
     cy.wait(1);
   });
 
   it('Displays outline when clicked', () => {
     cy.get('app-testbed').shadow().find('button[is="my-button"]').click();
-    cy.get('app-testbed').shadow().find('button[is="my-button"]').should('have.css', 'box-shadow', 'rgb(255, 105, 180) 0px 0px 0px 0px');
+    cy.get('app-testbed')
+      .shadow()
+      .find('button[is="my-button"]')
+      .should('have.css', 'box-shadow', 'rgb(255, 105, 180) 0px 0px 0px 0px');
   });
 
   it('Displays Click', () => {
-    cy.get('app-testbed').shadow().find('button[is="my-button"]').contains('Click');
+    cy.get('app-testbed')
+      .shadow()
+      .find('button[is="my-button"]')
+      .contains('Click');
   });
 
   it('Controls MyListComponent with BroadcastChannel API', () => {
     cy.get('app-testbed').shadow().find('button[is="my-button"]').click();
-    cy.get('app-testbed').shadow().find('my-item').invoke('attr', 'state').should('contain', '--selected');
+    cy.get('app-testbed')
+      .shadow()
+      .find('my-item')
+      .invoke('attr', 'state')
+      .should('contain', '--selected');
   });
-
 });

cypress/integration/components/input.spec.ts

@@ -1,13 +1,15 @@
-
 describe('MyInputComponent Test', () => {
-
   beforeEach(() => {
     cy.visit('/test');
     cy.wait(1);
   });
 
   it('Displays input when focused', () => {
-    cy.get('app-testbed').shadow().find('input[is="my-input"]').focus().invoke('val').should('contain', 'input');
+    cy.get('app-testbed')
+      .shadow()
+      .find('input[is="my-input"]')
+      .focus()
+      .invoke('val')
+      .should('contain', 'input');
   });
-
 });

cypress/integration/components/item.spec.ts

@@ -1,6 +1,4 @@
-
 describe('MyItemComponent Test', () => {
-
   beforeEach(() => {
     cy.visit('/test');
     cy.wait(1);
@@ -11,7 +9,12 @@ describe('MyItemComponent Test', () => {
   });
 
   it('Displays selected when clicked', () => {
-    cy.get('app-testbed').shadow().find('my-item').first().click('left').invoke('attr', 'state').should('contain', '--selected');
+    cy.get('app-testbed')
+      .shadow()
+      .find('my-item')
+      .first()
+      .click('left')
+      .invoke('attr', 'state')
+      .should('contain', '--selected');
   });
-
 });

cypress/integration/components/list.spec.ts

@@ -1,18 +1,35 @@
-
 describe('MyListComponent Test', () => {
-
   beforeEach(() => {
     cy.visit('/test');
   });
 
   it('Displays four instances of MyItemComponent', () => {
-    cy.get('app-testbed').shadow().find('my-list').find('my-item').should('have.length', 4);
+    cy.get('app-testbed')
+      .shadow()
+      .find('my-list')
+      .find('my-item')
+      .should('have.length', 4);
   });
 
   it('Selects the last item when clicked', () => {
-    cy.get('app-testbed').shadow().find('my-list').find('li').first().click('left');
-    cy.get('app-testbed').shadow().find('my-list').find('li').last().click('left');
-    cy.get('app-testbed').shadow().find('my-list').find('my-item').last().invoke('attr', 'state').should('contain', '--selected');
+    cy.get('app-testbed')
+      .shadow()
+      .find('my-list')
+      .find('li')
+      .first()
+      .click('left');
+    cy.get('app-testbed')
+      .shadow()
+      .find('my-list')
+      .find('li')
+      .last()
+      .click('left');
+    cy.get('app-testbed')
+      .shadow()
+      .find('my-list')
+      .find('my-item')
+      .last()
+      .invoke('attr', 'state')
+      .should('contain', '--selected');
   });
-
 });

cypress/integration/components/repeater.spec.ts

@@ -1,6 +1,4 @@
-
 describe('TemplateRepeater Test', () => {
-
   beforeEach(() => {
     cy.visit('/test');
     cy.wait(100);
@@ -11,23 +9,42 @@ describe('TemplateRepeater Test', () => {
   });
 
   it('Displays r-repeatr from existing set by object', () => {
-    cy.get('app-testbed').shadow().find('r-repeatr').first()
-                         .find('li').last().contains('Item 5');
+    cy.get('app-testbed')
+      .shadow()
+      .find('r-repeatr')
+      .first()
+      .find('li')
+      .last()
+      .contains('Item 5');
   });
 
   it('Displays r-repeatr from existing set by array', () => {
-    cy.get('app-testbed').shadow().find('r-repeatr').last()
-                        .find('li').last().contains('five');
+    cy.get('app-testbed')
+      .shadow()
+      .find('r-repeatr')
+      .last()
+      .find('li')
+      .last()
+      .contains('five');
   });
 
   it('Displays template from r-repeat set by object', () => {
-    cy.get('app-testbed').shadow().find('ul.is--large').first()
-                        .find('li').last().contains('Item 5');
+    cy.get('app-testbed')
+      .shadow()
+      .find('ul.is--large')
+      .first()
+      .find('li')
+      .last()
+      .contains('Item 5');
   });
 
   it('Displays template from r-repeat set by array', () => {
-    cy.get('app-testbed').shadow().find('ul.is--large').last()
-                        .find('li').last().contains('five');
+    cy.get('app-testbed')
+      .shadow()
+      .find('ul.is--large')
+      .last()
+      .find('li')
+      .last()
+      .contains('five');
   });
-
 });

src/client/app/view/lib/lib.css

@@ -86,7 +86,7 @@ r-code {
   margin-left: -24px;
 }
 
-ul.list {
+ul.doc-list {
   padding: initial;
   margin: initial;
   list-style: initial;

src/client/app/view/lib/lib.html

@@ -502,7 +502,7 @@ <h1>Readymade UI</h1>
 
   <p>Readymade UI is a user-interface library built with Readymade, a lightweight package for making custom elements using Decorators. Transmitter supplements Readymade UI by giving you plug-and-play dispatching of events over web standards like WebRTC DataChannel, WebSocket, and Touch OSC. transmit-server is built with primr, the Readymade starter kit, providing a server-side event dispatching service that could be used for game projects, messaging apps, and other creative pursuits. Some possible implementations of Readymade UI include: </p>
 
-  <ul class="list">
+  <ul class="doc-list">
     <li>Multiplayer Game</li>
     <li>Chat App</li>
     <li>Smartphone Remote Control</li>