@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/docs/pages/bottomnav.js

@@ -1,118 +0,0 @@
-import * as BottomNav from '../../components/bottomnav/index.js';
-import * as BottomNavItem from '../../components/bottomnav/item.js';
-import * as Button from '../../components/button/index.js';
-import { setTextNode } from '../../core/dom.js';
-import { convertElementToCode } from '../_sample-utils.js';
-
-/** @return {void} */
-function initializeSampleComponents() {
-  for (const element of document.querySelectorAll('.mdw-bottomnav')) {
-    BottomNav.attach(element);
-  }
-}
-
-/** @type {HTMLElement} */
-let sampleComponent;
-
-/** @return {void} */
-function updateSampleCode() {
-  // Strip JS related elements and attributes
-  BottomNav.detach(sampleComponent);
-  sampleComponent.removeAttribute('role');
-  for (const item of sampleComponent.getElementsByClassName('mdw-bottomnav__item')) {
-    BottomNavItem.detach(item);
-    item.classList.remove('mdw-ripple');
-    item.classList.remove('mdw-overlay');
-    item.removeAttribute('mdw-overlay-off');
-    item.removeAttribute('role');
-  }
-
-  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
-  setTextNode(htmlCodeElement, convertElementToCode(
-    sampleComponent,
-    document.getElementById('usePug').getAttribute('aria-pressed') === 'true',
-  ));
-
-  // Reattach JS if requested
-  BottomNav.attach(sampleComponent);
-
-  const jsCodeElement = document.getElementsByClassName('component-js')[0];
-  jsCodeElement.textContent = 'mdw.BottomNav.attach(bottomNavElement);';
-}
-
-/** @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 } = /** @type {HTMLInputElement} */ (event.target);
-  switch (name) {
-    case 'ink':
-      switch (value) {
-        case 'default':
-          for (const el of sampleComponent.getElementsByClassName('mdw-bottomnav__item')) el.removeAttribute('mdw-ink');
-          break;
-        default:
-          for (const el of sampleComponent.getElementsByClassName('mdw-bottomnav__item')) el.setAttribute('mdw-ink', value);
-          break;
-      }
-      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;
-    default:
-  }
-  updateSampleCode();
-}
-
-/** @return {void} */
-function setupComponentOptions() {
-  sampleComponent = document.querySelector('.component-sample .mdw-bottomnav');
-  BottomNav.attach(sampleComponent);
-  for (const el of document.querySelectorAll('input[name]')) {
-    el.addEventListener('change', onOptionChange);
-  }
-}
-
-initializeSampleComponents();
-setupComponentOptions();
-setupPugButton();
-updateSampleCode();

package/docs/pages/button.eta

