@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/docs/pages/card.eta

@@ -0,0 +1,90 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'card'}) %>
+<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">Cards contain content and actions about a single subject.</h5>
+    <p class="mdw-type" mdw-baseline-next="36">Cards are surfaces that display content and actions on a single topic.</p>
+    <p class="mdw-type">They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.</p>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="6">
+    <div class="mdw-grid__content component-sample">
+      <div class="display-flex">
+        <div class="mdw-card mdw-theme" mdw-raised="focus-within" mdw-surface="card" mdw-border-ink>
+          <%~ includeFile(T, { button: { class:"mdw-card__button" }}) %>
+          <div class="mdw-card__start">
+            <div class="mdw-card__thumbnail material-icons" style="font-size:40px;">account_circle</div>
+          </div>
+          <div class="mdw-card__end" style="margin:8px 0;">
+            <%~ includeFile(T, { button: { class:"mdw-card__button", icon:true, text:'clear' }}) %>
+          </div>
+          <h6 class="mdw-card__header" mdw-two-line>Title goes here</h6>
+          <div class="mdw-card__subheader">Secondary text</div>
+          <div class="mdw-card__media" mdw-ratio="16:9"><img class="mdw-card__image" src="https://free-images.com/md/f673/sunset_sky_red_gold_0.jpg"></div>
+          <div class="mdw-card__supporting-text">Grayhound divisively hello coldly wonderfully marginally far upon excluding.</div>
+          <div class="mdw-card__actions">
+            <%~ includeFile(T, { button: {  ink:'secondary' , text:'Action 1' }}) %>
+            <%~ includeFile(T, { button: {  ink:'secondary' , text:'Action 2' }}) %>
+            <%~ includeFile(T, { button: { icon: true , class:'material-icons', text:'more_vert' }}) %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <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', disabled:true, text:'Optional' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'none', checked:true, text:'None' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Elevation</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'elevation', type:'radio', value:'auto', checked:true, text:'Auto' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'elevation', type:'radio', value:'0', text:'0dp' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'elevation', type:'radio', value:'1', text:'1dp' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'elevation', type:'radio', value:'8', text:'8dp' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Raise</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'raise-focus-within', value:'focus-within', checked:true, text:'On Focus Within' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'raise-hover', value:'hover', text:'On Hover' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Media Placement</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-placement', type:'radio', value:'none', text:'None' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-placement', type:'radio', value:'top', text:'Top' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-placement', type:'radio', value:'middle', checked:true, text:'Middle' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-placement', type:'radio', value:'bottom', text:'Bottom' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Media Ratio</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-ratio', type:'radio', value:'none', text:'None' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-ratio', type:'radio', value:'16:9', checked:true, text:'16:9' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-ratio', type:'radio', value:'3:2', text:'3:2' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-ratio', type:'radio', value:'4:3', text:'4:3' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-ratio', type:'radio', value:'1:1', text:'1:1' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Actions</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'primary-action', checked:true, text:'Primary' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'secondary-actions', checked:true, text:'Secondary' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'close-action', checked:true, text:'Close' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Surface</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'card', text:'Card' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'primary dark', checked:true, text:'Primary (Dark)' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'secondary 100 light', text:'Secondary 100 (Light)' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'warn 200 light', text:'Warn 200 (Light)' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'green 700 dark', text:'Green 700 (Dark)' }}) %>
+    </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">
+      <%~ includeFile(T, { button: {icon:true, ink:'secondary' , id:'usePug', attributes: {'aria-pressed':"false", 'mdw-overlay-off':"activated"}, text:'PUG' }}) %>
+    </div>
+  </div>
+</div>
+<script src="card.min.js"></script>

package/{docs-src/components → docs/pages}/card.js

@@ -1,5 +1,5 @@
-import { convertElementToCode } from '../_sample-utils';
-import { iterateArrayLike, setTextNode } from '../../core/dom';
+import { iterateArrayLike, setTextNode } from '../../core/dom.js';
+import { convertElementToCode } from '../_sample-utils.js';
 
 /** @type {HTMLElement} */
 let sampleComponent;
