@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/docs/pages/card.pug

@@ -0,0 +1,74 @@
+include ../_mixins.pug
+
++header("card")
+  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
+    .mdw-grid__item(mdw-colspan="100%")
+      h5.mdw-type(mdw-baseline-next="36") Cards contain content and actions about a single subject.
+      p.mdw-type(mdw-baseline-next="36") Cards are surfaces that display content and actions on a single topic.
+      p.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.
+    .mdw-grid__item(mdw-colspan="6")
+      .mdw-grid__content.component-sample
+        .display-flex
+          .mdw-card.mdw-theme(mdw-raised="focus-within" mdw-surface="card" mdw-border-ink)
+            +mdwButton().mdw-card__button
+            .mdw-card__start
+              .mdw-card__thumbnail.material-icons(style="font-size:40px") account_circle
+            .mdw-card__end(style="margin:8px 0")
+              +mdwButton({ icon: true }).material-icons clear
+            h6.mdw-card__header(mdw-two-line) Title goes here
+            .mdw-card__subheader Secondary text
+            .mdw-card__media(mdw-ratio="16:9")
+              img.mdw-card__image(src="https://free-images.com/md/f673/sunset_sky_red_gold_0.jpg")
+            .mdw-card__supporting-text Grayhound divisively hello coldly wonderfully marginally far upon excluding.
+            .mdw-card__actions
+                +mdwButton({ ink:'secondary' }) Action 1
+                +mdwButton({ ink:'secondary' }) Action 2
+                span
+                +mdwButton({ icon: true }).material-icons more_vert
+    .mdw-grid__item(mdw-colspan="4")
+      .mdw-type(mdw-style="subtitle") Javascript
+      .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
+      .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
+      .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
+      .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
+      .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
+      .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
+      .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)
+        +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'warn 200 light'}) Warn 200 (Light)
+        +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'green 700 dark'}) Green 700 (Dark)
+    .mdw-grid__item(mdw-colspan="100%" style="max-height:0")
+    .mdw-grid__item(mdw-colspan="6")
+      h6.mdw-type HTML Code
+      .mdw-card.mdw-theme.component-code.component-html(mdw-surface="card")
+        +mdwButton({ icon:true, ink:'secondary' })#usePug(aria-pressed="false" mdw-overlay-off="activated") PUG
+  script(src='card.min.js')

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/pages/chip.js

