@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/docs/pages/menu.js

@@ -1,217 +0,0 @@
-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

@@ -1,205 +0,0 @@
-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

@@ -1,69 +0,0 @@
-<% 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

@@ -1,4 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,23 +0,0 @@
-<% 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

@@ -1,12 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,27 +0,0 @@
-<% 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>