@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/docs/pages/bottomnav.eta

@@ -1,188 +0,0 @@
-<% 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

@@ -1,115 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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

@@ -1,124 +0,0 @@
-
-<% 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>