@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/docs/_mixins.pug

@@ -0,0 +1,155 @@
+include ../templates/index.pug
+
+mixin androidstatusbar(surfaceColor, lightness)
+  .androidstatusbar.mdw-theme(
+  mdw-surface=(surfaceColor ? surfaceColor : false)
+  mdw-light=(lightness=='light' ? '' : false)
+  mdw-dark=(lightness=='dark' ? '' : false))
+    div 12:30
+    i.material-icons(style="letter-spacing:2px;padding:0 2px") 
+
+mixin appbar(surfaceColor, lightness, start, end)
+  .mdw-appbar.mdw-elevation.mdw-theme(
+  style="z-index:4"
+  mdw-elevation="4"
+  mdw-surface=(surfaceColor ? surfaceColor : false)
+  mdw-light=(lightness=='light' ? '' : false)
+  mdw-dark=(lightness=='dark' ? '' : false))
+    .mdw-appbar__action
+      .mdw-appbar__start
+        each icon in start
+          +mdwButton({ icon:true }).material-icons= icon
+      .mdw-appbar__title
+        block
+      .mdw-appbar__end
+        each icon in end
+          +mdwButton({ icon:true })(mdw-more-button=(icon === 'more_vert')).material-icons= icon
+mixin androidnavbar
+  .androidnavbar
+    i.material-icons.back-button 
+    i.material-icons 
+    i.material-icons 
+mixin target(url)
+  .target(style=`background-image: url(${url})`)
+
+mixin navListItem(key, icon, name, activatedKey, color="secondary contrast")
+  li.mdw-list__item
+    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(
+    aria-selected=(activatedKey==key ? 'true' : 'false')
+    aria-current=(activatedKey==key ? 'page' : false)
+    href=(key + ".html")
+    mdw-ink=color
+    )
+      if (icon)
+        .mdw-list__icon.mdw-theme.material-icons(mdw-ink="medium")=icon
+      .mdw-list__text
+        .mdw-list__text-block=name
+
+
+mixin header(activated)
+  doctype html
+  html.mdw-layout.mdw-theme(lang='en' mdw-surface="binary" mdw-light)
+    head
+      title Material Design Web
+      meta(charset='utf-8')
+      meta(content='IE=edge', http-equiv='X-UA-Compatible')
+      meta(content='Material Design Web - CSS/JS Framework', name='description')
+      meta(content="width=device-width, initial-scale=1, viewport-fit=cover", name='viewport')
+      meta(name="theme-color" content="#C2185B")
+      meta(name="apple-mobile-web-app-status-bar-style" content="black-translucent")
+      meta(name="apple-mobile-web-app-capable" content="yes")
+      link(rel='stylesheet' href="https://fonts.googleapis.com/icon?family=Material+Icons")
+      link(rel='stylesheet' href='//fonts.googleapis.com/css?family=Roboto:300,400,500')
+      link(rel='stylesheet' href='//fonts.googleapis.com/css?family=Merriweather:300,400,500')
+      link(rel='stylesheet' href='docs.min.css')
+      link(rel='stylesheet' href='spec.min.css')
+      link(rel='stylesheet' href='theme-default.min.css' title="Default Theme")
+      link(rel='stylesheet' href='theme-default-fallbacks.min.css' media="all\\0" title="Default Theme")
+      link(rel='stylesheet' disabled href='theme-colored.min.css' title="Colored Theme")
+      link(rel='stylesheet' disabled href='theme-colored-fallbacks.min.css' media="all\\0" title="Colored Theme")
+      script(src='prerender.min.js')
+    body.mdw-layout__body.mdw-theme(mdw-surface="background" mdw-sidesheet-toggle="dismissible" mdw-sidesheet-style="modal")
+      .mdw-layout__menus
+      .mdw-layout__dialogs
+      nav#docs-navdrawer.mdw-layout__navdrawer
+        .mdw-layout__sheet-content.mdw-theme(mdw-surface="background" mdw-border-ink)
+          ul.mdw-list(style="padding-bottom:64px")
+            li.mdw-list__item
+              a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(
+              aria-current=activated=='Home'
+              aria-selected=(activatedKey=='Home' ? 'true' : 'false')
+              href='index.html'
+              mdw-ink="default")
+                .mdw-list__text Home
+            li.mdw-list__item(aria-expanded="true")
+              .mdw-list__content.mdw-list__subheader
+                .mdw-list__text.mdw-theme(mdw-ink="medium") Core
+                .mdw-list__secondary.mdw-theme.material-icons(mdw-ink="medium") expand_more
+              ul.mdw-list
+                +navListItem('color', 'compare', 'Color', activated, 'primary contrast')
+                +navListItem('overlay', 'tonality', 'Overlay', activated, 'primary contrast')
+                +navListItem('ripple', 'center_focus_strong', 'Ripple', activated, 'primary contrast')
+                +navListItem('transition', 'open_in_new', 'Transition', activated, 'primary contrast')
+            li.mdw-list__item.mdw-theme(aria-expanded="true")
+              .mdw-list__content.mdw-list__subheader
+                .mdw-list__text.mdw-theme(mdw-ink="medium") Components
+                .mdw-list__secondary.mdw-theme.material-icons(mdw-ink="medium") expand_more
+              ul.mdw-list
+                +navListItem('appbar', 'web_asset', 'App Bar', activated)
+                +navListItem('bottomnav', 'call_to_action', 'Bottom Navigation', activated)
+                +navListItem('button', 'crop_landscape', 'Button', activated)
+                +navListItem('card', 'crop_square', 'Card', activated)
+                +navListItem('chip', 'check_circle', 'Chip', activated)
+                +navListItem('datatable', 'format_align_justify', 'Data Table', activated)
+                +navListItem('dialog', 'select_all', 'Dialog', activated)
+                +navListItem('elevation', 'layers', 'Elevation', activated)
+                +navListItem('fab', 'add_circle', 'Floating Action Button', activated)
+                +navListItem('grid', 'view_compact', 'Grid', activated)
+                +navListItem('layout', 'view_quilt', 'Layout', activated)
+                +navListItem('list', 'view_list', 'List', activated)
+                +navListItem('menu', 'picture_in_picture', 'Menu', activated)
+                +navListItem('progress', 'timelapse', 'Progress', activated)
+                +navListItem('selection', 'toggle_on', 'Selection', activated)
+                +navListItem('slider', 'tune', 'Slider', activated)
+                +navListItem('snackbar', 'video_label', 'Snackbar', activated)
+                +navListItem('tab', 'tab', 'Tab', activated)
+                +navListItem('textfield', 'text_fields', 'Text Field', activated)
+                +navListItem('tooltip', 'info', 'Tooltip', activated)
+                +navListItem('type', 'font_download', 'Typography', activated)
+            li.mdw-list__item(aria-expanded="true")
+              .mdw-list__content.mdw-list__subheader
+                .mdw-list__text.mdw-theme(mdw-ink="medium") Adapters
+                .mdw-list__secondary.mdw-theme.material-icons(mdw-ink="medium") expand_more
+              ul.mdw-list
+                +navListItem('dom', 'calendar_view_day', 'DOM', activated)
+                +navListItem('search', 'search', 'Search', activated)
+      a.mdw-layout__scrim(href='#' tabindex="-1")
+      .mdw-layout__appbar.mdw-appbar.mdw-theme(mdw-autohide="mobile tablet" mdw-surface="secondary 500" mdw-dark)
+        .mdw-layout__appbar-shape
+        .mdw-appbar__action
+          .mdw-appbar__start
+            .mdw-tooltip__wrapper
+              +mdwButton({ icon:true }).mdw-tooltip__target.material-icons.mdw-layout__navdrawer-toggle(href="#docs-navdrawer") menu
+              .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark mdw-align="start") Menu
+          .mdw-appbar__title=activated
+          #docs-menu-buttons.mdw-appbar__end
+            .mdw-tooltip__wrapper
+              +mdwButton({ icon: true })#altThemeButton.mdw-tooltip__target.material-icons(mdw-overlay-default="medium" mdw-overlay-off="activated" aria-pressed="false") palette
+              .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark mdw-align="end") Alt Theme
+            .mdw-tooltip__wrapper
+              +mdwButton({ icon: true })#darkModeButton.mdw-tooltip__target.material-icons(mdw-overlay-default="medium" mdw-overlay-off="activated" aria-pressed="false") brightness_3
+              .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark mdw-align="end") Dark Mode
+            .mdw-tooltip__wrapper
+              +mdwButton({ icon: true })#rtlButton.mdw-tooltip__target.material-icons(mdw-overlay-default="medium" mdw-overlay-off="activated" aria-pressed="false") format_align_right
+              .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark mdw-align="end") Right-to-Left
+            .mdw-tooltip__wrapper
+              +mdwButton({ icon: true })#largeFontButton.mdw-tooltip__target.material-icons(mdw-overlay-default="medium" mdw-overlay-off="activated" aria-pressed="false") format_size
+              .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark mdw-align="end") 200% Text
+      .mdw-layout__fab
+      .mdw-layout__snackbar
+      .mdw-layout__content
+        .mdw-layout__content-page
+          block
+    script(src='postrender.min.js')
+    script(src='entire-framework.min.js')
+    script(src='docs.common.min.js')

