@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/core/transition/index.js

@@ -1,6 +1,17 @@
 // https://material.io/design/navigation/navigation-transitions.html
 
-import { nextTick } from '../dom';
+import { nextTick } from '../dom.js';
+
+/**
+ * @typedef {Object} ShapeTranformDetails
+ * @prop {number} originWidth
+ * @prop {number} originHeight
+ * @prop {number} translateX
+ * @prop {number} translateY
+ * @prop {number} scaleX
+ * @prop {number} scaleY
+ * @prop {function():string} toString
+ */
 
 /**
  * @param {string} px
@@ -58,7 +69,7 @@ function convertBoxShadow(stringValue, scaleX, scaleY) {
       blurRadius,
       spreadRadius,
       color,
-    ].filter(v => v).join(' ');
+    ].filter((v) => v).join(' ');
   }
 
   if (!stringValue) {
@@ -66,11 +77,11 @@ function convertBoxShadow(stringValue, scaleX, scaleY) {
   }
   return stringValue
     // Strip spaces from anything parenthesized
-    .replace(/\([^)]+\)/g, substring => substring.replace(/ /g, ''))
+    .replace(/\([^)]+\)/g, (substring) => substring.replace(/ /g, ''))
     // Split shadows by commas no inside parentheses
     .match(/[^,(]+\([^)]+\)?[^,]*(|$)/g)
     // Trim empty spaces
-    .map(shadow => shadow.trim())
+    .map((shadow) => shadow.trim())
     // Convert values
     .map(convertShadow)
     // Rejoin shadows
@@ -94,7 +105,7 @@ function convertBorderRadius(stringValue, width, height) {
     if (value.indexOf('%') === -1) {
       return numValue;
     }
-    return (numValue * length / 100.0);
+    return ((numValue * length) / 100.0);
   }
 
   if (!stringValue) {
@@ -121,7 +132,7 @@ function convertBorderRadius(stringValue, width, height) {
  * @param {HTMLElement} targetElement
  * @param {HTMLElement} originElement
  * @param {CSSStyleDeclaration} [originStyle]
- * @return {Object}
+ * @return {ShapeTranformDetails}
  */
 export function getShapeTransform(targetElement, originElement, originStyle) {
   const originRect = originElement.getBoundingClientRect();
@@ -166,11 +177,11 @@ export function getShapeTransform(targetElement, originElement, originStyle) {
  * @param {string} property
  * @param {function(TransitionEvent):void} callback
  * @param {number} [expectedDuration]
- * @return {function} removeListener
+ * @return {Function} removeListener
  */
 function buildTransitionEndListener(element, property, callback, expectedDuration) {
   let hasEnded = false;
-  const onTransitionEnd = (event) => {
+  const onTransitionEnd = (/** @type {TransitionEvent} */ event) => {
     if (event.propertyName !== property) {
       return;
     }
@@ -200,8 +211,8 @@ function buildTransitionEndListener(element, property, callback, expectedDuratio
  * @prop {HTMLElement} toContentElement
  * @prop {number} [duration=250|300] (250ms collapse or 300ms expand)
  * @prop {boolean} [revertFrom=false] Revert from elements on completion
- * @prop {function(TransitionElementOptions)} [onTransitionEnd]
- * @prop {function(TransitionElementOptions)} [onComplete]
+ * @prop {function(TransitionElementOptions):any} [onTransitionEnd]
+ * @prop {function(TransitionElementOptions):any} [onComplete]
  */
 
 /**
@@ -212,7 +223,7 @@ export function transitionElement(options) {
   const toStyleSyle = window.getComputedStyle(options.toShapeElement);
 
   const shapeTransform = getShapeTransform(
-    options.fromShapeElement, options.toShapeElement, toStyleSyle
+    options.fromShapeElement, options.toShapeElement, toStyleSyle,
   );
   const contentTransform = getShapeTransform(options.toContentElement, options.fromContentElement);
 
@@ -229,10 +240,15 @@ export function transitionElement(options) {
     'visibility',
   ];
 
+  /** @type {Object.<string,string>} */
   const oldFromShapeProperties = {};
+  /** @type {Object.<string,string>} */
   const oldToShapeProperties = {};
+  /** @type {Object.<string,string>} */
   const oldFromContentProperties = {};
+  /** @type {Object.<string,string>} */
   const oldToContentProperties = {};
+  /** @type {Object.<string,string>} */
   const newFromShapeProperties = {};
   transitionProperties.forEach((prop) => {
     oldFromShapeProperties[prop] = options.fromShapeElement.style.getPropertyValue(prop);
@@ -243,28 +259,28 @@ export function transitionElement(options) {
       newFromShapeProperties[prop] = convertBoxShadow(
         toStyleSyle.getPropertyValue(prop),
         shapeTransform.scaleX,
-        shapeTransform.scaleY
+        shapeTransform.scaleY,
       );
     } else if (prop === 'border-radius') {
       const topLeft = convertBorderRadius(
         toStyleSyle.getPropertyValue('border-top-left-radius'),
         shapeTransform.originWidth,
-        shapeTransform.originHeight
+        shapeTransform.originHeight,
       );
       const topRight = convertBorderRadius(
         toStyleSyle.getPropertyValue('border-top-right-radius'),
         shapeTransform.originWidth,
-        shapeTransform.originHeight
+        shapeTransform.originHeight,
       );
       const bottomLeft = convertBorderRadius(
         toStyleSyle.getPropertyValue('border-bottom-left-radius'),
         shapeTransform.originWidth,
-        shapeTransform.originHeight
+        shapeTransform.originHeight,
       );
       const bottomRight = convertBorderRadius(
         toStyleSyle.getPropertyValue('border-bottom-right-radius'),
         shapeTransform.originWidth,
-        shapeTransform.originHeight
+        shapeTransform.originHeight,
       );
       const horizontalRadii = [
         `${topLeft.horizontal / shapeTransform.scaleX}px`,
@@ -293,7 +309,7 @@ export function transitionElement(options) {
   options.toContentElement.style.setProperty('opacity', '0');
   options.toContentElement.style.setProperty('transition', 'none');
   options.toContentElement.style.setProperty('transform-origin', '0 0 0');
-  options.toContentElement.style.setProperty('transform', contentTransform);
+  options.toContentElement.style.setProperty('transform', contentTransform.toString());
   options.toContentElement.style.setProperty('z-index', '9');
   options.toContentElement.style.setProperty('visibility', 'visible');
 
@@ -348,8 +364,8 @@ export function transitionElement(options) {
       const fadeInTime = (calculatedDuration * 0.70).toString(10);
       const fadeOutTime = (calculatedDuration * 0.30).toString(10);
       const transformTransition = transitionProperties
-        .filter(prop => prop !== 'transform-origin' && prop !== 'opacity' && prop !== 'transition')
-        .map(prop => `${prop} ${totalDuration}ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s`)
+        .filter((prop) => prop !== 'transform-origin' && prop !== 'opacity' && prop !== 'transition')
+        .map((prop) => `${prop} ${totalDuration}ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s`)
         .join(', ');
       const fadeInTransition = `opacity ${fadeInTime}ms cubic-bezier(0.0, 0.0, 0.2, 1) ${fadeOutTime}ms`;
       const fadeOutTransition = [
@@ -360,7 +376,7 @@ export function transitionElement(options) {
       options.fromShapeElement.style.setProperty('transition', transformTransition);
       transitionProperties.forEach((prop) => {
         if (prop === 'transform') {
-          options.fromShapeElement.style.setProperty('transform', shapeTransform);
+          options.fromShapeElement.style.setProperty('transform', shapeTransform.toString());
         } else if (prop === 'transition') {
           // noop;
         } else if (prop === 'transform-origin') {

package/{docs-src → docs}/_menuoptions.js

@@ -1,29 +1,22 @@
-import { setStorageItem, removeStorageItem, getStorageItem } from './_storage';
-import { iterateArrayLike } from '../core/dom';
+import { getStorageItem, removeStorageItem, setStorageItem } from './_storage.js';
 
 /**
  * @param {boolean} value
- * @param {Element=} button
+ * @param {Element} [button]
  * @return {void}
  */
 export function setRTLMode(value, button) {
   if (value) {
-    document.documentElement.setAttribute('dir', 'rtl');
-    if (button) {
-      button.setAttribute('aria-pressed', 'true');
-    }
-    // element.setAttribute('mdw-active', '');
-    // Poor visibility even though spec says 70% opacity
+    document.documentElement.dir = 'rtl';
     setStorageItem('rtlmode', 'true');
   } else {
     // Explicit LTR is required for Safari to support repeated toggling
-    document.documentElement.setAttribute('dir', 'ltr');
-    if (button) {
-      button.setAttribute('aria-pressed', 'false');
-    }
-    // element.removeAttribute('mdw-active');
+    document.documentElement.dir = 'ltr';
     removeStorageItem('rtlmode');
   }
+  if (button) {
+    button.setAttribute('aria-pressed', value ? 'true' : 'false');
+  }
 }
 
 /** @return {boolean} */
@@ -37,17 +30,15 @@ export function isDarkMode() {
 
 /**
  * @param {boolean} value
- * @param {Element=} button
+ * @param {Element} [button]
  * @return {void}
  */
 export function setDarkMode(value, button) {
   if (value) {
     document.documentElement.setAttribute('mdw-dark', '');
-    document.documentElement.setAttribute('mdw-surface', 'black');
     document.documentElement.removeAttribute('mdw-light');
   } else {
     document.documentElement.setAttribute('mdw-light', '');
-    document.documentElement.setAttribute('mdw-surface', 'white');
     document.documentElement.removeAttribute('mdw-dark');
   }
   const stringValue = (value ? 'true' : 'false');
@@ -59,24 +50,26 @@ export function setDarkMode(value, button) {
 
 /**
  * @param {boolean} value
- * @param {Element=} button
+ * @param {Element} [button]
  * @return {void}
  */
 export function setAltTheme(value, button) {
-  iterateArrayLike(document.head.getElementsByTagName('link'), (stylesheet) => {
+  const items = document.head.getElementsByTagName('link');
+  for (let i = 0; i < items.length; i += 1) {
+    const stylesheet = items.item(i);
     if (stylesheet.href.indexOf(value ? 'theme-colored' : 'theme-default') !== -1) {
-      stylesheet.removeAttribute('disabled');
+      stylesheet.disabled = false;
     }
     if (stylesheet.href.indexOf(value ? 'theme-default' : 'theme-colored') !== -1) {
-      stylesheet.setAttribute('disabled', '');
+      stylesheet.disabled = true;
     }
-  });
+  }
 
   const stringValue = (value ? 'true' : 'false');
   if (button) {
     button.setAttribute('aria-pressed', stringValue);
   }
-  const statusBarAttribute = document.head.getElementsByTagName('meta')['theme-color'];
+  const statusBarAttribute = document.head.getElementsByTagName('meta').namedItem('theme-color');
   if (statusBarAttribute) {
     statusBarAttribute.setAttribute('content', value ? '#FF5722' : '#E91E63');
   }
@@ -86,26 +79,20 @@ export function setAltTheme(value, button) {
 
 /**
  * @param {string} value
- * @param {Element=} button
+ * @param {Element} [button]
  * @return {void}
  */
 export function setFontSize(value, button) {
   if (value) {
     document.documentElement.style.setProperty('font-size', value);
-    if (button) {
-      button.setAttribute('aria-pressed', 'true');
-    }
-    // element.setAttribute('mdw-active', '');
-    // Poor visibility even though spec says 70% opacity
     setStorageItem('fontsize', value);
   } else {
     document.documentElement.style.removeProperty('font-size');
-    if (button) {
-      button.setAttribute('aria-pressed', 'false');
-    }
-    // element.removeAttribute('mdw-active');
     removeStorageItem('fontsize');
   }
+  if (button) {
+    button.setAttribute('aria-pressed', value ? 'true' : 'false');
+  }
 }
 
 /**
@@ -120,7 +107,7 @@ function setupRTLMode(element) {
     return;
   }
   element.addEventListener('click', () => {
-    if (document.documentElement.getAttribute('dir') === 'rtl') {
+    if (document.documentElement.dir === 'rtl') {
       setRTLMode(false, element);
     } else {
       setRTLMode(true, element);

package/{docs-src → docs}/_mixins.pug

@@ -9,7 +9,9 @@ mixin androidstatusbar(surfaceColor, lightness)
     i.material-icons(style="letter-spacing:2px;padding:0 2px") 
 
 mixin appbar(surfaceColor, lightness, start, end)
-  .mdw-appbar.mdw-theme(
+  .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))
@@ -33,19 +35,20 @@ mixin target(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-current=(activatedKey==key ? 'page' : false)
     aria-selected=(activatedKey==key ? 'true' : 'false')
+    aria-current=(activatedKey==key ? 'page' : false)
     href=(key + ".html")
     mdw-ink=color
     )
-      .mdw-list__icon.mdw-theme.material-icons(mdw-ink="medium")=icon
+      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')
+  html.mdw-layout.mdw-theme(lang='en' mdw-surface="binary" mdw-light)
     head
       title Material Design Web
       meta(charset='utf-8')
@@ -60,36 +63,38 @@ mixin header(activated)
       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')
-      link(rel='stylesheet' href='theme-default-fallbacks.min.css' media="screen and (-ms-high-contrast: active), (-ms-high-contrast: none)")
-      link(rel='stylesheet' disabled href='theme-colored.min.css' title="alt")
-      link(rel='stylesheet' disabled href='theme-colored-fallbacks.min.css' media="screen and (-ms-high-contrast: active), (-ms-high-contrast: none)" title="alt")
-
-      script(src='prerender.common.min.js')
+      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.mdw-layout__navdrawer
+      nav#docs-navdrawer.mdw-layout__navdrawer
         .mdw-layout__sheet-content.mdw-theme(mdw-surface="background" mdw-border-ink)
-          ul.mdw-list(role="tree")
+          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' href='index.html' mdw-ink="default")
+              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__expander.mdw-theme(aria-expanded="true")
-              span.mdw-list__expander-content.mdw-list__subheader
+            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__item-group(role="group")
+              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__expander.mdw-theme(aria-expanded="true")
-              span.mdw-list__expander-content.mdw-list__subheader
+            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__item-group(role="group")
+              ul.mdw-list
                 +navListItem('appbar', 'web_asset', 'App Bar', activated)
                 +navListItem('bottomnav', 'call_to_action', 'Bottom Navigation', activated)
                 +navListItem('button', 'crop_landscape', 'Button', activated)
@@ -104,7 +109,6 @@ mixin header(activated)
                 +navListItem('list', 'view_list', 'List', activated)
                 +navListItem('menu', 'picture_in_picture', 'Menu', activated)
                 +navListItem('progress', 'timelapse', 'Progress', activated)
-                +navListItem('search', 'search', 'Search', activated)
                 +navListItem('selection', 'toggle_on', 'Selection', activated)
                 +navListItem('slider', 'tune', 'Slider', activated)
                 +navListItem('snackbar', 'video_label', 'Snackbar', activated)
@@ -112,7 +116,14 @@ mixin header(activated)
                 +navListItem('textfield', 'text_fields', 'Text Field', activated)
                 +navListItem('tooltip', 'info', 'Tooltip', activated)
                 +navListItem('type', 'font_download', 'Typography', activated)
-      .mdw-layout__scrim
+            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
@@ -123,20 +134,22 @@ mixin header(activated)
           .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-activated="off" aria-pressed="false") palette
+              +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-activated="off" aria-pressed="false") brightness_3
+              +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-activated="off" aria-pressed="false") format_align_right
+              +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-activated="off" aria-pressed="false") format_size
+              +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='default.common.min.js')
+    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>