@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/docs/pages/tab.js

@@ -1,152 +0,0 @@
-import * as Button from '../../components/button/index.js';
-import * as Tab from '../../components/tab/index.js';
-import { setTextNode } from '../../core/dom.js';
-import { convertElementToCode } from '../_sample-utils.js';
-
-/** @type {HTMLElement} */
-let sampleComponent;
-
-/** @return {void} */
-function onWindowResize() {
-  for (const element of document.getElementsByClassName('mdw-tab')) { Tab.onResize(element); }
-}
-
-/** @return {void} */
-function updateSampleCode() {
-  // Strip automatic attributes and classes
-  Tab.detach(sampleComponent);
-  for (const el of sampleComponent.getElementsByClassName('mdw-tab__item')) {
-    el.classList.remove('mdw-overlay');
-    el.classList.remove('mdw-ripple');
-    el.removeAttribute('mdw-overlay-off');
-  }
-  const indicator = sampleComponent.getElementsByClassName('mdw-tab__indicator')[0];
-  indicator.removeAttribute('style');
-
-  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
-  setTextNode(htmlCodeElement, convertElementToCode(
-    sampleComponent,
-    document.getElementById('usePug').getAttribute('aria-pressed') === 'true',
-  ));
-
-  Tab.attach(sampleComponent);
-
-  const jsCodeElement = document.getElementsByClassName('component-js')[0];
-  jsCodeElement.textContent = [
-    'mdw.Tab.attach(tabElement);',
-    '',
-    "window.addEventListener('resize', () => mdw.Tab.onResize(tabElement));",
-  ].join('\n');
-}
-
-/** @return {void} */
-function setupPugButton() {
-  const pugButton = document.getElementById('usePug');
-  Button.attach(pugButton);
-  pugButton.addEventListener('click', () => {
-    if (pugButton.getAttribute('aria-pressed') === 'true') {
-      pugButton.setAttribute('aria-pressed', 'false');
-    } else {
-      pugButton.setAttribute('aria-pressed', 'true');
-    }
-    updateSampleCode();
-  });
-}
-
-/** @return {void} */
-function initializeSampleComponents() {
-  for (const element of document.getElementsByClassName('mdw-tab')) { Tab.attach(element); }
-  window.addEventListener('resize', onWindowResize);
-  for (const formElement of document.getElementsByTagName('form')) {
-    formElement.reset();
-  }
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-function onOptionChange(event) {
-  const inputElement = /** @type {HTMLInputElement} */ (event.currentTarget);
-  const { name, value, checked } = inputElement;
-  const tabListElement = sampleComponent.querySelector('.mdw-tab__list');
-
-  switch (name) {
-    case 'framework':
-      switch (value) {
-        case 'javascript':
-          break;
-        case 'css':
-          break;
-        default:
-      }
-      break;
-    case 'ink':
-      switch (value) {
-        case 'default':
-          tabListElement.removeAttribute('mdw-ink');
-          break;
-        default:
-          tabListElement.setAttribute('mdw-ink', value);
-          break;
-      }
-      break;
-    case 'surface':
-      switch (value) {
-        case 'none':
-          tabListElement.removeAttribute('mdw-surface');
-          tabListElement.removeAttribute('mdw-light');
-          tabListElement.removeAttribute('mdw-dark');
-          break;
-        default:
-          tabListElement.setAttribute('mdw-surface', value.replace(/ (light|dark)/, ''));
-          if (!value.includes(' light')) {
-            tabListElement.removeAttribute('mdw-light');
-          } else {
-            tabListElement.setAttribute('mdw-light', '');
-          }
-          if (!value.includes(' dark')) {
-            tabListElement.removeAttribute('mdw-dark');
-          } else {
-            tabListElement.setAttribute('mdw-dark', '');
-          }
-          if (value === 'none') {
-            tabListElement.classList.remove('mdw-theme');
-          } else {
-            tabListElement.classList.add('mdw-theme');
-          }
-          break;
-      }
-      break;
-    case 'tabs-scrollable':
-      if (checked) {
-        sampleComponent.getElementsByClassName('mdw-tab__list')[0].setAttribute('mdw-scrollable', '');
-      } else {
-        sampleComponent.getElementsByClassName('mdw-tab__list')[0].removeAttribute('mdw-scrollable');
-      }
-      break;
-    case 'content-scrollable': {
-      if (checked) {
-        sampleComponent.getElementsByClassName('mdw-tab__content')[0].removeAttribute('mdw-no-scroll');
-      } else {
-        sampleComponent.getElementsByClassName('mdw-tab__content')[0].setAttribute('mdw-no-scroll', '');
-      }
-      break;
-    }
-    default:
-  }
-  updateSampleCode();
-}
-
-/** @return {void} */
-function setupComponentOptions() {
-  setupPugButton();
-  sampleComponent = document.querySelector('.component-sample .mdw-tab');
-  for (const el of document.querySelectorAll('input[name]')) {
-    el.addEventListener('change', onOptionChange);
-  }
-}
-
-initializeSampleComponents();
-setupComponentOptions();
-updateSampleCode();

package/docs/pages/textfield.eta

@@ -1,487 +0,0 @@
-<% var T = '../../templates/index.eta' %>
-<% layout('../_partials/_header.eta', {page: 'textfield'}) %>
-<div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-stretch>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <h5 class="mdw-type" mdw-baseline-next="36">Text fields allow users to input, edit, and select text.</h5>
-    <p class="mdw-type">Text fields typically reside in forms but can appear in other places, like dialog boxes and search.</p>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="4">
-    <div class="mdw-grid__content">
-      <div class="component-sample">
-        <div class="component-sample__container">
-          <label class="mdw-textfield mdw-theme" mdw-ink="primary">
-            <input class="mdw-textfield__input" placeholder="Placeholder" />
-            <div class="mdw-textfield__border">
-              <div class="mdw-textfield__outline-gap">
-                <div class="mdw-textfield__label">Label</div>
-              </div>
-            </div>
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="8">
-    <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', disabled:true, text:'Required' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'optional', checked:true, text:'Optional' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'none', text:'None' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Field type</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'field-type', type:'radio', value:'single-line', checked:true, text:'Single-line' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'field-type', type:'radio', value:'text-area', text:'Text area' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'field-type', type:'radio', value:'dropdown', text:'Dropdown' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Style</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'style', type:'radio', value:'filled', checked:true, text:'Filled' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'style', type:'radio', value:'outlined', text:'Outlined' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'style', type:'radio', value:'solo', text:'Solo' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Options</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'signifier', text:'Signifier' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'prefix', text:'Prefix' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'suffix', text:'Suffix' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'helper-text', text:'Helper Text' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'error-text', text:'Error Text' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Ink</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'ink', type:'radio', value:'none', text:'Default' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'ink', type:'radio', value:'primary', checked:true, text:'Primary' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'ink', type:'radio', value:'secondary', text:'Secondary' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'ink', type:'radio', value:'green', text:'Green' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Attributes</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'autosize', checked:true, text:'Autosize' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'dense', text:'Dense' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'disabled', text:'Disabled' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'4minlength', text:'4 Min Length' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'required', text:'Required' }}) %>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="100%" style="max-height:0;"></div>
-  <div class="mdw-grid__item" mdw-colspan="6">
-    <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 class="mdw-grid__item" mdw-colspan="6">
-    <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 class="mdw-grid__item" mdw-colspan="100%">
-    <h6 class="mdw-type">Samples</h6>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="6" flex-justify-content="center">
-    <div class="render-fill">
-      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'primary 700', dark:true }) %>
-      <%~ includeFile('../_partials/_appbar.eta', { surface: 'primary 500', dark: true, start:['arrow_back'], end: ['more_vert'], body: 'Application' }) %>
-      <div class="content" style="padding:0px 16px;">
-        <label class="mdw-textfield mdw-type mdw-theme" mdw-ink="primary" mdw-style="h4">
-          <input class="mdw-textfield__input" value="Vintage 50" placeholder=" " />
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Title</div>
-            </div>
-          </div>
-        </label>
-        <div class="horizontal-controls">
-          <label class="mdw-textfield mdw-theme" mdw-ink="primary" style="width:88px;">
-            <input class="mdw-textfield__input" type="text" placeholder=" " />
-            <div class="mdw-textfield__prefix">$</div>
-            <div class="mdw-textfield__border">
-              <div class="mdw-textfield__outline-gap">
-                <div class="mdw-textfield__label">Price</div>
-              </div>
-            </div>
-          </label>
-          <label class="mdw-textfield flex-1 mdw-theme" mdw-ink="primary">
-            <input class="mdw-textfield__input" type="text" placeholder=" " />
-            <div class="mdw-textfield__border">
-              <div class="mdw-textfield__outline-gap">
-                <div class="mdw-textfield__label">Location (optional)</div>
-              </div>
-            </div>
-          </label>
-        </div>
-        <%~ includeFile(T, { textfield: { ink:'primary', placeholder:'text', text:'Description' }}) %>
-        <%~ includeFile(T, { textfield: { ink:'primary', placeholder:'••••••••', required:true, minlength:8,
-          signifier: {text: 'security', class:'material-icons'}, type:'password',
-          helper: 'At least 8 characters', error: 'Error: Password of at least 8 characters required.',
-          text: 'Password text field with signifier and overflowing label *',
-        }}) %>
-        <%~ includeFile(T, { textfield: { ink:'primary', disabled:true, value:'filled', suffix:'lbs', helper:'Disabled Helper Text', text:'Disabled Filled with Suffix' }}) %>
-      </div>
-      <%~ includeFile('../_partials/_androidnavbar.eta') %>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="6" flex-justify-content="center">
-    <div class="render-fill">
-      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'secondary 300', light:true }) %>
-      <%~ includeFile('../_partials/_appbar.eta', { surface: 'secondary 100', light: true, start: ['arrow_back'], end: ['search'], body: 'Auto-fill styling' }) %>
-      <form class="content" style="padding:0px 16px;">
-        <%~ includeFile(T, { textfield: { ink:'secondary', required:true, name:"name", text:'Name *' }}) %>
-        <%~ includeFile(T, { textfield: { ink:'secondary', name:"address", text:'Address' }}) %>
-        <%~ includeFile(T, { textfield: { ink:'secondary', name:"city", text:'City' }}) %>
-        <div class="horizontal-controls">
-          <label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="width:88px;">
-            <select class="mdw-textfield__input" name="state">
-              <option class="mdw-theme" mdw-surface="card" value="">--</option>
-              <option class="mdw-theme" mdw-surface="card" value="AL">AL</option>
-              <option class="mdw-theme" mdw-surface="card" value="AK">AK</option>
-              <option class="mdw-theme" mdw-surface="card" value="AZ">AZ</option>
-              <option class="mdw-theme" mdw-surface="card" value="AR">AR</option>
-              <option class="mdw-theme" mdw-surface="card" value="CA">CA</option>
-              <option class="mdw-theme" mdw-surface="card" value="CO">CO</option>
-              <option class="mdw-theme" mdw-surface="card" value="CT">CT</option>
-              <option class="mdw-theme" mdw-surface="card" value="DE">DE</option>
-              <option class="mdw-theme" mdw-surface="card" value="FL">FL</option>
-              <option class="mdw-theme" mdw-surface="card" value="GA">GA</option>
-              <option class="mdw-theme" mdw-surface="card" value="HI">HI</option>
-              <option class="mdw-theme" mdw-surface="card" value="ID">ID</option>
-              <option class="mdw-theme" mdw-surface="card" value="IL">IL</option>
-              <option class="mdw-theme" mdw-surface="card" value="IN">IN</option>
-              <option class="mdw-theme" mdw-surface="card" value="IA">IA</option>
-              <option class="mdw-theme" mdw-surface="card" value="KS">KS</option>
-              <option class="mdw-theme" mdw-surface="card" value="KY">KY</option>
-              <option class="mdw-theme" mdw-surface="card" value="LA">LA</option>
-              <option class="mdw-theme" mdw-surface="card" value="ME">ME</option>
-              <option class="mdw-theme" mdw-surface="card" value="MD">MD</option>
-              <option class="mdw-theme" mdw-surface="card" value="MA">MA</option>
-              <option class="mdw-theme" mdw-surface="card" value="MI">MI</option>
-              <option class="mdw-theme" mdw-surface="card" value="MN">MN</option>
-              <option class="mdw-theme" mdw-surface="card" value="MS">MS</option>
-              <option class="mdw-theme" mdw-surface="card" value="MO">MO</option>
-              <option class="mdw-theme" mdw-surface="card" value="MT">MT</option>
-              <option class="mdw-theme" mdw-surface="card" value="NE">NE</option>
-              <option class="mdw-theme" mdw-surface="card" value="NV">NV</option>
-              <option class="mdw-theme" mdw-surface="card" value="NH">NH</option>
-              <option class="mdw-theme" mdw-surface="card" value="NJ">NJ</option>
-              <option class="mdw-theme" mdw-surface="card" value="NM">NM</option>
-              <option class="mdw-theme" mdw-surface="card" value="NY">NY</option>
-              <option class="mdw-theme" mdw-surface="card" value="NC">NC</option>
-              <option class="mdw-theme" mdw-surface="card" value="ND">ND</option>
-              <option class="mdw-theme" mdw-surface="card" value="OH">OH</option>
-              <option class="mdw-theme" mdw-surface="card" value="OK">OK</option>
-              <option class="mdw-theme" mdw-surface="card" value="OR">OR</option>
-              <option class="mdw-theme" mdw-surface="card" value="PA">PA</option>
-              <option class="mdw-theme" mdw-surface="card" value="RI">RI</option>
-              <option class="mdw-theme" mdw-surface="card" value="SC">SC</option>
-              <option class="mdw-theme" mdw-surface="card" value="SD">SD</option>
-              <option class="mdw-theme" mdw-surface="card" value="TN">TN</option>
-              <option class="mdw-theme" mdw-surface="card" value="TX">TX</option>
-              <option class="mdw-theme" mdw-surface="card" value="UT">UT</option>
-              <option class="mdw-theme" mdw-surface="card" value="VT">VT</option>
-              <option class="mdw-theme" mdw-surface="card" value="VA">VA</option>
-              <option class="mdw-theme" mdw-surface="card" value="WA">WA</option>
-              <option class="mdw-theme" mdw-surface="card" value="WV">WV</option>
-              <option class="mdw-theme" mdw-surface="card" value="WI">WI</option>
-              <option class="mdw-theme" mdw-surface="card" value="WY">WY</option>
-            </select>
-            <div class="mdw-textfield__icon" mdw-dropdown></div>
-            <div class="mdw-textfield__border">
-              <div class="mdw-textfield__outline-gap">
-                <div class="mdw-textfield__label">State</div>
-              </div>
-            </div>
-          </label>
-          <label class="mdw-textfield flex-1 mdw-theme" mdw-ink="primary">
-            <input class="mdw-textfield__input" type="text" placeholder=" " name="zip" required />
-            <div class="mdw-textfield__border">
-              <div class="mdw-textfield__outline-gap">
-                <div class="mdw-textfield__label">Zip code *</div>
-              </div>
-            </div>
-          </label>
-        </div>
-        <%~ includeFile(T, { textfield: { ink:'secondary', name:'phone', text:'Phone number' }}) %>
-        <p class="mdw-type">* Required fields</p>
-      </form>
-      <%~ includeFile('../_partials/_androidnavbar.eta') %>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="6" flex-justify-content="center">
-    <div class="render-fill">
-      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'secondary 800', dark:true }) %>
-      <%~ includeFile('../_partials/_appbar.eta', { surface: 'secondary 700', dark: true, start: ['arrow_back'], end: ['search'] }) %>
-      <form class="content" style="padding:8px 16px;">
-        <div class="display-flex" style="margin-bottom:-32px;margin-top:-24px;" flex-justify-content="center">
-          <i class="material-icons" style="color:#ccc;font-size:256px;">person</i>
-        </div>
-        <div class="horizontal-controls">
-          <label class="mdw-textfield flex-1 mdw-theme" mdw-ink="secondary">
-            <div class="mdw-textfield__signifier material-icons">person</div>
-            <input class="mdw-textfield__input" type="text" placeholder=" " value="Ali Connors" />
-            <div class="mdw-textfield__border">
-              <div class="mdw-textfield__outline-gap">
-                <div class="mdw-textfield__label">Name</div>
-              </div>
-            </div>
-          </label>
-        </div>
-        <div class="horizontal-controls">
-          <%~ includeFile(T, { textfield: { ink:'secondary', value:'65', type:'phone', text:'Phone number', signifier:{text:'phone', class:'material-icons'}}}) %>
-          <label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="width:150px;">
-            <select class="mdw-textfield__input" type="phone">
-              <option class="mdw-theme" mdw-surface="card" value="">Unknown</option>
-              <option class="mdw-theme" mdw-surface="card" value="Mobile">Mobile</option>
-              <option class="mdw-theme" mdw-surface="card" value="Home">Home</option>
-              <option class="mdw-theme" mdw-surface="card" value="Work">Work</option>
-            </select>
-            <div class="mdw-textfield__icon" mdw-dropdown></div>
-            <div class="mdw-textfield__border">
-              <div class="mdw-textfield__outline-gap">
-                <div class="mdw-textfield__label">Phone Type</div>
-              </div>
-            </div>
-          </label>
-        </div>
-        <div class="horizontal-controls">
-          <%~ includeFile(T, { textfield: { ink:'secondary', type:'email', signifier: { text:'email', class:'material-icons'}, text:'Email' }}) %>
-          <label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="width:150px;">
-            <select class="mdw-textfield__input" type="phone">
-              <option class="mdw-theme" mdw-surface="card" value="">Unknown</option>
-              <option class="mdw-theme" mdw-surface="card" value="">Unknown</option>
-              <option class="mdw-theme" mdw-surface="card" value="Personal">Personal</option>
-              <option class="mdw-theme" mdw-surface="card" value="Business">Business</option>
-            </select>
-            <div class="mdw-textfield__icon" mdw-dropdown></div>
-            <div class="mdw-textfield__border">
-              <div class="mdw-textfield__outline-gap">
-                <div class="mdw-textfield__label">Email type</div>
-              </div>
-            </div>
-          </label>
-        </div>
-        <div class="horizontal-controls">
-          <%~ includeFile(T, { textfield: { ink:'secondary', type:'address', signifier:{text:'place', class:'material-icons'}, text:'Address' }}) %>
-          <label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="width:150px;">
-            <select class="mdw-textfield__input" type="phone">
-              <option class="mdw-theme" mdw-surface="card" value="Home">Home</option>
-              <option class="mdw-theme" mdw-surface="card" value="Work">Work</option>
-            </select>
-            <div class="mdw-textfield__icon" mdw-dropdown></div>
-            <div class="mdw-textfield__border">
-              <div class="mdw-textfield__outline-gap">
-                <div class="mdw-textfield__label">Address type</div>
-              </div>
-            </div>
-          </label>
-        </div>
-      </form>
-      <%~ includeFile('../_partials/_androidnavbar.eta') %>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="6" flex-justify-content="center">
-    <div class="render-fill">
-      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'primary 700', dark:true }) %>
-      <%~ includeFile('../_partials/_appbar.eta', { surface: 'primary 500', dark: true, start: ['arrow_back'], end: ['done'] }) %>
-      <div class="content" style="padding:8px 16px;">
-        <%~ includeFile(T, { textfield: { ink:'primary', value:"Vintage 50's Dress", outlined:true, helper:'Helper', text:'Title' }}) %>
-        <div class="horizontal-controls">
-          <label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-outlined style="width:88px;">
-            <input class="mdw-textfield__input" value="10.00" placeholder=" " />
-            <div class="mdw-textfield__border">
-              <div class="mdw-textfield__outline-gap">
-                <div class="mdw-textfield__label">Price</div>
-              </div>
-            </div>
-            <div class="mdw-textfield__prefix">$</div>
-            <div class="mdw-textfield__helper-text">Helper</div>
-          </label>
-          <label class="mdw-textfield flex-1 mdw-theme" mdw-ink="primary" mdw-outlined>
-            <input class="mdw-textfield__input" value="Hanover" placeholder=" " />
-            <div class="mdw-textfield__border">
-              <div class="mdw-textfield__outline-gap">
-                <div class="mdw-textfield__label">Location (optional)</div>
-              </div>
-            </div>
-            <div class="mdw-textfield__helper-text">Helper</div>
-          </label>
-        </div>
-        <label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-outlined>
-          <textarea class="mdw-textfield__input" placeholder=" " rows="3">Unique and rare dress from 1952. Made out of washed cotton with front pockets. Sleeveless with button closures.</textarea>
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Description</div>
-            </div>
-          </div>
-        </label>
-        <label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-outlined>
-          <div class="mdw-textfield__signifier material-icons">security</div>
-          <input class="mdw-textfield__input" type="password" placeholder="••••••••" required minlength="8" />
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Password text field with signifier and overflowing label *</div>
-            </div>
-          </div>
-          <div class="mdw-textfield__helper-text">At least 8 characters</div>
-          <div class="mdw-textfield__error-text">Error: Password of at least 8 characters required.</div>
-        </label>
-        <label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-outlined style="max-width:150px;">
-          <input class="mdw-textfield__input" type="text" placeholder=" " disabled value="filled" />
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Disabled Filled with Suffix</div>
-            </div>
-          </div>
-          <div class="mdw-textfield__suffix">lbs</div>
-          <div class="mdw-textfield__helper-text">Disabled Helper Text</div>
-        </label>
-      </div>
-      <%~ includeFile('../_partials/_androidnavbar.eta') %>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="6" flex-justify-content="center">
-    <div class="render-fill">
-      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'amber 600', dark:true }) %>
-      <%~ includeFile('../_partials/_appbar.eta', { surface: 'amber 400', dark: true, start: ['arrow_back'], end: ['done'] }) %>
-      <div class="content" style="padding:0 16px;">
-        <label class="mdw-textfield mdw-theme" mdw-ink="amber">
-          <input class="mdw-textfield__input" placeholder=" " />
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Name</div>
-            </div>
-          </div>
-          <div class="mdw-textfield__error-text">spacer</div>
-        </label>
-        <label class="mdw-textfield mdw-theme" mdw-ink="amber">
-          <textarea class="mdw-textfield__input" placeholder=" " rows="5"></textarea>
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Message</div>
-            </div>
-          </div>
-        </label>
-        <label class="mdw-textfield mdw-theme" mdw-ink="deeppurple" mdw-outlined>
-          <textarea class="mdw-textfield__input" placeholder=" " rows="5"></textarea>
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Message</div>
-            </div>
-          </div>
-        </label>
-      </div>
-      <%~ includeFile('../_partials/_androidnavbar.eta') %>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="6" flex-justify-content="center">
-    <div class="render-fill">
-      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'amber 700', dark:true }) %>
-      <%~ includeFile('../_partials/_appbar.eta', { surface: 'amber 400', dark: true, start: ['arrow_back'], end: ['done'] }) %>
-      <div class="content" style="padding:0 16px;">
-        <label class="mdw-textfield mdw-theme" mdw-ink="amber">
-          <input class="mdw-textfield__input" placeholder=" " />
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Name</div>
-            </div>
-          </div>
-          <div class="mdw-textfield__error-text">spacer</div>
-        </label>
-        <label class="mdw-textfield mdw-theme" mdw-ink="amber">
-          <textarea class="mdw-textfield__input" placeholder=" " rows="5" required>Just wanted to let you kn</textarea>
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Message *</div>
-            </div>
-          </div>
-          <div class="mdw-textfield__helper-text">Helper text.</div>
-          <div class="mdw-textfield__error-text">Error: Required.</div>
-        </label>
-        <label class="mdw-textfield mdw-theme" mdw-ink="amber">
-          <textarea class="mdw-textfield__input" placeholder=" " rows="5" disabled>This textarea is disabled.</textarea>
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Message *</div>
-            </div>
-          </div>
-          <div class="mdw-textfield__helper-text">Helper text.</div>
-          <div class="mdw-textfield__error-text">Error: Required.</div>
-        </label>
-      </div>
-      <%~ includeFile('../_partials/_androidnavbar.eta') %>
-    </div>
-  </div>
-  <div class="mdw-grid__item js" mdw-colspan="6">
-    <div class="render-fill">
-      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'primary 700', dark:true }) %>
-      <%~ includeFile('../_partials/_appbar.eta', { surface: 'primary 500', dark: true, start: ['arrow_back'], end: ['done'], text: 'With Javascript' }) %>
-      <div class="content" style="padding:8px 16px;">
-        <label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-outlined>
-          <input class="mdw-textfield__input" placeholder=" " />
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Title</div>
-            </div>
-          </div>
-          <div class="mdw-textfield__helper-text">Helper</div>
-        </label>
-        <div class="horizontal-controls">
-          <label class="mdw-textfield mdw-theme" mdw-ink="primary" style="width:88px;">
-            <input class="mdw-textfield__input" value="10.00" placeholder=" " />
-            <div class="mdw-textfield__prefix">$</div>
-            <div class="mdw-textfield__border">
-              <div class="mdw-textfield__outline-gap">
-                <div class="mdw-textfield__label">Price</div>
-              </div>
-            </div>
-            <div class="mdw-textfield__helper-text">Helper</div>
-          </label>
-          <label class="mdw-textfield flex-1 mdw-theme" mdw-ink="primary">
-            <input class="mdw-textfield__input" placeholder=" " />
-            <div class="mdw-textfield__border">
-              <div class="mdw-textfield__outline-gap">
-                <div class="mdw-textfield__label">Location (optional)</div>
-              </div>
-            </div>
-            <div class="mdw-textfield__helper-text">Helper</div>
-          </label>
-        </div>
-        <label class="mdw-textfield mdw-theme" mdw-ink="primary" mdw-autosize>
-          <textarea class="mdw-textfield__input" placeholder=" " rows="4">Unique and rare dress from 1952. Made out of washed cotton with front pockets. Sleeveless with button closures.
-(Erase Me)</textarea>
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Description</div>
-            </div>
-          </div>
-        </label>
-        <div class="horizontal-controls">
-          <label class="mdw-textfield mdw-theme" mdw-ink="secondary">
-            <input class="mdw-textfield__input" type="phone" placeholder=" " value="65" />
-            <div class="mdw-textfield__signifier material-icons">phone</div>
-            <div class="mdw-textfield__border">
-              <div class="mdw-textfield__outline-gap">
-                <div class="mdw-textfield__label">Name</div>
-              </div>
-            </div>
-          </label>
-          <label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="width:150px;">
-            <select class="mdw-textfield__input" type="phone">
-              <option class="mdw-theme" mdw-surface="card" value="">Unknown</option>
-              <option class="mdw-theme" mdw-surface="card" value="Mobile">Mobile</option>
-              <option class="mdw-theme" mdw-surface="card" value="Home">Home</option>
-              <option class="mdw-theme" mdw-surface="card" value="Work">Work</option>
-            </select>
-            <div class="mdw-textfield__icon" mdw-dropdown></div>
-            <div class="mdw-textfield__border">
-              <div class="mdw-textfield__outline-gap">
-                <div class="mdw-textfield__label">Phone Type</div>
-              </div>
-            </div>
-          </label>
-        </div>
-      </div>
-      <%~ includeFile('../_partials/_androidnavbar.eta') %>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="6"></div>
-  <div class="mdw-grid__item" mdw-colspan="4"></div>
-</div>
-<script src="textfield.min.js"></script>