@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/docs/pages/menu.eta

@@ -0,0 +1,276 @@
+<% 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__action">
+            <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>
+        <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 → docs/pages}/menu.js

@@ -1,7 +1,7 @@
-import * as Menu from '../../components/menu/index';
-import * as MenuItem from '../../components/menu/item';
-import { convertElementToCode, changeElementTagName } from '../_sample-utils';
-import { iterateArrayLike } from '../../core/dom';
+import * as Menu from '../../components/menu/index.js';
+import * as MenuItem from '../../components/menu/item.js';
+import { iterateArrayLike } from '../../core/dom.js';
+import { convertElementToCode } from '../_sample-utils.js';
 
 /** @type {HTMLElement} */
 let sampleComponent;
@@ -16,8 +16,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) {
@@ -33,7 +37,7 @@ function updateSampleCode() {
   const button = document.querySelector('.component-sample .mdw-button');
   let closer = document.querySelector('.component-sample .mdw-menu__close');
   button.removeEventListener('click', onSampleButtonClick);
-  iterateArrayLike(sampleComponent.querySelectorAll('[tabindex]'), el => el.removeAttribute('tabindex'));
+  iterateArrayLike(sampleComponent.querySelectorAll('[tabindex]'), (el) => el.removeAttribute('tabindex'));
 
   if (closer) {
     if (jsRequired || (closer instanceof HTMLAnchorElement === false)) {
@@ -57,7 +61,6 @@ function updateSampleCode() {
     }
   }
 
-
   const htmlCodeElement = document.getElementsByClassName('component-html')[0];
   const sampleContainer = document.querySelector('.component-sample__container');
   const htmlCodeBlocks = [];
@@ -97,7 +100,7 @@ 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);
   });
 
@@ -110,7 +113,8 @@ function initializeSampleComponents() {
  * @return {void}
  */
 function onOptionChange(event) {
-  const { name, value } = event.target;
+  /** @type {HTMLInputElement} */
+  const { name, value } = (event.target);
   let mdwDirection = sampleComponent.getAttribute('mdw-direction') || '';
   let mdwPosition = sampleComponent.getAttribute('mdw-position') || '';
 

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,4 @@
+import { iterateArrayLike } from '../../core/dom.js';
+import * as Overlay from '../../core/overlay/index.js';
+
+iterateArrayLike(document.querySelectorAll('.js .mdw-overlay'), Overlay.attach);

package/{docs-src/core → docs/pages}/overlay.pug

@@ -4,34 +4,38 @@ include ../_mixins.pug
   .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
     .mdw-grid__item(mdw-colspan="100%")
       .mdw-grid__content
-        h2.mdw-type CSS Only
-        p.mdw-type No touch detection
+        h2.mdw-type JS
+        p.mdw-type No hover or focus overlay on touch
     .mdw-grid__item(mdw-colspan="4")
       .mdw-grid__content
         h6.mdw-type Default Ink
-        .display-flex.flex-column.mdw-overlay__group(aria-multiselectable="true")
+        .display-flex.flex-column.js
           .demo-core-item.mdw-elevation.mdw-overlay.mdw-theme(mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="default" mdw-surface="binary") Normal
           .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"]
-          .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"]
           .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"]
+          .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"]
           .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"]
+          .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]
+          .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]
     .mdw-grid__item(mdw-colspan="4")
       .mdw-grid__content
         h6.mdw-type Secondary Ink
-        .display-flex.flex-column.mdw-overlay__group(aria-multiselectable="true")
+        .display-flex.flex-column.js
           .demo-core-item.mdw-elevation.mdw-overlay.mdw-theme(mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="secondary" mdw-surface="binary") Normal
           .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"]
-          .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"]
           .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"]
+          .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"]
           .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"]
+          .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]
+          .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]
     .mdw-grid__item(mdw-colspan="100%")
       .mdw-grid__content
-        h2.mdw-type JS
-        p.mdw-type No hover or focus overlay on touch
+        h2.mdw-type CSS Only
+        p.mdw-type No touch detection
     .mdw-grid__item(mdw-colspan="4")
       .mdw-grid__content
         h6.mdw-type Default Ink
-        .display-flex.flex-column.mdw-overlay__group(aria-multiselectable="true").js
+        .display-flex.flex-column
           .demo-core-item.mdw-elevation.mdw-overlay.mdw-theme(mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="default" mdw-surface="binary") Normal
           .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"]
           .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"]
@@ -40,13 +44,12 @@ include ../_mixins.pug
     .mdw-grid__item(mdw-colspan="4")
       .mdw-grid__content
         h6.mdw-type Secondary Ink
-        .display-flex.flex-column.mdw-overlay__group(aria-multiselectable="true").js
+        .display-flex.flex-column
           .demo-core-item.mdw-elevation.mdw-overlay.mdw-theme(mdw-elevation="1" tabindex="0" mdw-raised mdw-ink="secondary" mdw-surface="binary") Normal
           .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"]
           .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"]
           .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"]
           .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"]
-
       
 
   script(src='overlay.min.js')

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 → docs/pages}/progress.js

@@ -1,4 +1,4 @@
-import * as ProgressCircle from '../../components/progress/index';
+import * as ProgressCircle from '../../components/progress/index.js';
 
 /** @return {void} */
 function setupProgressCircleInterval() {

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

@@ -9,7 +9,7 @@ include ../_mixins.pug
             svg(viewBox="0 0 24 24")
               path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12")
               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")
-          .mdw-progress-circle.mdw-theme(mdw-ink="secondary A700" mdw-determinate)
+          .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(d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25")

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,4 @@
+import { iterateArrayLike } from '../../core/dom.js';
+import * as Ripple from '../../core/ripple/index.js';
+
+iterateArrayLike(document.querySelectorAll('.js .mdw-ripple'), Ripple.attach);

package/{docs-src/core → docs/pages}/ripple.pug

@@ -4,16 +4,16 @@ include ../_mixins.pug
   .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
     .mdw-grid__item(mdw-colspan="4")
       .mdw-grid__content
-        h6.mdw-type CSS Only
-        .display-flex.flex-column
+        h6.mdw-type Javascript
+        .display-flex.flex-column.js
           .demo-core-item.mdw-elevation.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-ink="default" mdw-surface="binary") Default Ink
           .demo-core-item.mdw-elevation.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-ink="primary" mdw-surface="binary") Primary Ink
           .demo-core-item.mdw-elevation.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-ink="secondary" mdw-surface="binary") Secondary Ink
           .demo-core-item.mdw-elevation.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-ink="warn" mdw-surface="binary") Warn Ink
     .mdw-grid__item(mdw-colspan="4")
       .mdw-grid__content
-        h6.mdw-type Javascript
-        .display-flex.flex-column.js
+        h6.mdw-type CSS Only
+        .display-flex.flex-column
           .demo-core-item.mdw-elevation.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-ink="default" mdw-surface="binary") Default Ink
           .demo-core-item.mdw-elevation.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-ink="primary" mdw-surface="binary") Primary Ink
           .demo-core-item.mdw-elevation.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-ink="secondary" mdw-surface="binary") Secondary Ink