@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/docs/pages/bottomnav.eta

@@ -0,0 +1,188 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'bottomnav'}) %>
+<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">Bottom navigation bars allow movement between primary destinations in an app.</h5>
+    <p class="mdw-typeBottom">navigation bars display three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon.</p>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="6">
+    <div class="mdw-grid__content component-sample">
+      <div class="render-fill">
+        <%~ includeFile('../_partials/_androidstatusbar.eta', { surface: 'background 900', dark:true }) %>
+        <%~ includeFile('../_partials/_appbar.eta', { surface: 'background 800', dark:true, body:'Bottom Navigation' }) %>
+        <div class="content"></div>
+        <nav class="mdw-bottomnav">
+          <a class="mdw-bottomnav__item mdw-theme" mdw-ink="primary" aria-selected="true">
+            <div class="mdw-bottomnav__icon">
+              <i class="material-icons">history</i>
+            </div>
+            <div class="mdw-bottomnav__label">Recents</div>
+          </a>
+          <a class="mdw-bottomnav__item mdw-theme" mdw-ink="primary" aria-selected="false">
+            <div class="mdw-bottomnav__icon">
+              <div class="mdw-bottomnav__badge mdw-theme" mdw-surface="warn 500" mdw-ink="white" mdw-badge></div>
+              <i class="material-icons">favorite</i>
+            </div>
+            <div class="mdw-bottomnav__label">Favorites</div>
+          </a>
+          <a class="mdw-bottomnav__item mdw-theme" mdw-ink="primary" aria-selected="false">
+            <div class="mdw-bottomnav__icon">
+              <div class="mdw-bottomnav__badge mdw-theme" mdw-surface="warn 500" mdw-ink="white" mdw-badge="99+"></div>
+              <i class="material-icons">near_me</i>
+            </div>
+            <div class="mdw-bottomnav__label">Nearby</div>
+          </a>
+        </nav>
+        <%~ includeFile('../_partials/_androidnavbar.eta') %>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="mdw-type" mdw-style="subtitle">Javascript</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', type:'radio', name:'javascript', value:'required', checked:true, text: 'Required' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', type:'radio', name:'javascript', value:'optional', disabled:true, text: 'Optional' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', type:'radio', name:'javascript', value:'none', disabled:true, text: 'None' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Ink</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'ink', value:'default', text:'Default' }}) %>
+      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'ink', value:'primary', checked:true, text:'Primary' }}) %>
+      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'ink', value:'secondary', text:'Secondary' }}) %>
+      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'ink', value:'warn', text:'Warn' }}) %>
+      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'ink', value:'purple', text:'Purple' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Surface</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'surface', value:'none', checked:true, text:'None' }}) %>
+      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'surface', value:'card', text:'Card' }}) %>
+      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'surface', value:'primary 500 dark', text:'Primary 500 (Dark)' }}) %>
+      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'surface', value:'secondary 100 light', text:'Secondary 100 (Light)' }}) %>
+      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'surface', value:'warn 200 light', text:'Warn 200 (Light)' }}) %>
+      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'surface', value:'green 700 dark', text:'Green 700 (Dark)' }}) %>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="100%"></div>
+  <div class="mdw-grid__item" mdw-colspan="6">
+    <h6 class="mdw-type">HTML Code</h6>
+    <div class="mdw-card mdw-theme component-code component-html" mdw-surface="card" mdw-border-ink>
+      <%~ includeFile(T, {button: { icon: true, ink:'secondary', attributes: { 'aria-pressed': 'false', 'mdw-overlay-off':'activated' }, text: 'PUG', id: 'usePug' }}) %>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <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="6">
+    <div class="render-fill mdw-theme" mdw-surface="white" mdw-light>
+      <%~ includeFile('../_partials/_androidstatusbar.eta') %>
+      <%~ includeFile('../_partials/_appbar.eta', { text: 'Light Theme' }) %>
+      <div class="content" style="padding: 16px 0;">
+        <ul>
+          <li>Radio buttons</li>
+          <li>Badges</li>
+        </ul>
+      </div>
+      <nav class="mdw-bottomnav mdw-theme" mdw-ink="primary medium">
+        <a class="mdw-bottomnav__item" aria-selected="true">
+          <div class="mdw-bottomnav__icon material-icons">history</div>
+          <div class="mdw-bottomnav__label">Recents</div>
+        </a>
+        <a class="mdw-bottomnav__item" aria-selected="false">
+          <div class="mdw-bottomnav__icon">
+            <div class="mdw-bottomnav__badge mdw-theme" mdw-surface="warn 500" mdw-ink="white" mdw-badge></div>
+            <div class="material-icons">favorite</div>
+          </div>
+          <div class="mdw-bottomnav__label">Favorites</div>
+        </a>
+        <a class="mdw-bottomnav__item" aria-selected="false">
+          <div class="mdw-bottomnav__icon material-icons">near_me</div>
+          <div class="mdw-bottomnav__label">Nearby</div>
+        </a>
+      </nav>
+      <%~ includeFile('../_partials/_androidnavbar.eta') %>
+    </div>
+  </div>
+  <div class="mdw-grid__item display-flex" mdw-colspan="6">
+    <div class="render-fill js mdw-theme" mdw-surface="black" mdw-dark>
+      <%~ includeFile('../_partials/_androidstatusbar.eta') %>
+      <%~ includeFile('../_partials/_appbar.eta', {text: 'Dark Theme'}) %>
+      <div class="content" style="padding: 16px 0;">
+        <ul>
+          <li>Disappearing Labels</li>
+          <li>Badges</li>
+          <li>Shifting labels</li>
+        </ul>
+      </div>
+      <nav class="mdw-bottomnav" mdw-shifting>
+        <a class="mdw-bottomnav__item">
+          <div class="mdw-bottomnav__icon material-icons">tv</div>
+          <div class="mdw-bottomnav__label">Movies</div>
+        </a>
+        <a class="mdw-bottomnav__item" aria-selected="true">
+          <div class="mdw-bottomnav__icon">
+            <div class="mdw-bottomnav__badge mdw-theme" mdw-surface="warn 500" mdw-ink="white" mdw-badge></div>
+            <div class="material-icons">music_note</div>
+          </div>
+          <div class="mdw-bottomnav__label">Music</div>
+        </a>
+        <a class="mdw-bottomnav__item" aria-selected="false">
+          <div class="mdw-bottomnav__icon">
+            <div class="mdw-bottomnav__badge mdw-theme" mdw-surface="warn 500" mdw-ink="white" mdw-badge="88"></div>
+            <div class="material-icons">book</div>
+          </div>
+          <div class="mdw-bottomnav__label">Books</div>
+        </a>
+        <a class="mdw-bottomnav__item" aria-selected="false">
+          <div class="mdw-bottomnav__icon">
+            <div class="mdw-bottomnav__badge mdw-theme" mdw-surface="warn 500" mdw-ink="white" mdw-badge="888+"></div>
+            <div class="material-icons">assignment</div>
+          </div>
+          <div class="mdw-bottomnav__label">Newsstand</div>
+        </a>
+      </nav>
+      <%~ includeFile('../_partials/_androidnavbar.eta') %>
+    </div>
+  </div>
+  <div class="mdw-grid__item display-flex" mdw-colspan="6">
+    <div class="render-fill js mdw-theme">
+      <%~ includeFile('../_partials/_androidstatusbar.eta') %>
+      <%~ includeFile('../_partials/_appbar.eta', {text: 'Tablet'}) %>
+      <div class="content" style="padding: 16px 0;">
+        <ul>
+          <li>Disappearing Labels</li>
+          <li>Badges</li>
+        </ul>
+      </div>
+      <nav class="mdw-bottomnav mdw-theme" mdw-surface="teal 700" mdw-dark mdw-shifting>
+        <a class="mdw-bottomnav__item" aria-selected="true">
+          <div class="mdw-bottomnav__icon">
+            <div class="mdw-bottomnav__badge mdw-theme" mdw-surface="warn 500" mdw-ink="white" mdw-badge="4"></div>
+            <div class="material-icons">tv</div>
+          </div>
+          <div class="mdw-bottomnav__label">Movies</div>
+        </a>
+        <a class="mdw-bottomnav__item" aria-selected="false">
+          <div class="mdw-bottomnav__icon">
+            <div class="mdw-bottomnav__badge mdw-theme" mdw-surface="warn 500" mdw-ink="white" mdw-badge></div>
+            <div class="material-icons">music_note</div>
+          </div>
+          <div class="mdw-bottomnav__label">Music</div>
+        </a>
+        <a class="mdw-bottomnav__item" aria-selected="false">
+          <div class="mdw-bottomnav__icon material-icons">book</div>
+          <div class="mdw-bottomnav__label">Books</div>
+        </a>
+        <a class="mdw-bottomnav__item" aria-selected="false">
+          <div class="mdw-bottomnav__icon material-icons">assignment</div>
+          <div class="mdw-bottomnav__label">Newsstand</div>
+        </a>
+      </nav>
+      <%~ includeFile('../_partials/_androidnavbar.eta') %>
+    </div>
+  </div>
+</div>
+<script src="bottomnav.min.js"></script>

