@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/docs/pages/selection.eta

@@ -0,0 +1,111 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'selection'}) %>
+<div class="mdw-grid" mdw-stretch>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="mdw-grid__content">
+      <div class="render-fill">
+        <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'teal 700', dark:true }) %>
+        <div class="mdw-appbar mdw-theme" mdw-surface="teal 500" mdw-dark>
+          <div class="mdw-appbar__action">
+            <div class="mdw-appbar__title">Styled HTMLInputElement</div>
+          </div>
+        </div>
+        <div class="content">
+          <div class="display-flex" style="padding:16px;">
+            <%~ includeFile(T, { selection: { ink:'blue', checked:true, prefix:true, type:'switch' , text:'Switch' }}) %>
+          </div>
+          <div class="display-flex" style="padding:16px;">
+            <%~ includeFile(T, { selection: { ink:'blue', checked:true, prefix:true , text:'Prefixed' }}) %>
+          </div>
+          <div class="display-flex" style="padding:16px;">
+            <%~ includeFile(T, { selection: { ink:'teal', checked:true , text:'Suffixed' }}) %>
+          </div>
+          <div class="display-flex" style="padding:16px;">
+            <%~ includeFile(T, { selection: { ink:'teal', checked:true, disabled:true, text:'Disabled' }}) %>
+          </div>
+          <div class="display-flex" style="padding:16px;">
+            <%~ includeFile(T, { selection: { ink:'teal', type:'radio', name:'test', checked:true , text:'Option A' }}) %>
+          </div>
+          <div class="display-flex" style="padding:16px;">
+            <%~ includeFile(T, { selection: { ink:'teal', type:'radio', name:'test' , text:'Option B' }}) %>
+          </div>
+          <div class="display-flex" style="padding:16px;">
+            <%~ includeFile(T, { selection: { ink:'teal', type:'radio', name:'test', disabled:true , text:'Option C' }}) %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="mdw-grid__content">
+      <div class="render-fill">
+        <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'teal 700', dark:true }) %>
+        <div class="mdw-appbar mdw-theme" mdw-surface="teal 500" mdw-dark>
+          <div class="mdw-appbar__action">
+            <div class="mdw-appbar__title">aria-checked (JS)</div>
+          </div>
+        </div>
+        <div class="content">
+          <div class="mdw-list__subheader mdw-theme" id="docs-selection-subheader1" mdw-ink="medium">Switch</div>
+          <ul class="mdw-list" role="listbox" aria-labelledby="docs-selection-subheader1">
+            <li class="mdw-list__item">
+              <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="true">
+                <div class="mdw-list__text mdw-selection__label">Android Switch</div>
+                <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="teal" mdw-switch></div>
+              </a>
+            </li>
+            <li class="mdw-list__item">
+              <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="false" aria-disabled="true">
+                <div class="mdw-list__text mdw-selection__label">Android Switch Disabled</div>
+                <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="teal contrast" mdw-switch></div>
+              </a>
+            </li>
+          </ul>
+          <div class="mdw-list__subheader mdw-theme" mdw-ink="medium">.mdw-list[role="radiogroup"]</div>
+          <ul class="mdw-list mdw-selection__radio-group" role="radiogroup">
+            <li class="mdw-list__item">
+              <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="true">
+                <div class="mdw-list__text mdw-selection__label">
+                  <div class="mdw-list__text-line">Option 1</div>
+                  <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">Description</div>
+                </div>
+                <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="teal" mdw-radio></div>
+              </a>
+            </li>
+            <li class="mdw-list__item">
+              <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="false">
+                <div class="mdw-list__text mdw-selection__label">
+                  <div class="mdw-list__text-line">Option 2</div>
+                  <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">Description</div>
+                </div>
+                <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="blue" mdw-radio></div>
+              </a>
+            </li>
+          </ul>
+          <div class="mdw-list__subheader mdw-theme" mdw-ink="medium">Multiple check</div>
+          <ul class="mdw-list" role="listbox" aria-multiselectable="true">
+            <li class="mdw-list__item">
+              <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="true">
+                <div class="mdw-list__text mdw-selection__label">Option 1</div>
+                <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="teal" mdw-checkbox></div>
+              </a>
+            </li>
+            <li class="mdw-list__item">
+              <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="true">
+                <div class="mdw-list__text mdw-selection__label">Option 2</div>
+                <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="blue" mdw-checkbox></div>
+              </a>
+            </li>
+            <li class="mdw-list__item">
+              <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="false">
+                <div class="mdw-list__text mdw-selection__label">Option 3</div>
+                <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="warn" mdw-checkbox></div>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="selection.min.js"></script>

