@shortfuse/materialdesignweb 0.3.0 → 0.4.0

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/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-src/components → docs/pages}/snackbar.js

@@ -1,6 +1,6 @@
-import { convertElementToCode } from '../_sample-utils';
-import * as Snackbar from '../../components/snackbar/index';
-import { iterateArrayLike } from '../../core/dom';
+import * as Snackbar from '../../components/snackbar/index.js';
+import { iterateArrayLike } from '../../core/dom.js';
+import { convertElementToCode } from '../_sample-utils.js';
 
 /** @type {HTMLElement} */
 let sampleComponent;

package/docs/pages/tab.eta

@@ -0,0 +1,421 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'tab'}) %>
+<div class="mdw-grid docs-tab" mdw-margin-top mdw-margin-bottom mdw-stretch>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <h5 class="mdw-type" mdw-baseline-next="36">Tabs make it easy to explore and switch between different views.</h5>
+    <p class="mdw-type">Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.</p>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="8">
+    <div class="mdw-grid__content">
+      <div class="component-sample">
+        <div class="component-sample__container">
+          <div class="mdw-tab">
+            <div class="mdw-tab__list">
+              <div class="mdw-tab__item mdw-theme mdw-overlay" mdw-ink="secondary A200" mdw-overlay-default="medium" aria-selected="true">
+                <div class="mdw-tab__icon material-icons">looks_one</div>
+                <div class="mdw-tab__label">Tab Item One</div>
+              </div>
+              <div class="mdw-tab__item mdw-theme mdw-overlay" mdw-ink="secondary A200" mdw-overlay-default="medium" aria-selected="false">
+                <div class="mdw-tab__icon material-icons">looks_two</div>
+                <div class="mdw-tab__label">Tab Item Two</div>
+              </div>
+              <div class="mdw-tab__item mdw-theme mdw-overlay" mdw-ink="secondary A200" mdw-overlay-default="medium" aria-selected="false">
+                <div class="mdw-tab__icon material-icons">looks_3</div>
+                <div class="mdw-tab__label">Tab Item Three</div>
+              </div>
+              <div class="mdw-tab__indicator mdw-theme" mdw-ink="secondary A200"></div>
+            </div>
+            <div class="mdw-tab__content mdw-theme" mdw-surface="gray 800" mdw-dark>
+              <div class="mdw-tab__panel">
+                <div style="min-height:200px;padding:20px;">
+                  <p>Sample Content One</p>
+                  <%~ includeFile(T, { button: {  borderInk:true , text:'Unfocusable when inactive' }}) %>
+                  <p>HTML Ordered List with (#) representing DOM position</p>
+                  <ol>
+                    <li class="mdw-tabs__panel__active-hide">(1) Layer hidden when active (peek only)</li>
+                    <li class="mdw-tabs__panel__active-remove">(2) Layer removed when active (peek only)</li>
+                    <li>(3) Always visible</li>
+                    <li class="mdw-tabs__panel__inactive-hide">(4) Layer hidden when inactive (active only)</li>
+                    <li class="mdw-tabs__panel__inactive-remove">(5) Layer removed when inactive (active only)</li>
+                    <li>(6) Always visible</li>
+                  </ol>
+                </div>
+              </div>
+              <div class="mdw-tab__panel">
+                <div style="min-height:200px;padding:20px;">
+                  <p>Sample Content Two</p>
+                  <%~ includeFile(T, { button: {  borderInk:true , text:'Unfocusable when inactive' }}) %>
+                  <p>HTML Ordered List with (#) representing DOM position</p>
+                  <ol>
+                    <li class="mdw-tabs__panel__active-hide">(1) Layer hidden when active (peek only)</li>
+                    <li class="mdw-tabs__panel__active-remove">(2) Layer removed when active (peek only)</li>
+                    <li>(3) Always visible</li>
+                    <li class="mdw-tabs__panel__inactive-hide">(4) Layer hidden when inactive (active only)</li>
+                    <li class="mdw-tabs__panel__inactive-remove">(5) Layer removed when inactive (active only)</li>
+                    <li>(6) Always visible</li>
+                  </ol>
+                </div>
+              </div>
+              <div class="mdw-tab__panel">
+                <div style="min-height:200px;padding:20px;">
+                  <p>Sample Content Three</p>
+                  <%~ includeFile(T, { button: {  borderInk:true , text:'Unfocusable when inactive' }}) %>
+                  <p>HTML Ordered List with (#) representing DOM position</p>
+                  <ol>
+                    <li class="mdw-tabs__panel__active-hide">(1) Layer hidden when active (peek only)</li>
+                    <li class="mdw-tabs__panel__active-remove">(2) Layer removed when active (peek only)</li>
+                    <li>(3) Always visible</li>
+                    <li class="mdw-tabs__panel__inactive-hide">(4) Layer hidden when inactive (active only)</li>
+                    <li class="mdw-tabs__panel__inactive-remove">(5) Layer removed when inactive (active only)</li>
+                    <li>(6) Always visible</li>
+                  </ol>
+                </div>
+              </div>
+            </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', checked: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', disabled:true, text:'None' }}) %>
+    </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 A400', text:'Primary A400' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'ink', type:'radio', value:'secondary A200', checked:true, text:'Secondary A200' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'ink', type:'radio', value:'warn', text:'Warn' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'ink', type:'radio', value:'purple A400', text:'Purple A400' }}) %>
+    </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:'None' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'primary dark', text:'Primary (Dark)' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'secondary 100 dark', text:'Secondary 100 (Dark)' }}) %>
+      <%~ 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:'dark 700 dark', text:'Green 700 (Dark)' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Scrollable</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'content-scrollable', checked:true, text:'Content' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'tabs-scrollable', text:'Tabs' }}) %>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="100%" style="max-height:0;"></div>
+  <div class="mdw-grid__item" mdw-colspan="8">
+    <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', attributes: { 'aria-pressed':'false', 'mdw-overlay-off':'activated' }, text:'PUG', id:'usePug' }}) %>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <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 class="mdw-grid__item display-flex clipped-300" mdw-colspan="4">
+    <div class="render-fill">
+      <div class="mdw-tab">
+        <div class="mdw-tab__list mdw-theme" mdw-surface="cyan 500" mdw-dark>
+          <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+            <div class="mdw-tab__label">Item One</div>
+          </div>
+          <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+            <div class="mdw-tab__label">Item Two</div>
+          </div>
+          <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+            <div class="mdw-tab__label">Item Three</div>
+          </div>
+          <div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div>
+        </div>
+        <div class="mdw-tab__content">
+          <div class="mdw-tab__panel">Item One</div>
+          <div class="mdw-tab__panel">Item Two</div>
+          <div class="mdw-tab__panel">Item Three</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4">
+    <div class="render-fill">
+      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'cyan 700', dark:true }) %>
+      <div class="mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark mdw-prominent>
+        <div class="mdw-appbar__action">
+          <div class="mdw-appbar__start">
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
+          </div>
+          <div class="mdw-appbar__title">Page title</div>
+          <div class="mdw-appbar__end">
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
+          </div>
+        </div>
+        <div class="mdw-tab">
+          <div class="mdw-tab__list">
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__label">Item One</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__label">Item Two</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__label">Item Three</div>
+            </div>
+            <div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div>
+          </div>
+        </div>
+      </div>
+      <div class="content"></div>
+    </div>
+  </div>
+  <div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4">
+    <div class="render-fill">
+      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'cyan 700', dark:true }) %>
+      <div class="mdw-tab">
+        <div class="mdw-tab__list-wrapper mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark>
+          <div class="mdw-appbar__action">
+            <div class="mdw-appbar__start">
+              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
+            </div>
+            <div class="mdw-appbar__title">Page title</div>
+            <div class="mdw-appbar__end">
+              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
+              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
+            </div>
+          </div>
+          <div class="mdw-tab__list">
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__label">Item One</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__label">Item Two</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__label">Item Three</div>
+            </div>
+            <div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div>
+          </div>
+        </div>
+        <div class="mdw-tab__content">
+          <div class="mdw-tab__panel">Item One</div>
+          <div class="mdw-tab__panel">Item Two</div>
+          <div class="mdw-tab__panel">Item Three</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4">
+    <div class="render-fill">
+      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'background 600', dark:true }) %>
+      <div class="mdw-tab">
+        <div class="mdw-tab__list-wrapper mdw-appbar">
+          <div class="mdw-appbar__action">
+            <div class="mdw-appbar__start">
+              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
+            </div>
+            <div class="mdw-appbar__title">Page title</div>
+            <div class="mdw-appbar__end">
+              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
+              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
+            </div>
+          </div>
+          <div class="mdw-tab__list">
+            <div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium">
+              <div class="mdw-tab__label">Item One</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium">
+              <div class="mdw-tab__label">Item Two</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium">
+              <div class="mdw-tab__label">Item Three</div>
+            </div>
+            <div class="mdw-tab__indicator mdw-theme" mdw-ink="cyan A700"></div>
+          </div>
+        </div>
+        <div class="mdw-tab__content">
+          <div class="mdw-tab__panel">Item One</div>
+          <div class="mdw-tab__panel">Item Two</div>
+          <div class="mdw-tab__panel">Item Three</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4">
+    <div class="render-fill">
+      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'cyan 700', dark:true }) %>
+      <div class="mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark>
+        <div class="mdw-appbar__action">
+          <div class="mdw-appbar__start">
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
+          </div>
+          <div class="mdw-appbar__title">Page title</div>
+          <div class="mdw-appbar__end">
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
+          </div>
+        </div>
+        <div class="mdw-tab">
+          <div class="mdw-tab__list">
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">phone</div>
+              <div class="mdw-tab__label">Recents</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">favorite</div>
+              <div class="mdw-tab__label">Favorites</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">person_pin</div>
+              <div class="mdw-tab__label">Nearby</div>
+            </div>
+            <div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div>
+          </div>
+        </div>
+      </div>
+      <div class="content"></div>
+    </div>
+  </div>
+  <div class="mdw-grid__item display-flex clipped-300" mdw-colspan="4">
+    <div class="render-fill">
+      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'background 600', dark:true }) %>
+      <div class="mdw-appbar">
+        <div class="mdw-appbar__action">
+          <div class="mdw-appbar__start">
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
+          </div>
+          <div class="mdw-appbar__title">Page title</div>
+          <div class="mdw-appbar__end">
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
+          </div>
+        </div>
+        <div class="mdw-tab">
+          <div class="mdw-tab__list">
+            <div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">phone</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">favorite</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">person_pin</div>
+            </div>
+            <div class="mdw-tab__indicator mdw-theme" mdw-ink="cyan A700"></div>
+          </div>
+        </div>
+      </div>
+      <div class="content"></div>
+    </div>
+  </div>
+  <div class="mdw-grid__item display-flex" mdw-colspan="100%">
+    <div class="display-flex" flex-column style="width:100%;padding:24px;box-sizing:border-box;">
+      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'cyan 700', dark:true }) %>
+      <div class="mdw-tab">
+        <div class="mdw-tab__list-wrapper mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark>
+          <div class="mdw-appbar__action">
+            <div class="mdw-appbar__start">
+              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
+            </div>
+            <div class="mdw-appbar__title">Clustered</div>
+            <div class="mdw-appbar__end">
+              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
+              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
+            </div>
+          </div>
+          <div class="mdw-tab__list" style="align-self:center;">
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">phone</div>
+              <div class="mdw-tab__label">Recents</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">favorite</div>
+              <div class="mdw-tab__label">Favorites</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">person_pin</div>
+              <div class="mdw-tab__label">Nearby</div>
+            </div>
+            <div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div>
+          </div>
+        </div>
+        <div class="mdw-tab__content">
+          <div class="mdw-tab__panel">Recents</div>
+          <div class="mdw-tab__panel">Favorites</div>
+          <div class="mdw-tab__panel">Nearby</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <div class="mdw-grid__content js">
+      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'cyan 700', dark:true }) %>
+      <div class="mdw-tab">
+        <div class="mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark>
+          <div class="mdw-appbar__action">
+            <div class="mdw-appbar__start">
+              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
+            </div>
+            <div class="mdw-appbar__title">Scrollable</div>
+            <div class="mdw-appbar__end">
+              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
+              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
+            </div>
+          </div>
+          <div class="mdw-tab__list" mdw-scrollable>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">phone</div>
+              <div class="mdw-tab__label">Recents</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">favorite</div>
+              <div class="mdw-tab__label">My Oversized Favorites Tab</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">person_pin</div>
+              <div class="mdw-tab__label">Nearby</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">edit</div>
+              <div class="mdw-tab__label">Edit</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">clear</div>
+              <div class="mdw-tab__label">Clear</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">search</div>
+              <div class="mdw-tab__label">Search</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">restore</div>
+              <div class="mdw-tab__label">Restore</div>
+            </div>
+            <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
+              <div class="mdw-tab__icon material-icons">stars</div>
+              <div class="mdw-tab__label">Stars</div>
+            </div>
+            <div class="mdw-tab__indicator mdw-theme" mdw-ink="yellow A400"></div>
+          </div>
+        </div>
+        <div class="mdw-tab__content">
+          <div class="mdw-tab__panel">1</div>
+          <div class="mdw-tab__panel">2</div>
+          <div class="mdw-tab__panel">3</div>
+          <div class="mdw-tab__panel">4</div>
+          <div class="mdw-tab__panel">5</div>
+          <div class="mdw-tab__panel">6</div>
+          <div class="mdw-tab__panel">7</div>
+          <div class="mdw-tab__panel">8</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="tab.min.js"></script>