@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/docs/pages/menu.js

@@ -0,0 +1,217 @@
+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;
+
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+function onSampleButtonClick(event) {
+  Menu.show(sampleComponent, event);
+}
+
+/** @return {void} */
+function updateSampleCode() {
+  /** @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) {
+    document.querySelector('[name="vdirection"][value="vcenter"]').removeAttribute('disabled');
+    document.querySelector('[name="hdirection"][value="hcenter"]').removeAttribute('disabled');
+  } else {
+    document.querySelector('[name="vdirection"][value="vcenter"]').setAttribute('disabled', '');
+    document.querySelector('[name="hdirection"][value="hcenter"]').setAttribute('disabled', '');
+  }
+
+  // Strip JS related elements and attributes
+  Menu.detach(sampleComponent);
+  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'));
+
+  if (closer) {
+    if (jsRequired || (closer instanceof HTMLAnchorElement === false)) {
+      closer.parentElement.removeChild(closer);
+      closer = null;
+    }
+  }
+
+  if (jsRequired) {
+    sampleComponent.removeAttribute('id');
+    button.removeAttribute('href');
+  } else {
+    sampleComponent.setAttribute('id', 'sample-menu');
+    button.setAttribute('id', '#sample-menu-button');
+    button.setAttribute('href', '#sample-menu');
+    if (!closer) {
+      closer = document.createElement('a');
+      closer.classList.add('mdw-menu__close');
+      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 = [];
+  let el = sampleContainer.firstElementChild;
+  if (jsRequired) {
+    el = el.firstElementChild;
+  }
+  while (el) {
+    const htmlCode = convertElementToCode(el).trim();
+    if (htmlCode) {
+      htmlCodeBlocks.push(htmlCode);
+    }
+    el = el.nextElementSibling;
+  }
+  htmlCodeElement.textContent = htmlCodeBlocks.join('\n');
+
+  // Reattach JS if requested
+  if (useJS) {
+    Menu.attach(sampleComponent);
+    button.addEventListener('click', onSampleButtonClick);
+  }
+
+  const jsCodeElement = document.getElementsByClassName('component-js')[0];
+  jsCodeElement.textContent = [
+    "buttonElement.addEventListener('click', (event) => {",
+    '  mdw.Menu.show(menuElement, event);',
+    '});',
+    'menuElement.addEventListener(MenuItem.ACTIVATE_EVENT, (event) => {',
+    '  const menuItem = event.target;',
+    '  handleMenuItem(menuItem);',
+    '  mdw.Menu.hide(menuElement)',
+    '});',
+  ].join('\n');
+}
+
+/** @return {void} */
+function initializeSampleComponents() {
+  const button = document.querySelector('.js .mdw-button');
+  const menu = document.querySelector('.js .mdw-menu');
+  button.addEventListener('click', (/** @type {MouseEvent|PointerEvent} */ event) => {
+    Menu.show(menu, event);
+  });
+
+  // Close on activation
+  menu.addEventListener(MenuItem.ACTIVATE_EVENT, () => Menu.hide(menu));
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onOptionChange(event) {
+  /** @type {HTMLInputElement} */
+  const { name, value } = (event.target);
+  let mdwDirection = sampleComponent.getAttribute('mdw-direction') || '';
+  let mdwPosition = sampleComponent.getAttribute('mdw-position') || '';
+
+  switch (name) {
+    case 'vposition':
+      mdwPosition = mdwPosition
+        .replace('bottom', '')
+        .replace('top', '')
+        .replace('vcenter', '')
+        .trim();
+      switch (value) {
+        case 'auto':
+          break;
+        default:
+          mdwPosition = `${value} ${mdwPosition}`.trim();
+          break;
+      }
+      break;
+    case 'hposition':
+      mdwPosition = mdwPosition
+        .replace('start', '')
+        .replace('end', '')
+        .replace('left', '')
+        .replace('right', '')
+        .replace('hcenter', '')
+        .trim();
+      switch (value) {
+        case 'auto':
+          break;
+        default:
+          mdwPosition = `${mdwPosition} ${value}`.trim();
+          break;
+      }
+      break;
+    case 'vdirection':
+      mdwDirection = mdwDirection
+        .replace('down', '')
+        .replace('up', '')
+        .replace('vcenter', '')
+        .trim();
+      switch (value) {
+        case 'auto':
+          break;
+        default:
+          mdwDirection = `${value} ${mdwDirection}`.trim();
+          break;
+      }
+      break;
+    case 'hdirection':
+      mdwDirection = mdwDirection
+        .replace('normal', '')
+        .replace('reverse', '')
+        .replace('ltr', '')
+        .replace('rtl', '')
+        .replace('hcenter', '')
+        .trim();
+      switch (value) {
+        case 'auto':
+          break;
+        default:
+          mdwDirection = `${mdwDirection} ${value}`.trim();
+          break;
+      }
+      break;
+    case 'width':
+      switch (value) {
+        case 'auto':
+          sampleComponent.removeAttribute('mdw-width-units');
+          break;
+        default:
+          sampleComponent.setAttribute('mdw-width-units', value);
+          break;
+      }
+      break;
+    default:
+  }
+  if (!mdwPosition) {
+    sampleComponent.removeAttribute('mdw-position');
+  } else if (sampleComponent.getAttribute('mdw-position') !== mdwPosition) {
+    sampleComponent.setAttribute('mdw-position', mdwPosition);
+  }
+  if (!mdwDirection) {
+    sampleComponent.removeAttribute('mdw-direction');
+  } else if (sampleComponent.getAttribute('mdw-direction') !== mdwDirection) {
+    sampleComponent.setAttribute('mdw-direction', mdwDirection);
+  }
+  updateSampleCode();
+}
+
+/** @return {void} */
+function setupComponentOptions() {
+  sampleComponent = document.querySelector('.component-sample .mdw-menu');
+  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
+    el.addEventListener('change', onOptionChange);
+  });
+}
+
+initializeSampleComponents();
+setupComponentOptions();
+updateSampleCode();

