@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/{docs-src/components → docs/pages}/textfield.pug

@@ -42,7 +42,7 @@ include ../_mixins.pug
         +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'none'}) Default
         +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'primary', checked:true}) Primary
         +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'secondary'}) Secondary
-        +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'green A700'}) Green A700
+        +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'green'}) Green
       .mdw-type(mdw-style="subtitle") Attributes
       .docs-option-list
         +mdwSelection({ink:'secondary', name:'autosize', checked:true}) Autosize
@@ -90,32 +90,84 @@ include ../_mixins.pug
     .mdw-grid__item(mdw-colspan="4" flex-justify-content="center")
       .render-fill
         +androidstatusbar('secondary 300', 'light')
-        +appbar('secondary A100', 'light', ['arrow_back'], ['search'])
+        +appbar('secondary 100', 'light', ['arrow_back'], ['search']) Auto-fill styling
         form.content(style="padding:0px 16px")
-          +mdwTextField({ink:'secondary', required:true}) Name *
-          +mdwTextField({ink:'secondary'}) Address
-          +mdwTextField({ink:'secondary'}) City
+          +mdwTextField({ink:'secondary', required:true})(name="name") Name *
+          +mdwTextField({ink:'secondary'})(name="address") Address
+          +mdwTextField({ink:'secondary'})(name="city") City
           .horizontal-controls
-            label.mdw-textfield.mdw-theme(mdw-ink="secondary" style="width:88px")
-              input.mdw-textfield__input(type="text" placeholder=" ")
+            label.mdw-textfield.mdw-theme(mdw-ink="secondary" style="width:88px;")
+              select.mdw-textfield__input(name="state")
+                option.mdw-theme(mdw-surface="card" value="") --
+                option.mdw-theme(mdw-surface="card" value="AL") AL
+                option.mdw-theme(mdw-surface="card" value="AK") AK
+                option.mdw-theme(mdw-surface="card" value="AZ") AZ
+                option.mdw-theme(mdw-surface="card" value="AR") AR
+                option.mdw-theme(mdw-surface="card" value="CA") CA
+                option.mdw-theme(mdw-surface="card" value="CO") CO
+                option.mdw-theme(mdw-surface="card" value="CT") CT
+                option.mdw-theme(mdw-surface="card" value="DE") DE
+                option.mdw-theme(mdw-surface="card" value="FL") FL
+                option.mdw-theme(mdw-surface="card" value="GA") GA
+                option.mdw-theme(mdw-surface="card" value="HI") HI
+                option.mdw-theme(mdw-surface="card" value="ID") ID
+                option.mdw-theme(mdw-surface="card" value="IL") IL
+                option.mdw-theme(mdw-surface="card" value="IN") IN
+                option.mdw-theme(mdw-surface="card" value="IA") IA
+                option.mdw-theme(mdw-surface="card" value="KS") KS
+                option.mdw-theme(mdw-surface="card" value="KY") KY
+                option.mdw-theme(mdw-surface="card" value="LA") LA
+                option.mdw-theme(mdw-surface="card" value="ME") ME
+                option.mdw-theme(mdw-surface="card" value="MD") MD
+                option.mdw-theme(mdw-surface="card" value="MA") MA
+                option.mdw-theme(mdw-surface="card" value="MI") MI
+                option.mdw-theme(mdw-surface="card" value="MN") MN
+                option.mdw-theme(mdw-surface="card" value="MS") MS
+                option.mdw-theme(mdw-surface="card" value="MO") MO
+                option.mdw-theme(mdw-surface="card" value="MT") MT
+                option.mdw-theme(mdw-surface="card" value="NE") NE
+                option.mdw-theme(mdw-surface="card" value="NV") NV
+                option.mdw-theme(mdw-surface="card" value="NH") NH
+                option.mdw-theme(mdw-surface="card" value="NJ") NJ
+                option.mdw-theme(mdw-surface="card" value="NM") NM
+                option.mdw-theme(mdw-surface="card" value="NY") NY
+                option.mdw-theme(mdw-surface="card" value="NC") NC
+                option.mdw-theme(mdw-surface="card" value="ND") ND
+                option.mdw-theme(mdw-surface="card" value="OH") OH
+                option.mdw-theme(mdw-surface="card" value="OK") OK
+                option.mdw-theme(mdw-surface="card" value="OR") OR
+                option.mdw-theme(mdw-surface="card" value="PA") PA
+                option.mdw-theme(mdw-surface="card" value="RI") RI
+                option.mdw-theme(mdw-surface="card" value="SC") SC
+                option.mdw-theme(mdw-surface="card" value="SD") SD
+                option.mdw-theme(mdw-surface="card" value="TN") TN
+                option.mdw-theme(mdw-surface="card" value="TX") TX
+                option.mdw-theme(mdw-surface="card" value="UT") UT
+                option.mdw-theme(mdw-surface="card" value="VT") VT
+                option.mdw-theme(mdw-surface="card" value="VA") VA
+                option.mdw-theme(mdw-surface="card" value="WA") WA
+                option.mdw-theme(mdw-surface="card" value="WV") WV
+                option.mdw-theme(mdw-surface="card" value="WI") WI
+                option.mdw-theme(mdw-surface="card" value="WY") WY
+              .mdw-textfield__icon(mdw-dropdown)
               .mdw-textfield__border
                 .mdw-textfield__outline-gap
                   .mdw-textfield__label State
             label.mdw-textfield.flex-1.mdw-theme(mdw-ink="primary")
