@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/docs/pages/card.pug

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

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

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

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

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