@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/docs/index.eta

@@ -0,0 +1,12 @@
+<% layout('./_partials/_header.eta', {page: 'Home'}) %>
+<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">
+      <h1 class="mdw-type">Material Design Web</h1>
+      <a class="mdw-button mdw-theme" mdw-ink="primary" href="https://github.com/clshortfuse/materialdesignweb">GitHub</a>
+      <a class="mdw-button mdw-theme" mdw-ink="primary" href="./report.html">Bundle Analyzer Report</a>
+    </div>
+  </div>
+</div>
+
+<script src="index.min.js"></script>

package/docs/index.js

@@ -0,0 +1,7 @@
+import * as Button from '../components/button/index.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  for (const el of document.getElementsByClassName('mdw-button')) {
+    Button.attach(el);
+  }
+});

package/docs/pages/appbar.eta

@@ -0,0 +1,108 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'appbar'}) %>
+<div class="comparison clipped">
+  <div class="render">
+    <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'background 400', light:true }) %>
+    <%~ includeFile('../_partials/_appbar.eta', {
+      surface:'background 50', light:true, start: ['menu'], end: ['search', 'favorite', 'more_vert'], body: 'Title',
+    }) %>
+    <div class="content mdw-theme" mdw-surface="background alt"></div>
+  </div>
+</div>
+
+<div class="comparison clipped">
+  <div class="render">
+    <%~ includeFile('../_partials/_androidstatusbar.eta', { surface: 'black', dark: true }) %>
+    <%~ includeFile('../_partials/_appbar.eta', {
+      surface: 'background 900', dark: true, start: ['menu'], end: ['search', 'favorite', 'more_vert'], body: 'Title'
+    }) %>
+    <div class="content mdw-theme" mdw-surface="background alt"></div>
+  </div>
+</div>
+
+<div class="comparison clipped">
+  <div class="render">
+    <%~ includeFile('../_partials/_androidstatusbar.eta', { surface: 'blue 800', dark: true }) %>
+    <%~ includeFile('../_partials/_appbar.eta', {
+      surface: 'blue 700', dark: true, start: ['menu'], end: ['search', 'favorite', 'more_vert'], body: 'Title'
+    }) %>
+    <div class="content mdw-theme" mdw-surface="background alt"></div>
+  </div>
+</div>
+
+<div class="comparison clipped-304">
+  <div class="render">
+    <%~ includeFile('../_partials/_androidstatusbar.eta') %>
+    <!-- Elevation and z-index only for demo-->
+    <!-- Normally handled with .mdw-layout__appbar-->
+    <div class="mdw-appbar mdw-elevation" mdw-dense mdw-elevation="4" style="z-index:4">
+      <div class="mdw-appbar__start">
+        <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'menu' }}) %>
+      </div>
+      <div class="mdw-appbar__title">Dense (Desktop)</div>
+      <div class="mdw-appbar__end">
+        <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'more_vert' }}) %>
+      </div>
+    </div>
+    <div class="content mdw-theme" mdw-surface="background alt"></div>
+  </div>
+</div>
+<div class="comparison clipped-304">
+  <div class="render">
+    <%~ includeFile('../_partials/_androidstatusbar.eta') %>
+    <div class="mdw-appbar mdw-elevation" mdw-prominent mdw-dense mdw-elevation="4" style="z-index:4">
+      <div class="mdw-appbar__start">
+        <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'menu' }}) %>
+      </div>
+      <div class="mdw-appbar__title">Prominent Dense</div>
+      <div class="mdw-appbar__end">
+        <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'search' }}) %>
+        <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'more_vert' }}) %>
+      </div>
+    </div>
+    <div class="content mdw-theme" mdw-surface="background alt"></div>
+  </div>
+</div>
+<div class="comparison clipped-304">
+  <div class="render">
+    <%~ includeFile('../_partials/_androidstatusbar.eta') %>
+    <div class="mdw-appbar mdw-elevation" mdw-elevation="4" style="z-index:4">
+      <div class="mdw-appbar__start">
+        <div class="mdw-tooltip__wrapper">
+          <%~ includeFile(T, { button: {icon:true, class: 'mdw-tooltip__target material-icons', body: 'arrow_back' }}) %>
+          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>Back</div>
+        </div>
+      </div>
+      <div class="mdw-appbar__end">
+        <div class="mdw-tooltip__wrapper">
+          <%~ includeFile(T, { button: {icon:true, class: 'mdw-tooltip__target material-icons', body: 'more_vert', attributes: {'mdw-more-button': true} }}) %>
+          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>More</div>
+        </div>
+      </div>
+      <div class="mdw-appbar__content">
+        <label class="mdw-textfield mdw-theme" mdw-ink="primary contrast" style="font-size: 1.5rem">
+          <input class="mdw-textfield__input" value="Project Properties" placeholder=" " />
+          <div class="mdw-textfield__border">
+            <div class="mdw-textfield__outline-gap">
+              <div class="mdw-textfield__label">Title</div>
+            </div>
+          </div>
+        </label>
+        <div style="height:8px"></div>
+        <label class="mdw-textfield mdw-theme" mdw-ink="primary contrast">
+          <input class="mdw-textfield__input" value="Sync with the team abo" placeholder=" " />
+          <div class="mdw-textfield__border">
+            <div class="mdw-textfield__outline-gap">
+              <div class="mdw-textfield__label">Description</div>
+            </div>
+          </div>
+        </label>
+        <div style="height:24px">
+          <!-- Spec says 16dp, but it's actually 24dp-->
+        </div>
+      </div>
+    </div>
+    <div class="content mdw-theme" mdw-surface="background alt"></div>
+  </div>
+</div>
+<script src="appbar.min.js"></script>

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,118 @@
+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 { setTextNode } from '../../core/dom.js';
+import { convertElementToCode } from '../_sample-utils.js';
+
+/** @return {void} */
+function initializeSampleComponents() {
+  for (const element of document.querySelectorAll('.mdw-bottomnav')) {
+    BottomNav.attach(element);
+  }
+}
+
+/** @type {HTMLElement} */
+let sampleComponent;
+
+/** @return {void} */
+function updateSampleCode() {
+  // Strip JS related elements and attributes
+  BottomNav.detach(sampleComponent);
+  sampleComponent.removeAttribute('role');
+  for (const item of sampleComponent.getElementsByClassName('mdw-bottomnav__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) {
+  const { name, value } = /** @type {HTMLInputElement} */ (event.target);
+  switch (name) {
+    case 'ink':
+      switch (value) {
+        case 'default':
+          for (const el of sampleComponent.getElementsByClassName('mdw-bottomnav__item')) el.removeAttribute('mdw-ink');
+          break;
+        default:
+          for (const el of sampleComponent.getElementsByClassName('mdw-bottomnav__item')) 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.includes(' light')) {
+            sampleComponent.removeAttribute('mdw-light');
+          } else {
+            sampleComponent.setAttribute('mdw-light', '');
+          }
+          if (!value.includes(' dark')) {
+            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);
+  for (const el of document.querySelectorAll('input[name]')) {
+    el.addEventListener('change', onOptionChange);
+  }
+}
+
+initializeSampleComponents();
+setupComponentOptions();
+setupPugButton();
+updateSampleCode();

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>