package/docs/_partials/_androidnavbar.eta

@@ -0,0 +1,5 @@
+<div class="androidnavbar">
+  <i class="material-icons back-button">&#xE3C8;</i>
+  <i class="material-icons">&#xE836;</i>
+  <i class="material-icons">&#xE835;</i>
+</div>

package/docs/_partials/_androidstatusbar.eta

@@ -0,0 +1,13 @@
+<div <%~ Object.entries({
+  'class': 'androidstatusbar mdw-theme',
+  'mdw-surface': it?.surface,
+  'mdw-light': it?.light,
+  'mdw-dark': it?.dark
+  }).map(([key, value]) => {
+    if (value === true) return key;
+    if (value === false || value == null) return false;
+    return `${key}="${value}"`
+  }).filter(v=>v).join(' ')-%>>
+  <div>12:30</div>
+  <i class="material-icons" style="letter-spacing:2px;padding:0 2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
+</div>

package/docs/_partials/_appbar.eta

@@ -0,0 +1,29 @@
+<% var T = '../../templates/index.eta'; %>
+<div <%~ Object.entries({
+  'class': 'mdw-appbar mdw-elevation mdw-theme',
+  'style': 'z-index:4',
+  'mdw-elevation': 4,
+  'mdw-surface': it?.surface,
+  'mdw-light': it?.light,
+  'mdw-dark': it?.dark
+  }).map(([key, value]) => {
+    if (value === true) return key;
+    if (value === false || value == null) return false;
+    return `${key}="${value}"`
+  }).filter(v=>v).join(' ')-%>>
+  <div class="mdw-appbar__action">
+    <div class="mdw-appbar__start">
+      <%_~ it?.start?.map((icon) => includeFile(T, { button: {
+        class:'material-icons', icon:true, text:icon }})).join(' ') ?? '' _%>
+    </div>
+    <div class="mdw-appbar__title">
+      <%_~ it?.body ?? '' %><%= it?.text ?? '' _%>
+    </div>
+    <div class="mdw-appbar__end">
+      <%_~ it?.end?.map((icon) => includeFile(T, { button:{
+        class:'material-icons', icon:true, text:icon,
+        attributes: { 'mdw-more-button': icon === 'more_vert' }
+      }})).join(' ') ?? '' _%>
+    </div>
+  </div>
+</div>

