@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/docs/pages/tooltip.eta

@@ -0,0 +1,94 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'tooltip'}) %>
+<div class="comparison">
+  <div class="render">
+    <%~ 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">
+          <div class="mdw-tooltip__wrapper">
+            <%~ includeFile(T, { button: { icon:true , class:'material-icons mdw-tooltip__target', text:'menu' }}) %>
+            <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="start">Menu</div>
+          </div>
+        </div>
+        <div class="mdw-appbar__title" style="color:white;">Inbox</div>
+        <div class="mdw-appbar__end">
+          <div class="mdw-tooltip__wrapper">
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons mdw-tooltip__target', text:'search' }}) %>
+            <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Search</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <ul class="mdw-list" mdw-divider>
+        <li class="mdw-list__subheader mdw-theme" mdw-ink="medium">Today</li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar"><i class="material-icons" style="font-size:40px;">&#xE853;</i></div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Brunch this weekend?</div>
+              <div class="mdw-list__text-line">Ali Connors<span class="mdw-theme" mdw-ink="medium"> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to meet?</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar"><i class="material-icons" style="font-size:40px;">&#xE853;</i></div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Summer BBQ<span class="mdw-theme" mdw-ink="medium"> 4</span></div>
+              <div class="mdw-list__text-line">to Alex, Scott, Jennifer<span class="mdw-theme" mdw-ink="medium"> &mdash; Wish I could come. but I'm out of town this weekend.</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar"><i class="material-icons" style="font-size:40px;">&#xE853;</i></div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Oui oui</div>
+              <div class="mdw-list__text-line">Sandra Adams<span class="mdw-theme" mdw-ink="medium"> &mdash; Do you have Paris recommendations? Have you ever been?</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar"><i class="material-icons" style="font-size:40px;">&#xE853;</i></div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Birthday gift</div>
+              <div class="mdw-list__text-line">Trevor Hansen<span class="mdw-theme" mdw-ink="medium"> &mdash; Have any ideas about what we should get Heidi for her birthday?</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar"><i class="material-icons" style="font-size:40px;">&#xE853;</i></div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Recipe to try</div>
+              <div class="mdw-list__text-line">Britta Holt<span class="mdw-theme" mdw-ink="medium"> &mdash; We should eat this: Grated Squash, Corn, and tomatillo Tacos J</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar"><i class="material-icons" style="font-size:40px;">&#xE853;</i></div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Giants game</div>
+              <div class="mdw-list__text-line">David Park<span class="mdw-theme" mdw-ink="medium"> &mdash; Any interest in seeing</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar"><i class="material-icons" style="font-size:40px;">&#xE853;</i></div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Montauk weekend</div>
+              <div class="mdw-list__text-line">-----</div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <%~ includeFile('../_partials/_androidnavbar.eta') %>
+  </div>
+</div>
+<script src="tooltip.min.js"></script>

package/docs/pages/tooltip.pug

@@ -0,0 +1,78 @@
+include ../_mixins.pug
+
++header("tooltip")
+  .comparison
+    .render
+      +androidstatusbar('cyan 700', 'dark')
+      .mdw-appbar.mdw-theme(mdw-surface="cyan 500" mdw-dark)
+        .mdw-appbar__action
+          .mdw-appbar__start
+            .mdw-tooltip__wrapper
+              +mdwButton({ icon:true }).mdw-tooltip__target.material-icons menu
+              .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark mdw-align="start") Menu
+          .mdw-appbar__title(style="color:white") Inbox
+          .mdw-appbar__end
+            .mdw-tooltip__wrapper
+              +mdwButton({ icon:true }).mdw-tooltip__target.material-icons search
+              .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark mdw-align="end") Search
+      .content
+        ul.mdw-list(mdw-divider)
+          li.mdw-list__subheader.mdw-theme(mdw-ink="medium") Today
+          li.mdw-list__item
+            .mdw-list__content
+              .mdw-list__avatar
+                i.material-icons(style="font-size:40px") 
+              .mdw-list__text
+                .mdw-list__text-line Brunch this weekend?
+                .mdw-list__text-line Ali Connors 
+                  span.mdw-theme(mdw-ink="medium")  — I'll be in your neighborhood doing errands this weekend. Do you want to meet?
+          li.mdw-list__item
+            .mdw-list__content
+              .mdw-list__avatar
+                i.material-icons(style="font-size:40px") 
+              .mdw-list__text
+                .mdw-list__text-line Summer BBQ
+                  span.mdw-theme(mdw-ink="medium")  4
+                .mdw-list__text-line to Alex, Scott, Jennifer
+                  span.mdw-theme(mdw-ink="medium")  — Wish I could come. but I'm out of town this weekend.
+          li.mdw-list__item
+            .mdw-list__content
+              .mdw-list__avatar
+                i.material-icons(style="font-size:40px") 
+              .mdw-list__text
+                .mdw-list__text-line Oui oui
+                .mdw-list__text-line Sandra Adams
+                  span.mdw-theme(mdw-ink="medium")  — Do you have Paris recommendations? Have you ever been?
+          li.mdw-list__item
+            .mdw-list__content
+              .mdw-list__avatar
+                i.material-icons(style="font-size:40px") 
+              .mdw-list__text
+                .mdw-list__text-line Birthday gift
+                .mdw-list__text-line Trevor Hansen
+                  span.mdw-theme(mdw-ink="medium")  — Have any ideas about what we should get Heidi for her birthday?
+          li.mdw-list__item
+            .mdw-list__content
+              .mdw-list__avatar
+                i.material-icons(style="font-size:40px") 
+              .mdw-list__text
+                .mdw-list__text-line Recipe to try
+                .mdw-list__text-line Britta Holt
+                  span.mdw-theme(mdw-ink="medium")  — We should eat this: Grated Squash, Corn, and tomatillo Tacos J
+          li.mdw-list__item
+            .mdw-list__content
+              .mdw-list__avatar
+                i.material-icons(style="font-size:40px") 
+              .mdw-list__text
+                .mdw-list__text-line Giants game
+                .mdw-list__text-line David Park
+                  span.mdw-theme(mdw-ink="medium")  — Any interest in seeing
+          li.mdw-list__item
+            .mdw-list__content
+              .mdw-list__avatar
+                i.material-icons(style="font-size:40px") 
+              .mdw-list__text
+                .mdw-list__text-line Montauk weekend
+                .mdw-list__text-line -----
+      +androidnavbar
+  script(src='tooltip.min.js')

