@shortfuse/materialdesignweb 0.3.0 → 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-src/components → docs/pages}/bottomnav.js

@@ -1,29 +1,14 @@
-import * as BottomNav from '../../components/bottomnav/index';
-import * as BottomNavItem from '../../components/bottomnav/item';
-import * as Button from '../../components/button/index';
-import { convertElementToCode } from '../_sample-utils';
-import { iterateArrayLike, setTextNode } from '../../core/dom';
-
+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);
 }
 
-/** @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();
-  });
-}
-
 /** @type {HTMLElement} */
 let sampleComponent;
 
@@ -51,21 +36,35 @@ function updateSampleCode() {
   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, checked } = event.target;
-  let newElement;
+  /** @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'));
+          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));
+          iterateArrayLike(sampleComponent.getElementsByClassName('mdw-bottomnav__item'), (el) => el.setAttribute('mdw-ink', value));
           break;
       }
       break;

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

@@ -29,19 +29,19 @@ include ../_mixins.pug
           +androidnavbar
     .mdw-grid__item(mdw-colspan="4")
       .mdw-type(mdw-style="subtitle") Javascript
-      div.docs-option-list
+      .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
-      div.docs-option-list
+      .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 A400'}) Purple A400
+        +mdwSelection({ink:'secondary', type:'radio', name:'ink', value:'purple'}) Purple
       .mdw-type(mdw-style="subtitle") Surface
-      div.docs-option-list
+      .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)

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>

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

@@ -1,28 +1,14 @@
-import * as Button from '../../components/button/index';
-import * as Overlay from '../../core/overlay/index';
-import * as Ripple from '../../core/ripple/index';
-import { convertElementToCode } from '../_sample-utils';
-import { iterateArrayLike, setTextNode } from '../../core/dom';
+import * as Button from '../../components/button/index.js';
+import { iterateArrayLike, setTextNode } from '../../core/dom.js';
+import * as Overlay from '../../core/overlay/index.js';
+import * as Ripple from '../../core/ripple/index.js';
+import { convertElementToCode } from '../_sample-utils.js';
 
 /** @return {void} */
 function initializeSampleComponents() {
   iterateArrayLike(document.querySelectorAll('.js .mdw-button'), Button.attach);
 }
 
-/** @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();
-  });
-}
-
 /** @type {HTMLElement} */
 let sampleComponent;
 
@@ -81,6 +67,20 @@ function updateSampleCode() {
   jsCodeElement.textContent = 'mdw.Button.attach(buttonElement);';
 }
 
+/** @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}

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

@@ -39,51 +39,51 @@ mixin button-test
       .mdw-grid__content
         .component-sample
           .display-flex
-            a.mdw-button.mdw-theme(mdw-ink="secondary A200") Button
+            a.mdw-button.mdw-theme(mdw-ink="secondary") Button
     .mdw-grid__item(mdw-colspan="6")
       .mdw-grid__content
         .mdw-type(mdw-style="subtitle") Javascript
-        div.docs-option-list
+        .docs-option-list
           +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'required', disabled:true}) 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") Overlay
-        div.docs-option-list
+        .docs-option-list
           +mdwSelection({ink:'secondary', name:'overlay-hover', checked:true}) Hover
           +mdwSelection({ink:'secondary', name:'overlay-focus', checked:true}) Focus
           +mdwSelection({ink:'secondary', name:'overlay-activated', checked:true}) Activated
         .mdw-type(mdw-style="subtitle") Options
-        div.docs-option-list
+        .docs-option-list
           +mdwSelection({ink:'secondary', name:'icon'}) Icon
           +mdwSelection({ink:'secondary', name:'raised'}) Raised
           +mdwSelection({ink:'secondary', name:'ripple', checked:true}) Ripple
           +mdwSelection({ink:'secondary', name:'disabled'}) Disabled
         .mdw-type(mdw-style="subtitle") Outline
-        div.docs-option-list
+        .docs-option-list
           +mdwSelection({ink:'secondary', name:'outline', type:'radio', value:'none', checked:true}) None
           +mdwSelection({ink:'secondary', name:'outline', type:'radio', value:'default'}) Default
           +mdwSelection({ink:'secondary', name:'outline', type:'radio', value:''}) Ink
         .mdw-type(mdw-style="subtitle") Activated Toggle
-        div.docs-option-list
+        .docs-option-list
           +mdwSelection({ink:'secondary', name:'toggle', type:'radio', value:'', checked:true}) None
           +mdwSelection({ink:'secondary', name:'toggle', type:'radio', value:'false'}) Off
           +mdwSelection({ink:'secondary', name:'toggle', type:'radio', value:'true'}) On
         .mdw-type(mdw-style="subtitle") Ink
-        div.docs-option-list
+        .docs-option-list
           +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'default'}) Default
           +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'primary'}) Primary
           +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'secondary', checked:true}) Secondary
-          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'warn alt'}) Warn Alt
-          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'purple A400'}) Purple A400
+          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'warn contrast'}) Warn Contrast
+          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'purple'}) Purple
         .mdw-type(mdw-style="subtitle") Surface
-        div.docs-option-list
+        .docs-option-list
           +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'none', checked:true}) Default
           +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'primary 500 dark'}) Primary (Dark)
           +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'secondary 100 light'}) Secondary (Light)
           +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'warn 200 light'}) Warn 200 (Light)
           +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'green 700 dark'}) Green 700 (Dark)
         .mdw-type(mdw-style="subtitle") HTML Element Type
-        div.docs-option-list
+        .docs-option-list
           +mdwSelection({ink:'secondary', name:'htmltype', type:'radio', value:'a', checked:true}) HTMLAnchorElement
           +mdwSelection({ink:'secondary', name:'htmltype', type:'radio', value:'button'}) HTMLButtonElement
           +mdwSelection({ink:'secondary', name:'htmltype', type:'radio', value:'div'}) HTMLDivElement
@@ -102,19 +102,19 @@ mixin button-test
         h6.mdw-type Samples
     .mdw-grid__item(mdw-colspan="6")
       .mdw-grid__content
-        .render-fill.mdw-theme(mdw-surface="white" mdw-light)
+        .render-fill.mdw-theme
           +androidstatusbar('')
           +appbar('', '', [], []) CSS Only
-          .content(style="padding: 16px 0")
+          .content.mdw-theme(style="padding: 16px 0" mdw-surface="binary")
             div
               +button-test
           +androidnavbar
     .mdw-grid__item(mdw-colspan="6")
       .mdw-grid__content
-        .render-fill.js.mdw-theme(mdw-surface="black" mdw-dark)
+        .render-fill.js.mdw-theme
           +androidstatusbar('')
           +appbar('', '', [], []) Javascript Version
-          .content(style="padding: 16px 0")
+          .content.mdw-theme(style="padding: 16px 0" mdw-surface="binary")
             div
               +button-test
           +androidnavbar