-              input.mdw-textfield__input(type="text" placeholder=" " required)
+              input.mdw-textfield__input(type="text" placeholder=" " name="zip" required)
               .mdw-textfield__border
                 .mdw-textfield__outline-gap
                   .mdw-textfield__label Zip code *
-          +mdwTextField({ink:'secondary'}) Phone number
+          +mdwTextField({ink:'secondary'})(name="phone") Phone number
           p.mdw-type * Required fields
         +androidnavbar
 
     .mdw-grid__item(mdw-colspan="4" flex-justify-content="center")
       .render-fill
         +androidstatusbar('secondary 800', 'dark')
-        +appbar('secondary A700', 'dark', ['arrow_back'], ['search'])
+        +appbar('secondary 700', 'dark', ['arrow_back'], ['search'])
         form.content(style="padding:8px 16px")
-          div.display-flex(style="margin-bottom:-32px;margin-top:-24px;" flex-justify-content="center")
+          .display-flex(style="margin-bottom:-32px;margin-top:-24px;" flex-justify-content="center")
             i.material-icons(style="color:#ccc;font-size:256px") person
           .horizontal-controls
             label.mdw-textfield.flex-1.mdw-theme(mdw-ink="secondary")
@@ -129,10 +181,10 @@ include ../_mixins.pug
               | Phone number
             label.mdw-textfield.mdw-theme(mdw-ink="secondary" style="width:150px;")
               select.mdw-textfield__input(type="phone")
-                option(value="") Unknown
-                option(value="Mobile") Mobile
-                option(value="Home") Home
-                option(value="Work") Work
+                option.mdw-theme(mdw-surface="card" value="") Unknown
+                option.mdw-theme(mdw-surface="card" value="Mobile") Mobile
+                option.mdw-theme(mdw-surface="card" value="Home") Home
+                option.mdw-theme(mdw-surface="card" value="Work") Work
               .mdw-textfield__icon(mdw-dropdown)
               .mdw-textfield__border
                 .mdw-textfield__outline-gap
@@ -141,10 +193,10 @@ include ../_mixins.pug
             +mdwTextField({ink:'secondary', type:'email', signifier:'email', signifierClass:'material-icons'}) Email
             label.mdw-textfield.mdw-theme(mdw-ink="secondary" style="width:150px;")
               select.mdw-textfield__input(type="phone")
-                option(value="") Unknown
-                option(value="") Unknown
-                option(value="Personal") Personal
-                option(value="Business") Business
+                option.mdw-theme(mdw-surface="card" value="") Unknown
+                option.mdw-theme(mdw-surface="card" value="") Unknown
+                option.mdw-theme(mdw-surface="card" value="Personal") Personal
+                option.mdw-theme(mdw-surface="card" value="Business") Business
               .mdw-textfield__icon(mdw-dropdown)
               .mdw-textfield__border
                 .mdw-textfield__outline-gap
@@ -153,8 +205,8 @@ include ../_mixins.pug
             +mdwTextField({ink:'secondary', type:'address', signifier:'place', signifierClass:'material-icons'}) Address
             label.mdw-textfield.mdw-theme(mdw-ink="secondary" style="width:150px")
               select.mdw-textfield__input(type="phone")
-                option(value="Home") Home
-                option(value="Work") Work
+                option.mdw-theme(mdw-surface="card" value="Home") Home
+                option.mdw-theme(mdw-surface="card" value="Work") Work
               .mdw-textfield__icon(mdw-dropdown)
               .mdw-textfield__border
                 .mdw-textfield__outline-gap
@@ -205,20 +257,20 @@ include ../_mixins.pug
     .mdw-grid__item(mdw-colspan="4" flex-justify-content="center")
       .render-fill
         +androidstatusbar('amber 600', 'dark')
-        +appbar('amber A400', 'dark', ['arrow_back'], ['done'])
+        +appbar('amber 400', 'dark', ['arrow_back'], ['done'])
         .content(style="padding:0 16px")
-          label.mdw-textfield.mdw-theme(mdw-ink="amber A700")
+          label.mdw-textfield.mdw-theme(mdw-ink="amber")
             input.mdw-textfield__input(placeholder=" ")
             .mdw-textfield__border
               .mdw-textfield__outline-gap
                 .mdw-textfield__label Name
             .mdw-textfield__error-text spacer
-          label.mdw-textfield.mdw-theme(mdw-ink="amber A700")
+          label.mdw-textfield.mdw-theme(mdw-ink="amber")
             textarea.mdw-textfield__input(placeholder=" " rows="5")
             .mdw-textfield__border
               .mdw-textfield__outline-gap
                 .mdw-textfield__label Message
