@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/docs/pages/button.js

@@ -0,0 +1,224 @@
+import * as Button from '../../components/button/index.js';
+import { setTextNode } from '../../core/dom.js';
+import * as Overlay from '../../core/overlay/index.js';
+import * as Ripple from '../../core/ripple/index.js';
+import { convertElementToCode } from '../_sample-utils.js';
+
+/** @return {void} */
+function initializeSampleComponents() {
+  for (const element of document.querySelectorAll('.js .mdw-button')) { Button.attach(element); }
+}
+
+/** @type {HTMLElement} */
+let sampleComponent;
+
+/**
+ * @param {string} name
+ * @param {boolean} value
+ * @return {void}
+ */
+function toggleOverlayOption(name, value) {
+  const attr = sampleComponent.getAttribute('mdw-overlay-off') || '';
+  if (!attr) {
+    if (!value) {
+      return;
+    }
+    sampleComponent.setAttribute('mdw-overlay-off', name);
+    return;
+  }
+  if (value) {
+    if (attr.includes(name)) {
+      return;
+    }
+    sampleComponent.setAttribute('mdw-overlay-off', `${attr} ${name}`);
+    return;
+  }
+  if (!attr.includes(name)) {
+    return;
+  }
+  sampleComponent.setAttribute('mdw-overlay-off', attr.replace(name, '').trim());
+}
+
+/** @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
+  Button.detach(sampleComponent);
+
+  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
+  setTextNode(htmlCodeElement, convertElementToCode(sampleComponent,
+    document.getElementById('usePug').getAttribute('aria-pressed') === 'true'));
+
+  // Reattach JS if requested
+  if (useJS) {
+    Button.attachCore(sampleComponent);
+    if (sampleComponent.classList.contains('mdw-ripple')) {
+      Ripple.attach(sampleComponent);
+    }
+    if (sampleComponent.classList.contains('mdw-overlay')) {
+      Overlay.attach(sampleComponent);
+    }
+  }
+
+  const jsCodeElement = document.getElementsByClassName('component-js')[0];
+  jsCodeElement.textContent = 'mdw.Button.attach(buttonElement);';
+}
+
+/** @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();
+  });
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onOptionChange(event) {
+  const { name, value, checked } = event.target;
+  let newElement;
+  switch (name) {
+    case 'raised':
+      if (checked) {
+        sampleComponent.setAttribute('mdw-raised', '');
+      } else {
+        sampleComponent.removeAttribute('mdw-raised');
+      }
+      break;
+    case 'outline':
+      switch (value) {
+        case 'none':
+          sampleComponent.removeAttribute('mdw-border-ink');
+          break;
+        default:
+          sampleComponent.setAttribute('mdw-border-ink', value);
+      }
+      break;
+    case 'activated':
+      if (checked) {
+        sampleComponent.setAttribute('mdw-activated', '');
+      } else {
+        sampleComponent.removeAttribute('mdw-activated');
+      }
+      break;
+    case 'active':
+      if (checked) {
+        sampleComponent.setAttribute('mdw-active', '');
+      } else {
+        sampleComponent.removeAttribute('mdw-active');
+      }
+      break;
+    case 'toggle':
+      if (!value) {
+        sampleComponent.removeAttribute('aria-pressed');
+      } else {
+        sampleComponent.setAttribute('aria-pressed', value);
+      }
+      break;
+    case 'disabled':
+      if (checked) {
+        sampleComponent.setAttribute('aria-disabled', 'true');
+      } else {
+        sampleComponent.removeAttribute('aria-disabled');
+      }
+      break;
+    case 'icon':
+      if (checked) {
+        sampleComponent.setAttribute('mdw-icon', '');
+        sampleComponent.classList.add('material-icons');
+        setTextNode(sampleComponent, 'favorite');
+      } else {
+        sampleComponent.removeAttribute('mdw-icon');
+        sampleComponent.classList.remove('material-icons');
+        setTextNode(sampleComponent, 'Button');
+      }
+      break;
+    case 'ink':
+      switch (value) {
+        case 'default':
+          sampleComponent.removeAttribute('mdw-ink');
+          break;
+        default:
+          sampleComponent.setAttribute('mdw-ink', value);
+          break;
+      }
+      break;
+    case 'ripple':
+      if (checked) {
+        sampleComponent.classList.add('mdw-ripple');
+      } else {
+        sampleComponent.classList.remove('mdw-ripple');
+      }
+      break;
+    case 'overlay-hover':
+    case 'overlay-focus':
+    case 'overlay-activated':
+      toggleOverlayOption(name.replace('overlay-', ''), !checked);
+      break;
+    case 'surface':
+      switch (value) {
+        case 'none':
+          sampleComponent.removeAttribute('mdw-surface');
+          sampleComponent.removeAttribute('mdw-light');
+          sampleComponent.removeAttribute('mdw-dark');
+          break;
+        default:
+          sampleComponent.setAttribute('mdw-surface', value.replace(/ (light|dark)/, ''));
+          if (!value.includes(' light')) {
+            sampleComponent.removeAttribute('mdw-light');
+          } else {
+            sampleComponent.setAttribute('mdw-light', '');
+          }
+          if (!value.includes(' dark')) {
+            sampleComponent.removeAttribute('mdw-dark');
+          } else {
+            sampleComponent.setAttribute('mdw-dark', '');
+          }
+          if (value === 'none') {
+            sampleComponent.classList.remove('mdw-theme');
+          } else {
+            sampleComponent.classList.add('mdw-theme');
+          }
+          break;
+      }
+      break;
+    case 'htmltype':
+      newElement = document.createElement(value);
+      while (sampleComponent.firstChild) {
+        newElement.appendChild(sampleComponent.firstChild);
+      }
+      for (const attr of sampleComponent.attributes) {
+        newElement.attributes.setNamedItem(attr.cloneNode());
+      }
+      sampleComponent.parentElement.replaceChild(newElement, sampleComponent);
+      sampleComponent = newElement;
+      break;
+    default:
+  }
+  updateSampleCode();
+}
+
+/** @return {void} */
+function setupComponentOptions() {
+  sampleComponent = document.querySelector('.component-sample .mdw-button');
+  Button.attach(sampleComponent);
+  for (const el of document.querySelectorAll('input[name]')) {
+    el.addEventListener('change', onOptionChange);
+  }
+}
+
+initializeSampleComponents();
+setupComponentOptions();
+setupPugButton();
+updateSampleCode();

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