@@ -58,7 +58,7 @@ function onOptionChange(event) {
           raiseOptions.push(name.substr('raise-'.length));
         }
       } else {
-        raiseOptions = raiseOptions.filter(o => o !== name.substr('raise-'.length));
+        raiseOptions = raiseOptions.filter((o) => o !== name.substr('raise-'.length));
       }
       raiseOptions.sort();
       if (raiseOptions.length) {

package/{docs-src/components → docs/pages}/card.pug

@@ -27,40 +27,40 @@ include ../_mixins.pug
                 +mdwButton({ icon: true }).material-icons more_vert
     .mdw-grid__item(mdw-colspan="4")
       .mdw-type(mdw-style="subtitle") Javascript
-      div.docs-option-list
+      .docs-option-list
         +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'required', disabled:true}) Required
         +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'optional', disabled:true}) Optional
         +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'none', checked:true}) None
       .mdw-type(mdw-style="subtitle") Elevation
-      div.docs-option-list
+      .docs-option-list
         +mdwSelection({ink:'secondary', name:'elevation', type:'radio', value:'auto', checked:true}) Auto
         +mdwSelection({ink:'secondary', name:'elevation', type:'radio', value:'0'}) 0dp
         +mdwSelection({ink:'secondary', name:'elevation', type:'radio', value:'1'}) 1dp
         +mdwSelection({ink:'secondary', name:'elevation', type:'radio', value:'8'}) 8dp
       .mdw-type(mdw-style="subtitle") Raise
-      div.docs-option-list
+      .docs-option-list
         +mdwSelection({ink:'secondary', name:'raise-focus-within', value:'focus-within', checked:true}) On Focus Within
         +mdwSelection({ink:'secondary', name:'raise-hover', value:'hover'}) On Hover
       .mdw-type(mdw-style="subtitle") Media Placement
-      div.docs-option-list
+      .docs-option-list
         +mdwSelection({ink:'secondary', name:'media-placement', type:'radio', value:'none'}) None
         +mdwSelection({ink:'secondary', name:'media-placement', type:'radio', value:'top'}) Top
         +mdwSelection({ink:'secondary', name:'media-placement', type:'radio', value:'middle', checked:true}) Middle
         +mdwSelection({ink:'secondary', name:'media-placement', type:'radio', value:'bottom'}) Bottom
       .mdw-type(mdw-style="subtitle") Media Ratio
-      div.docs-option-list
+      .docs-option-list
         +mdwSelection({ink:'secondary', name:'media-ratio', type:'radio', value:'none'}) None
         +mdwSelection({ink:'secondary', name:'media-ratio', type:'radio', value:'16:9', checked:true}) 16:9
         +mdwSelection({ink:'secondary', name:'media-ratio', type:'radio', value:'3:2'}) 3:2
         +mdwSelection({ink:'secondary', name:'media-ratio', type:'radio', value:'4:3'}) 4:3
         +mdwSelection({ink:'secondary', name:'media-ratio', type:'radio', value:'1:1'}) 1:1
       .mdw-type(mdw-style="subtitle") Actions
-      div.docs-option-list
+      .docs-option-list
         +mdwSelection({ink:'secondary', name:'primary-action', checked:true}) Primary
         +mdwSelection({ink:'secondary', name:'secondary-actions', checked:true}) Secondary
         +mdwSelection({ink:'secondary', name:'close-action', checked:true}) Close
       .mdw-type(mdw-style="subtitle") Surface
-      div.docs-option-list
+      .docs-option-list
         +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'card'}) Card
         +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'primary dark', checked:true}) Primary (Dark)
         +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'secondary 100 light'}) Secondary 100 (Light)

package/docs/pages/chip.eta