package/docs/pages/transition.eta

@@ -0,0 +1,117 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'transition'}) %>
+<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">
+      <div class="display-flex" flex-align-items="center">
+        <h5 class="mdw-type">Select two items.</h5>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="25%">
+    <div class="mdw-grid__content">
+      <div class="display-flex flex-column">
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="white" mdw-light>
+          <div class="demo-core-content">Small</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="black" mdw-dark>
+          <div class="demo-core-content">Small</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="primary 500" mdw-dark>
+          <div class="demo-core-content">Small</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="secondary 500" mdw-dark>
+          <div class="demo-core-content">Small</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="warn 500" mdw-dark>
+          <div class="demo-core-content">Small</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="50%">
+    <div class="mdw-grid__content">
+      <div class="display-flex flex-column">
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="white" mdw-light>
+          <div class="demo-core-content">Medium</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="black" mdw-dark>
+          <div class="demo-core-content">Medium</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="primary 500" mdw-dark>
+          <div class="demo-core-content">Medium</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="secondary 500" mdw-dark>
+          <div class="demo-core-content">Medium</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="warn 500" mdw-dark>
+          <div class="demo-core-content">Medium</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="25%">
+    <div class="mdw-grid__content">
+      <div class="display-flex flex-column" flex-align-items="center">
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="white" mdw-light demo-round>
+          <div class="demo-core-content">Round</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="black" mdw-dark demo-round>
+          <div class="demo-core-content">Round</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="primary 500" mdw-dark demo-round>
+          <div class="demo-core-content">Round</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="secondary 500" mdw-dark demo-round>
+          <div class="demo-core-content">Round</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="warn 500" mdw-dark demo-round>
+          <div class="demo-core-content">Round</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="25%">
+    <div class="mdw-grid__content">
+      <div class="display-flex flex-column" flex-align-items="center">
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="white" mdw-light demo-square>
+          <div class="demo-core-content">Square</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="black" mdw-dark demo-square>
+          <div class="demo-core-content">Square</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="primary 500" mdw-dark demo-square>
+          <div class="demo-core-content">Square</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="secondary 500" mdw-dark demo-square>
+          <div class="demo-core-content">Square</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="warn 500" mdw-dark demo-square>
+          <div class="demo-core-content">Square</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="75%">
+    <div class="mdw-grid__content">
+      <div class="display-flex flex-column">
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="white" mdw-light>
+          <div class="demo-core-content">Wide</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="black" mdw-dark>
+          <div class="demo-core-content">Wide</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="primary 500" mdw-dark>
+          <div class="demo-core-content">Wide</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="secondary 500" mdw-dark>
+          <div class="demo-core-content">Wide</div>
+        </div>
+        <div class="demo-core-item mdw-elevation mdw-overlay mdw-ripple mdw-theme" mdw-elevation="1" mdw-surface="warn 500" mdw-dark>
+          <div class="demo-core-content">Wide</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="transition.min.js"></script>

package/docs/pages/transition.js