-          label.mdw-textfield.mdw-theme(mdw-ink="deeppurple A400" mdw-outlined)
+          label.mdw-textfield.mdw-theme(mdw-ink="deeppurple" mdw-outlined)
             textarea.mdw-textfield__input(placeholder=" " rows="5")
             .mdw-textfield__border
               .mdw-textfield__outline-gap
@@ -226,16 +278,16 @@ include ../_mixins.pug
         +androidnavbar
     .mdw-grid__item(mdw-colspan="4" flex-justify-content="center")
       .render-fill
-        +androidstatusbar('amber A700', 'dark')
-        +appbar('amber A400', 'dark', ['arrow_back'], ['done'])
+        +androidstatusbar('amber 700', 'dark')
+        +appbar('amber 400', 'dark', ['arrow_back'], ['done'])
         .content(style="padding:0 16px")
-          label.mdw-textfield.mdw-theme(mdw-ink="amber A700")
+          label.mdw-textfield.mdw-theme(mdw-ink="amber")
             input.mdw-textfield__input(placeholder=" ")
             .mdw-textfield__border
               .mdw-textfield__outline-gap
                 .mdw-textfield__label Name
             .mdw-textfield__error-text spacer
-          label.mdw-textfield.mdw-theme(mdw-ink="amber A700")
+          label.mdw-textfield.mdw-theme(mdw-ink="amber")
             textarea.mdw-textfield__input(placeholder=" " rows="5" required)
               | Just wanted to let you kn
             .mdw-textfield__border
@@ -243,8 +295,8 @@ include ../_mixins.pug
                 .mdw-textfield__label Message *
             .mdw-textfield__helper-text Helper text.
             .mdw-textfield__error-text Error: Required.
-          label.mdw-textfield
-            textarea.mdw-textfield__input.mdw-theme(mdw-ink="amber A700" placeholder=" " rows="5" disabled)
+          label.mdw-textfield.mdw-theme(mdw-ink="amber")
+            textarea.mdw-textfield__input(placeholder=" " rows="5" disabled)
               | This textarea is disabled.
             .mdw-textfield__border
               .mdw-textfield__outline-gap
@@ -294,10 +346,10 @@ include ../_mixins.pug
                   .mdw-textfield__label Name
             label.mdw-textfield.mdw-theme(mdw-ink="secondary" style="width:150px")
               select.mdw-textfield__input(type="phone")
-                option(value="") Unknown
-                option(value="Mobile") Mobile
-                option(value="Home") Home
-                option(value="Work") Work
+                option.mdw-theme(mdw-surface="card" value="") Unknown
+                option.mdw-theme(mdw-surface="card" value="Mobile") Mobile
+                option.mdw-theme(mdw-surface="card" value="Home") Home
+                option.mdw-theme(mdw-surface="card" value="Work") Work
               .mdw-textfield__icon(mdw-dropdown)
               .mdw-textfield__border
                 .mdw-textfield__outline-gap

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

@@ -75,5 +75,4 @@ include ../_mixins.pug
                 .mdw-list__text-line Montauk weekend
                 .mdw-list__text-line -----
       +androidnavbar
-    +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsV0g5bVFHeEpxenc/components-tooltips-touch2.png')
   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-src/core → docs/pages}/transition.js

@@ -1,12 +1,11 @@
-import * as Transition from '../../core/transition/index';
-import * as Overlay from '../../core/overlay/index';
-import * as Ripple from '../../core/ripple/index';
-import { iterateArrayLike } from '../../core/dom';
+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} */
@@ -40,8 +39,8 @@ function onItemClick(event) {
   Transition.transitionElement({
     fromShapeElement: target1,
     toShapeElement: target2,
-    fromContentElement: target1.getElementsByTagName('span')[0],
-    toContentElement: target2.getElementsByTagName('span')[0],
+    fromContentElement: target1.getElementsByClassName('demo-core-content')[0],
+    toContentElement: target2.getElementsByClassName('demo-core-content')[0],
     duration: 3000,
     revertFrom: true,
   });
@@ -51,5 +50,5 @@ function onItemClick(event) {
 
 iterateArrayLike(
   document.getElementsByClassName('demo-core-item'),
-  item => item.addEventListener('click', onItemClick)
+  (item) => item.addEventListener('click', onItemClick),
 );

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

@@ -26,5 +26,4 @@ include ../_mixins.pug
       p.mdw-type(mdw-style="body-2" mdw-baseline-bottom="68") c. 1400, Mainz Germany
     div
       div(style="margin-top:10px")
-        +target('https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1XfS9DMhlPihgJmjRFH7r9OYpLbZJGF6A%2Ftype-setting-baseline.png')
   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-src → docs}/prerender.js

@@ -1,22 +1,16 @@
-import {
-  setupMenuOptions,
-} from './_menuoptions';
-import * as Layout from '../components/layout/index';
-import * as List from '../components/list/index';
+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();
-  Layout.attach();
-  List.attachAll(document.getElementsByClassName('mdw-layout__navdrawer')[0]);
 }
 
 // Apply context first
 setupMenuOptions();
-
-Layout.onPrerender();
+Document.onPrerender();
 
 document.addEventListener('DOMContentLoaded', onDOMContentLoaded);