@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/{docs-src/components → docs/pages}/dialog.pug

@@ -21,15 +21,15 @@ include ../_mixins.pug
                   +mdwButton({ ink:'secondary' })(href="#") Disagree
     .mdw-grid__item(mdw-colspan="8")
       .mdw-type(mdw-style="subtitle") Javascript
-      div.docs-option-list
+      .docs-option-list
         +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'required'}) Required
         +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'optional', checked:true}) Optional
         +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'none'}) None
       .mdw-type(mdw-style="subtitle") Options
-      div.docs-option-list
+      .docs-option-list
         +mdwSelection({ink:'secondary', name:'stacked-buttons'}) Stacked Buttons
       .mdw-type(mdw-style="subtitle") Width Units
-      div.docs-option-list
+      .docs-option-list
         +mdwSelection({ink:'secondary', name:'width', type:'radio', value:'auto', checked:true}) Auto
         +mdwSelection({ink:'secondary', name:'width', type:'radio', value:'3'}) 3
         +mdwSelection({ink:'secondary', name:'width', type:'radio', value:'4'}) 4
@@ -47,7 +47,7 @@ include ../_mixins.pug
       h6.mdw-type Samples
     .mdw-grid__item.display-flex(mdw-colspan="4" flex-justify-content="center")
       .render
-        div.display-flex.flex-1(flex-column style="position:relative")
+        .display-flex.flex-1(flex-column style="position:relative")
           +androidstatusbar('primary 700', 'dark')
           .mdw-appbar.mdw-theme(mdw-surface="primary 500" mdw-dark)
             .mdw-appbar__action
@@ -60,55 +60,73 @@ include ../_mixins.pug
                   +mdwButton({ icon:true }).mdw-tooltip__target.material-icons(mdw-more-button) more_vert
                   .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark) Options
           .content(style="padding:16px 8px;")
-            +mdwButton({ surface:'primary 500', dark:true, raised:true })(href="#confirmdialog-titled") Titled
-            +mdwButton({ surface:'primary 500', dark:true, raised:true })(href="#confirmdialog-text") Text
-            +mdwButton({ surface:'primary 500', dark:true, raised:true })(href="#dialog-scrolling") Scrolling
+            h6.mdw-type Javascript
             .display-flex(style="padding:16px 0").js
-              +mdwButton({ surface:'primary 500', dark:true, raised:true }) JS
+              +mdwButton({ surface:'primary 500', dark:true, raised:true }) Chained
+              +mdwButton({ surface:'primary 500', dark:true, raised:true }) Input Autofocus
+            h6.mdw-type CSS-Only
+            .display-flex(style="padding:16px 0").js
+              +mdwButton({ surface:'primary 500', dark:true, raised:true })(href="#confirmdialog-titled")#titled-button Titled
+              +mdwButton({ surface:'primary 500', dark:true, raised:true })(href="#confirmdialog-text")#text-button Text
+              +mdwButton({ surface:'primary 500', dark:true, raised:true })(href="#dialog-scrolling")#scrolling-button Scrolling
           .mdw-dialog#confirmdialog-titled
-            a.mdw-dialog__close(href="#")
+            a.mdw-dialog__close(href="#titled-button")
             .mdw-dialog__popup.mdw-theme(mdw-surface="card")
               .mdw-dialog__title Use Google's location service?
               .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.
               .mdw-dialog__button-area
-                +mdwButton({ ink:'secondary' })(href="#") Agree
-                +mdwButton({ ink:'secondary' })(href="#") Disagree
+                +mdwButton({ ink:'secondary' })(href="#titled-button") Agree
+                +mdwButton({ ink:'secondary' })(href="#titled-button") Disagree
           .mdw-dialog#dialog-scrolling
-            a.mdw-dialog__close(href="#")
+            a.mdw-dialog__close(href="#scrolling-button")
             .mdw-dialog__popup.mdw-theme(mdw-surface="card")
               .mdw-dialog__header
                 .mdw-dialog__title Dialog header
-              .mdw-divider.mdw-theme(mdw-ink="divider")
+              .mdw-divider.mdw-theme(mdw-border-ink="divider")
               .mdw-dialog__scrolling
                 ul.mdw-list
                   li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#' mdw-ink="default") Item 1
+                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 1
                   li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#' mdw-ink="default") Item 2
+                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 2
                   li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#' mdw-ink="default") Item 3
+                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 3
                   li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#' mdw-ink="default") Item 4
+                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 4
                   li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#' mdw-ink="default") Item 5
+                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 5
                   li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#' mdw-ink="default") Item 6
+                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 6
                   li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#' mdw-ink="default") Item 7
+                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 7
                   li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#' mdw-ink="default") Item 8