package/docs/pages/bottomnav.js

@@ -0,0 +1,115 @@
+import * as BottomNav from '../../components/bottomnav/index.js';
+import * as BottomNavItem from '../../components/bottomnav/item.js';
+import * as Button from '../../components/button/index.js';
+import { iterateArrayLike, setTextNode } from '../../core/dom.js';
+import { convertElementToCode } from '../_sample-utils.js';
+
+/** @return {void} */
+function initializeSampleComponents() {
+  iterateArrayLike(document.querySelectorAll('.mdw-bottomnav'), BottomNav.attach);
+}
+
+/** @type {HTMLElement} */
+let sampleComponent;
+
+/** @return {void} */
+function updateSampleCode() {
+  // Strip JS related elements and attributes
+  BottomNav.detach(sampleComponent);
+  sampleComponent.removeAttribute('role');
+  iterateArrayLike(sampleComponent.getElementsByClassName('mdw-bottomnav__item'), (item) => {
+    BottomNavItem.detach(item);
+    item.classList.remove('mdw-ripple');
+    item.classList.remove('mdw-overlay');
+    item.removeAttribute('mdw-overlay-off');
+    item.removeAttribute('role');
+  });
+
+  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
+  setTextNode(htmlCodeElement, convertElementToCode(sampleComponent,
+    document.getElementById('usePug').getAttribute('aria-pressed') === 'true'));
+
+  // Reattach JS if requested
+  BottomNav.attach(sampleComponent);
+
+  const jsCodeElement = document.getElementsByClassName('component-js')[0];
+  jsCodeElement.textContent = 'mdw.BottomNav.attach(bottomNavElement);';
+}
+
+/** @return {void} */
+function setupPugButton() {
+  const pugButton = document.getElementById('usePug');
+  Button.attach(pugButton);
+  pugButton.addEventListener('click', () => {
+    if (pugButton.getAttribute('aria-pressed') === 'true') {
+      pugButton.setAttribute('aria-pressed', 'false');
+    } else {
+      pugButton.setAttribute('aria-pressed', 'true');
+    }
+    updateSampleCode();
+  });
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onOptionChange(event) {
+  /** @type {HTMLInputElement} */
+  const { name, value } = (event.target);
+  switch (name) {
+    case 'ink':
+      switch (value) {
+        case 'default':
+          iterateArrayLike(sampleComponent.getElementsByClassName('mdw-bottomnav__item'), (el) => el.removeAttribute('mdw-ink'));
+          break;
+        default:
+          iterateArrayLike(sampleComponent.getElementsByClassName('mdw-bottomnav__item'), (el) => el.setAttribute('mdw-ink', value));
+          break;
+      }
+      break;
+    case 'surface':
+      switch (value) {
+        case 'none':
+          sampleComponent.removeAttribute('mdw-surface');
+          sampleComponent.removeAttribute('mdw-light');
+          sampleComponent.removeAttribute('mdw-dark');
+          break;
+        default:
+          sampleComponent.setAttribute('mdw-surface', value.replace(/ (light|dark)/, ''));
+          if (value.indexOf(' light') === -1) {
+            sampleComponent.removeAttribute('mdw-light');
+          } else {
+            sampleComponent.setAttribute('mdw-light', '');
+          }
+          if (value.indexOf(' dark') === -1) {
+            sampleComponent.removeAttribute('mdw-dark');
+          } else {
+            sampleComponent.setAttribute('mdw-dark', '');
+          }
+          if (value === 'none') {
+            sampleComponent.classList.remove('mdw-theme');
+          } else {
+            sampleComponent.classList.add('mdw-theme');
+          }
+          break;
+      }
+      break;
+    default:
+  }
+  updateSampleCode();
+}
+
+/** @return {void} */
+function setupComponentOptions() {
+  sampleComponent = document.querySelector('.component-sample .mdw-bottomnav');
+  BottomNav.attach(sampleComponent);
+  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
+    el.addEventListener('change', onOptionChange);
+  });
+}
+
+initializeSampleComponents();
+setupComponentOptions();
+setupPugButton();
+updateSampleCode();

