@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/docs/pages/menu.eta

@@ -0,0 +1,274 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'menu'}) %>
+<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">Menus display a list of choices on a transient sheet of material.</h5>
+      <p class="mdw-type" mdw-baseline-next="36">Menus appear upon interaction with a button, action, or other control. They display a list of choices, with one choice per line.</p>
+      <p class="mdw-type">Menu items may be disabled if not applicable to a certain context. Contextual menus dynamically change their available menu items based on the current state of the app.</p>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="mdw-grid__content">
+      <div class="component-sample">
+        <div class="component-sample__container">
+          <div class="mdw-menu__wrapper">
+            <%~ includeFile(T, { button: { text:'Open' }}) %>
+            <div class="mdw-menu">
+              <div class="mdw-menu__popup mdw-theme" mdw-surface="card">
+                <div class="mdw-menu__item">
+                  <div class="mdw-menu__icon mdw-theme material-icons" mdw-ink="medium">format_bold</div>
+                  <div class="mdw-menu__text">Bold</div>
+                  <div class="mdw-menu__info">⌘B</div>
+                </div>
+                <div class="mdw-menu__item" aria-disabled="true">
+                  <div class="mdw-menu__icon mdw-theme material-icons" mdw-ink="medium">format_italic</div>
+                  <div class="mdw-menu__text">Italic</div>
+                  <div class="mdw-menu__info">⌘I</div>
+                </div>
+                <div class="mdw-menu__item">
+                  <div class="mdw-menu__icon mdw-theme material-icons" mdw-ink="medium">format_underline</div>
+                  <div class="mdw-menu__text">Underline</div>
+                  <div class="mdw-menu__info">⌘U</div>
+                </div>
+                <div class="mdw-divider mdw-theme" mdw-ink="divider"></div>
+                <div class="mdw-menu__item" aria-checked="true">
+                  <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
+                  <div class="mdw-menu__text">Flights</div>
+                </div>
+                <div class="mdw-menu__item">
+                  <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
+                  <div class="mdw-menu__text">Apps</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="8">
+    <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', checked:true, text:'Required' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'optional', text:'Optional' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'none' , text:'None' }}) %>
+      </div>
+      <div class="mdw-type" mdw-style="subtitle">Vertical Position</div>
+      <div class="docs-option-list">
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'vposition', type:'radio', value:'auto', checked:true, text:'Auto' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'vposition', type:'radio', value:'bottom', text:'Bottom' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'vposition', type:'radio', value:'top' , text:'Top' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'vposition', type:'radio', value:'vcenter' , text:'Center' }}) %>
+      </div>
+      <div class="mdw-type" mdw-style="subtitle">Horizontal Position</div>
+      <div class="docs-option-list">
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'hposition', type:'radio', value:'auto', checked:true, text:'Auto' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'hposition', type:'radio', value:'start', text:'Start' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'hposition', type:'radio', value:'end' , text:'End' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'hposition', type:'radio', value:'left' , text:'Left' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'hposition', type:'radio', value:'right' , text:'Right' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'hposition', type:'radio', value:'hcenter' , text:'Center' }}) %>
+      </div>
+      <div class="mdw-type" mdw-style="subtitle">Vertical Direction</div>
+      <div class="docs-option-list">
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'vdirection', type:'radio', value:'auto', checked:true, text:'Auto' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'vdirection', type:'radio', value:'down', text:'Down' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'vdirection', type:'radio', value:'up' , text:'Up' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'vdirection', type:'radio', value:'vcenter' , text:'Center' }}) %>
+      </div>
+      <div class="mdw-type" mdw-style="subtitle">Horizontal Direction</div>
+      <div class="docs-option-list">
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'hdirection', type:'radio', value:'auto', checked:true, text:'Auto' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'hdirection', type:'radio', value:'normal', text:'Normal' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'hdirection', type:'radio', value:'reverse' , text:'Reverse' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'hdirection', type:'radio', value:'ltr', text:'Left-to-Right' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'hdirection', type:'radio', value:'rtl' , text:'Right-to-Left' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'hdirection', type:'radio', value:'hcenter' , text:'Center' }}) %>
+      </div>
+      <div class="mdw-type" mdw-style="subtitle">Width Units</div>
+      <div class="docs-option-list">
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'auto', checked:true, text:'Auto' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'3' , text:'3' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'4' , text:'4' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'5' , text:'5' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'6' , text:'6' }}) %>
+        <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'7' , text:'7' }}) %>
+      </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></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%">
+    <h6 class="mdw-type">Samples</h6>
+  </div>
+  <div class="mdw-grid__item display-flex" mdw-colspan="4" flex-justify-content="center">
+    <div class="mdw-grid__content">
+      <div class="render-fill">
+        <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'primary 700', dark:true }) %>
+        <div class="mdw-appbar mdw-theme" mdw-surface="primary 500" mdw-dark>
+          <div class="mdw-appbar__start">
+            <div class="mdw-tooltip__wrapper">
+              <%~ includeFile(T, { button: { icon:true, class:'mdw-tooltip__target material-icons', text:'menu' }}) %>
+              <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>Menu</div>
+            </div>
+          </div>
+          <div class="mdw-appbar__end">
+            <div class="mdw-tooltip__wrapper mdw-menu__wrapper">
+              <%~ includeFile(T, { button: { icon:true, class:'mdw-tooltip__target material-icons', href:"#moremenu", text:'more_vert' }}) %>
+              <div class="mdw-tooltip mdw-theme mdw-tooltip" mdw-surface="background 700" mdw-dark>Options</div>
+              <div class="mdw-menu" id="moremenu" mdw-direction="reverse" mdw-position="end" mdw-width-units="3">
+                <a class="mdw-menu__close" href="#"></a>
+                <div class="mdw-menu__popup mdw-theme" mdw-surface="card">
+                  <div class="mdw-menu__text">Refresh</div>
+                  <div class="mdw-menu__text">Settings</div>
+                  <div class="mdw-menu__text">Send feedback</div>
+                  <div class="mdw-menu__text">Help</div>
+                  <div class="mdw-menu__text">Signout</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="content" style="padding:16px 8px;">
+          <div class="mdw-menu__wrapper">
+            <%~ includeFile(T, { button: {  surface:'primary 500', dark:true, raised:true, href:'#textmenu' , id:'textmenu-button', text:'Text' }}) %>
+            <div class="mdw-menu" id="textmenu">
+              <a class="mdw-menu__close" href="#textmenu-button"></a>
+              <div class="mdw-menu__popup mdw-theme" mdw-surface="card">
+                <div class="mdw-menu__item mdw-overlay mdw-ripple">Maps</div>
+                <div class="mdw-menu__item mdw-overlay mdw-ripple">Books</div>
+                <div class="mdw-menu__item mdw-overlay mdw-ripple">Flights</div>
+                <div class="mdw-menu__item mdw-overlay mdw-ripple">Apps</div>
+              </div>
+            </div>
+          </div>
+          <div class="mdw-menu__wrapper">
+            <%~ includeFile(T, { button: {  surface:'primary 500', dark:true, raised:true, href:"#checkmenu" , id:'checkmenu-button', text:'Checks' }}) %>
+            <div class="mdw-menu" id="checkmenu">
+              <a class="mdw-menu__close" href="#checkmenu-button"></a>
+              <div class="mdw-menu__popup mdw-theme" mdw-surface="card">
+                <div class="mdw-menu__item mdw-overlay mdw-ripple">
+                  <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
+                  <div class="mdw-menu__text">Maps</div>
+                </div>
+                <div class="mdw-menu__item mdw-overlay mdw-ripple" aria-checked="true">
+                  <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
+                  <div class="mdw-menu__text">Books</div>
+                </div>
+                <div class="mdw-menu__item mdw-overlay mdw-ripple" aria-checked="true">
+                  <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
+                  <div class="mdw-menu__text">Flights</div>
+                </div>
+                <div class="mdw-menu__item mdw-overlay mdw-ripple">
+                  <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
+                  <div class="mdw-menu__text">Apps</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div style="height:400px;"></div>
+          <div class="mdw-menu__wrapper">
+            <%~ includeFile(T, { button: {  surface:'primary 500', dark:true, raised:true, href:"#infomenu" , id:'infomenu-button', text:'Info' }}) %>
+            <div class="mdw-menu" id="infomenu" mdw-width-units="4" mdw-direction="up" mdw-position="top">
+              <a class="mdw-menu__close" href="#infomenu-button"></a>
+              <div class="mdw-menu__popup mdw-theme" mdw-surface="card">
+                <div class="mdw-menu__item mdw-overlay mdw-ripple" aria-disabled="true">
+                  <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
+                  <div class="mdw-menu__text">Bold</div>
+                  <div class="mdw-menu__info">⌘B</div>
+                </div>
+                <div class="mdw-menu__item mdw-overlay mdw-ripple" aria-checked="true">
+                  <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
+                  <div class="mdw-menu__text">Italic</div>
+                  <div class="mdw-menu__info">⌘I</div>
+                </div>
+                <div class="mdw-menu__item mdw-overlay mdw-ripple" aria-checked="true">
+                  <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
+                  <div class="mdw-menu__text">Underline</div>
+                  <div class="mdw-menu__info">⌘U</div>
+                </div>
+                <div class="mdw-divider mdw-theme" mdw-ink="divider"></div>
+                <div class="mdw-menu__item mdw-overlay mdw-ripple" aria-checked="true">
+                  <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
+                  <div class="mdw-menu__text">Flights</div>
+                </div>
+                <div class="mdw-menu__item mdw-overlay mdw-ripple">
+                  <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
+                  <div class="mdw-menu__text">Apps</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="mdw-menu__wrapper">
+            <%~ includeFile(T, { button: {  surface:'primary 500', dark:true, raised:true, href:"#iconmenu" , id:'iconmenu-button', text:'Icons' }}) %>
+            <div class="mdw-menu" id="iconmenu" mdw-width-units="4" mdw-direction="up" mdw-position="top">
+              <a class="mdw-menu__close" href="#iconmenu-button"></a>
+              <div class="mdw-menu__popup mdw-theme" mdw-surface="card">
+                <div class="mdw-menu__item mdw-overlay mdw-ripple">
+                  <div class="mdw-menu__icon mdw-theme material-icons" mdw-ink="medium">format_bold</div>
+                  <div class="mdw-menu__text">Bold</div>
+                  <div class="mdw-menu__info">⌘B</div>
+                </div>
+                <div class="mdw-menu__item mdw-overlay mdw-ripple">
+                  <div class="mdw-menu__icon mdw-theme material-icons" mdw-ink="medium">format_italic</div>
+                  <div class="mdw-menu__text">Italic</div>
+                  <div class="mdw-menu__info">⌘I</div>
+                </div>
+                <div class="mdw-menu__item mdw-overlay mdw-ripple">
+                  <div class="mdw-menu__icon mdw-theme material-icons" mdw-ink="medium">format_underline</div>
+                  <div class="mdw-menu__text">Underline</div>
+                  <div class="mdw-menu__info">⌘U</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="mdw-menu__wrapper js">
+            <%~ includeFile(T, { button: {  surface:'primary 500', dark:true, raised: true , text:'JS' }}) %>
+            <div class="mdw-menu" mdw-width-units="4" mdw-direction="reverse">
+              <div class="mdw-menu__popup mdw-theme" mdw-surface="card">
+                <div class="mdw-menu__item">
+                  <div class="mdw-menu__icon mdw-theme material-icons" mdw-ink="medium">format_bold</div>
+                  <div class="mdw-menu__text">Bold</div>
+                  <div class="mdw-menu__info">⌘B</div>
+                </div>
+                <div class="mdw-menu__item" aria-disabled="true">
+                  <div class="mdw-menu__icon mdw-theme material-icons" mdw-ink="medium">format_italic</div>
+                  <div class="mdw-menu__text">Italic</div>
+                  <div class="mdw-menu__info">⌘I</div>
+                </div>
+                <div class="mdw-menu__item">
+                  <div class="mdw-menu__icon mdw-theme material-icons" mdw-ink="medium">format_underline</div>
+                  <div class="mdw-menu__text">Underline</div>
+                  <div class="mdw-menu__info">⌘U</div>
+                </div>
+                <div class="mdw-divider mdw-theme" mdw-ink="divider"></div>
+                <div class="mdw-menu__item" aria-checked="true">
+                  <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
+                  <div class="mdw-menu__text">Flights</div>
+                </div>
+                <div class="mdw-menu__item">
+                  <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
+                  <div class="mdw-menu__text">Apps</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="menu.min.js"></script>