package/docs/pages/selection.js

@@ -0,0 +1,13 @@
+import * as List from '../../components/list/index.js';
+import * as Selection from '../../components/selection/index.js';
+import * as SelectionRadioGroup from '../../components/selection/radiogroup.js';
+import { iterateArrayLike } from '../../core/dom.js';
+
+/** @return {void} */
+function initializeMdwComponents() {
+  iterateArrayLike(document.getElementsByClassName('mdw-selection'), Selection.attach);
+  iterateArrayLike(document.getElementsByClassName('mdw-selection__radio-group'), SelectionRadioGroup.attach);
+  iterateArrayLike(document.getElementsByClassName('mdw-list'), List.attach);
+}
+
+initializeMdwComponents();

package/docs/pages/selection.pug

@@ -0,0 +1,74 @@
+include ../_mixins.pug
+
++header("selection")
+  .mdw-grid(mdw-stretch)
+    .mdw-grid__item(mdw-colspan="4")
+      .mdw-grid__content
+        .render-fill
+          +androidstatusbar('teal 700', 'dark')
+          .mdw-appbar.mdw-theme(mdw-surface="teal 500" mdw-dark)
+            .mdw-appbar__action
+              .mdw-appbar__title Styled HTMLInputElement
+          .content
+            .display-flex(style="padding:16px")
+              +mdwSelection({ink:'blue', checked:true, prefix:true, type:'switch' }) Switch
+            .display-flex(style="padding:16px")
+              +mdwSelection({ink:'blue', checked:true, prefix:true }) Prefixed
+            .display-flex(style="padding:16px")
+              +mdwSelection({ink:'teal', checked:true }) Suffixed
+            .display-flex(style="padding:16px")
+              +mdwSelection({ink:'teal', checked:true, disabled:true}) Disabled
+            .display-flex(style="padding:16px")
+              +mdwSelection({ink:'teal', type:'radio', name:'test', checked:true }) Option A
+            .display-flex(style="padding:16px")
+              +mdwSelection({ink:'teal', type:'radio', name:'test' }) Option B
+            .display-flex(style="padding:16px")
+              +mdwSelection({ink:'teal', type:'radio', name:'test', disabled:true }) Option C
+    .mdw-grid__item(mdw-colspan="4")
+      .mdw-grid__content
+        .render-fill
+          +androidstatusbar('teal 700', 'dark')
+          .mdw-appbar.mdw-theme(mdw-surface="teal 500" mdw-dark)
+            .mdw-appbar__action
+              .mdw-appbar__title aria-checked (JS)
+          .content
+            div#docs-selection-subheader1.mdw-list__subheader.mdw-theme(mdw-ink="medium") Switch
+            ul.mdw-list(role="listbox" aria-labelledby='docs-selection-subheader1')
+              li.mdw-list__item
+                a.mdw-list__content.mdw-selection.mdw-overlay(aria-checked="true")
+                  .mdw-list__text.mdw-selection__label Android Switch
+                  .mdw-list__secondary.mdw-selection__icon.mdw-theme(mdw-ink="teal" mdw-switch)
+              li.mdw-list__item
+                a.mdw-list__content.mdw-selection.mdw-overlay(aria-checked="false" aria-disabled="true")
+                  .mdw-list__text.mdw-selection__label Android Switch Disabled
+                  .mdw-list__secondary.mdw-selection__icon.mdw-theme(mdw-ink="teal contrast" mdw-switch)
+            .mdw-list__subheader.mdw-theme(mdw-ink="medium") .mdw-list[role="radiogroup"]
+            ul.mdw-list.mdw-selection__radio-group(role="radiogroup")
+              li.mdw-list__item
+                a.mdw-list__content.mdw-selection.mdw-overlay(aria-checked="true")
+                  .mdw-list__text.mdw-selection__label
+                    .mdw-list__text-line Option 1
+                    .mdw-list__text-line.mdw-theme(mdw-ink="medium") Description
+                  .mdw-list__secondary.mdw-selection__icon.mdw-theme(mdw-ink="teal" mdw-radio)
+              li.mdw-list__item
+                a.mdw-list__content.mdw-selection.mdw-overlay(aria-checked="false")
+                  .mdw-list__text.mdw-selection__label
+                    .mdw-list__text-line Option 2
+                    .mdw-list__text-line.mdw-theme(mdw-ink="medium") Description
+                  .mdw-list__secondary.mdw-selection__icon.mdw-theme(mdw-ink="blue" mdw-radio)
+            .mdw-list__subheader.mdw-theme(mdw-ink="medium") Multiple check
+            ul.mdw-list(role="listbox" aria-multiselectable="true")
+              li.mdw-list__item
+                a.mdw-list__content.mdw-selection.mdw-overlay(aria-checked="true")
+                  .mdw-list__text.mdw-selection__label Option 1
+                  .mdw-list__secondary.mdw-selection__icon.mdw-theme(mdw-ink="teal" mdw-checkbox)
+              li.mdw-list__item
+                a.mdw-list__content.mdw-selection.mdw-overlay(aria-checked="true")
+                  .mdw-list__text.mdw-selection__label Option 2
+                  .mdw-list__secondary.mdw-selection__icon.mdw-theme(mdw-ink="blue" mdw-checkbox)
+              li.mdw-list__item
+                a.mdw-list__content.mdw-selection.mdw-overlay(aria-checked="false")
+                  .mdw-list__text.mdw-selection__label Option 3
+                  .mdw-list__secondary.mdw-selection__icon.mdw-theme(mdw-ink="warn" mdw-checkbox)
+
+  script(src='selection.min.js')

