@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/docs/pages/menu.eta

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

package/docs/pages/menu.js

@@ -1,213 +0,0 @@
-import * as Menu from '../../components/menu/index.js';
-import * as MenuItem from '../../components/menu/item.js';
-import { convertElementToCode } from '../_sample-utils.js';
-
-/** @type {HTMLElement} */
-let sampleComponent;
-
-/**
- * @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);
-  for (const el of sampleComponent.querySelectorAll('[tabindex]')) el.removeAttribute('tabindex');
-
-  if (closer && (jsRequired || !(closer instanceof HTMLAnchorElement))) {
-    closer.remove();
-    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) {
-  const { name, value } = /** @type {HTMLInputElement} */ (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');
-  for (const el of document.querySelectorAll('input[name]')) {
-    el.addEventListener('change', onOptionChange);
-  }
-}
-
-initializeSampleComponents();
-setupComponentOptions();
-updateSampleCode();

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,3 +0,0 @@
-import * as Overlay from '../../core/overlay/index.js';
-
-for (const element of document.querySelectorAll('.js .mdw-overlay')) { Overlay.attach(element); }

package/docs/pages/progress.eta

@@ -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/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>

package/docs/pages/ripple.js

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