@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/docs/pages/dialog.eta

@@ -0,0 +1,184 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'dialog'}) %>
+<div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-stretch>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <h5 class="mdw-type" mdw-baseline-next="36">Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.</h5>
+    <p class="mdw-type">Dialogs contain text and UI controls. They retain focus until dismissed or a required action has been taken. Use dialogs sparingly because they are interruptive.</p>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="mdw-grid__content">
+      <div class="component-sample">
+        <div class="component-sample__container">
+          <%~ includeFile(T, {button: { href: "#sample-dialog", text:'Open' }}) %>
+          <div class="mdw-dialog" id="sample-dialog">
+            <a class="mdw-dialog__close" href="#"></a>
+            <div class="mdw-dialog__popup mdw-theme" mdw-surface="card">
+              <div class="mdw-dialog__title">Sample title</div>
+              <div class="mdw-dialog__body mdw-theme" mdw-ink="medium">Sample body text</div>
+              <div class="mdw-dialog__button-area">
+                <%~ includeFile(T, { button: { href:'#', ink:'secondary', text:'Agree' }}) %>
+                <%~ includeFile(T, { button: { href:'#', ink:'secondary', text:'Disagree' }}) %>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="8">
+    <div class="mdw-type" mdw-style="subtitle">Javascript</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'required', text:'Required' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'optional', checked:true, text:'Optional' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'none', text:'None' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Options</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'stacked-buttons', text:'Stacked Buttons' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Width Units</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'auto', checked:true, text:'Auto' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'3', text:'3' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'4', text:'4' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'5', text:'5' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'6', text:'6' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'7', text:'7' }}) %>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="100%" style="max-height:0;"></div>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <h6 class="mdw-type">HTML Code</h6>
+    <div class="mdw-card mdw-theme component-code component-html" mdw-surface="card" mdw-border-ink></div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <h6 class="mdw-type">Javascript Code</h6>
+    <div class="mdw-card mdw-theme component-code component-js" mdw-surface="card" mdw-border-ink></div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <h6 class="mdw-type">Samples</h6>
+  </div>
+  <div class="mdw-grid__item display-flex" mdw-colspan="4" flex-justify-content="center">
+    <div class="render">
+      <div class="display-flex flex-1" flex-column style="position:relative;">
+        <%~ includeFile('../_partials/_androidstatusbar.eta', { surface: 'primary 700', dark: true }) %>
+        <div class="mdw-appbar mdw-theme" mdw-surface="primary 500" mdw-dark>
+          <div class="mdw-appbar__start">
+            <div class="mdw-tooltip__wrapper">
+              <%~ includeFile(T, {button: { icon:true, class:"mdw-tooltip__target material-icons", text:'menu' }}) %>
+              <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>Menu</div>
+            </div>
+          </div>
+          <div class="mdw-appbar__end">
+            <div class="mdw-tooltip__wrapper">
+              <%~ includeFile(T, {button: { icon:true, class:"mdw-tooltip__target material-icons", text:'more_vert' }}) %>
+              <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>Options</div>
+            </div>
+          </div>
+        </div>
+        <div class="content" style="padding:16px 8px;">
+          <h6 class="mdw-type">Javascript</h6>
+          <div class="display-flex js" style="padding:16px 0;">
+            <%~ includeFile(T, { button: { surface:'primary 500', dark:true, raised:true, text:'Chained' }}) %>
+            <%~ includeFile(T, { button: { surface:'primary 500', dark:true, raised:true, text:'Input Autofocus' }}) %>
+          </div>
+          <h6 class="mdw-type">CSS-Only</h6>
+          <div class="display-flex js" style="padding:16px 0;">
+            <%~ includeFile(T, { button: { surface:'primary 500', dark:true, raised:true, attributes: {href:"#confirmdialog-titled"}, id:'titled-button', text: 'Titled' }}) %>
+            <%~ includeFile(T, { button: { surface:'primary 500', dark:true, raised:true, attributes: {href:"#confirmdialog-text"}, id:'text-button', text: 'Text' }}) %>
+            <%~ includeFile(T, { button: { surface:'primary 500', dark:true, raised:true, attributes: {href:"#dialog-scrolling"}, id:'scrolling-button', text: 'Scrolling' }}) %>
+          </div>
+        </div>
+        <div class="mdw-dialog" id="confirmdialog-titled">
+          <a class="mdw-dialog__close" href="#titled-button"></a>
+          <div class="mdw-dialog__popup mdw-theme" mdw-surface="card">
+            <div class="mdw-dialog__title">Use Google's location service?</div>
+            <div class="mdw-dialog__body mdw-theme" mdw-ink="medium">Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</div>
+            <div class="mdw-dialog__button-area">
+              <%~ includeFile(T, { button: { ink:'secondary', attributes: {href:"#titled-button"}, text:'Agree' }}) %>
+              <%~ includeFile(T, { button: { ink:'secondary', attributes: {href:"#titled-button"}, text:'Disagree' }}) %>
+            </div>
+          </div>
+        </div>
+        <div class="mdw-dialog" id="dialog-scrolling">
+          <a class="mdw-dialog__close" href="#scrolling-button"></a>
+          <div class="mdw-dialog__popup mdw-theme" mdw-surface="card">
+            <div class="mdw-dialog__header">
+              <div class="mdw-dialog__title">Dialog header</div>
+            </div>
+            <div class="mdw-divider mdw-theme" mdw-border-ink="divider"></div>
+            <div class="mdw-dialog__scrolling">
+              <ul class="mdw-list">
+                <li class="mdw-list__item">
+                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 1</a>
+                </li>
+                <li class="mdw-list__item">
+                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 2</a>
+                </li>
+                <li class="mdw-list__item">
+                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 3</a>
+                </li>
+                <li class="mdw-list__item">
+                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 4</a>
+                </li>
+                <li class="mdw-list__item">
+                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 5</a>
+                </li>
+                <li class="mdw-list__item">
+                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 6</a>
+                </li>
+                <li class="mdw-list__item">
+                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 7</a>
+                </li>
+                <li class="mdw-list__item">
+                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 8</a>
+                </li>
+                <li class="mdw-list__item">
+                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 9</a>
+                </li>
+              </ul>
+            </div>
+            <div class="mdw-divider mdw-theme" mdw-border-ink="divider"></div>
+            <div class="mdw-dialog__button-area">
+              <%~ includeFile(T, { button: { ink:'secondary', attributes: { href:"#scrolling-button" }, text:'Agree' }}) %>
+              <%~ includeFile(T, { button: { ink:'secondary', attributes: { href:"#scrolling-button" }, text:'Disagree' }}) %>
+            </div>
+          </div>
+        </div>
+        <div class="mdw-dialog" id="confirmdialog-text">
+          <a class="mdw-dialog__close" href="#text-button"></a>
+          <div class="mdw-dialog__popup mdw-theme" mdw-surface="card">
+            <div class="mdw-dialog__body mdw-theme" mdw-ink="medium">Discard draft?</div>
+            <div class="mdw-dialog__button-area">
+              <%~ includeFile(T, { button: { ink:'secondary', attributes: { href:"#text-button" }, text:'Discard' }}) %>
+              <%~ includeFile(T, { button: { ink:'secondary', attributes: { href:"#text-button" }, text:'Cancel' }}) %>
+            </div>
+          </div>
+        </div>
+        <div class="mdw-dialog" id="dialog-textfield" mdw-width-units="5">
+          <form class="mdw-dialog__popup mdw-theme" mdw-surface="card">
+            <div class="mdw-dialog__header">
+              <div class="mdw-dialog__title">Dialog Title</div>
+            </div>
+            <label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="padding:0 24px;">
+              <div class="mdw-textfield__signifier material-icons">security</div>
+              <input class="mdw-textfield__input" placeholder=" " name="input" mdw-autofocus/>
+              <div class="mdw-textfield__border">
+                <div class="mdw-textfield__outline-gap">
+                  <div class="mdw-textfield__label">Text Field Label</div>
+                </div>
+              </div>
+              <div class="mdw-textfield__error-text">This field is required</div>
+            </label>
+            <div class="mdw-dialog__button-area">
+              <button class="mdw-button mdw-theme" mdw-ink="secondary" tabindex="0" type="submit">Change</button>
+              <button class="mdw-button mdw-theme" mdw-ink="secondary" tabindex="0" type="button">Cancel</button>
+            </div>
+          </form>
+        </div>
+      </div>
+      <%~ includeFile('../_partials/_androidnavbar.eta') %>
+    </div>
+  </div>
+</div>
+<script src="dialog.min.js"></script>