package/docs/_partials/_buttontest.eta

@@ -0,0 +1,31 @@
+<% var T = '../../templates/index.eta'; %>
+<div class="display-flex flex-wrap">
+  <%~ includeFile(T, {button: { text: 'Text' }}) %>
+  <%~ includeFile(T, {button: { raised:true, text: 'Contained' }}) %>
+  <%~ includeFile(T, {button: { raised:true, disabled:true, text: 'Disabled' }}) %>
+  <%~ includeFile(T, {button: { borderInk:'default', text: 'Outlined' }}) %>
+</div>
+<div style="height:24px;"></div>
+<div class="display-flex flex-wrap">
+  <%~ includeFile(T, {button: { ink:'primary', text:'Text' }})  %>
+  <%~ includeFile(T, {button: { ink:'primary', raised:true, text: 'Contained' }})  %>
+  <%~ includeFile(T, {button: { ink:'primary', raised:true, disabled:true, text:'Disabled' }})  %>
+  <%~ includeFile(T, {button: { ink:'secondary', text:'Secondary' }})  %>
+  <%~ includeFile(T, {button: { ink:'secondary', borderInk:true, text:'Outlined' }})  %>
+</div>
+<div style="height:24px;"></div>
+<div class="display-flex flex-wrap">
+  <%~ includeFile(T, { button: { surface:'primary 500', dark:true, text:'Text' }}) %>
+  <%~ includeFile(T, { button: { surface:'primary 500', dark:true, raised:true, text:'Contained' }}) %>
+  <%~ includeFile(T, { button: { surface:'primary 500', dark:true, raised:true, disabled:true, text:'Disabled' }}) %>
+  <%~ includeFile(T, { button: { surface:'secondary 100', light:true, raised:true, text:'Outlined' }}) %>
+</div>
+<div style="height:24px;"></div>
+<div class="display-flex flex-wrap">
+  <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', icon:true }}) %>
+  <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', ink:"warn", dark:true, icon:true }}) %>
+  <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', surface:"warn 500", dark:true, icon:true }}) %>
+  <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', surface:"warn 500", dark:true, icon:true, raised:true }}) %>
+  <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', surface:"warn 500", dark:true, icon:true, raised:true, disabled:true }}) %>
+  <%~ includeFile(T, { button: { class:'material-icons', text:'favorite', icon:true, disabled:true }}) %>
+</div>