@@ -1,124 +0,0 @@
-
-<% var T = '../../templates/index.eta' %>
-<% layout('../_partials/_header.eta', {page: 'button'}) %>
-<div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-stretch>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <div class="mdw-grid__content">
-      <h5 class="mdw-type" mdw-baseline-next="36">Buttons communicate the action that will occur when the user touches them.</h5>
-      <p class="mdw-type">Material buttons trigger an ink reaction on press. They may display text, imagery, or both.</p>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="6">
-    <div class="mdw-grid__content">
-      <div class="component-sample">
-        <div class="display-flex"><a class="mdw-button mdw-theme" mdw-ink="secondary">Button</a></div>
-      </div>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="6">
-    <div class="mdw-grid__content">
-      <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">Overlay</div>
-      <div class="docs-option-list">
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'overlay-hover', checked:true, text: 'Hover' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'overlay-focus', checked:true, text: 'Focus' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'overlay-activated', checked:true, text: 'Activated' }}) %>
-      </div>
-      <div class="mdw-type" mdw-style="subtitle">Options</div>
-      <div class="docs-option-list">
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'icon', text: 'Icon' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'raised', text: 'Raised' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'ripple', checked:true, text: 'Ripple' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'disabled', text: 'Disabled' }}) %>
-      </div>
-      <div class="mdw-type" mdw-style="subtitle">Outline</div>
-      <div class="docs-option-list">
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'outline', type:'radio', value:'none', checked:true, text: 'None' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'outline', type:'radio', value:'default', text: 'Default' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'outline', type:'radio', value:'', text: 'Ink' }}) %>
-      </div>
-      <div class="mdw-type" mdw-style="subtitle">Activated Toggle</div>
-      <div class="docs-option-list">
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'toggle', type:'radio', value:'', checked:true, text: 'None' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'toggle', type:'radio', value:'false', text: 'Off' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'toggle', type:'radio', value:'true', text: 'On' }}) %>
-      </div>
-      <div class="mdw-type" mdw-style="subtitle">Ink</div>
-      <div class="docs-option-list">
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'ink', type:'radio', value:'default', text: 'Default' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'ink', type:'radio', value:'primary', text: 'Primary' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'ink', type:'radio', value:'secondary', checked:true, text: 'Secondary' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'ink', type:'radio', value:'warn contrast', text: 'Warn Contrast' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'ink', type:'radio', value:'purple', text: 'Purple' }}) %>
-      </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:'none', checked:true, text: 'Default' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'surface', type:'radio', value:'primary 500 dark', text: 'Primary (Dark)' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'surface', type:'radio', value:'secondary 100 light', text: 'Secondary (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 class="mdw-type" mdw-style="subtitle">HTML Element Type</div>
-      <div class="docs-option-list">
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'htmltype', type:'radio', value:'a', checked:true, text: 'HTMLAnchorElement' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'htmltype', type:'radio', value:'button', text: 'HTMLButtonElement' }}) %>
-        <%~ includeFile(T, { selection: {ink:'secondary', name:'htmltype', type:'radio', value:'div', text: 'HTMLDivElement' }}) %>
-      </div>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="100%" style="max-height:0;"></div>
-  <div class="mdw-grid__item" mdw-colspan="6">
-    <div class="mdw-grid__content">
-      <h6 class="mdw-type">HTML Code</h6>
-      <div class="mdw-card mdw-theme component-code component-html" mdw-surface="card" mdw-border-ink>
-        <%~ includeFile(T, { button: { icon:true, ink:'secondary', id:'usePug', text: 'PUG', attributes: { 'aria-pressed':"false", 'mdw-overlay-off':"activated" }}}) %>
-      </div>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="6">
-    <div class="mdw-grid__content">
-      <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>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <div class="mdw-grid__content">
-      <h6 class="mdw-type">Samples</h6>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="6">
-    <div class="mdw-grid__content">
-      <div class="render-fill mdw-theme">
-        <%~ includeFile('../_partials/_androidstatusbar.eta') %>
-        <%~ includeFile('../_partials/_appbar.eta', {text: 'CSS Only'}) %>
-        <div class="content mdw-theme" style="padding: 16px 0;" mdw-surface="binary">
-          <div>
-            <%~ includeFile('../_partials/_buttontest.eta') %>
-          </div>
-        </div>
-        <%~ includeFile('../_partials/_androidnavbar.eta') %>
-      </div>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="6">
-    <div class="mdw-grid__content">
-      <div class="render-fill js mdw-theme">
-        <%~ includeFile('../_partials/_androidstatusbar.eta') %>
-        <%~ includeFile('../_partials/_appbar.eta', {text: 'Javascript'}) %>
-        <div class="content mdw-theme" style="padding: 16px 0;" mdw-surface="binary">
-          <div>
-            <%~ includeFile('../_partials/_buttontest.eta') %>
-          </div>
-        </div>
-        <%~ includeFile('../_partials/_androidnavbar.eta') %>
-      </div>
-    </div>
-  </div>
-</div>
-<script src="button.min.js"></script>

package/docs/pages/button.js

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

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