package/docs/{src/components → pages}/dialog.js

@@ -1,7 +1,6 @@
-import { Dialog } from '../../../components/dialog/index';
-import { setupMenuOptions } from '../menuoptions';
-import { changeElementTagName, convertElementToCode, attachEventListener } from '../sample-utils';
-
+import * as Button from '../../components/button/index.js';
+import * as Dialog from '../../components/dialog/index.js';
+import { convertElementToCode } from '../_sample-utils.js';
 
 /** @type {HTMLElement} */
 let sampleComponent;
@@ -16,26 +15,23 @@ function onSampleButtonClick(event) {
 
 /** @return {void} */
 function updateSampleCode() {
-  const jsRequired = document.querySelector('input[name="javascript"][value="required"]').checked;
-  const jsOptional = document.querySelector('input[name="javascript"][value="optional"]').checked;
+  const jsRequired = /** @type {HTMLInputElement} */ (document.querySelector('input[name="javascript"][value="required"]')).checked;
+  const jsOptional = /** @type {HTMLInputElement} */ (document.querySelector('input[name="javascript"][value="optional"]')).checked;
   const useJS = jsRequired || jsOptional;
 
   // Strip JS related elements and attributes
   Dialog.detach(sampleComponent);
-  let button = document.querySelector('.component-sample .mdw-button');
+  const button = document.querySelector('.component-sample .mdw-button');
   let closer = document.querySelector('.component-sample .mdw-dialog__close');
   const dialogButtons = sampleComponent.querySelectorAll('.mdw-dialog__button-area .mdw-button');
+  Button.detach(button);
   button.removeEventListener('click', onSampleButtonClick);
   const tabIndexElements = sampleComponent.querySelectorAll('[tabindex]');
-  for (let i = 0; i < tabIndexElements.length; i += 1) {
-    tabIndexElements.item(i).removeAttribute('tabindex');
-  }
+  for (const el of tabIndexElements) el.removeAttribute('tabindex');
 
-  if (closer) {
-    if (jsRequired || (closer instanceof HTMLAnchorElement === false)) {
-      closer.parentElement.removeChild(closer);
-      closer = null;
-    }
+  if (closer && (jsRequired || !(closer instanceof HTMLAnchorElement))) {
+    closer.remove();
+    closer = null;
   }
 
   if (useJS) {
@@ -47,31 +43,13 @@ function updateSampleCode() {
   if (jsRequired) {
     sampleComponent.removeAttribute('id');
     button.removeAttribute('href');
-    if (button instanceof HTMLAnchorElement) {
-      button = changeElementTagName(button, 'button');
-    }
     dialogButtons[0].removeAttribute('href');
-    if (dialogButtons[0] instanceof HTMLAnchorElement) {
-      changeElementTagName(dialogButtons[0], 'button');
-    }
     dialogButtons[1].removeAttribute('href');
-    if (dialogButtons[1] instanceof HTMLAnchorElement) {
-      changeElementTagName(dialogButtons[1], 'button');
-    }
   } else {
-    sampleComponent.setAttribute('id', 'sample-dialog');
+    sampleComponent.id = 'sample-dialog';
     button.setAttribute('href', '#sample-dialog');
-    if (button instanceof HTMLButtonElement) {
-      button = changeElementTagName(button, 'a');
-    }
     dialogButtons[0].setAttribute('href', '#');
-    if (dialogButtons[0] instanceof HTMLButtonElement) {
-      changeElementTagName(dialogButtons[0], 'a');
-    }
     dialogButtons[1].setAttribute('href', '#');
-    if (dialogButtons[1] instanceof HTMLButtonElement) {
-      changeElementTagName(dialogButtons[1], 'a');
-    }
     if (!closer) {
       closer = document.createElement('a');
       closer.classList.add('mdw-dialog__close');
@@ -80,7 +58,6 @@ function updateSampleCode() {
     }
   }
 
-
   const htmlCodeElement = document.getElementsByClassName('component-html')[0];
   const sampleContainer = document.querySelector('.component-sample__container');
   const htmlCodeBlocks = [];
@@ -97,6 +74,7 @@ function updateSampleCode() {
   // Reattach JS if requested
   if (useJS) {
     Dialog.attach(sampleComponent);
+    Button.attach(button);
     button.addEventListener('click', onSampleButtonClick);
   }
 
@@ -113,9 +91,8 @@ function updateSampleCode() {
  * @return {void}
  */
 function onOptionChange(event) {
-  const { name, value, checked } = event.target;
-  let mdwPosition = sampleComponent.getAttribute('mdw-position') || '';
-  const buttonArea = sampleComponent.getElementsByClassName('mdw-dialog__button-area')[0]
+  const { name, value, checked } = /** @type {HTMLInputElement} */ (event.target);
+  const buttonArea = sampleComponent.getElementsByClassName('mdw-dialog__button-area')[0];
   switch (name) {
     case 'stacked-buttons':
       if (checked) {
@@ -142,16 +119,15 @@ function onOptionChange(event) {
 /** @return {void} */
 function setupComponentOptions() {
   sampleComponent = document.querySelector('.component-sample .mdw-dialog');
-  attachEventListener(
-    document.querySelectorAll('input[name]'),
-    'change',
-    onOptionChange
-  );
+  for (const el of document.querySelectorAll('input[name]')) {
+    el.addEventListener('change', onOptionChange);
+  }
 }
 
 /** @return {void} */
-function initializeSampleComponents() {
+function setupJSSample1() {
   const button = document.querySelector('.js .mdw-button');
+  Button.attach(button);
   const confirmDialogElement = Dialog.create({
     title: 'Feedback',
     body: 'Are you enjoying this demo?',
@@ -178,10 +154,21 @@ function initializeSampleComponents() {
   });
 }
 
+/** @return {void} */
+function setupJSSample2() {
+  const button = document.querySelectorAll('.js .mdw-button')[1];
+  Button.attach(button);
+  button.addEventListener('click', (event) => {
+    Dialog.show(document.getElementById('dialog-textfield'), event);
+  });
+}
+
+/** @return {void} */
+function initializeSampleComponents() {
+  setupJSSample1();
+  setupJSSample2();
+}
+
 initializeSampleComponents();
 setupComponentOptions();
 updateSampleCode();
-
-
-setupMenuOptions();
-

package/docs/pages/dom.eta

@@ -0,0 +1,26 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'dom'}) %>
+<div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-stretch>
+  <div class="mdw-grid__item" mdw-colspan="6">
+    <div class="mdw-grid__content component-sample">
+      <div class="display-flex" style="flex:1;height:400px;max-height:400px;overflow-y:auto;">
+        <ul class="mdw-list mdw-theme" style="flex:1;width:100%;" mdw-surface="primary alt"></ul>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <div class="mdw-type" mdw-style="subtitle">Optimizations</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'fastMeasure', checked:true, text:'Fast Measure' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'block', checked:true, text:'Block-level' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'deferRender', checked:true, text:'Defer Render' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'equalSize', checked:false, text:'Equal Size' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Test Options</div>
+    <%~ includeFile(T, { button: { text:'Reset' }}) %>
+    <%~ includeFile(T, { button: { text:'Remove #10' }}) %>
+    <%~ includeFile(T, { button: { text:'Increment #50' }}) %>
+    <%~ includeFile(T, { button: { text:'Resize #80' }}) %>
+  </div>
+</div>
+<script src="dom.min.js"></script>

package/docs/pages/dom.js

@@ -0,0 +1,140 @@
+import DomAdapter from '../../adapters/dom/index.js';
+import * as ListContent from '../../components/list/content.js';
+import * as ListItem from '../../components/list/item.js';
+
+class CustomDataSourceItem {
+  /** @param {number} i */
+  constructor(i) {
+    this.itemnumber = i;
+    this.clickCount = 0;
+    this.expanded = false;
+  }
+}
+
+/** @type {CustomDataSourceItem[]} */
+const datasource = [];
+
+/** @type {HTMLElement} */
+let sampleComponent;
+
+/** @type {DomAdapter<CustomDataSourceItem, HTMLLIElement>} */
+let domAdapter;
+
+/** @return {void} */
+function resetDatasource() {
+  datasource.splice(0, datasource.length);
+  for (let i = 0; i < 500; i += 1) {
+    datasource.push(new CustomDataSourceItem(i));
+  }
+}
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onOptionChange(event) {
+  const { name, checked } = /** @type {HTMLInputElement} */ (event.target);
+  // @ts-ignore: Optimization
+  domAdapter.recycle[name] = checked;
+  domAdapter.refresh();
+}
+/** @return {void} */
+function setupComponentOptions() {
+  for (const el of document.querySelectorAll('input[name]')) {
+    el.addEventListener('change', onOptionChange);
+  }
+  sampleComponent = document.querySelector('.component-sample .mdw-list');
+  resetDatasource();
+  domAdapter = new DomAdapter({
+    element: sampleComponent,
+    datasource,
+    recycle: {
+      scroller: sampleComponent.parentElement,
+      fastMeasure: true,
+      block: true,
+      deferRender: true,
+      equalSize: false,
+    },
+    render(child, data, index) {
+      const textLines = child.getElementsByClassName('mdw-list__text-line');
+      textLines[0].textContent = `Item ${data.itemnumber}`;
+      textLines[1].textContent = `Click count: #${data.clickCount}`;
+      if (data.expanded) {
+        child.style.setProperty('height', '128px');
+        child.style.setProperty('background-color', 'red');
+      } else {
+        child.style.setProperty('height', '64px');
+        child.style.removeProperty('background-color');
+      }
+      child.firstElementChild.setAttribute('aria-posinset', index.toString(10));
+    },
+    create(data) {
+      // Create placeholder UI
+      const listItem = document.createElement('li');
+      if (!domAdapter.recycle.block) {
+        listItem.style.setProperty('display', 'inline-flex');
+        listItem.style.setProperty('width', '33.333%');
+      }
+      if (domAdapter.recycle.deferRender) {
+        listItem.style.setProperty('min-height', '64px');
+        if (data.expanded) {
+          listItem.style.setProperty('height', '128px');
+        }
+      }
+      listItem.className = 'mdw-list__item';
+      listItem.innerHTML = `
+        <a class="mdw-list__content">
+          <div class="mdw-list__text">
+            <div class="mdw-list__text-line">Item ${data.itemnumber}</div>
+            <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">Waiting for idle...</div>
+          </div>
+        </a>
+      `;
+      ListItem.attach(listItem);
+      return listItem;
+    },
+  });
+  domAdapter.refresh();
+  const buttons = document.querySelectorAll('.mdw-layout__content-page .mdw-button');
+  buttons[0].addEventListener('click', () => {
+    buttons[1].removeAttribute('aria-disabled');
+    resetDatasource();
+    domAdapter.refresh();
+  });
+  buttons[1].addEventListener('click', () => {
+    if (buttons[1].getAttribute('aria-disabled') === 'true') {
+      return;
+    }
+    const item = datasource[10];
+    domAdapter.removeItem(item);
+    datasource.splice(10, 1);
+
+    // Alternatively, we can remove from datasource first and call invalidateAll()
+
+    domAdapter.drawViewport();
+    buttons[1].setAttribute('aria-disabled', 'true');
+  });
+  buttons[2].addEventListener('click', () => {
+    const item = datasource.find((d) => d.itemnumber === 50);
+    item.clickCount += 1;
+    // Element will not change size, therefore avoid possible invalidation
+    // (When element is refreshed and not in DOM, adapter may assume sized change)
+    domAdapter.refreshItem(item, { invalidate: false });
+    domAdapter.drawViewport();
+  });
+  buttons[3].addEventListener('click', () => {
+    const item = datasource.find((d) => d.itemnumber === 80);
+    item.expanded = !item.expanded;
+    // Force invalidation from height change
+    domAdapter.refreshItem(item, { invalidate: true });
+    domAdapter.drawViewport();
+  });
+  sampleComponent.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
+    const listContent = /** @type {HTMLElement} */ (event.target);
+    const listItem = /** @type {HTMLLIElement} */ (listContent.parentElement);
+    const dataItem = domAdapter.elementDataMap.get(listItem);
+    dataItem.clickCount += 1;
+    domAdapter.refreshItem(dataItem);
+  });
+}
+
+setupComponentOptions();

package/docs/pages/elevation.eta

@@ -0,0 +1,35 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'elevation'}) %>
+<div class="docs-grid mdw-grid" mdw-margin-top mdw-margin-bottom mdw-columns="4" mdw-margin-4col="40" mdw-gutter-4col="40">
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="1">1dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="2">2dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="3">3dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="4">4dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="6">6dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="8">8dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="9">9dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="12">12dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="16">16dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="24">24dp</div>
+  </div>
+</div>
+<script src="elevation.min.js"></script>

package/docs/pages/fab.eta

@@ -0,0 +1,99 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'fab'}) %>
+<div class="comparison js">
+  <div class="render">
+    <div class="display-flex flex-1" flex-column style="position:relative;">
+      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'primary 700', dark:true }) %>
+      <%~ includeFile('../_partials/_appbar.eta', { surface: 'primary 500', dark: true, start: ['menu'], end: ['search'], body: 'JS' }) %>
+      <div class="content" style="padding:16px 8px;">
+        <div class="mdw-type" mdw-style="subtitle">Hover</div>
+        <div class="docs-option-list">
+          <%~ includeFile(T, { selection: { ink:'secondary', name:'hover', text:'Open on Hover' }}) %>
+        </div>
+        <div class="mdw-type" mdw-style="subtitle">Type</div>
+        <div class="docs-option-list">
+          <%~ includeFile(T, { selection: { ink:'secondary', name:'type', type:'radio', value:'regular', text:'Regular (Default)', checked:true }}) %>
+          <%~ includeFile(T, { selection: { ink:'secondary', name:'type', type:'radio', value:'mini', text:'Mini' }}) %>
+          <%~ includeFile(T, { selection: { ink:'secondary', name:'type', type:'radio', value:'extended', text:'Extended' }}) %>
+          <%~ includeFile(T, { selection: { ink:'secondary', name:'type', type:'radio', value:'extended-hover', text:'Extended on Hover' }}) %>
+        </div>
+        <div class="mdw-grid docs-render-overlay" mdw-margin-bottom mdw-columns="4">
+          <div class="mdw-grid__item">
+            <div class="mdw-grid__content">
+              <div class="mdw-fab">
+                <%~ includeFile(T, { button: { surface: 'secondary 500', dark:true, class:"mdw-fab__button", body: /* html */ `
+                  <div class="mdw-fab__icon">
+                    <div class="mdw-fab__hidden-icon material-icons">add</div>
+                    <div class="mdw-fab__shown-icon material-icons">clear</div>
+                  </div>
+                  <div class="mdw-fab__text">Add</div>
+                `}}) %>
+                <div class="mdw-fab__speed-dial">
+                  <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
+                    <div class="mdw-fab__icon material-icons">filter_1</div>
+                  `}}) %>
+                  <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
+                    <div class="mdw-fab__icon material-icons">filter_2</div>
+                  `}}) %>
+                  <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
+                    <div class="mdw-fab__icon material-icons">filter_3</div>
+                  `}}) %>
+                  <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
+                    <div class="mdw-fab__icon material-icons">filter_4</div>
+                  `}}) %>
+                  <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
+                    <div class="mdw-fab__icon material-icons">filter_5</div>
+                  `}}) %>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <%~ includeFile('../_partials/_androidnavbar.eta') %>
+  </div>
+</div>
+<div class="comparison">
+  <div class="render">
+    <div class="display-flex flex-1" flex-column style="position:relative;">
+      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'primary 700', dark:true }) %>
+      <%~ includeFile('../_partials/_appbar.eta', { surface:'primary 500', dark:true, start: ['menu'], end: ['search'], body:'CSS Only' }) %>
+      <div class="content" style="padding:16px 8px;">
+        <div class="mdw-grid docs-render-overlay" mdw-margin-bottom>
+          <div class="mdw-grid__item">
+            <div class="mdw-fab" id="my-fab">
+              <a class="mdw-fab__close" href="#my-fab-button"></a>
+              <%~ includeFile(T, { button: { surface: 'secondary 500', dark:true, id:'my-fab-button', href:'#my-fab', class:"mdw-fab__button", body: /* html */ `
+                <div class="mdw-fab__icon">
+                  <div class="mdw-fab__hidden-icon material-icons">add</div>
+                  <div class="mdw-fab__shown-icon material-icons">clear</div>
+                </div>
+                <div class="mdw-fab__text">Add</div>
+              `}}) %>
+              <div class="mdw-fab__speed-dial">
+                <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
+                  <div class="mdw-fab__icon material-icons">filter_1</div>
+                `}}) %>
+                <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
+                  <div class="mdw-fab__icon material-icons">filter_2</div>
+                `}}) %>
+                <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
+                  <div class="mdw-fab__icon material-icons">filter_3</div>
+                `}}) %>
+                <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
+                  <div class="mdw-fab__icon material-icons">filter_4</div>
+                `}}) %>
+                <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
+                  <div class="mdw-fab__icon material-icons">filter_5</div>
+                `}}) %>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <%~ includeFile('../_partials/_androidnavbar.eta') %>
+  </div>
+</div>
+<script src="fab.min.js"></script>