+                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 8
                   li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#' mdw-ink="default") Item 9
-              .mdw-divider.mdw-theme(mdw-ink="divider")
+                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 9
+              .mdw-divider.mdw-theme(mdw-border-ink="divider")
               .mdw-dialog__button-area
-                +mdwButton({ ink:'secondary' })(href="#") Agree
-                +mdwButton({ ink:'secondary' })(href="#") Disagree
+                +mdwButton({ ink:'secondary' })(href="#scrolling-button") Agree
+                +mdwButton({ ink:'secondary' })(href="#scrolling-button") Disagree
           .mdw-dialog#confirmdialog-text
-            a.mdw-dialog__close(href="#")
+            a.mdw-dialog__close(href="#text-button")
             .mdw-dialog__popup.mdw-theme(mdw-surface="card")
               .mdw-dialog__body.mdw-theme(mdw-ink="medium") Discard draft?
               .mdw-dialog__button-area
-                +mdwButton({ ink:'secondary' })(href="#") Discard
-                +mdwButton({ ink:'secondary' })(href="#") Cancel
+                +mdwButton({ ink:'secondary' })(href="#text-button") Discard
+                +mdwButton({ ink:'secondary' })(href="#text-button") Cancel
+          #dialog-textfield.mdw-dialog(mdw-width-units="5")
+            form.mdw-dialog__popup.mdw-theme(mdw-surface="card")
+              .mdw-dialog__header
+                .mdw-dialog__title Dialog Title
+              label.mdw-textfield.mdw-theme(mdw-ink="secondary" style="padding:0 24px")
+                .mdw-textfield__signifier.material-icons security
+                input.mdw-textfield__input(placeholder=" " name="input" mdw-autofocus)
+                .mdw-textfield__border
+                  .mdw-textfield__outline-gap
+                    .mdw-textfield__label Text Field Label
+                .mdw-textfield__error-text This field is required
+              .mdw-dialog__button-area
+                button.mdw-button.mdw-theme(mdw-ink="secondary" tabindex="0" type="submit") Change
+                button.mdw-button.mdw-theme(mdw-ink="secondary" tabindex="0" type="button") Cancel
         +androidnavbar
   script(src='dialog.min.js')

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,143 @@
+import DomAdapter from '../../adapters/dom/index.js';
+import * as ListContent from '../../components/list/content.js';
+import * as ListItem from '../../components/list/item.js';
+import { iterateArrayLike } from '../../core/dom.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() {
+  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
+    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.filter((d) => d.itemnumber === 50)[0];
+    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.filter((d) => d.itemnumber === 80)[0];
+    item.expanded = !item.expanded;
+    // Force invalidation from height change
+    domAdapter.refreshItem(item, { invalidate: true });
+    domAdapter.drawViewport();
+  });
+  sampleComponent.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
+    /** @type {HTMLElement} */
+    const listContent = (event.target);
+    /** @type {HTMLLIElement} */
+    const listItem = (listContent.parentElement);
+    const dataItem = domAdapter.elementDataMap.get(listItem);
+    dataItem.clickCount += 1;
+    domAdapter.refreshItem(dataItem);
+  });
+}
+
+setupComponentOptions();

package/docs/pages/dom.pug

@@ -0,0 +1,22 @@
+include ../_mixins.pug
+
++header("dom")
+  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
+    .mdw-grid__item(mdw-colspan="6")
+      .mdw-grid__content.component-sample
+        .display-flex(style="flex:1;height:400px;max-height:400px;overflow-y:auto")
+          ul.mdw-list.mdw-theme(style="flex:1;width:100%;" mdw-surface="primary alt")
+
+    .mdw-grid__item(mdw-colspan="100%")
+      .mdw-type(mdw-style="subtitle") Optimizations
+      .docs-option-list
+        +mdwSelection({ink:'secondary', name:'fastMeasure', checked:true}) Fast Measure
+        +mdwSelection({ink:'secondary', name:'block', checked:true}) Block-level
+        +mdwSelection({ink:'secondary', name:'deferRender', checked:true}) Defer Render
+        +mdwSelection({ink:'secondary', name:'equalSize', checked:false}) Equal Size
+      .mdw-type(mdw-style="subtitle") Test Options
+      +mdwButton() Reset
+      +mdwButton() Remove #10
+      +mdwButton() Increment #50
+      +mdwButton() Resize #80
+  script(src='dom.min.js')

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-elevation="1">1dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation" mdw-elevation="2">2dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation" mdw-elevation="3">3dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation" mdw-elevation="4">4dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation" mdw-elevation="6">6dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation" mdw-elevation="8">8dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation" mdw-elevation="9">9dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation" mdw-elevation="12">12dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation" mdw-elevation="16">16dp</div>
+  </div>
+  <div class="mdw-grid__item">
+    <div class="docs-elevation__item mdw-elevation" 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>