@@ -0,0 +1,122 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'chip'}) %>
+<div class="mdw-grid docs-chip" mdw-margin-top mdw-margin-bottom mdw-stretch>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <h5 class="mdw-type" mdw-baseline-next="36">Chips are compact elements that represent an input, attribute, or action.</h5>
+    <p class="mdw-type">Chips allow users to enter information, make selections, filter content, or trigger actions. Chips should appear dynamically as a group of multiple interactive elements. Unlike buttons, which should be a consistent and familiar call to action, one that a user expects to appear as the same action in the same general area.</p>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="6">
+    <div class="mdw-grid__content component-sample">
+      <div class="component-sample__container">
+        <div>
+          <p>Action
+            <div class="mdw-chip" mdw-type="action">
+              <div class="mdw-chip__item">
+                <div class="mdw-chip__input"></div>
+                <div class="mdw-chip__text">Send Message</div>
+              </div>
+              <div class="mdw-chip__item">
+                <div class="mdw-chip__input"></div>
+                <div class="mdw-chip__text">Call</div>
+              </div>
+            </div>
+          </p>
+          <p>Input</p>
+          <div class="mdw-chip" mdw-type="input">
+            <div class="mdw-chip__item">
+              <div class="mdw-chip__input"></div>
+              <div class="mdw-chip__text">Portland</div>
+              <div class="mdw-chip__thumbnail material-icons">place</div>
+              <div class="mdw-chip__remove material-icons">cancel</div>
+            </div>
+            <div class="mdw-chip__item">
+              <div class="mdw-chip__input"></div>
+              <div class="mdw-chip__text">Biking</div>
+              <div class="mdw-chip__thumbnail material-icons">directions_bike</div>
+              <div class="mdw-chip__remove material-icons">cancel</div>
+            </div>
+          </div>
+          <p>Choice</p>
+          <form class="mdw-chip mdw-theme" mdw-type="choice" mdw-ink="secondary">
+            <label class="mdw-chip__item">
+              <input class="mdw-chip__input" type="radio" name="sample" value="a" />
+              <div class="mdw-chip__text">Apple</div>
+            </label>
+            <label class="mdw-chip__item">
+              <input class="mdw-chip__input" type="radio" name="sample" value="b" />
+              <div class="mdw-chip__text">Banana</div>
+            </label>
+            <label class="mdw-chip__item">
+              <input class="mdw-chip__input" type="radio" name="sample" value="c" />
+              <div class="mdw-chip__text">Cranberry</div>
+            </label>
+            <label class="mdw-chip__item">
+              <input class="mdw-chip__input" type="radio" name="sample" value="d" />
+              <div class="mdw-chip__text">Dragon Fruit</div>
+            </label>
+          </form>
+          <p>Filter</p>
+          <div>
+            <div class="mdw-chip" mdw-type="filter">
+              <label class="mdw-chip__item">
+                <input class="mdw-chip__input" type="checkbox" />
+                <div class="mdw-chip__text">Elevator</div>
+                <div class="mdw-chip__checkmark material-icons">check</div>
+              </label>
+              <label class="mdw-chip__item">
+                <input class="mdw-chip__input" type="checkbox" />
+                <div class="mdw-chip__text">Washer/Dryer</div>
+                <div class="mdw-chip__checkmark material-icons">check</div>
+              </label>
+              <label class="mdw-chip__item">
+                <input class="mdw-chip__input" type="checkbox" />
+                <div class="mdw-chip__text">Fireplace</div>
+                <div class="mdw-chip__checkmark material-icons">check</div>
+              </label>
+              <label class="mdw-chip__item">
+                <input class="mdw-chip__input" type="checkbox" />
+                <div class="mdw-chip__text">Wheelchair access</div>
+                <div class="mdw-chip__checkmark material-icons">check</div>
+              </label>
+              <label class="mdw-chip__item">
+                <input class="mdw-chip__input" type="checkbox" />
+                <div class="mdw-chip__text">Dogs ok</div>
+                <div class="mdw-chip__checkmark material-icons">check</div>
+              </label>
+              <label class="mdw-chip__item">
+                <input class="mdw-chip__input" type="checkbox" />
+                <div class="mdw-chip__text">Cats ok</div>
+                <div class="mdw-chip__checkmark material-icons">check</div>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item demo-options" mdw-colspan="4">
+    <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">Options</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'outlined', text:'Outlined' }}) %>
+    </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="100%">
+    <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>
+<script src="chip.min.js"></script>

package/{docs-src/components → docs/pages}/chip.js

@@ -1,12 +1,10 @@
-
-import * as Chip from '../../components/chip/index';
-import { iterateArrayLike } from '../../core/dom';
-import { convertElementToCode } from '../_sample-utils';
+import * as Chip from '../../components/chip/index.js';
+import { iterateArrayLike } from '../../core/dom.js';
+import { convertElementToCode } from '../_sample-utils.js';
 
 /** @type {ArrayLike<HTMLElement>} */
 let sampleComponents;
 
-
 /** @return {void} */
 function updateSampleCode() {
   const jsRequired = document.querySelector('input[name="javascript"][value="required"]').checked;
@@ -16,7 +14,6 @@ function updateSampleCode() {
   // Strip JS related elements and attributes
   iterateArrayLike(sampleComponents, Chip.detach);
 
-
   const htmlCodeElement = document.getElementsByClassName('component-html')[0];
   const sampleContainer = document.querySelector('.component-sample__container').firstElementChild;
   htmlCodeElement.textContent = convertElementToCode(sampleContainer);

package/{docs-src/components → docs/pages}/chip.pug

@@ -72,12 +72,12 @@ include ../_mixins.pug
                   .mdw-chip__checkmark.material-icons check
     .mdw-grid__item(mdw-colspan="4").demo-options
       .mdw-type(mdw-style="subtitle") Javascript
-      div.docs-option-list
+      .docs-option-list
         +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'required', disabled:true}) Required
         +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'optional', checked:true}) Optional
         +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'none'}) None
       .mdw-type(mdw-style="subtitle") Options
