Benchmark the things.

test/benchmark/banner/test-basic.ts

@@ -1,4 +1,4 @@
-import '../../../lib/banner/index.js';
+import '../../../lib/banner';
 import { html } from 'lit-html';
 import { measureFixtureCreation } from '../helpers';
 

test/benchmark/card/test-basic.ts

@@ -0,0 +1,11 @@
+import '../../../lib/card';
+import { html } from 'lit-html';
+import { measureFixtureCreation } from '../helpers';
+
+measureFixtureCreation(html`
+ <sp-card variant="gallery" title="Card Title" subtitle="JPG">
+ <img slot="preview" src="https://picsum.photos/532/192" />
+ <div slot="description">10/15/18</div>
+ <div slot="footer">Footer</div>
+ </sp-card>
+`);

test/benchmark/checkbox/test-basic.ts

@@ -0,0 +1,9 @@
+import '../../../lib/checkbox';
+import { html } from 'lit-html';
+import { measureFixtureCreation } from '../helpers';
+
+measureFixtureCreation(html`
+ <sp-checkbox id="checkbox0" tabindex="5">
+ Component
+ </sp-checkbox>
+`);

test/benchmark/cli.ts

@@ -66,11 +66,11 @@ interface Options {
  commandLineUsage([
  {
  header: 'benchmark runner',
- content: `Runs benchmarks for MWC`,
+ content: `Runs benchmarks for SWC`,
  },
  {
  header: 'Usage',
- content: `Run all benchmarks for all MWC components:
+ content: `Run all benchmarks for all SWC components:
 $ node test/benchmark/cli
 Run all benchmarks for specific components:
 $ node test/benchmark/cli -p button ripple

test/benchmark/dropzone/test-basic.ts

@@ -0,0 +1,29 @@
+import '../../../lib/dropzone';
+import { html } from 'lit-html';
+import { measureFixtureCreation } from '../helpers';
+
+measureFixtureCreation(html`
+ <sp-dropzone id="dropzone">
+ <sp-illustrated-message heading="Drag and Drop Your File">
+ <svg>
+ <use xlink:href="geometry.svg#upload_geometry" />
+ </svg>
+ </sp-illustrated-message>
+
+ <div style="color: grey">
+ <div>
+ <label for="file-input">
+ <sp-link>Select a File</sp-link>
+ from your computer
+ </label>
+ <input type="file" id="file-input" style="display: none" />
+ </div>
+ <div>
+ or
+ <sp-link href="http://stock.adobe.com" target="blank">
+ Search Adobe Stock
+ </sp-link>
+ </div>
+ </div>
+ </sp-dropzone>
+`);

test/benchmark/icon/test-basic.ts

@@ -0,0 +1,12 @@
+import '../../../lib/icon';
+import { defineCustomElements } from '../../../lib/define';
+import * as MediumIcons from '../../../lib/icons/icons-medium';
+import { html } from 'lit-html';
+import { measureFixtureCreation } from '../helpers';
+
+defineCustomElements(...Object.values(MediumIcons));
+
+measureFixtureCreation(html`
+ <sp-icons-medium></sp-icons-medium>
+ <sp-icon size="xxs" name="ui:CheckmarkMedium"></sp-icon>
+`);

test/benchmark/illustrated-message/test-basic.ts

@@ -0,0 +1,22 @@
+import '../../../lib/illustrated-message';
+import { html } from 'lit-html';
+import { measureFixtureCreation } from '../helpers';
+
+measureFixtureCreation(html`
+ <sp-illustrated-message
+ heading="Drag and Drop Your File"
+ description="This message has italics"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 150 103"
+ width="150"
+ height="103"
+ viewBox="0 0 150 103"
+ >
+ <path
+ d="M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23.5h119V92c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v23c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z M15.2,21.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v9.5H15.2z M32.6,16.5c0,0.6-0.4,1-1,1h-10c-0.6,0-1-0.4-1-1s0.4-1,1-1h10C32.2,15.5,32.6,15.9,32.6,16.5z M13.6,56.1l-8.6,8.5C4.8,65,4.4,65.1,4,65.1c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l8.6-8.5l-8.6-8.5c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l8.6,8.5l8.6-8.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L15.8,54l8.6,8.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.1-1.1-0.4L13.6,56.1z"
+ ></path>
+ </svg>
+ </sp-illustrated-message>
+`);

test/benchmark/link/test-basic.ts

@@ -0,0 +1,7 @@
+import '../../../lib/link';
+import { html } from 'lit-html';
+import { measureFixtureCreation } from '../helpers';
+
+measureFixtureCreation(html`
+ <sp-link href="test_url">Default Link</sp-link>
+`);

test/benchmark/popover/test-basic.ts

@@ -0,0 +1,16 @@
+import '../../../lib/popover';
+import { html } from 'lit-html';
+import { measureFixtureCreation } from '../helpers';
+
+measureFixtureCreation(html`
+ <sp-popover variant="dialog" direction="top" open>
+ <div id="title">
+ Popover Title
+ </div>
+ <div id="content">
+ Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
+ Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
+ sweet roll cake danish candy biscuit halvah
+ </div>
+ </sp-popover>
+`);

test/benchmark/radio-group/test-basic.ts

@@ -0,0 +1,12 @@
+import '../../../lib/radio-group';
+import '../../../lib/radio';
+import { html } from 'lit-html';
+import { measureFixtureCreation } from '../helpers';
+
+measureFixtureCreation(html`
+ <sp-radio-group id="test-default">
+ <sp-radio value="first" checked>Option 1</sp-radio>
+ <sp-radio value="second">Option 2</sp-radio>
+ <sp-radio value="third">Option 3</sp-radio>
+ </sp-radio-group>
+`);

test/benchmark/radio/test-basic.ts

@@ -0,0 +1,10 @@
+import '../../../lib/radio';
+import { html } from 'lit-html';
+import { measureFixtureCreation } from '../helpers';
+
+measureFixtureCreation(html`
+ <sp-radio value="first" checked>Option 1</sp-radio>
+ <sp-radio value="second">Option 2</sp-radio>
+ <sp-radio value="third" autofocus>Option 3</sp-radio>
+ <sp-radio value="fourth" disabled>Option 4</sp-radio>
+`);

test/benchmark/sidenav/test-basic.ts

@@ -0,0 +1,31 @@
+import {
+ defineCustomElements,
+ SideNav,
+ SideNavItem,
+ SideNavHeading,
+} from '../../../lib';
+
+defineCustomElements(SideNav, SideNavItem, SideNavHeading);
+import { html } from 'lit-html';
+import { measureFixtureCreation } from '../helpers';
+
+measureFixtureCreation(html`
+ <sp-sidenav>
+ <sp-sidenav-item value="Section 1" label="Section 1"></sp-sidenav-item>
+ <sp-sidenav-item
+ selected
+ value="Section 2"
+ label="Section 2"
+ ></sp-sidenav-item>
+ <sp-sidenav-heading label="CATEGORY 1">
+ <sp-sidenav-item
+ value="Section 3"
+ label="Section 3"
+ ></sp-sidenav-item>
+ <sp-sidenav-item
+ value="Section 4"
+ label="Section 4"
+ ></sp-sidenav-item>
+ </sp-sidenav-heading>
+ </sp-sidenav>
+`);

test/benchmark/slider/test-basic.ts

@@ -0,0 +1,14 @@
+import '../../../lib/slider';
+import { html } from 'lit-html';
+import { measureFixtureCreation } from '../helpers';
+
+measureFixtureCreation(html`
+ <sp-slider
+ value="50"
+ step="1"
+ min="0"
+ max="100"
+ label="Opacity"
+ id="opacity-slider"
+ />
+`);

test/benchmark/switch/test-basic.ts

@@ -0,0 +1,7 @@
+import '../../../lib/switch';
+import { html } from 'lit-html';
+import { measureFixtureCreation } from '../helpers';
+
+measureFixtureCreation(html`
+ <sp-switch>Switch</sp-switch>
+`);

test/benchmark/tab-list/test-basic.ts

@@ -0,0 +1,12 @@
+import '../../../lib/tab-list';
+import '../../../lib/tab';
+import { html } from 'lit-html';
+import { measureFixtureCreation } from '../helpers';
+
+measureFixtureCreation(html`
+ <sp-tab-list selected="first">
+ <sp-tab label="Tab 1" value="first" tabindex="1"></sp-tab>
+ <sp-tab label="Tab 2" value="second" tabindex="2"></sp-tab>
+ <sp-tab label="Tab 3" value="third" tabindex="3"></sp-tab>
+ </sp-tab-list>
+`);

test/link.spec.ts

@@ -22,7 +22,7 @@ describe('Link', () => {
  it('loads', async () => {
  const el = await fixture<Link>(
  html`
- <sp-link href="test_url">Default Link</sp-banner>
+ <sp-link href="test_url">Default Link</sp-link>
  `
  );