package/docs/pages/bottomnav.pug

@@ -0,0 +1,137 @@
+include ../_mixins.pug
+
++header("bottomnav")
+  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
+    .mdw-grid__item(mdw-colspan="100%")
+      h5.mdw-type(mdw-baseline-next="36") Bottom navigation bars allow movement between primary destinations in an app.
+      p.mdw-typeBottom navigation bars display three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon.
+    .mdw-grid__item(mdw-colspan="6")
+      .mdw-grid__content.component-sample
+        .render-fill
+          +androidstatusbar('background 900', 'dark')
+          +appbar('background 800', 'dark', [], []) Bottom Navigation
+          .content
+          nav.mdw-bottomnav
+            a.mdw-bottomnav__item.mdw-theme(mdw-ink="primary" aria-selected="true")
+              .mdw-bottomnav__icon
+                i.material-icons history
+              .mdw-bottomnav__label Recents
+            a.mdw-bottomnav__item.mdw-theme(mdw-ink="primary" aria-selected="false")
+              .mdw-bottomnav__icon
+                .mdw-bottomnav__badge.mdw-theme(mdw-surface="warn 500" mdw-ink="white" mdw-badge="")
+                i.material-icons favorite
+              .mdw-bottomnav__label Favorites
+            a.mdw-bottomnav__item.mdw-theme(mdw-ink="primary" aria-selected="false")
+              .mdw-bottomnav__icon
+                .mdw-bottomnav__badge.mdw-theme(mdw-surface="warn 500" mdw-ink="white" mdw-badge="99+")
+                i.material-icons near_me
+              .mdw-bottomnav__label Nearby
+          +androidnavbar
+    .mdw-grid__item(mdw-colspan="4")
+      .mdw-type(mdw-style="subtitle") Javascript
+      .docs-option-list
+        +mdwSelection({ink:'secondary', type:'radio', name:'javascript', value:'required', checked:true}) Required
+        +mdwSelection({ink:'secondary', type:'radio', name:'javascript', value:'optional', disabled:true}) Optional
+        +mdwSelection({ink:'secondary', type:'radio', name:'javascript', value:'none', disabled:true}) None
+      .mdw-type(mdw-style="subtitle") Ink
+      .docs-option-list
+        +mdwSelection({ink:'secondary', type:'radio', name:'ink', value:'default'}) Default
+        +mdwSelection({ink:'secondary', type:'radio', name:'ink', value:'primary', checked:true}) Primary
+        +mdwSelection({ink:'secondary', type:'radio', name:'ink', value:'secondary'}) Secondary
+        +mdwSelection({ink:'secondary', type:'radio', name:'ink', value:'warn'}) Warn
+        +mdwSelection({ink:'secondary', type:'radio', name:'ink', value:'purple'}) Purple
+      .mdw-type(mdw-style="subtitle") Surface
+      .docs-option-list
+        +mdwSelection({ink:'secondary', type:'radio', name:'surface', value:'none', checked:true}) None
+        +mdwSelection({ink:'secondary', type:'radio', name:'surface', value:'card'}) Card
+        +mdwSelection({ink:'secondary', type:'radio', name:'surface', value:'primary 500 dark'}) Primary 500 (Dark)
+        +mdwSelection({ink:'secondary', type:'radio', name:'surface', value:'secondary 100 light'}) Secondary 100 (Light)
+        +mdwSelection({ink:'secondary', type:'radio', name:'surface', value:'warn 200 light'}) Warn 200 (Light)
+        +mdwSelection({ink:'secondary', type:'radio', name:'surface', value:'green 700 dark'}) Green 700 (Dark)
+    .mdw-grid__item(mdw-colspan="100%")
+    .mdw-grid__item(mdw-colspan="6")
+      h6.mdw-type HTML Code
+      .mdw-card.mdw-theme.component-code.component-html(mdw-surface="card" mdw-border-ink)
+        +mdwButton({ icon: true, ink:'secondary' })#usePug(aria-pressed="false" mdw-overlay-off="activated") PUG
+    .mdw-grid__item(mdw-colspan="4")
+      h6.mdw-type Javascript Code
+      .mdw-card.mdw-theme.component-code.component-js(mdw-surface="card" mdw-border-ink)
+    .mdw-grid__item(mdw-colspan="100%")
+      h6.mdw-type Samples
+    .mdw-grid__item.display-flex(mdw-colspan="6")
+      .render-fill.mdw-theme(mdw-surface="white" mdw-light)
+        +androidstatusbar('')
+        +appbar('', '', [], []) Light Theme
+        .content(style="padding: 16px 0")
+          ul
+            li Radio buttons
+            li Badges
+        nav.mdw-bottomnav.mdw-theme(mdw-ink="primary medium")
+          a.mdw-bottomnav__item(aria-selected="true")
+            .mdw-bottomnav__icon.material-icons history
+            .mdw-bottomnav__label Recents
+          a.mdw-bottomnav__item(aria-selected="false")
+            .mdw-bottomnav__icon
+              .mdw-bottomnav__badge.mdw-theme(mdw-surface="warn 500" mdw-ink="white" mdw-badge="")
+              .material-icons favorite
+            .mdw-bottomnav__label Favorites
+          a.mdw-bottomnav__item(aria-selected="false")
+            .mdw-bottomnav__icon.material-icons near_me
+            .mdw-bottomnav__label Nearby
+        +androidnavbar
+    .mdw-grid__item.display-flex(mdw-colspan="6")
+      .render-fill.js.mdw-theme(mdw-surface="black" mdw-dark)
+        +androidstatusbar('')
+        +appbar('', '', [], []) Dark Theme
+        .content(style="padding: 16px 0")
+          ul
+            li Disappearing Labels
+            li Badges
+            li Shifting labels
+        nav.mdw-bottomnav(mdw-shifting)
+          a.mdw-bottomnav__item
+            .mdw-bottomnav__icon.material-icons tv
+            .mdw-bottomnav__label Movies
+          a.mdw-bottomnav__item(aria-selected="true")
+            .mdw-bottomnav__icon
+              .mdw-bottomnav__badge.mdw-theme(mdw-surface="warn 500" mdw-ink="white" mdw-badge)
+              .material-icons music_note
+            .mdw-bottomnav__label Music
+          a.mdw-bottomnav__item(aria-selected="false")
+            .mdw-bottomnav__icon
+              .mdw-bottomnav__badge.mdw-theme(mdw-surface="warn 500" mdw-ink="white" mdw-badge="88")
+              .material-icons book
+            .mdw-bottomnav__label Books
+          a.mdw-bottomnav__item(aria-selected="false")
+            .mdw-bottomnav__icon
+              .mdw-bottomnav__badge.mdw-theme(mdw-surface="warn 500" mdw-ink="white" mdw-badge="888+")
+              .material-icons assignment
+            .mdw-bottomnav__label Newsstand
+        +androidnavbar
+    .mdw-grid__item.display-flex(mdw-colspan="6")
+      .render-fill.js.mdw-theme
+        +androidstatusbar('')
+        +appbar('', '', [], []) Tablet
+        .content(style="padding: 16px 0")
+          ul
+            li Disappearing Labels
+            li Badges
+        nav.mdw-bottomnav.mdw-theme(mdw-surface="teal 700" mdw-dark mdw-shifting)
+          a.mdw-bottomnav__item(aria-selected="true")
+            .mdw-bottomnav__icon
+              .mdw-bottomnav__badge.mdw-theme(mdw-surface="warn 500" mdw-ink="white" mdw-badge="4")
+              .material-icons tv
+            .mdw-bottomnav__label Movies
+          a.mdw-bottomnav__item(aria-selected="false")
+            .mdw-bottomnav__icon
+              .mdw-bottomnav__badge.mdw-theme(mdw-surface="warn 500" mdw-ink="white" mdw-badge)
+              .material-icons music_note
+            .mdw-bottomnav__label Music
+          a.mdw-bottomnav__item(aria-selected="false")
+            .mdw-bottomnav__icon.material-icons book
+            .mdw-bottomnav__label Books
+          a.mdw-bottomnav__item(aria-selected="false")
+            .mdw-bottomnav__icon.material-icons assignment
+            .mdw-bottomnav__label Newsstand
+        +androidnavbar
+  script(src='bottomnav.min.js')