package/docs/pages/slider.eta

@@ -0,0 +1,23 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'slider'}) %>
+<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">Sliders allow users to make selections from a range of values.</h5>
+    <p class="mdw-type">Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.</p>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="component-sample">
+      <div class="component-sample__container">
+        <label class="mdw-slider mdw-theme" mdw-ink="secondary">
+          <input class="mdw-slider__input" type="range" list="sample-list" />
+          <datalist id="sample-list">
+            <option value="0" label="None"></option>
+            <option value="50" label="Half"></option>
+            <option value="100" label="All"></option>
+          </datalist>
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="slider.min.js"></script>

package/docs/pages/slider.pug

@@ -0,0 +1,17 @@
+include ../_mixins.pug
+
++header("slider")
+  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
+    .mdw-grid__item(mdw-colspan="100%")
+      h5.mdw-type(mdw-baseline-next="36") Sliders allow users to make selections from a range of values.
+      p.mdw-type Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.
+    .mdw-grid__item(mdw-colspan="4")
+      .component-sample
+        .component-sample__container
+          label.mdw-slider.mdw-theme(mdw-ink="secondary")
+            input.mdw-slider__input(type="range" list="sample-list")
+            datalist#sample-list
+              option(value=0 label="None")
+              option(value=50 label="Half")
+              option(value=100 label="All")
+  script(src='slider.min.js')

package/docs/pages/snackbar.eta

@@ -0,0 +1,83 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'snackbar'}) %>
+<div class="mdw-grid" mdw-margin-top mdw-margin-bottom>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <h5 class="mdw-type" mdw-baseline-next="36">Snackbars provide brief messages about app processes at the bottom of the screen.</h5>
+    <p class="mdw-type">Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.</p>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <div class="mdw-grid__content component-sample" style="padding:0;">
+      <div class="mdw-grid" style="width:100%;height:100%;">
+        <div class="mdw-grid__item" mdw-colspan="100%">
+          <div>
+            <%~ includeFile(T, { button: {  ink:'secondary' , text:'Create New' }}) %>
+          </div>
+        </div>
+        <div class="mdw-grid__item" mdw-colspan="100%">
+          <div class="mdw-snackbar__wrapper">
+            <div class="mdw-snackbar__container">
+              <div class="mdw-snackbar mdw-theme" aria-hidden="false" mdw-surface="background 900" mdw-dark>
+                <span>Short message snackbar.</span>
+                <%~ includeFile(T, { button: { ink:'secondary', text:'Action' }}) %>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="mdw-grid__item" mdw-colspan="100%">
+          <div class="mdw-snackbar__wrapper">
+            <div class="mdw-snackbar__container js-sample"></div>
+          </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', 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">Text</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'text', type:'radio', value:'short', checked:true, text:'Short' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'text', type:'radio', value:'long', text:'Long' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'text', type:'radio', value:'line-break' , text:'Explicit line-break' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Button</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'button', type:'radio', value:'none', text:'None' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'button', type:'radio', value:'short', checked:true, text:'Short' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'button', type:'radio', value:'long' , text:'Long' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Visibility</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'visibility', type:'radio', value:'show', checked:true, text:'Show' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'visibility', type:'radio', value:'hide', text:'Hide' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Position</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'position', type:'radio', value:'auto', checked:true, text:'Start (Default)' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'position', type:'radio', value:'center', text:'Center' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'position', type:'radio', value:'end', text:'End' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Options</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'stacked', text:'Stacked' }}) %>
+    </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="display-flex" flex-column>
+      <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>
+  <div class="mdw-grid__item" mdw-colspan="6">
+    <div class="display-flex" flex-column>
+      <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>
+<script src="snackbar.min.js"></script>