@@ -0,0 +1,54 @@
+import { iterateArrayLike } from '../../core/dom.js';
+import * as Overlay from '../../core/overlay/index.js';
+import * as Ripple from '../../core/ripple/index.js';
+import * as Transition from '../../core/transition/index.js';
+
+iterateArrayLike(document.getElementsByClassName('mdw-overlay'), Overlay.attach);
+iterateArrayLike(document.getElementsByClassName('mdw-ripple'), Ripple.attach);
+
+/** @type {HTMLElement} */
+let target1;
+/** @type {HTMLElement} */
+let target2;
+
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+function onItemClick(event) {
+  /** @type {HTMLElement} */
+  const target = (event.currentTarget);
+  if (target.hasAttribute('mdw-transition-busy')) {
+    return;
+  }
+  if (!target1) {
+    target1 = target;
+    target1.setAttribute('aria-pressed', 'true');
+    return;
+  }
+  if (target1 === (event.currentTarget)) {
+    target1.setAttribute('aria-pressed', 'false');
+    target1 = null;
+    return;
+  }
+  if (!target2) {
+    target2 = target;
+  }
+  target2.blur();
+  target1.setAttribute('aria-pressed', 'false');
+  Transition.transitionElement({
+    fromShapeElement: target1,
+    toShapeElement: target2,
+    fromContentElement: target1.getElementsByClassName('demo-core-content')[0],
+    toContentElement: target2.getElementsByClassName('demo-core-content')[0],
+    duration: 3000,
+    revertFrom: true,
+  });
+  target1 = null;
+  target2 = null;
+}
+
+iterateArrayLike(
+  document.getElementsByClassName('demo-core-item'),
+  (item) => item.addEventListener('click', onItemClick),
+);

package/docs/pages/transition.pug

@@ -0,0 +1,76 @@
+include ../_mixins.pug
+
++header("transition")
+  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
+    .mdw-grid__item(mdw-colspan="100%")
+      .mdw-grid__content
+        .display-flex(flex-align-items="center")
+          h5.mdw-type Select two items.
+    .mdw-grid__item(mdw-colspan="25%")
+      .mdw-grid__content
+        .display-flex.flex-column
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="white" mdw-light)
+            span Small
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="black" mdw-dark)
+            span Small
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="primary 500" mdw-dark)
+            span Small
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="secondary 500" mdw-dark)
+            span Small
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="warn 500" mdw-dark)
+            span Small
+    .mdw-grid__item(mdw-colspan="50%")
+      .mdw-grid__content
+        .display-flex.flex-column
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="white" mdw-light)
+            span Medium
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="black" mdw-dark)
+            span Medium
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="primary 500" mdw-dark)
+            span Medium
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="secondary 500" mdw-dark)
+            span Medium
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="warn 500" mdw-dark)
+            span Medium
+    .mdw-grid__item(mdw-colspan="25%")
+      .mdw-grid__content
+        .display-flex.flex-column(flex-align-items="center")
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="white" mdw-light demo-round)
+            span Round
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="black" mdw-dark demo-round)
+            span Round
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="primary 500" mdw-dark demo-round)
+            span Round
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="secondary 500" mdw-dark demo-round)
+            span Round
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="warn 500" mdw-dark demo-round)
+            span Round
+    .mdw-grid__item(mdw-colspan="25%")
+      .mdw-grid__content
+        .display-flex.flex-column(flex-align-items="center")
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="white" mdw-light demo-square)
+            span Square
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="black" mdw-dark demo-square)
+            span Square
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="primary 500" mdw-dark demo-square)
+            span Square
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="secondary 500" mdw-dark demo-square)
+            span Square
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="warn 500" mdw-dark demo-square)
+            span Square
+    .mdw-grid__item(mdw-colspan="75%")
+      .mdw-grid__content
+        .display-flex.flex-column
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="white" mdw-light)
+            span Wide
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="black" mdw-dark)
+            span Wide
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="primary 500" mdw-dark)
+            span Wide
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="secondary 500" mdw-dark)
+            span Wide
+          .demo-core-item.mdw-elevation.mdw-overlay.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-surface="warn 500" mdw-dark)
+            span Wide
+    
+    
+  script(src='transition.min.js')

package/docs/pages/type.eta