@@ -0,0 +1,82 @@
+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;
+  const jsOptional = document.querySelector('input[name="javascript"][value="optional"]').checked;
+  const useJS = jsRequired || jsOptional;
+
+  // 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);
+
+  // Reattach JS if requested
+  if (useJS) {
+    iterateArrayLike(sampleComponents, Chip.attach);
+  }
+
+  const jsCodeElement = document.getElementsByClassName('component-js')[0];
+  jsCodeElement.textContent = 'mdw.Chip.attach(chipElement);';
+}
+
+/** @return {void} */
+function initializeSampleComponents() {
+  iterateArrayLike(document.querySelectorAll('.js .mdw-tab'), Chip.attach);
+  iterateArrayLike(document.getElementsByTagName('form'), (formElement) => {
+    formElement.reset();
+  });
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onOptionChange(event) {
+  /** @type {HTMLInputElement} */
+  const inputElement = (event.currentTarget);
+  const { name, value, checked } = inputElement;
+
+  switch (name) {
+    case 'framework':
+      switch (value) {
+        case 'javascript':
+          break;
+        case 'css':
+          break;
+        default:
+      }
+      break;
+    case 'outlined': {
+      iterateArrayLike(sampleComponents, (el) => {
+        if (checked) {
+          el.setAttribute('mdw-outlined', '');
+        } else {
+          el.removeAttribute('mdw-outlined');
+        }
+      });
+      break;
+    }
+    default:
+  }
+  updateSampleCode();
+}
+
+/** @return {void} */
+function setupComponentOptions() {
+  sampleComponents = document.querySelectorAll('.component-sample .mdw-chip');
+  iterateArrayLike(document.querySelectorAll('.demo-options input[name]'), (el) => {
+    el.addEventListener('change', onOptionChange);
+  });
+}
+
+initializeSampleComponents();
+setupComponentOptions();
+updateSampleCode();

package/docs/pages/chip.pug

@@ -0,0 +1,91 @@
+include ../_mixins.pug
+
++header("chip")
+  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch).docs-chip
+    .mdw-grid__item(mdw-colspan="100%")
+      h5.mdw-type(mdw-baseline-next="36") Chips are compact elements that represent an input, attribute, or action.
+      p.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.
+    .mdw-grid__item(mdw-colspan="6")
+      .mdw-grid__content.component-sample
+        .component-sample__container
+          div
+            p Action
+              .mdw-chip(mdw-type="action")
+                .mdw-chip__item
+                  .mdw-chip__input
+                  .mdw-chip__text Send Message
+                .mdw-chip__item
+                  .mdw-chip__input
+                  .mdw-chip__text Call
+            p Input
+            .mdw-chip(mdw-type="input")
+              .mdw-chip__item
+                .mdw-chip__input
+                .mdw-chip__text Portland
+                .mdw-chip__thumbnail.material-icons place
+                .mdw-chip__remove.material-icons cancel
+              .mdw-chip__item
+                .mdw-chip__input
+                .mdw-chip__text Biking
+                .mdw-chip__thumbnail.material-icons directions_bike
+                .mdw-chip__remove.material-icons cancel
+            p Choice
+            form.mdw-chip.mdw-theme(mdw-type="choice" mdw-ink="secondary")
+              label.mdw-chip__item
+                input.mdw-chip__input(type="radio" name="sample" value="a")
+                .mdw-chip__text Apple
+              label.mdw-chip__item
+                input.mdw-chip__input(type="radio" name="sample" value="b")
+                .mdw-chip__text Banana
+              label.mdw-chip__item
+                input.mdw-chip__input(type="radio" name="sample" value="c")
+                .mdw-chip__text Cranberry
+              label.mdw-chip__item
+                input.mdw-chip__input(type="radio" name="sample" value="d")
+                .mdw-chip__text Dragon Fruit
+            p Filter
+            div
+              .mdw-chip(mdw-type="filter")
+                label.mdw-chip__item
+                  input.mdw-chip__input(type="checkbox")
+                  .mdw-chip__text Elevator
+                  .mdw-chip__checkmark.material-icons check
+                label.mdw-chip__item
+                  input.mdw-chip__input(type="checkbox")
+                  .mdw-chip__text Washer/Dryer
+                  .mdw-chip__checkmark.material-icons check
+                label.mdw-chip__item
+                  input.mdw-chip__input(type="checkbox")
+                  .mdw-chip__text Fireplace
+                  .mdw-chip__checkmark.material-icons check
+                label.mdw-chip__item
+                  input.mdw-chip__input(type="checkbox")
+                  .mdw-chip__text Wheelchair access
+                  .mdw-chip__checkmark.material-icons check
+                label.mdw-chip__item
+                  input.mdw-chip__input(type="checkbox")
+                  .mdw-chip__text Dogs ok
+                  .mdw-chip__checkmark.material-icons check
+                label.mdw-chip__item
+                  input.mdw-chip__input(type="checkbox")
+                  .mdw-chip__text Cats ok
+                  .mdw-chip__checkmark.material-icons check
+    .mdw-grid__item(mdw-colspan="4").demo-options
+      .mdw-type(mdw-style="subtitle") Javascript
+      .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
+      .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")
+      h6.mdw-type HTML Code
+      .mdw-card.mdw-theme.component-code.component-html(mdw-surface="card" mdw-border-ink)
+    .mdw-grid__item(mdw-colspan="100%")
+      h6.mdw-type Javascript Code
+      .mdw-card.mdw-theme.component-code.component-js(mdw-surface="card" mdw-border-ink)
+    .mdw-grid__item(mdw-colspan="100%")
+      h6.mdw-type Samples
+  script(src='chip.min.js')

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>