-      div.docs-option-list
+      .docs-option-list
         +mdwSelection({ink:'secondary', name:'outlined'}) Outlined
     .mdw-grid__item(mdw-colspan="100%" style="max-height:0")
     .mdw-grid__item(mdw-colspan="6")

package/docs/pages/color.eta

@@ -0,0 +1,143 @@
+<% layout('../_partials/_header.eta', {page: 'color'}) %>
+<div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-columns="4" id="color-page-options">
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="mdw-grid__content mdw-theme" mdw-elevation="8">
+      <div id="color-sample-area">
+        <a class="demo-core-item mdw-overlay mdw-elevation mdw-ripple mdw-theme" id="sample-button" tabindex="0" mdw-elevation="1" mdw-surface="binary" mdw-ink="secondary contrast">Enabled</a>
+        <a class="demo-core-item mdw-overlay mdw-elevation mdw-ripple mdw-theme" id="sample-button__selected" tabindex="0" mdw-elevation="1" mdw-surface="binary" mdw-ink="secondary contrast" aria-selected="true">Selected</a>
+        <a class="demo-core-item mdw-overlay mdw-elevation mdw-ripple mdw-theme" id="sample-button__activated" tabindex="0" mdw-elevation="1" mdw-surface="binary" mdw-ink="secondary contrast" aria-pressed="true">Activated</a>
+        <div style="margin:8px">
+          <p class="mdw-type"><span>Surface: </span><span class="mdw-theme" id="sample-surface" mdw-ink="medium"></span></p>
+          <p class="mdw-type"><span>Ink: </span><span class="mdw-theme" id="sample-ink" mdw-ink="medium"></span></p>
+        </div>
+        <div style="margin:8px">
+          <p class="mdw-type"><span>Text Contrast: </span><span class="mdw-theme" id="sample-contrast__text" mdw-ink="medium"></span><span> / 4.5</span></p>
+          <p class="mdw-type"><span>Selected Contrast: </span><span class="mdw-theme" id="sample-contrast__selected" mdw-ink="medium"></span><span> / 4.5</span></p>
+          <p class="mdw-type"><span>Activated Contrast: </span><span class="mdw-theme" id="sample-contrast__activated" mdw-ink="medium"></span><span> / 4.5</span></p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="2">
+    <div class="mdw-grid__content">
+      <div class="mdw-type" mdw-style="subtitle">Ink</div>
+      <div>
+        <label class="mdw-textfield mdw-theme" mdw-ink="secondary" mdw-outlined>
+          <select class="mdw-textfield__input" name="ink-color">
+            <option class="mdw-theme" mdw-surface="card" value="default">Default</option>
+            <option class="mdw-theme" mdw-surface="card" value="black">Black</option>
+            <option class="mdw-theme" mdw-surface="card" value="white">White</option>
+            <option class="mdw-theme" mdw-surface="card" value="primary">Primary</option>
+            <option class="mdw-theme" mdw-surface="card" value="secondary" selected>Secondary</option>
+            <option class="mdw-theme" mdw-surface="card" value="warn">Warn</option>
+            <option class="mdw-theme" mdw-surface="card" value="amber">Amber</option>
+            <option class="mdw-theme" mdw-surface="card" value="blue">Blue</option>
+            <option class="mdw-theme" mdw-surface="card" value="cyan">Cyan</option>
+            <option class="mdw-theme" mdw-surface="card" value="red">Red</option>
+            <option class="mdw-theme" mdw-surface="card" value="green">Green</option>
+            <option class="mdw-theme" mdw-surface="card" value="deeppurple">Deeppurple</option>
+            <option class="mdw-theme" mdw-surface="card" value="purple">Purple</option>
+            <option class="mdw-theme" mdw-surface="card" value="yellow">Yellow</option>
+            <option class="mdw-theme" mdw-surface="card" value="teal">Teal</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">Color</div>
+            </div>
+          </div>
+        </label>
+        <label class="mdw-textfield mdw-theme" mdw-ink="secondary" mdw-outlined>
+          <select class="mdw-textfield__input" name="ink-tone">
+            <option class="mdw-theme" mdw-surface="card" value="">Auto</option>
+            <option class="mdw-theme" mdw-surface="card" value="light">Light</option>
+            <option class="mdw-theme" mdw-surface="card" value="contrast" auto>Contrast</option>
+            <option class="mdw-theme" mdw-surface="card" value="A100">A100</option>
+            <option class="mdw-theme" mdw-surface="card" value="A200">A200</option>
+            <option class="mdw-theme" mdw-surface="card" value="A400">A400</option>
+            <option class="mdw-theme" mdw-surface="card" value="A700">A700</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">Tone</div>
+            </div>
+          </div>
+        </label>
+        <label class="mdw-textfield mdw-theme" mdw-ink="secondary" mdw-outlined>
+          <select class="mdw-textfield__input" name="ink-opacity">
+            <option class="mdw-theme" mdw-surface="card" value="" selected>Auto</option>
+            <option class="mdw-theme" mdw-surface="card" value="solid">Solid</option>
+            <option class="mdw-theme" mdw-surface="card" value="high">High</option>
+            <option class="mdw-theme" mdw-surface="card" value="medium">Medium</option>
+            <option class="mdw-theme" mdw-surface="card" value="inactive">Inactive</option>
+            <option class="mdw-theme" mdw-surface="card" value="divider">Divider</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">Opacity</div>
+            </div>
+          </div>
+        </label>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="2">
+    <div class="mdw-grid__content">
+      <div class="mdw-type" mdw-style="subtitle">Surface</div>
+      <div id="color-page-options">
+        <label class="mdw-textfield mdw-theme" mdw-ink="secondary" mdw-outlined>
+          <select class="mdw-textfield__input" name="surface-color">
+            <option class="mdw-theme" mdw-surface="card" value="card">Card</option>
+            <option class="mdw-theme" mdw-surface="card" value="binary" selected>Binary</option>
+            <option class="mdw-theme" mdw-surface="card" value="black">Black</option>
+            <option class="mdw-theme" mdw-surface="card" value="white">White</option>
+            <option class="mdw-theme" mdw-surface="card" value="background">Background</option>
+            <option class="mdw-theme" mdw-surface="card" value="primary">Primary</option>
+            <option class="mdw-theme" mdw-surface="card" value="secondary">Secondary</option>
+            <option class="mdw-theme" mdw-surface="card" value="warn">Warn</option>
+            <option class="mdw-theme" mdw-surface="card" value="amber">Amber</option>
+            <option class="mdw-theme" mdw-surface="card" value="blue">Blue</option>
+            <option class="mdw-theme" mdw-surface="card" value="cyan">Cyan</option>
+            <option class="mdw-theme" mdw-surface="card" value="red">Red</option>
+            <option class="mdw-theme" mdw-surface="card" value="green">Green</option>
+            <option class="mdw-theme" mdw-surface="card" value="deeppurple">Deeppurple</option>
+            <option class="mdw-theme" mdw-surface="card" value="purple">Purple</option>
+            <option class="mdw-theme" mdw-surface="card" value="yellow">Yellow</option>
+            <option class="mdw-theme" mdw-surface="card" value="teal">Teal</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">Color</div>
+            </div>
+          </div>
+        </label>
+        <label class="mdw-textfield mdw-theme" mdw-ink="secondary" mdw-outlined>
+          <select class="mdw-textfield__input" name="surface-tone">
+            <option class="mdw-theme" mdw-surface="card" value="" selected>Default</option>
+            <option class="mdw-theme" mdw-surface="card" value="alt">Alternate</option>
+            <option class="mdw-theme" mdw-surface="card" value="50">50</option>
+            <option class="mdw-theme" mdw-surface="card" value="100">100</option>
+            <option class="mdw-theme" mdw-surface="card" value="200">200</option>
+            <option class="mdw-theme" mdw-surface="card" value="300">300</option>
+            <option class="mdw-theme" mdw-surface="card" value="400">400</option>
+            <option class="mdw-theme" mdw-surface="card" value="500">500</option>
+            <option class="mdw-theme" mdw-surface="card" value="600">600</option>
+            <option class="mdw-theme" mdw-surface="card" value="700">700</option>
+            <option class="mdw-theme" mdw-surface="card" value="800">800</option>
+            <option class="mdw-theme" mdw-surface="card" value="900">900</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">Tone</div>
+            </div>
+          </div>
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="color.min.js"></script>