@@ -0,0 +1,31 @@
+<% layout('../_partials/_header.eta', {page: 'type'}) %>
+<div>
+  <div class="content">
+    <h1 class="mdw-type">H1 Headline</h1>
+    <h2 class="mdw-type">H2 Headline</h2>
+    <h3 class="mdw-type">H3 Headline</h3>
+    <h4 class="mdw-type">H4 Headline</h4>
+    <h5 class="mdw-type">H5 Headline</h5>
+    <h6 class="mdw-type">H6 Headline</h6>
+    <div class="mdw-type" mdw-style="subtitle">Subtitle 1</div>
+    <div class="mdw-type" mdw-style="subtitle-2">Subtitle 2</div>
+    <p class="mdw-type">Body 1</p>
+    <p class="mdw-type" mdw-style="body-2">Body 2</p>
+    <div class="mdw-type" mdw-style="button">Button</div>
+    <div class="mdw-type" mdw-style="caption">Caption</div>
+    <div class="mdw-type" mdw-style="overline">Overline</div>
+  </div>
+</div>
+<div class="comparison type-comparison-3">
+  <div class="render">
+    <h5 class="mdw-type" mdw-baseline-top="64" mdw-baseline-next="20">Johannes Guttenberg</h5>
+    <div class="mdw-type" mdw-style="caption" mdw-baseline-next="36">German Printer</div>
+    <p class="mdw-type" mdw-style="body-2" mdw-baseline-next="32">Johannes Gensfleisch zur Laden zum Gutenberg was a German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe with the printing press.</p>
+    <p class="mdw-type" mdw-style="body-2" mdw-baseline-next="20">Born</p>
+    <p class="mdw-type" mdw-style="body-2" mdw-baseline-bottom="68">c. 1400, Mainz Germany</p>
+  </div>
+  <div>
+    <div style="margin-top:10px;"></div>
+  </div>
+</div>
+<script src="type.min.js"></script>

package/docs/pages/type.pug

@@ -0,0 +1,29 @@
+include ../_mixins.pug
+
++header("type")
+  div
+    .content
+      h1.mdw-type H1 Headline
+      h2.mdw-type H2 Headline
+      h3.mdw-type H3 Headline
+      h4.mdw-type H4 Headline
+      h5.mdw-type H5 Headline
+      h6.mdw-type H6 Headline
+      .mdw-type(mdw-style="subtitle") Subtitle 1
+      .mdw-type(mdw-style="subtitle-2") Subtitle 2
+      p.mdw-type Body 1
+      p.mdw-type(mdw-style="body-2") Body 2
+      .mdw-type(mdw-style="button") Button
+      .mdw-type(mdw-style="caption") Caption
+      .mdw-type(mdw-style="overline") Overline
+
+  .comparison.type-comparison-3
+    .render
+      h5.mdw-type(mdw-baseline-top="64" mdw-baseline-next="20") Johannes Guttenberg
+      .mdw-type(mdw-style="caption" mdw-baseline-next="36") German Printer
+      p.mdw-type(mdw-style="body-2" mdw-baseline-next="32") Johannes Gensfleisch zur Laden zum Gutenberg was a German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe with the printing press.
+      p.mdw-type(mdw-style="body-2" mdw-baseline-next="20") Born
+      p.mdw-type(mdw-style="body-2" mdw-baseline-bottom="68") c. 1400, Mainz Germany
+    div
+      div(style="margin-top:10px")
+  script(src='type.min.js')

package/docs/postrender.js

@@ -0,0 +1,39 @@
+import * as Button from '../components/button/index.js';
+import * as Layout from '../components/layout/index.js';
+import * as ListContent from '../components/list/content.js';
+import * as List from '../components/list/index.js';
+import { iterateArrayLike } from '../core/dom.js';
+
+const navDrawer = document.getElementsByClassName('mdw-layout__navdrawer')[0];
+List.attachAll(navDrawer);
+Layout.attach();
+iterateArrayLike(document.querySelectorAll('.mdw-layout__appbar .mdw-button'), Button.attach);
+
+navDrawer.querySelector('[aria-current]').scrollIntoView({
+  behavior: 'auto',
+  block: 'center',
+  inline: 'start',
+});
+
+/** @return {void} */
+function clearCurrentPage() {
+  iterateArrayLike(navDrawer.querySelectorAll('[aria-current]'), (item) => item.removeAttribute('aria-current'));
+}
+
+navDrawer.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
+  /** @type {HTMLElement} */
+  const item = (event.target);
+  ListContent.setSelected(item, true);
+  if (item instanceof HTMLAnchorElement) {
+    if (item.hasAttribute('aria-current')) {
+      return;
+    }
+    clearCurrentPage();
+    item.setAttribute('aria-current', 'page');
+    // Auto close if modal
+    if (Layout.isNavDrawerModalShowing()) {
+      Layout.hideNavDrawer();
+    }
+    window.location.href = item.href;
+  }
+});

package/docs/prerender.js

@@ -0,0 +1,16 @@
+import * as Document from '../core/document/index.js';
+
+import { setupMenuOptions } from './_menuoptions.js';
+
+/** @return {void} */
+function onDOMContentLoaded() {
+  document.removeEventListener('DOMContentLoaded', onDOMContentLoaded);
+  // Apply button states
+  setupMenuOptions();
+}
+
+// Apply context first
+setupMenuOptions();
+Document.onPrerender();
+
+document.addEventListener('DOMContentLoaded', onDOMContentLoaded);