package/docs/_partials/_header.eta

@@ -0,0 +1,149 @@
+<% var T = '../../templates/index.eta' -%>
+<!DOCTYPE html>
+<html class="mdw-layout mdw-theme" lang="en" mdw-surface="binary" mdw-light>
+
+<head>
+  <title>Material Design Web</title>
+  <meta charset="utf-8">
+  <meta content="IE=edge" http-equiv="X-UA-Compatible">
+  <meta content="Material Design Web - CSS/JS Framework" name="description">
+  <meta content="width=device-width,initial-scale=1,viewport-fit=cover" name="viewport">
+  <meta name="theme-color" content="#C2185B">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500">
+  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Merriweather:300,400,500">
+  <link rel="stylesheet" href="docs.min.css">
+  <link rel="stylesheet" href="spec.min.css">
+  <link rel="stylesheet" href="theme-default.min.css" title="Default Theme">
+  <link rel="stylesheet" href="theme-default-fallbacks.min.css" media="all\0" title="Default Theme">
+  <link rel="stylesheet" disabled href="theme-colored.min.css" title="Colored Theme">
+  <link rel="stylesheet" disabled href="theme-colored-fallbacks.min.css" media="all\0" title="Colored Theme">
+  <script src="prerender.min.js"></script>
+</head>
+
+<body class="mdw-layout__body mdw-theme" mdw-surface="background" mdw-sidesheet-toggle="dismissible" mdw-sidesheet-style="modal">
+  <div class="mdw-layout__menus"></div>
+  <div class="mdw-layout__dialogs"></div>
+  <nav class="mdw-layout__navdrawer" id="docs-navdrawer">
+    <div class="mdw-layout__sheet-content mdw-theme" mdw-surface="background" mdw-border-ink>
+      <ul class="mdw-list" style="padding-bottom:64px;">
+        <li class="mdw-list__item">
+          <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" <%~ it.page === 'Home' ? 'aria-current="page"' : '' %> aria-selected="<%~ it.page === 'Home'%>" href="index.html" mdw-ink="default">
+            <div class="mdw-list__text">Home</div>
+          </a>
+        </li>
+        <li class="mdw-list__item" aria-expanded="true">
+          <div class="mdw-list__content mdw-list__subheader">
+            <div class="mdw-list__text mdw-theme" mdw-ink="medium">Core</div>
+            <div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div>
+          </div>
+          <ul class="mdw-list">
+            <%~ includeFile('../_partials/_navlistitem.eta', {key: 'color', icon: 'compare', name: 'Color', page: it.page, color: 'primary contrast'}) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key: 'overlay', icon: 'tonality', name: 'Overlay', page: it.page, color: 'primary contrast'}) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key: 'ripple', icon: 'center_focus_strong', name: 'Ripple', page: it.page, color: 'primary contrast'}) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key: 'transition', icon: 'dynamic_feed', name: 'Transition', page: it.page, color: 'primary contrast'}) %>
+          </ul>
+        </li>
+        <li class="mdw-list__item mdw-theme" aria-expanded="true">
+          <div class="mdw-list__content mdw-list__subheader">
+            <div class="mdw-list__text mdw-theme" mdw-ink="medium">Components</div>
+            <div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div>
+          </div>
+          <ul class="mdw-list">
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'appbar', icon: 'web_asset', name: 'App Bar', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'bottomnav', icon: 'call_to_action', name: 'Bottom Navigation', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'button', icon: 'crop_landscape', name: 'Button', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'card', icon: 'crop_square', name: 'Card', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'chip', icon: 'check_circle', name: 'Chip', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'datatable', icon: 'format_align_justify', name: 'Data Table', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'dialog', icon: 'select_all', name: 'Dialog', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'elevation', icon: 'layers', name: 'Elevation', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'fab', icon: 'add_circle', name: 'Floating Action Button', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'grid', icon: 'view_compact', name: 'Grid', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'layout', icon: 'view_quilt', name: 'Layout', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'list', icon: 'view_list', name: 'List', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'menu', icon: 'picture_in_picture', name: 'Menu', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'progress', icon: 'timelapse', name: 'Progress', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'selection', icon: 'toggle_on', name: 'Selection', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'slider', icon: 'tune', name: 'Slider', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'snackbar', icon: 'video_label', name: 'Snackbar', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'tab', icon: 'tab', name: 'Tab', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'textfield', icon: 'text_fields', name: 'Text Field', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'tooltip', icon: 'info', name: 'Tooltip', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'type', icon: 'font_download', name: 'Typography', page: it.page }) %>
+          </ul>
+        </li>
+        <li class="mdw-list__item" aria-expanded="true">
+          <div class="mdw-list__content mdw-list__subheader">
+            <div class="mdw-list__text mdw-theme" mdw-ink="medium">Adapters</div>
+            <div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div>
+          </div>
+          <ul class="mdw-list">
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'dom', icon:'calendar_view_day', name:'DOM', page: it.page }) %>
+            <%~ includeFile('../_partials/_navlistitem.eta', {key:'search', icon:'search', name:'Search', page: it.page }) %>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </nav>
+  <a class="mdw-layout__scrim" href="#" tabindex="-1"></a>
+  <div class="mdw-layout__appbar mdw-appbar mdw-theme" mdw-autohide="mobile tablet" mdw-surface="secondary 500" mdw-dark>
+    <div class="mdw-layout__appbar-shape"></div>
+    <div class="mdw-appbar__action">
+      <div class="mdw-appbar__start">
+        <div class="mdw-tooltip__wrapper">
+          <%~ includeFile(T, { button: {
+               class: 'mdw-tooltip__target material-icons mdw-layout__navdrawer-toggle',
+               text:'menu', icon:true, attributes: { href:"#docs-navdrawer" },
+            }}) %>
+          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="start">Menu</div>
+        </div>
+      </div>
+      <div class="mdw-appbar__title"><%~ it.page %></div>
+      <div class="mdw-appbar__end" id="docs-menu-buttons">
+        <div class="mdw-tooltip__wrapper">
+          <%~ includeFile(T, { button: {
+              id: 'altThemeButton', class: 'mdw-tooltip__target material-icons',
+              text:'palette', icon:true,  attributes: { 'mdw-overlay-default':'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' }, 
+           }}) %>
+          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Alt Theme</div>
+        </div>
+        <div class="mdw-tooltip__wrapper">
+          <%~ includeFile(T, { button: {
+              id: 'darkModeButton', class: 'mdw-tooltip__target material-icons',
+              text: 'brightness_3', icon: true, attributes: { 'mdw-overlay-default':'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
+            }}) %>
+          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Dark Mode</div>
+        </div>
+        <div class="mdw-tooltip__wrapper">
+          <%~ includeFile(T, { button: {
+              id: 'rtlButton', class: 'mdw-tooltip__target material-icons',
+              text: 'format_align_right', icon: true, attributes: { 'mdw-overlay-default': 'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
+            }}) %>
+          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">Right-to-Left</div>
+        </div>
+        <div class="mdw-tooltip__wrapper">
+          <%~ includeFile(T, { button: {
+              id: 'largeFontButton', class: 'mdw-tooltip__target material-icons',
+              text: 'format_size', icon: true, attributes: { 'mdw-overlay-default': 'medium', 'mdw-overlay-off':'activated', 'aria-pressed':'false' },
+            }}) %>
+          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark mdw-align="end">200% Text</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-layout__fab"></div>
+  <div class="mdw-layout__snackbar"></div>
+  <div class="mdw-layout__content">
+    <div class="mdw-layout__content-page">
+      <%~ it?.body ?? '' %>
+    </div>
+  </div>
+</body>
+<script src="postrender.min.js"></script>
+<script src="entire-framework.min.js"></script>
+<script src="docs.common.min.js"></script>
+
+</html>

package/docs/_partials/_navlistitem.eta

@@ -0,0 +1,16 @@
+<li class="mdw-list__item">
+  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" <%_~ [
+    it.page === it.key ? 'aria-current="page"' : '',
+    `aria-selected="${it.page === it.key}"`,
+    `href="${it.key}.html"`,
+    `mdw-ink="${it.color ?? 'secondary contrast'}"`,
+  ].filter(v=>v).join(' ')
+  %>>
+    <% if (it.icon) { %>
+    <div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium"><%= it.icon ?? '' %></div>
+    <% } %>
+    <div class="mdw-list__text">
+      <div class="mdw-list__text-block"><%= it.name ?? '' %></div>
+    </div>
+  </a>
+</li>

package/docs/_partials/_target.eta

@@ -0,0 +1 @@
+<div class="target" style="background-image:url(<%~ it.url %>)"></div>

package/docs/_sample-utils.js

@@ -0,0 +1,93 @@
+import { iterateArrayLike } from '../core/dom.js';
+
+/**
+ * @param {Element|HTMLElement} element
+ * @param {boolean} [pug=false]
+ * @param {string} [linePrefix='']
+ * @return {string}
+ */
+function convertElementToCode(element, pug = false, linePrefix = '') {
+  const htmlType = element.tagName.toLowerCase();
+  /** @type {string[]} */
+  const attributes = [];
+  /** @type {string[]} */
+  const classes = [];
+  iterateArrayLike(element.classList, (c) => {
+    classes.push(c);
+  });
+  iterateArrayLike(element.attributes, (attr) => {
+    if (attr.name === 'class') {
+      return;
+    }
+    if (attr.value.length) {
+      attributes.push(`${attr.name}="${attr.value}"`);
+    } else {
+      attributes.push(attr.name);
+    }
+  });
+  attributes.sort();
+  const syntaxItems = [
+    htmlType,
+    classes.length ? `class="${classes.join(' ')}"` : '',
+    attributes.join(' '),
+  ];
+  const openingHTMLLine = pug
+    ? `${htmlType === 'div' && classes.length ? '' : htmlType}${classes.length ? `.${classes.join('.')}` : ''}${attributes.length ? `(${attributes.join(' ')})` : ''}`
+    : `<${syntaxItems.filter((item) => item).join(' ').trim()}>`;
+  const closingHTMLLine = pug ? '' : `</${htmlType}>`;
+  const lines = [openingHTMLLine];
+  /** @type {string[]} */
+  const innerLines = [];
+  let onlyText = true;
+  iterateArrayLike(element.childNodes, (child) => {
+    let lineText;
+    if (child instanceof HTMLElement) {
+      lineText = convertElementToCode(child, pug, `  ${linePrefix}`);
+      if (lineText.trim()) {
+        onlyText = false;
+      }
+    } else if (child.nodeValue) {
+      if (pug) {
+        lineText = `  ${child.nodeValue}`;
+      }
+    }
+    if (lineText && lineText.trim()) {
+      innerLines.push(lineText);
+    }
+  });
+  if (onlyText) {
+    if (pug) {
+      return `${linePrefix + lines.join('')} ${innerLines.join('').trim()}`;
+    }
+    return linePrefix + lines.join('') + innerLines.join('').trim() + closingHTMLLine;
+  }
+  innerLines.forEach((line) => lines.push(line));
+  lines.push(linePrefix + closingHTMLLine);
+  return linePrefix + lines.filter((line) => line.trim()).join('\n');
+}
+
+/**
+ * @param {Element} element
+ * @param {string} tagname
+ * @return {Element}
+ */
+function changeElementTagName(element, tagname) {
+  const newElement = document.createElement(tagname);
+  for (let i = element.attributes.length - 1; i >= 0; i -= 1) {
+    const attr = element.attributes.item(i);
+    /** @type {Attr} */
+    const clonedAttr = (attr.cloneNode());
+    newElement.attributes.setNamedItem(clonedAttr);
+  }
+  while (element.firstChild) {
+    newElement.appendChild(element.firstChild);
+  }
+
+  element.parentElement.replaceChild(newElement, element);
+  return newElement;
+}
+
+export {
+  convertElementToCode,
+  changeElementTagName,
+};

package/docs/_storage.js

@@ -0,0 +1,33 @@
+/**
+ * @param {string} key
+ * @return {string}
+ */
+export function getStorageItem(key) {
+  if (!window.localStorage) {
+    return null;
+  }
+  return localStorage.getItem(key);
+}
+
+/**
+ * @param {string} key
+ * @param {string} value
+ * @return {void}
+ */
+export function setStorageItem(key, value) {
+  if (!window.localStorage) {
+    return;
+  }
+  localStorage.setItem(key, value);
+}
+
+/**
+ * @param {string} key
+ * @return {void}
+ */
+export function removeStorageItem(key) {
+  if (!window.localStorage) {
+    return;
+  }
+  localStorage.removeItem(key);
+}