package/docs/pages/snackbar.js

@@ -0,0 +1,158 @@
+import * as Snackbar from '../../components/snackbar/index.js';
+import { iterateArrayLike } from '../../core/dom.js';
+import { convertElementToCode } from '../_sample-utils.js';
+
+/** @type {HTMLElement} */
+let sampleComponent;
+
+/** @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;
+
+  const snackbar = sampleComponent.getElementsByClassName('mdw-snackbar')[0];
+
+  // Strip JS related elements and attributes
+  Snackbar.detach(snackbar);
+
+  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
+  htmlCodeElement.textContent = convertElementToCode(sampleComponent);
+
+  // Reattach JS if requested
+  if (useJS) {
+    Snackbar.attach(snackbar);
+  }
+
+  const jsCodeElement = document.getElementsByClassName('component-js')[0];
+  jsCodeElement.textContent = [
+    'Snackbar.create({',
+    "  text: 'Required text.',",
+    "  buttonText: 'Optional button text',",
+    "  buttonInk: 'secondary',",
+    '  stacked: false,',
+    '  autoHide: 4,',
+    '  autoDestroy: true,',
+    "  parent: document.getElementsByClassName('.mdw-snackbar__container')[0],",
+    '  show: true,',
+    '  skipQueue: false',
+    '})',
+  ].join('\n');
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onOptionChange(event) {
+  const { name, value, checked } = event.target;
+  const snackbar = sampleComponent.getElementsByClassName('mdw-snackbar')[0];
+  const span = sampleComponent.getElementsByTagName('span')[0];
+  let buttonElement = sampleComponent.getElementsByClassName('mdw-button')[0];
+  switch (name) {
+    case 'stacked':
+      if (checked) {
+        snackbar.setAttribute('mdw-stacked', '');
+      } else {
+        snackbar.removeAttribute('mdw-stacked');
+      }
+      break;
+    case 'text':
+      switch (value) {
+        case 'short':
+          span.textContent = 'Short message snackbar.';
+          break;
+        case 'long':
+          span.textContent = 'Long message snackbar that wraps text on smaller screens.';
+          break;
+        case 'line-break':
+          span.textContent = 'Two-line message\n with explicit line break.';
+          break;
+        default:
+      }
+      break;
+    case 'visibility':
+      switch (value) {
+        default:
+        case 'show':
+          snackbar.setAttribute('aria-hidden', 'false');
+          break;
+        case 'hide':
+          snackbar.setAttribute('aria-hidden', 'true');
+          break;
+      }
+      break;
+    case 'autohide':
+      switch (value) {
+        case 'none':
+          snackbar.removeAttribute('mdw-autohide');
+          break;
+        case '4':
+          snackbar.setAttribute('mdw-autohide', '');
+          break;
+        default:
+          snackbar.setAttribute('mdw-autohide', value);
+          break;
+      }
+      break;
+    case 'position':
+      switch (value) {
+        default:
+        case 'start':
+          sampleComponent.removeAttribute('mdw-position');
+          break;
+        case 'center':
+          sampleComponent.setAttribute('mdw-position', 'center');
+          break;
+        case 'end':
+          sampleComponent.setAttribute('mdw-position', 'end');
+          break;
+      }
+      break;
+    case 'button':
+      if (value === 'none') {
+        if (buttonElement) {
+          buttonElement.parentElement.removeChild(buttonElement);
+        }
+        break;
+      }
+      if (!buttonElement) {
+        buttonElement = document.createElement('a');
+        buttonElement.classList.add('mdw-button');
+        buttonElement.classList.add('mdw-theme');
+        buttonElement.setAttribute('mdw-ink', 'secondary');
+        snackbar.appendChild(buttonElement);
+      }
+      switch (value) {
+        case 'short':
+          buttonElement.textContent = 'Action';
+          break;
+        case 'long':
+          buttonElement.textContent = 'Longer Action Text';
+          break;
+        default:
+      }
+      break;
+    default:
+  }
+  updateSampleCode();
+}
+
+/** @return {void} */
+function setupComponentOptions() {
+  sampleComponent = document.querySelector('.mdw-snackbar__container');
+  /** @type {HTMLElement} */
+  const jsSnackbarContainer = (document.querySelector('.mdw-snackbar__container.js-sample'));
+  document.querySelector('.component-sample .mdw-button').addEventListener('click', () => {
+    Snackbar.create({
+      text: `Snackbar created at: ${new Date().toLocaleTimeString()}`,
+      parent: jsSnackbarContainer,
+    });
+  });
+  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
+    el.addEventListener('change', onOptionChange);
+  });
+}
+
+setupComponentOptions();
+updateSampleCode();

