@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/docs/pages/tab.js

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

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