package/docs/pages/menu.pug

@@ -0,0 +1,205 @@
+include ../_mixins.pug
+
++header("menu")
+  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
+    .mdw-grid__item(mdw-colspan="100%")
+      .mdw-grid__content
+        h5.mdw-type(mdw-baseline-next="36") Menus display a list of choices on a transient sheet of material.
+        p.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.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.
+    .mdw-grid__item(mdw-colspan="4")
+      .mdw-grid__content
+        .component-sample
+          .component-sample__container
+            .mdw-menu__wrapper
+              +mdwButton Open
+              .mdw-menu
+                .mdw-menu__popup.mdw-theme(mdw-surface="card")
+                  .mdw-menu__item
+                    .mdw-menu__icon.mdw-theme.material-icons(mdw-ink="medium") format_bold
+                    .mdw-menu__text Bold
+                    .mdw-menu__info ⌘B
+                  .mdw-menu__item(aria-disabled="true")
+                    .mdw-menu__icon.mdw-theme.material-icons(mdw-ink="medium") format_italic
+                    .mdw-menu__text Italic
+                    .mdw-menu__info ⌘I
+                  .mdw-menu__item
+                    .mdw-menu__icon.mdw-theme.material-icons(mdw-ink="medium") format_underline
+                    .mdw-menu__text Underline
+                    .mdw-menu__info ⌘U
+                  .mdw-divider.mdw-theme(mdw-ink="divider")
+                  .mdw-menu__item(aria-checked="true")
+                    .mdw-menu__check.mdw-theme.material-icons(mdw-ink="medium") check
+                    .mdw-menu__text Flights
+                  .mdw-menu__item
+                    .mdw-menu__check.mdw-theme.material-icons(mdw-ink="medium") check
+                    .mdw-menu__text Apps
+    .mdw-grid__item(mdw-colspan="8")
+      .mdw-grid__content
+        .mdw-type(mdw-style="subtitle") Javascript
+        .docs-option-list
+          +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'required', checked:true}) Required
+          +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'optional'}) Optional
+          +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'none' }) None
+        .mdw-type(mdw-style="subtitle") Vertical Position
+        .docs-option-list
+          +mdwSelection({ink:'secondary', name:'vposition', type:'radio', value:'auto', checked:true}) Auto
+          +mdwSelection({ink:'secondary', name:'vposition', type:'radio', value:'bottom'}) Bottom
+          +mdwSelection({ink:'secondary', name:'vposition', type:'radio', value:'top' }) Top
+          +mdwSelection({ink:'secondary', name:'vposition', type:'radio', value:'vcenter' }) Center
+        .mdw-type(mdw-style="subtitle") Horizontal Position
+        .docs-option-list
+          +mdwSelection({ink:'secondary', name:'hposition', type:'radio', value:'auto', checked:true}) Auto
+          +mdwSelection({ink:'secondary', name:'hposition', type:'radio', value:'start'}) Start
+          +mdwSelection({ink:'secondary', name:'hposition', type:'radio', value:'end' }) End
+          +mdwSelection({ink:'secondary', name:'hposition', type:'radio', value:'left' }) Left
+          +mdwSelection({ink:'secondary', name:'hposition', type:'radio', value:'right' }) Right
+          +mdwSelection({ink:'secondary', name:'hposition', type:'radio', value:'hcenter' }) Center
+        .mdw-type(mdw-style="subtitle") Vertical Direction
+        .docs-option-list
+          +mdwSelection({ink:'secondary', name:'vdirection', type:'radio', value:'auto', checked:true}) Auto
+          +mdwSelection({ink:'secondary', name:'vdirection', type:'radio', value:'down'}) Down
+          +mdwSelection({ink:'secondary', name:'vdirection', type:'radio', value:'up' }) Up
+          +mdwSelection({ink:'secondary', name:'vdirection', type:'radio', value:'vcenter' }) Center
+        .mdw-type(mdw-style="subtitle") Horizontal Direction
+        .docs-option-list
+          +mdwSelection({ink:'secondary', name:'hdirection', type:'radio', value:'auto', checked:true}) Auto
+          +mdwSelection({ink:'secondary', name:'hdirection', type:'radio', value:'normal'}) Normal
+          +mdwSelection({ink:'secondary', name:'hdirection', type:'radio', value:'reverse' }) Reverse
+          +mdwSelection({ink:'secondary', name:'hdirection', type:'radio', value:'ltr'}) Left-to-Right
+          +mdwSelection({ink:'secondary', name:'hdirection', type:'radio', value:'rtl' }) Right-to-Left
+          +mdwSelection({ink:'secondary', name:'hdirection', type:'radio', value:'hcenter' }) Center
+        .mdw-type(mdw-style="subtitle") Width Units
+        .docs-option-list
+          +mdwSelection({ink:'secondary', name:'width', type:'radio', value:'auto', checked:true}) Auto
+          +mdwSelection({ink:'secondary', name:'width', type:'radio', value:'3' }) 3
+          +mdwSelection({ink:'secondary', name:'width', type:'radio', value:'4' }) 4
+          +mdwSelection({ink:'secondary', name:'width', type:'radio', value:'5' }) 5
+          +mdwSelection({ink:'secondary', name:'width', type:'radio', value:'6' }) 6
+          +mdwSelection({ink:'secondary', name:'width', type:'radio', value:'7' }) 7
+    .mdw-grid__item(mdw-colspan="100%" style="max-height:0")
+    .mdw-grid__item(mdw-colspan="6")
+      .mdw-grid__content
+        h6.mdw-type HTML Code
+        .mdw-card.mdw-theme.component-code.component-html(mdw-surface="card" mdw-border-ink)
+    .mdw-grid__item(mdw-colspan="6")
+      .mdw-grid__content
+        h6.mdw-type Javascript Code
+        .mdw-card.mdw-theme.component-code.component-js(mdw-surface="card" mdw-border-ink)
+    .mdw-grid__item(mdw-colspan="100%")
+      h6.mdw-type Samples
+    .mdw-grid__item.display-flex(mdw-colspan="4" flex-justify-content="center")
+      .mdw-grid__content
+        .render-fill
+          +androidstatusbar('primary 700', 'dark')
+          .mdw-appbar.mdw-theme(mdw-surface="primary 500" mdw-dark)
+            .mdw-appbar__action
+              .mdw-appbar__start
+                .mdw-tooltip__wrapper
+                  +mdwButton({ icon:true }).mdw-tooltip__target.material-icons menu
+                  .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark) Menu
+              .mdw-appbar__end
+                .mdw-tooltip__wrapper.mdw-menu__wrapper
+                  +mdwButton({ icon:true }).mdw-tooltip__target.material-icons(mdw-more-button href="#moremenu") more_vert
+                  .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark).mdw-tooltip Options
+                  .mdw-menu#moremenu(mdw-direction="reverse" mdw-position="end" mdw-width-units="3")
+                    a.mdw-menu__close(href="#")
+                    .mdw-menu__popup.mdw-theme(mdw-surface="card")
+                      .mdw-menu__text Refresh
+                      .mdw-menu__text Settings
+                      .mdw-menu__text Send feedback
+                      .mdw-menu__text Help
+                      .mdw-menu__text Signout
+          .content(style="padding:16px 8px")
+            .mdw-menu__wrapper
+              +mdwButton({ surface:'primary 500', dark:true, raised:true })#textmenu-button(href="#textmenu") Text
+              .mdw-menu#textmenu
+                a.mdw-menu__close(href="#textmenu-button")
+                .mdw-menu__popup.mdw-theme(mdw-surface="card")
+                  .mdw-menu__item.mdw-overlay.mdw-ripple Maps
+                  .mdw-menu__item.mdw-overlay.mdw-ripple Books
+                  .mdw-menu__item.mdw-overlay.mdw-ripple Flights
+                  .mdw-menu__item.mdw-overlay.mdw-ripple Apps
+            .mdw-menu__wrapper
+              +mdwButton({ surface:'primary 500', dark:true, raised:true })#checkmenu-button(href="#checkmenu") Checks
+              .mdw-menu#checkmenu
+                a.mdw-menu__close(href="#checkmenu-button")
+                .mdw-menu__popup.mdw-theme(mdw-surface="card")
+                  .mdw-menu__item.mdw-overlay.mdw-ripple
+                    .mdw-menu__check.mdw-theme.material-icons(mdw-ink="medium") check
+                    .mdw-menu__text Maps
+                  .mdw-menu__item.mdw-overlay.mdw-ripple(aria-checked="true")
+                    .mdw-menu__check.mdw-theme.material-icons(mdw-ink="medium") check
+                    .mdw-menu__text Books
+                  .mdw-menu__item.mdw-overlay.mdw-ripple(aria-checked="true")
+                    .mdw-menu__check.mdw-theme.material-icons(mdw-ink="medium") check
+                    .mdw-menu__text Flights
+                  .mdw-menu__item.mdw-overlay.mdw-ripple
+                    .mdw-menu__check.mdw-theme.material-icons(mdw-ink="medium") check
+                    .mdw-menu__text Apps
+            div(style="height:400px")
+            .mdw-menu__wrapper
+              +mdwButton({ surface:'primary 500', dark:true, raised:true })#infomenu-button(href="#infomenu") Info
+              .mdw-menu#infomenu(mdw-width-units=4 mdw-direction="up" mdw-position="top")
+                a.mdw-menu__close(href="#infomenu-button")
+                .mdw-menu__popup.mdw-theme(mdw-surface="card")
+                  .mdw-menu__item.mdw-overlay.mdw-ripple(aria-disabled="true")
+                    .mdw-menu__check.mdw-theme.material-icons(mdw-ink="medium") check
+                    .mdw-menu__text Bold
+                    .mdw-menu__info ⌘B
+                  .mdw-menu__item.mdw-overlay.mdw-ripple(aria-checked="true")
+                    .mdw-menu__check.mdw-theme.material-icons(mdw-ink="medium") check
+                    .mdw-menu__text Italic
+                    .mdw-menu__info ⌘I
+                  .mdw-menu__item.mdw-overlay.mdw-ripple(aria-checked="true")
+                    .mdw-menu__check.mdw-theme.material-icons(mdw-ink="medium") check
+                    .mdw-menu__text Underline
+                    .mdw-menu__info ⌘U
+                  .mdw-divider.mdw-theme(mdw-ink="divider")
+                  .mdw-menu__item.mdw-overlay.mdw-ripple(aria-checked="true")
+                    .mdw-menu__check.mdw-theme.material-icons(mdw-ink="medium") check
+                    .mdw-menu__text Flights
+                  .mdw-menu__item.mdw-overlay.mdw-ripple
+                    .mdw-menu__check.mdw-theme.material-icons(mdw-ink="medium") check
+                    .mdw-menu__text Apps
+            .mdw-menu__wrapper
+              +mdwButton({ surface:'primary 500', dark:true, raised:true })#iconmenu-button(href="#iconmenu") Icons
+              .mdw-menu#iconmenu(mdw-width-units=4 mdw-direction="up" mdw-position="top")
+                a.mdw-menu__close(href="#iconmenu-button")
+                .mdw-menu__popup.mdw-theme(mdw-surface="card")
+                  .mdw-menu__item.mdw-overlay.mdw-ripple
+                    .mdw-menu__icon.mdw-theme.material-icons(mdw-ink="medium") format_bold
+                    .mdw-menu__text Bold
+                    .mdw-menu__info ⌘B
+                  .mdw-menu__item.mdw-overlay.mdw-ripple
+                    .mdw-menu__icon.mdw-theme.material-icons(mdw-ink="medium") format_italic
+                    .mdw-menu__text Italic
+                    .mdw-menu__info ⌘I
+                  .mdw-menu__item.mdw-overlay.mdw-ripple
+                    .mdw-menu__icon.mdw-theme.material-icons(mdw-ink="medium") format_underline
+                    .mdw-menu__text Underline
+                    .mdw-menu__info ⌘U
+            .mdw-menu__wrapper.js
+              +mdwButton({ surface:'primary 500', dark:true, raised: true }) JS
+              .mdw-menu(mdw-width-units=4 mdw-direction="reverse")
+                .mdw-menu__popup.mdw-theme(mdw-surface="card")
+                  .mdw-menu__item
+                    .mdw-menu__icon.mdw-theme.material-icons(mdw-ink="medium") format_bold
+                    .mdw-menu__text Bold
+                    .mdw-menu__info ⌘B
+                  .mdw-menu__item(aria-disabled="true")
+                    .mdw-menu__icon.mdw-theme.material-icons(mdw-ink="medium") format_italic
+                    .mdw-menu__text Italic
+                    .mdw-menu__info ⌘I
+                  .mdw-menu__item
+                    .mdw-menu__icon.mdw-theme.material-icons(mdw-ink="medium") format_underline
+                    .mdw-menu__text Underline
+                    .mdw-menu__info ⌘U
+                  .mdw-divider.mdw-theme(mdw-ink="divider")
+                  .mdw-menu__item(aria-checked="true")
+                    .mdw-menu__check.mdw-theme.material-icons(mdw-ink="medium") check
+                    .mdw-menu__text Flights
+                  .mdw-menu__item
+                    .mdw-menu__check.mdw-theme.material-icons(mdw-ink="medium") check
+                    .mdw-menu__text Apps
+  script(src='menu.min.js')

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/pages/overlay.pug

@@ -0,0 +1,55 @@
+include ../_mixins.pug
+
++header("overlay")
+  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
+    .mdw-grid__item(mdw-colspan="100%")
+      .mdw-grid__content
+        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.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-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.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-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 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
+          .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="true") [aria-pressed="true"]
+    .mdw-grid__item(mdw-colspan="4")
+      .mdw-grid__content
+        h6.mdw-type Secondary Ink
+        .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/pages/progress.js

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

package/docs/pages/progress.pug

@@ -0,0 +1,16 @@
+include ../_mixins.pug
+
++header("progress")
+  .comparison.clipped-300.js
+    .render
+      .content.display-flex
+        .flex-1.display-flex(flex-justify-content="center" flex-align-items="center")
+          .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(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" 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")
+  script(src='progress.min.js')

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>