package/docs/pages/snackbar.pug

@@ -0,0 +1,60 @@
+include ../_mixins.pug
+
++header("snackbar")
+  .mdw-grid(mdw-margin-top mdw-margin-bottom)
+    .mdw-grid__item(mdw-colspan="100%")
+      h5.mdw-type(mdw-baseline-next="36") Snackbars provide brief messages about app processes at the bottom of the screen.
+      p.mdw-type Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.
+    .mdw-grid__item(mdw-colspan="100%")
+      .mdw-grid__content.component-sample(style="padding:0")
+          .mdw-grid(style="width:100%;height:100%")
+            .mdw-grid__item(mdw-colspan="100%")
+              div
+                +mdwButton({ ink:'secondary' }) Create New
+            .mdw-grid__item(mdw-colspan="100%")
+              .mdw-snackbar__wrapper
+                .mdw-snackbar__container
+                  .mdw-snackbar.mdw-theme(aria-hidden="false" mdw-surface="background 900" mdw-dark)
+                    span Short message snackbar.
+                    +mdwButton({ink:'secondary'}) Action
+            .mdw-grid__item(mdw-colspan="100%")
+              .mdw-snackbar__wrapper
+                .mdw-snackbar__container.js-sample
+    .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', checked:true}) Optional
+        +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'none' }) None
+      .mdw-type(mdw-style="subtitle") Text
+      .docs-option-list
+        +mdwSelection({ink:'secondary', name:'text', type:'radio', value:'short', checked:true}) Short
+        +mdwSelection({ink:'secondary', name:'text', type:'radio', value:'long'}) Long
+        +mdwSelection({ink:'secondary', name:'text', type:'radio', value:'line-break' }) Explicit line-break
+      .mdw-type(mdw-style="subtitle") Button
+      .docs-option-list
+        +mdwSelection({ink:'secondary', name:'button', type:'radio', value:'none'}) None
+        +mdwSelection({ink:'secondary', name:'button', type:'radio', value:'short', checked:true}) Short
+        +mdwSelection({ink:'secondary', name:'button', type:'radio', value:'long' }) Long
+      .mdw-type(mdw-style="subtitle") Visibility
+      .docs-option-list
+        +mdwSelection({ink:'secondary', name:'visibility', type:'radio', value:'show', checked:true}) Shos
+        +mdwSelection({ink:'secondary', name:'visibility', type:'radio', value:'hide'}) Hide
+      .mdw-type(mdw-style="subtitle") Position
+      .docs-option-list
+        +mdwSelection({ink:'secondary', name:'position', type:'radio', value:'auto', checked:true}) Start (Default)
+        +mdwSelection({ink:'secondary', name:'position', type:'radio', value:'center'}) Center
+        +mdwSelection({ink:'secondary', name:'position', type:'radio', value:'end'}) End
+      .mdw-type(mdw-style="subtitle") Options
+      .docs-option-list
+        +mdwSelection({ink:'secondary', name:'stacked'}) Stacked
+    .mdw-grid__item(mdw-colspan="100%" style="max-height:0")
+    .mdw-grid__item(mdw-colspan="6")
+      .display-flex(flex-column)
+        h6.mdw-type HTML Code
+        .mdw-card.mdw-theme.component-code.component-html(mdw-surface="card" mdw-border-ink)
+    .mdw-grid__item(mdw-colspan="6")
+      .display-flex(flex-column)
+        h6.mdw-type Javascript Code
+        .mdw-card.mdw-theme.component-code.component-js(mdw-surface="card" mdw-border-ink)
+  script(src='snackbar.min.js')