package/docs/pages/button.eta

@@ -0,0 +1,124 @@
+
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'button'}) %>
+<div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-stretch>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <div class="mdw-grid__content">
+      <h5 class="mdw-type" mdw-baseline-next="36">Buttons communicate the action that will occur when the user touches them.</h5>
+      <p class="mdw-type">Material buttons trigger an ink reaction on press. They may display text, imagery, or both.</p>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="6">
+    <div class="mdw-grid__content">
+      <div class="component-sample">
+        <div class="display-flex"><a class="mdw-button mdw-theme" mdw-ink="secondary">Button</a></div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="6">
+    <div class="mdw-grid__content">
+      <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', disabled:true, 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">Overlay</div>
+      <div class="docs-option-list">
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'overlay-hover', checked:true, text: 'Hover' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'overlay-focus', checked:true, text: 'Focus' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'overlay-activated', checked:true, text: 'Activated' }}) %>
+      </div>
+      <div class="mdw-type" mdw-style="subtitle">Options</div>
+      <div class="docs-option-list">
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'icon', text: 'Icon' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'raised', text: 'Raised' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'ripple', checked:true, text: 'Ripple' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'disabled', text: 'Disabled' }}) %>
+      </div>
+      <div class="mdw-type" mdw-style="subtitle">Outline</div>
+      <div class="docs-option-list">
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'outline', type:'radio', value:'none', checked:true, text: 'None' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'outline', type:'radio', value:'default', text: 'Default' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'outline', type:'radio', value:'', text: 'Ink' }}) %>
+      </div>
+      <div class="mdw-type" mdw-style="subtitle">Activated Toggle</div>
+      <div class="docs-option-list">
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'toggle', type:'radio', value:'', checked:true, text: 'None' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'toggle', type:'radio', value:'false', text: 'Off' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'toggle', type:'radio', value:'true', text: 'On' }}) %>
+      </div>
+      <div class="mdw-type" mdw-style="subtitle">Ink</div>
+      <div class="docs-option-list">
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'ink', type:'radio', value:'default', text: 'Default' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'ink', type:'radio', value:'primary', text: 'Primary' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'ink', type:'radio', value:'secondary', checked:true, text: 'Secondary' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'ink', type:'radio', value:'warn contrast', text: 'Warn Contrast' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'ink', type:'radio', value:'purple', text: 'Purple' }}) %>
+      </div>
+      <div class="mdw-type" mdw-style="subtitle">Surface</div>
+      <div class="docs-option-list">
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'surface', type:'radio', value:'none', checked:true, text: 'Default' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'surface', type:'radio', value:'primary 500 dark', text: 'Primary (Dark)' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'surface', type:'radio', value:'secondary 100 light', text: 'Secondary (Light)' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'surface', type:'radio', value:'warn 200 light', text: 'Warn 200 (Light)' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'surface', type:'radio', value:'green 700 dark', text: 'Green 700 (Dark)' }}) %>
+      </div>
+      <div class="mdw-type" mdw-style="subtitle">HTML Element Type</div>
+      <div class="docs-option-list">
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'htmltype', type:'radio', value:'a', checked:true, text: 'HTMLAnchorElement' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'htmltype', type:'radio', value:'button', text: 'HTMLButtonElement' }}) %>
+        <%~ includeFile(T, { selection: {ink:'secondary', name:'htmltype', type:'radio', value:'div', text: 'HTMLDivElement' }}) %>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="100%" style="max-height:0;"></div>
+  <div class="mdw-grid__item" mdw-colspan="6">
+    <div class="mdw-grid__content">
+      <h6 class="mdw-type">HTML Code</h6>
+      <div class="mdw-card mdw-theme component-code component-html" mdw-surface="card" mdw-border-ink>
+        <%~ includeFile(T, { button: { icon:true, ink:'secondary', id:'usePug', text: 'PUG', attributes: { 'aria-pressed':"false", 'mdw-overlay-off':"activated" }}}) %>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="6">
+    <div class="mdw-grid__content">
+      <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>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <div class="mdw-grid__content">
+      <h6 class="mdw-type">Samples</h6>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="6">
+    <div class="mdw-grid__content">
+      <div class="render-fill mdw-theme">
+        <%~ includeFile('../_partials/_androidstatusbar.eta') %>
+        <%~ includeFile('../_partials/_appbar.eta', {text: 'CSS Only'}) %>
+        <div class="content mdw-theme" style="padding: 16px 0;" mdw-surface="binary">
+          <div>
+            <%~ includeFile('../_partials/_buttontest.eta') %>
+          </div>
+        </div>
+        <%~ includeFile('../_partials/_androidnavbar.eta') %>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="6">
+    <div class="mdw-grid__content">
+      <div class="render-fill js mdw-theme">
+        <%~ includeFile('../_partials/_androidstatusbar.eta') %>
+        <%~ includeFile('../_partials/_appbar.eta', {text: 'Javascript'}) %>
+        <div class="content mdw-theme" style="padding: 16px 0;" mdw-surface="binary">
+          <div>
+            <%~ includeFile('../_partials/_buttontest.eta') %>
+          </div>
+        </div>
+        <%~ includeFile('../_partials/_androidnavbar.eta') %>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="button.min.js"></script>