package/docs/{src/components → pages}/menu.js

@@ -1,6 +1,6 @@
-import { Menu } from '../../../components/menu/index';
-import { setupMenuOptions } from '../menuoptions';
-import { convertElementToCode, attachEventListener, changeElementTagName } from '../sample-utils';
+import * as Menu from '../../components/menu/index.js';
+import * as MenuItem from '../../components/menu/item.js';
+import { convertElementToCode } from '../_sample-utils.js';
 
 /** @type {HTMLElement} */
 let sampleComponent;
@@ -15,8 +15,12 @@ function onSampleButtonClick(event) {
 
 /** @return {void} */
 function updateSampleCode() {
-  const jsRequired = document.querySelector('input[name="javascript"][value="required"]').checked;
-  const jsOptional = document.querySelector('input[name="javascript"][value="optional"]').checked;
+  /** @type {HTMLInputElement} */
+  const jsRequiredElement = (document.querySelector('input[name="javascript"][value="required"]'));
+  const jsRequired = jsRequiredElement.checked;
+  /** @type {HTMLInputElement} */
+  const jsOptionalElement = (document.querySelector('input[name="javascript"][value="optional"]'));
+  const jsOptional = jsOptionalElement.checked;
   const useJS = jsRequired || jsOptional;
 
   if (jsRequired) {
@@ -29,42 +33,31 @@ function updateSampleCode() {
 
   // Strip JS related elements and attributes
   Menu.detach(sampleComponent);
-  let button = document.querySelector('.component-sample .mdw-button');
+  const button = document.querySelector('.component-sample .mdw-button');
   let closer = document.querySelector('.component-sample .mdw-menu__close');
   button.removeEventListener('click', onSampleButtonClick);
-  const tabIndexElements = sampleComponent.querySelectorAll('[tabindex]');
-  for (let i = 0; i < tabIndexElements.length; i += 1) {
-    tabIndexElements.item(i).removeAttribute('tabindex');
-  }
+  for (const el of sampleComponent.querySelectorAll('[tabindex]')) el.removeAttribute('tabindex');
 
-  if (closer) {
-    if (jsRequired || (closer instanceof HTMLAnchorElement === false)) {
-      closer.parentElement.removeChild(closer);
-      closer = null;
-    }
+  if (closer && (jsRequired || !(closer instanceof HTMLAnchorElement))) {
+    closer.remove();
+    closer = null;
   }
 
   if (jsRequired) {
     sampleComponent.removeAttribute('id');
     button.removeAttribute('href');
-    if (button instanceof HTMLAnchorElement) {
-      button = changeElementTagName(button, 'button');
-    }
   } else {
     sampleComponent.setAttribute('id', 'sample-menu');
+    button.setAttribute('id', '#sample-menu-button');
     button.setAttribute('href', '#sample-menu');
-    if (button instanceof HTMLButtonElement) {
-      button = changeElementTagName(button, 'a');
-    }
     if (!closer) {
       closer = document.createElement('a');
       closer.classList.add('mdw-menu__close');
-      closer.setAttribute('href', '#');
+      closer.setAttribute('href', '#sample-menu-button');
       sampleComponent.insertBefore(closer, sampleComponent.firstElementChild);
     }
   }
 
-
   const htmlCodeElement = document.getElementsByClassName('component-html')[0];
   const sampleContainer = document.querySelector('.component-sample__container');
   const htmlCodeBlocks = [];
@@ -92,10 +85,10 @@ function updateSampleCode() {
     "buttonElement.addEventListener('click', (event) => {",
     '  mdw.Menu.show(menuElement, event);',
     '});',
-    "menuElement.addEventListener('mdw:itemactivated', (event) => {",
+    'menuElement.addEventListener(MenuItem.ACTIVATE_EVENT, (event) => {',
     '  const menuItem = event.target;',
     '  handleMenuItem(menuItem);',
-    '  mdw.Menu.hide(event.currentTarget)',
+    '  mdw.Menu.hide(menuElement)',
     '});',
   ].join('\n');
 }
@@ -104,16 +97,12 @@ function updateSampleCode() {
 function initializeSampleComponents() {
   const button = document.querySelector('.js .mdw-button');
   const menu = document.querySelector('.js .mdw-menu');
-  button.addEventListener('click', (event) => {
+  button.addEventListener('click', (/** @type {MouseEvent|PointerEvent} */ event) => {
     Menu.show(menu, event);
   });
-  menu.addEventListener('mdw:itemactivated', (event) => {
-    const menuItem = event.target;
-    if (menuItem.hasAttribute('disabled')) {
-      return;
-    }
-    Menu.hide(event.currentTarget);
-  });
+
+  // Close on activation
+  menu.addEventListener(MenuItem.ACTIVATE_EVENT, () => Menu.hide(menu));
 }
 
 /**
@@ -121,7 +110,7 @@ function initializeSampleComponents() {
  * @return {void}
  */
 function onOptionChange(event) {
-  const { name, value, checked } = event.target;
+  const { name, value } = /** @type {HTMLInputElement} */ (event.target);
   let mdwDirection = sampleComponent.getAttribute('mdw-direction') || '';
   let mdwPosition = sampleComponent.getAttribute('mdw-position') || '';
 
@@ -214,16 +203,11 @@ function onOptionChange(event) {
 /** @return {void} */
 function setupComponentOptions() {
   sampleComponent = document.querySelector('.component-sample .mdw-menu');
-  attachEventListener(
-    document.querySelectorAll('input[name]'),
-    'change',
-    onOptionChange
-  );
+  for (const el of document.querySelectorAll('input[name]')) {
+    el.addEventListener('change', onOptionChange);
+  }
 }
 
 initializeSampleComponents();
 setupComponentOptions();
 updateSampleCode();
-
-setupMenuOptions();
-

package/docs/pages/overlay.eta

@@ -0,0 +1,69 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'overlay'}) %>
+<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">
+      <h2 class="mdw-type">JS</h2>
+      <p class="mdw-type">No hover or focus overlay on touch</p>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="mdw-grid__content">
+      <h6 class="mdw-type">Default Ink</h6>
+      <div class="display-flex flex-column js">
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="default" mdw-surface="binary">Normal</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="default" mdw-surface="binary" aria-selected="false">[aria-selected="false"]</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="default" mdw-surface="binary" aria-selected="true">[aria-selected="true"]</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="default" mdw-surface="binary" aria-pressed="false">[aria-pressed="false"]</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="default" mdw-surface="binary" aria-pressed="true">[aria-pressed="true"]</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="default" mdw-surface="binary" aria-current="true">[aria-current]</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="default" mdw-surface="binary" aria-selected="true" aria-current="true">[aria-selected="true"][aria-current]</div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="mdw-grid__content">
+      <h6 class="mdw-type">Secondary Ink</h6>
+      <div class="display-flex flex-column js">
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="secondary" mdw-surface="binary">Normal</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="secondary" mdw-surface="binary" aria-selected="false">[aria-selected="false"]</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="secondary" mdw-surface="binary" aria-selected="true">[aria-selected="true"]</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="secondary" mdw-surface="binary" aria-pressed="false">[aria-pressed="false"]</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="secondary" mdw-surface="binary" aria-pressed="true">[aria-pressed="true"]</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="secondary" mdw-surface="binary" aria-current="true">[aria-current]</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="secondary" mdw-surface="binary" aria-selected="true" aria-current="true">[aria-selected="true"][aria-current]</div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <div class="mdw-grid__content">
+      <h2 class="mdw-type">CSS Only</h2>
+      <p class="mdw-type">No touch detection</p>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="mdw-grid__content">
+      <h6 class="mdw-type">Default Ink</h6>
+      <div class="display-flex flex-column">
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="default" mdw-surface="binary">Normal</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="default" mdw-surface="binary" aria-selected="false">[aria-selected="false"]</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="default" mdw-surface="binary" aria-pressed="false">[aria-pressed="false"]</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="default" mdw-surface="binary" aria-selected="true">[aria-selected="true"]</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="default" mdw-surface="binary" aria-pressed="true">[aria-pressed="true"]</div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="mdw-grid__content">
+      <h6 class="mdw-type">Secondary Ink</h6>
+      <div class="display-flex flex-column">
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="secondary" mdw-surface="binary">Normal</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="secondary" mdw-surface="binary" aria-selected="false">[aria-selected="false"]</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="secondary" mdw-surface="binary" aria-pressed="false">[aria-pressed="false"]</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="secondary" mdw-surface="binary" aria-selected="true">[aria-selected="true"]</div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-theme" mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="secondary" mdw-surface="binary" aria-pressed="true">[aria-pressed="true"]</div>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="overlay.min.js"></script>

package/docs/pages/overlay.js

@@ -0,0 +1,3 @@
+import * as Overlay from '../../core/overlay/index.js';
+
+for (const element of document.querySelectorAll('.js .mdw-overlay')) { Overlay.attach(element); }

package/docs/pages/progress.eta

@@ -0,0 +1,23 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'progress'}) %>
+<div class="comparison clipped-300 js">
+  <div class="render">
+    <div class="content display-flex">
+      <div class="flex-1 display-flex" flex-justify-content="center" flex-align-items="center">
+        <div class="mdw-progress__circle mdw-theme" mdw-ink="primary">
+          <svg viewBox="0 0 24 24">
+            <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12"></path>
+            <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25"></path>
+          </svg>
+        </div>
+        <div class="mdw-progress__circle mdw-theme" mdw-ink="secondary" mdw-determinate>
+          <svg viewBox="0 0 24 24">
+            <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12"></path>
+            <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25"></path>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="progress.min.js"></script>

package/docs/{src/components → pages}/progress.js

@@ -1,14 +1,12 @@
-import { ProgressCircle } from '../../../components/progress/index';
-import { setupMenuOptions } from '../menuoptions';
+import * as ProgressCircle from '../../components/progress/index.js';
 
 /** @return {void} */
 function setupProgressCircleInterval() {
-  const progressCircleElement = document.querySelector('.mdw-progress-circle[mdw-determinate]');
+  const progressCircleElement = document.querySelector('.mdw-progress__circle[mdw-determinate]');
   ProgressCircle.setValue(progressCircleElement, Math.random() * 100);
   setInterval(() => {
     ProgressCircle.setValue(progressCircleElement, Math.random() * 100);
   }, 2500);
 }
 
-setupMenuOptions();
 setupProgressCircleInterval();

package/docs/pages/ripple.eta

@@ -0,0 +1,27 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'ripple'}) %>
+<div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-stretch>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="mdw-grid__content">
+      <h6 class="mdw-type">Javascript</h6>
+      <div class="display-flex flex-column js">
+        <div class="demo-core-item mdw-elevation mdw-ripple mdw-theme" mdw-elevation="1" mdw-ink="default" mdw-surface="binary">Default Ink</div>
+        <div class="demo-core-item mdw-elevation mdw-ripple mdw-theme" mdw-elevation="1" mdw-ink="primary" mdw-surface="binary">Primary Ink</div>
+        <div class="demo-core-item mdw-elevation mdw-ripple mdw-theme" mdw-elevation="1" mdw-ink="secondary" mdw-surface="binary">Secondary Ink</div>
+        <div class="demo-core-item mdw-elevation mdw-ripple mdw-theme" mdw-elevation="1" mdw-ink="warn" mdw-surface="binary">Warn Ink</div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="mdw-grid__content">
+      <h6 class="mdw-type">CSS Only</h6>
+      <div class="display-flex flex-column">
+        <div class="demo-core-item mdw-elevation mdw-ripple mdw-theme" mdw-elevation="1" mdw-ink="default" mdw-surface="binary">Default Ink</div>
+        <div class="demo-core-item mdw-elevation mdw-ripple mdw-theme" mdw-elevation="1" mdw-ink="primary" mdw-surface="binary">Primary Ink</div>
+        <div class="demo-core-item mdw-elevation mdw-ripple mdw-theme" mdw-elevation="1" mdw-ink="secondary" mdw-surface="binary">Secondary Ink</div>
+        <div class="demo-core-item mdw-elevation mdw-ripple mdw-theme" mdw-elevation="1" mdw-ink="warn" mdw-surface="binary">Warn Ink</div>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="ripple.min.js"></script>

package/docs/pages/ripple.js

@@ -0,0 +1,3 @@
+import * as Ripple from '../../core/ripple/index.js';
+
+for (const element of document.querySelectorAll('.js .mdw-ripple')) Ripple.attach(element);