@@ -0,0 +1,175 @@
+import { setTextNode } from '../../core/dom.js';
+import { convertElementToCode } from '../_sample-utils.js';
+
+/** @type {HTMLElement} */
+let sampleComponent;
+/** @type {HTMLElement} */
+let mediaElement;
+/** @type {HTMLElement} */
+let actionsElement;
+/** @type {HTMLElement} */
+let closeActionElement;
+/** @type {HTMLElement} */
+let primaryButtonElement;
+
+/** @return {void} */
+function updateSampleCode() {
+  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
+  setTextNode(htmlCodeElement, convertElementToCode(
+    sampleComponent,
+    document.getElementById('usePug').getAttribute('aria-pressed') === 'true',
+  ));
+}
+
+/** @return {void} */
+function setupPugButton() {
+  const pugButton = document.getElementById('usePug');
+  pugButton.addEventListener('click', () => {
+    if (pugButton.getAttribute('aria-pressed') === 'true') {
+      pugButton.setAttribute('aria-pressed', 'false');
+    } else {
+      pugButton.setAttribute('aria-pressed', 'true');
+    }
+    updateSampleCode();
+  });
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onOptionChange(event) {
+  const { name, value, checked } = /** @type {HTMLInputElement} */ (event.target);
+  let raiseOptions;
+  switch (name) {
+    case 'elevation':
+      sampleComponent.removeAttribute('mdw-elevation');
+      switch (value) {
+        case 'auto':
+          break;
+        default:
+          sampleComponent.setAttribute('mdw-elevation', value);
+          break;
+      }
+      break;
+    case 'raise-focus-within':
+    case 'raise-hover':
+      raiseOptions = (sampleComponent.getAttribute('mdw-raised') || '').split(' ');
+      if (checked) {
+        if (!raiseOptions.includes(name.slice('raise-'.length))) {
+          raiseOptions.push(name.slice('raise-'.length));
+        }
+      } else {
+        raiseOptions = raiseOptions.filter((o) => o !== name.slice('raise-'.length));
+      }
+      raiseOptions.sort();
+      if (raiseOptions.length) {
+        sampleComponent.setAttribute('mdw-raised', raiseOptions.join(' ').trim());
+      } else {
+        sampleComponent.removeAttribute('mdw-raised');
+      }
+      break;
+    case 'media-placement':
+      if (mediaElement.parentElement) {
+        mediaElement.remove();
+      }
+      switch (value) {
+        default:
+        case 'none':
+          break;
+        case 'top':
+          sampleComponent.insertBefore(mediaElement, sampleComponent.getElementsByClassName('mdw-card__start')[0]);
+          break;
+        case 'middle':
+          sampleComponent.insertBefore(mediaElement, sampleComponent.getElementsByClassName('mdw-card__supporting-text')[0]);
+          break;
+        case 'bottom':
+          sampleComponent.appendChild(mediaElement);
+          break;
+      }
+      break;
+    case 'media-ratio':
+      switch (value) {
+        default:
+        case 'none':
+          mediaElement.removeAttribute('mdw-ratio');
+          break;
+        case '16:9':
+          mediaElement.setAttribute('mdw-ratio', '16:9');
+          break;
+        case '3:2':
+          mediaElement.setAttribute('mdw-ratio', '3:2');
+          break;
+        case '4:3':
+          mediaElement.setAttribute('mdw-ratio', '4:3');
+          break;
+        case '1:1':
+          mediaElement.setAttribute('mdw-ratio', '1:1');
+          break;
+      }
+      break;
+    case 'primary-action':
+      if (checked) {
+        if (!primaryButtonElement.parentElement) {
+          sampleComponent.insertBefore(primaryButtonElement, sampleComponent.firstChild);
+        }
+      } else if (primaryButtonElement.parentElement) {
+        primaryButtonElement.remove();
+      }
+      break;
+    case 'secondary-actions':
+      if (checked) {
+        if (!actionsElement.parentElement) {
+          sampleComponent.appendChild(actionsElement);
+        }
+      } else if (actionsElement.parentElement) {
+        actionsElement.remove();
+      }
+      break;
+    case 'close-action':
+      if (checked) {
+        if (!closeActionElement.parentElement) {
+          sampleComponent.insertBefore(closeActionElement, sampleComponent.getElementsByClassName('mdw-card__header')[0]);
+        }
+      } else if (closeActionElement.parentElement) {
+        closeActionElement.remove();
+      }
+      break;
+    case 'surface':
+      sampleComponent.setAttribute('mdw-surface', value.replace(/ (light|dark)/, ''));
+      if (!value.includes(' light')) {
+        sampleComponent.removeAttribute('mdw-light');
+      } else {
+        sampleComponent.setAttribute('mdw-light', '');
+      }
+      if (!value.includes(' dark')) {
+        sampleComponent.removeAttribute('mdw-dark');
+      } else {
+        sampleComponent.setAttribute('mdw-dark', '');
+      }
+      if (value === 'card') {
+        sampleComponent.classList.remove('mdw-theme');
+      } else {
+        sampleComponent.classList.add('mdw-theme');
+      }
+      break;
+    default:
+  }
+  updateSampleCode();
+}
+
+/** @return {void} */
+function setupComponentOptions() {
+  sampleComponent = document.querySelector('.component-sample .mdw-card');
+  mediaElement = /** @type {HTMLElement} */ (sampleComponent.getElementsByClassName('mdw-card__media')[0]);
+  actionsElement = /** @type {HTMLElement} */ (sampleComponent.getElementsByClassName('mdw-card__actions')[0]);
+  primaryButtonElement = /** @type {HTMLElement} */ (sampleComponent.getElementsByClassName('mdw-card__button')[0]);
+  closeActionElement = /** @type {HTMLElement} */ (sampleComponent.getElementsByClassName('mdw-card__end')[0]);
+  for (const el of document.querySelectorAll('input[name]')) {
+    el.addEventListener('change', onOptionChange);
+  }
+}
+
+setupComponentOptions();
+setupPugButton();
+updateSampleCode();

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>