package/{docs-src/components → docs/pages}/fab.js

@@ -1,6 +1,6 @@
-import * as Button from '../../components/button/index';
-import * as Fab from '../../components/fab/index';
-import { iterateArrayLike } from '../../core/dom';
+import * as Button from '../../components/button/index.js';
+import * as Fab from '../../components/fab/index.js';
+import { iterateArrayLike } from '../../core/dom.js';
 
 /** @return {void} */
 function initializeMdwComponents() {

package/{docs-src/components → docs/pages}/fab.pug

@@ -3,7 +3,7 @@ include ../_mixins.pug
 +header("fab")
   .comparison.js
     .render
-      div.display-flex.flex-1(flex-column style="position:relative")
+      .display-flex.flex-1(flex-column style="position:relative")
         +androidstatusbar('primary 700', 'dark')
         +appbar('primary 500', 'dark', ['menu'], ['search']) JS
         .content(style="padding:16px 8px;")
@@ -39,7 +39,7 @@ include ../_mixins.pug
       +androidnavbar
   .comparison
     .render
-      div.display-flex.flex-1(flex-column style="position:relative")
+      .display-flex.flex-1(flex-column style="position:relative")
         +androidstatusbar('primary 700', 'dark')
         +appbar('primary 500', 'dark', ['menu'], ['search']) CSS Only
         .content(style="padding:16px 8px;") 

package/docs/pages/grid.eta

@@ -0,0 +1,135 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'grid'}) %>
+<div class="mdw-grid" mdw-margin-top>
+  <div class="mdw-grid__item" mdw-colspan="8">
+    <h5 class="mdw-type" mdw-baseline-next="36">The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.</h5>
+    <p class="mdw-type">The Material Design layout grid is made up of three elements: columns, gutters, and margins.</p>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="8">
+    <div class="mdw-type" mdw-style="subtitle">Margins and Gutters</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'default-margins', checked:true, text:'Default Margins and Gutters' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'top-margin', checked:true, text:'Top Margin' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'bottom-margin', checked:true, text:'Bottom Margin' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Maximum Columns</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'columns', type:'radio', value:'12', checked:true, text:'12' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'columns', type:'radio', value:'8', text:'8' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'columns', type:'radio', value:'4', text:'4' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'columns', type:'radio', value:'1', text:'1' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Display Model</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'style', type:'radio', value:'flex', checked:true, text:'Flexbox' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'style', type:'radio', value:'grid', text:'Grid' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Options</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'stretch', text:'Stretch' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'center', text:'Center' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'dense', text:'Dense' }}) %>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <p class="mdw-type" style="text-align:center;" mdw-texttop-top="16dp" mdw-baseline-bottom="16dp">Click on an element to change colspan</p>
+  </div>
+</div>
+<div class="docs-grid" id="sample-component">
+  <div class="mdw-grid" mdw-margin-top mdw-margin-bottom>
+    <div class="mdw-grid__item" mdw-rowspan="2">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="cyan 100" mdw-light mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="cyan 200" mdw-light mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="cyan 400" mdw-dark mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="cyan 700" mdw-dark mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item" mdw-rowspan="3">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="red 100" mdw-light mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="red 200" mdw-light mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item" mdw-colspan="2">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="red 400" mdw-dark mdw-border-ink>2</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item" mdw-rowspan="5" mdw-colspan="25%">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="red 700" mdw-dark mdw-border-ink>25%</div>
+    </div>
+    <div class="mdw-grid__item" mdw-colspan="3">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>3</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="green 100" mdw-light mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="green 200" mdw-light mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item" mdw-colspan="75%">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>75%</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="green 400" mdw-dark mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="green 700" mdw-dark mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="purple 100" mdw-light mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item" mdw-colspan="8">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>8</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="purple 200" mdw-light mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="purple 400" mdw-dark mdw-border-ink>1</div>
+    </div>
+    <div class="mdw-grid__item" mdw-colspan="2">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>2</div>
+    </div>
+    <div class="mdw-grid__item">
+      <div class="mdw-grid__content mdw-card mdw-theme" mdw-surface="purple 700" mdw-dark mdw-border-ink>1</div>
+    </div>
+  </div>
+</div>
+<script src="grid.min.js"></script>

package/{docs-src/components → docs/pages}/grid.js

@@ -1,4 +1,4 @@
-import { iterateArrayLike, setTextNode } from '../../core/dom';
+import { iterateArrayLike, setTextNode } from '../../core/dom.js';
 
 const sampleComponent = document.getElementById('sample-component');