@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/docs/pages/card.js

@@ -1,4 +1,4 @@
-import { iterateArrayLike, setTextNode } from '../../core/dom.js';
+import { setTextNode } from '../../core/dom.js';
 import { convertElementToCode } from '../_sample-utils.js';
 
 /** @type {HTMLElement} */
@@ -15,8 +15,10 @@ let primaryButtonElement;
 /** @return {void} */
 function updateSampleCode() {
   const htmlCodeElement = document.getElementsByClassName('component-html')[0];
-  setTextNode(htmlCodeElement, convertElementToCode(sampleComponent,
-    document.getElementById('usePug').getAttribute('aria-pressed') === 'true'));
+  setTextNode(htmlCodeElement, convertElementToCode(
+    sampleComponent,
+    document.getElementById('usePug').getAttribute('aria-pressed') === 'true',
+  ));
 }
 
 /** @return {void} */
@@ -54,11 +56,11 @@ function onOptionChange(event) {
     case 'raise-hover':
       raiseOptions = (sampleComponent.getAttribute('mdw-raised') || '').split(' ');
       if (checked) {
-        if (raiseOptions.indexOf(name.substr('raise-'.length)) === -1) {
-          raiseOptions.push(name.substr('raise-'.length));
+        if (!raiseOptions.includes(name.slice('raise-'.length))) {
+          raiseOptions.push(name.slice('raise-'.length));
         }
       } else {
-        raiseOptions = raiseOptions.filter((o) => o !== name.substr('raise-'.length));
+        raiseOptions = raiseOptions.filter((o) => o !== name.slice('raise-'.length));
       }
       raiseOptions.sort();
       if (raiseOptions.length) {
@@ -69,7 +71,7 @@ function onOptionChange(event) {
       break;
     case 'media-placement':
       if (mediaElement.parentElement) {
-        mediaElement.parentElement.removeChild(mediaElement);
+        mediaElement.remove();
       }
       switch (value) {
         default:
@@ -112,7 +114,7 @@ function onOptionChange(event) {
           sampleComponent.insertBefore(primaryButtonElement, sampleComponent.firstChild);
         }
       } else if (primaryButtonElement.parentElement) {
-        primaryButtonElement.parentElement.removeChild(primaryButtonElement);
+        primaryButtonElement.remove();
       }
       break;
     case 'secondary-actions':
@@ -121,7 +123,7 @@ function onOptionChange(event) {
           sampleComponent.appendChild(actionsElement);
         }
       } else if (actionsElement.parentElement) {
-        actionsElement.parentElement.removeChild(actionsElement);
+        actionsElement.remove();
       }
       break;
     case 'close-action':
@@ -130,17 +132,17 @@ function onOptionChange(event) {
           sampleComponent.insertBefore(closeActionElement, sampleComponent.getElementsByClassName('mdw-card__header')[0]);
         }
       } else if (closeActionElement.parentElement) {
-        closeActionElement.parentElement.removeChild(closeActionElement);
+        closeActionElement.remove();
       }
       break;
     case 'surface':
       sampleComponent.setAttribute('mdw-surface', value.replace(/ (light|dark)/, ''));
-      if (value.indexOf(' light') === -1) {
+      if (!value.includes(' light')) {
         sampleComponent.removeAttribute('mdw-light');
       } else {
         sampleComponent.setAttribute('mdw-light', '');
       }
-      if (value.indexOf(' dark') === -1) {
+      if (!value.includes(' dark')) {
         sampleComponent.removeAttribute('mdw-dark');
       } else {
         sampleComponent.setAttribute('mdw-dark', '');
@@ -159,17 +161,13 @@ function onOptionChange(event) {
 /** @return {void} */
 function setupComponentOptions() {
   sampleComponent = document.querySelector('.component-sample .mdw-card');
-  /** @type {HTMLElement} */
-  mediaElement = (sampleComponent.getElementsByClassName('mdw-card__media')[0]);
-  /** @type {HTMLElement} */
-  actionsElement = (sampleComponent.getElementsByClassName('mdw-card__actions')[0]);
-  /** @type {HTMLElement} */
-  primaryButtonElement = (sampleComponent.getElementsByClassName('mdw-card__button')[0]);
-  /** @type {HTMLElement} */
-  closeActionElement = (sampleComponent.getElementsByClassName('mdw-card__end')[0]);
-  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
+  mediaElement = /** @type {HTMLElement} */ (sampleComponent.getElementsByClassName('mdw-card__media')[0]);
+  actionsElement = /** @type {HTMLElement} */ (sampleComponent.getElementsByClassName('mdw-card__actions')[0]);
+  primaryButtonElement = /** @type {HTMLElement} */ (sampleComponent.getElementsByClassName('mdw-card__button')[0]);
+  closeActionElement = /** @type {HTMLElement} */ (sampleComponent.getElementsByClassName('mdw-card__end')[0]);
+  for (const el of document.querySelectorAll('input[name]')) {
     el.addEventListener('change', onOptionChange);
-  });
+  }
 }
 
 setupComponentOptions();

package/docs/pages/chip.js

@@ -1,8 +1,7 @@
 import * as Chip from '../../components/chip/index.js';
-import { iterateArrayLike } from '../../core/dom.js';
 import { convertElementToCode } from '../_sample-utils.js';
 
-/** @type {ArrayLike<HTMLElement>} */
+/** @type {Iterable<HTMLElement>} */
 let sampleComponents;
 
 /** @return {void} */
@@ -12,7 +11,7 @@ function updateSampleCode() {
   const useJS = jsRequired || jsOptional;
 
   // Strip JS related elements and attributes
-  iterateArrayLike(sampleComponents, Chip.detach);
+  for (const element of sampleComponents) { Chip.detach(element); }
 
   const htmlCodeElement = document.getElementsByClassName('component-html')[0];
   const sampleContainer = document.querySelector('.component-sample__container').firstElementChild;
@@ -20,7 +19,7 @@ function updateSampleCode() {
 
   // Reattach JS if requested
   if (useJS) {
-    iterateArrayLike(sampleComponents, Chip.attach);
+    for (const element of sampleComponents) { Chip.attach(element); }
   }
 
   const jsCodeElement = document.getElementsByClassName('component-js')[0];
@@ -29,10 +28,10 @@ function updateSampleCode() {
 
 /** @return {void} */
 function initializeSampleComponents() {
-  iterateArrayLike(document.querySelectorAll('.js .mdw-tab'), Chip.attach);
-  iterateArrayLike(document.getElementsByTagName('form'), (formElement) => {
+  for (const element of document.querySelectorAll('.js .mdw-tab')) { Chip.attach(element); }
+  for (const formElement of document.getElementsByTagName('form')) {
     formElement.reset();
-  });
+  }
 }
 
 /**
@@ -40,8 +39,7 @@ function initializeSampleComponents() {
  * @return {void}
  */
 function onOptionChange(event) {
-  /** @type {HTMLInputElement} */
-  const inputElement = (event.currentTarget);
+  const inputElement = /** @type {HTMLInputElement} */ (event.currentTarget);
   const { name, value, checked } = inputElement;
 
   switch (name) {
@@ -55,13 +53,13 @@ function onOptionChange(event) {
       }
       break;
     case 'outlined': {
-      iterateArrayLike(sampleComponents, (el) => {
+      for (const el of sampleComponents) {
         if (checked) {
           el.setAttribute('mdw-outlined', '');
         } else {
           el.removeAttribute('mdw-outlined');
         }
-      });
+      }
       break;
     }
     default:
@@ -72,9 +70,9 @@ function onOptionChange(event) {
 /** @return {void} */
 function setupComponentOptions() {
   sampleComponents = document.querySelectorAll('.component-sample .mdw-chip');
-  iterateArrayLike(document.querySelectorAll('.demo-options input[name]'), (el) => {
+  for (const el of document.querySelectorAll('.demo-options input[name]')) {
     el.addEventListener('change', onOptionChange);
-  });
+  }
 }
 
 initializeSampleComponents();

package/docs/pages/color.js

@@ -1,9 +1,8 @@
-import { iterateArrayLike, nextTick } from '../../core/dom.js';
 import * as Overlay from '../../core/overlay/index.js';
 import * as Ripple from '../../core/ripple/index.js';
 
-iterateArrayLike(document.getElementsByClassName('mdw-overlay'), Overlay.attach);
-iterateArrayLike(document.getElementsByClassName('mdw-ripple'), Ripple.attach);
+for (const el of document.getElementsByClassName('mdw-overlay')) Overlay.attach(el);
+for (const el of document.getElementsByClassName('mdw-ripple')) Ripple.attach(el);
 
 const sampleSurface = document.getElementById('sample-surface');
 const sampleInk = document.getElementById('sample-ink');
@@ -39,7 +38,7 @@ function parseColor(colorString) {
   return colorString
     .match(/\(([^)]+)\)/)[1]
     .split(',')
-    .map((value) => (value == null ? 1.0 : parseFloat(value)))
+    .map((value) => (value == null ? 1 : Number.parseFloat(value)))
     .reduce((prev, curr, index) => {
       if (index > 3) {
         throw new Error('Unexpected 5th value');
@@ -51,7 +50,7 @@ function parseColor(colorString) {
         a: index === 3 ? curr : prev.a,
       };
     }, {
-      r: 255, g: 255, b: 255, a: 1.0,
+      r: 255, g: 255, b: 255, a: 1,
     });
 }
 
@@ -62,29 +61,30 @@ function parseColor(colorString) {
  */
 function overlayColor(color, overlay) {
   return {
-    r: (1.0 - overlay.a) * color.r + overlay.a * overlay.r,
-    g: (1.0 - overlay.a) * color.g + overlay.a * overlay.g,
-    b: (1.0 - overlay.a) * color.b + overlay.a * overlay.b,
-    a: 1.0,
+    r: (1 - overlay.a) * color.r + overlay.a * overlay.r,
+    g: (1 - overlay.a) * color.g + overlay.a * overlay.g,
+    b: (1 - overlay.a) * color.b + overlay.a * overlay.b,
+    a: 1,
   };
 }
 
+/**
+ * @param {number} colorValue
+ * @return {number}
+ */
+function sRGBMapping(colorValue) {
+  if (colorValue <= (0.039_28 * 255)) {
+    return colorValue / 255 / 12.92;
+  }
+  return ((colorValue / 255 + 0.055) / 1.055) ** 2.4;
+}
+
 /**
  * https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
  * @param {Color} color
  * @return {number}
  */
 function getLuminance(color) {
-  /**
-   * @param {number} colorValue
-   * @return {number}
-   */
-  function sRGBMapping(colorValue) {
-    if (colorValue <= (0.03928 * 255)) {
-      return colorValue / 255 / 12.92;
-    }
-    return ((colorValue / 255 + 0.055) / 1.055) ** 2.4;
-  }
   const R = 0.2126 * sRGBMapping(color.r);
   const G = 0.7152 * sRGBMapping(color.g);
   const B = 0.0722 * sRGBMapping(color.b);
@@ -128,7 +128,7 @@ function updateInks(name) {
 
 /** @return {void} */
 function calculateContrast() {
-  nextTick(() => {
+  requestAnimationFrame(() => {
     const style = window.getComputedStyle(sampleButton);
     const surfaceColor = parseColor(style.backgroundColor);
     const inkColor = parseColor(style.color);
@@ -166,8 +166,7 @@ function calculateContrast() {
  * @return {void}
  */
 function onItemClick(event) {
-  /** @type {HTMLElement} */
-  const item = (event.currentTarget);
+  const item = /** @type {HTMLElement} */ (event.currentTarget);
   if (item.id) {
     return;
   }
@@ -197,15 +196,15 @@ function refresh() {
     currentInkOptions.color,
     currentInkOptions.tone,
     currentInkOptions.opacity,
-  ].filter((v) => v).join(' ');
+  ].filter(Boolean).join(' ');
   const surfaceProperties = [
     currentSurfaceOptions.color,
     currentSurfaceOptions.tone,
-  ].filter((v) => v).join(' ');
-  iterateArrayLike(document.querySelectorAll('#color-sample-area .demo-core-item'), (el) => {
+  ].filter(Boolean).join(' ');
+  for (const el of document.querySelectorAll('#color-sample-area .demo-core-item')) {
     el.setAttribute('mdw-ink', inkProperties);
     el.setAttribute('mdw-surface', surfaceProperties);
-  });
+  }
   calculateContrast();
 }
 
@@ -214,8 +213,7 @@ function refresh() {
  * @return {void}
  */
 function onOptionChange(event) {
-  /** @type {HTMLSelectElement} */
-  const selectElement = (event.target);
+  const selectElement = /** @type {HTMLSelectElement} */ (event.target);
   const { name, value } = selectElement;
   switch (name) {
     case 'ink-color':
@@ -243,20 +241,21 @@ function onOptionChange(event) {
 function setupComponentOptions() {
   // sampleComponent = document.querySelector('.component-sample .mdw-button');
   // Button.attach(sampleComponent);
-  iterateArrayLike(document.querySelectorAll('#color-page-options [name]'), (el) => {
+  for (const el of document.querySelectorAll('#color-page-options [name]')) {
     el.addEventListener('change', onOptionChange);
-  });
+  }
 }
 
-iterateArrayLike(
-  document.getElementsByClassName('demo-core-item'),
-  (item) => item.addEventListener('click', onItemClick),
-);
+for (const item of document.getElementsByClassName('demo-core-item')) {
+  item.addEventListener('click', onItemClick);
+}
 
-[
+for (const button of [
   document.getElementById('darkModeButton'),
   document.getElementById('altThemeButton'),
-].forEach((button) => button.addEventListener('click', calculateContrast));
+]) {
+  button?.addEventListener('click', calculateContrast);
+}
 
 setupComponentOptions();
 refresh();

package/docs/pages/datatable.js

@@ -4,14 +4,13 @@ import * as DataTable from '../../components/datatable/index.js';
 import * as Menu from '../../components/menu/index.js';
 import * as MenuItem from '../../components/menu/item.js';
 import * as Selection from '../../components/selection/index.js';
-import { iterateArrayLike } from '../../core/dom.js';
 
 /** @return {void} */
 function initializeMdwComponents() {
-  iterateArrayLike(document.querySelectorAll('.mdw-datatable.js'), DataTable.attach);
-  iterateArrayLike(document.getElementsByClassName('mdw-button'), Button.attach);
-  iterateArrayLike(document.getElementsByClassName('mdw-selection'), Selection.attach);
-  iterateArrayLike(document.getElementsByClassName('mdw-menu'), Menu.attach);
+  for (const element of document.querySelectorAll('.mdw-datatable.js')) { DataTable.attach(element); }
+  for (const element of document.getElementsByClassName('mdw-button')) { Button.attach(element); }
+  for (const element of document.getElementsByClassName('mdw-selection')) { Selection.attach(element); }
+  for (const element of document.getElementsByClassName('mdw-menu')) { Menu.attach(element); }
 }
 
 /**
@@ -34,11 +33,11 @@ function buildDynamicTable() {
   const addDatasourceObject = () => {
     datasource.push({
       selected: false,
-      text: Math.random().toString(36).substring(2),
-      text2: Math.random().toString(36).substring(2),
+      text: Math.random().toString(36).slice(2),
+      text2: Math.random().toString(36).slice(2),
       check1: Math.random() > 0.5,
       increment: count,
-      random: Math.floor(Math.random() * 99999),
+      random: Math.floor(Math.random() * 99_999),
     });
     count += 1;
   };
@@ -101,15 +100,14 @@ function buildDynamicTable() {
   optionsButton.addEventListener('click', (/** @type {MouseEvent} */ event) => Menu.show(optionsMenu, event));
 
   filterMenu.addEventListener(MenuItem.CHECK_EVENT, (event) => {
-    /** @type {HTMLElement} */
-    const menuItem = (event.target);
+    const menuItem = /** @type {HTMLElement} */ (event.target);
     switch (menuItem.dataset.filter) {
       default:
       case 'none':
         dynamicTableAdapter.setFilter(null);
         break;
       case 'md':
-        dynamicTableAdapter.setFilter((data) => data.text.indexOf('md') !== -1 || data.text2.indexOf('md') !== -1);
+        dynamicTableAdapter.setFilter((data) => data.text.includes('md') || data.text2.includes('md'));
         break;
       case 'div9':
         dynamicTableAdapter.setFilter((data) => data.random % 9 === 0);
@@ -128,8 +126,7 @@ function buildDynamicTable() {
   filterMenu.addEventListener(MenuItem.ACTIVATE_EVENT, () => Menu.hide(filterMenu));
 
   optionsMenu.addEventListener(MenuItem.CHECK_EVENT, (event) => {
-    /** @type {HTMLElement} */
-    const menuItem = (event.target);
+    const menuItem = /** @type {HTMLElement} */ (event.target);
     switch (menuItem.dataset.option) {
       default:
         break;
@@ -143,8 +140,7 @@ function buildDynamicTable() {
     dynamicTableAdapter.refresh();
   });
   optionsMenu.addEventListener(MenuItem.UNCHECK_EVENT, (event) => {
-    /** @type {HTMLElement} */
-    const menuItem = (event.target);
+    const menuItem = /** @type {HTMLElement} */ (event.target);
     switch (menuItem.dataset.option) {
       default:
         break;

package/docs/pages/dialog.eta

@@ -63,18 +63,16 @@
       <div class="display-flex flex-1" flex-column style="position:relative;">
         <%~ includeFile('../_partials/_androidstatusbar.eta', { surface: 'primary 700', dark: true }) %>
         <div class="mdw-appbar mdw-theme" mdw-surface="primary 500" mdw-dark>
-          <div class="mdw-appbar__action">
-            <div class="mdw-appbar__start">
-              <div class="mdw-tooltip__wrapper">
-                <%~ includeFile(T, {button: { icon:true, class:"mdw-tooltip__target material-icons", text:'menu' }}) %>
-                <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>Menu</div>
-              </div>
+          <div class="mdw-appbar__start">
+            <div class="mdw-tooltip__wrapper">
+              <%~ includeFile(T, {button: { icon:true, class:"mdw-tooltip__target material-icons", text:'menu' }}) %>
+              <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>Menu</div>
             </div>
-            <div class="mdw-appbar__end">
-              <div class="mdw-tooltip__wrapper">
-                <%~ includeFile(T, {button: { icon:true, class:"mdw-tooltip__target material-icons", text:'more_vert' }}) %>
-                <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>Options</div>
-              </div>
+          </div>
+          <div class="mdw-appbar__end">
+            <div class="mdw-tooltip__wrapper">
+              <%~ includeFile(T, {button: { icon:true, class:"mdw-tooltip__target material-icons", text:'more_vert' }}) %>
+              <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>Options</div>
             </div>
           </div>
         </div>

package/docs/pages/dialog.js

@@ -1,6 +1,5 @@
 import * as Button from '../../components/button/index.js';
 import * as Dialog from '../../components/dialog/index.js';
-import { iterateArrayLike } from '../../core/dom.js';
 import { convertElementToCode } from '../_sample-utils.js';
 
 /** @type {HTMLElement} */
@@ -28,13 +27,11 @@ function updateSampleCode() {
   Button.detach(button);
   button.removeEventListener('click', onSampleButtonClick);
   const tabIndexElements = sampleComponent.querySelectorAll('[tabindex]');
-  iterateArrayLike(tabIndexElements, (el) => el.removeAttribute('tabindex'));
+  for (const el of tabIndexElements) el.removeAttribute('tabindex');
 
-  if (closer) {
-    if (jsRequired || (closer instanceof HTMLAnchorElement === false)) {
-      closer.parentElement.removeChild(closer);
-      closer = null;
-    }
+  if (closer && (jsRequired || !(closer instanceof HTMLAnchorElement))) {
+    closer.remove();
+    closer = null;
   }
 
   if (useJS) {
@@ -122,9 +119,9 @@ function onOptionChange(event) {
 /** @return {void} */
 function setupComponentOptions() {
   sampleComponent = document.querySelector('.component-sample .mdw-dialog');
-  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
+  for (const el of document.querySelectorAll('input[name]')) {
     el.addEventListener('change', onOptionChange);
-  });
+  }
 }
 
 /** @return {void} */

package/docs/pages/dom.js

@@ -1,7 +1,6 @@
 import DomAdapter from '../../adapters/dom/index.js';
 import * as ListContent from '../../components/list/content.js';
 import * as ListItem from '../../components/list/item.js';
-import { iterateArrayLike } from '../../core/dom.js';
 
 class CustomDataSourceItem {
   /** @param {number} i */
@@ -40,9 +39,9 @@ function onOptionChange(event) {
 }
 /** @return {void} */
 function setupComponentOptions() {
-  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
+  for (const el of document.querySelectorAll('input[name]')) {
     el.addEventListener('change', onOptionChange);
-  });
+  }
   sampleComponent = document.querySelector('.component-sample .mdw-list');
   resetDatasource();
   domAdapter = new DomAdapter({
@@ -115,7 +114,7 @@ function setupComponentOptions() {
     buttons[1].setAttribute('aria-disabled', 'true');
   });
   buttons[2].addEventListener('click', () => {
-    const item = datasource.filter((d) => d.itemnumber === 50)[0];
+    const item = datasource.find((d) => d.itemnumber === 50);
     item.clickCount += 1;
     // Element will not change size, therefore avoid possible invalidation
     // (When element is refreshed and not in DOM, adapter may assume sized change)
@@ -123,17 +122,15 @@ function setupComponentOptions() {
     domAdapter.drawViewport();
   });
   buttons[3].addEventListener('click', () => {
-    const item = datasource.filter((d) => d.itemnumber === 80)[0];
+    const item = datasource.find((d) => d.itemnumber === 80);
     item.expanded = !item.expanded;
     // Force invalidation from height change
     domAdapter.refreshItem(item, { invalidate: true });
     domAdapter.drawViewport();
   });
   sampleComponent.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
-    /** @type {HTMLElement} */
-    const listContent = (event.target);
-    /** @type {HTMLLIElement} */
-    const listItem = (listContent.parentElement);
+    const listContent = /** @type {HTMLElement} */ (event.target);
+    const listItem = /** @type {HTMLLIElement} */ (listContent.parentElement);
     const dataItem = domAdapter.elementDataMap.get(listItem);
     dataItem.clickCount += 1;
     domAdapter.refreshItem(dataItem);

package/docs/pages/elevation.eta

@@ -2,34 +2,34 @@
 <% layout('../_partials/_header.eta', {page: 'elevation'}) %>
 <div class="docs-grid mdw-grid" mdw-margin-top mdw-margin-bottom mdw-columns="4" mdw-margin-4col="40" mdw-gutter-4col="40">
   <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="1">1dp</div>
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="1">1dp</div>
   </div>
   <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="2">2dp</div>
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="2">2dp</div>
   </div>
   <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="3">3dp</div>
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="3">3dp</div>
   </div>
   <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="4">4dp</div>
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="4">4dp</div>
   </div>
   <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="6">6dp</div>
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="6">6dp</div>
   </div>
   <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="8">8dp</div>
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="8">8dp</div>
   </div>
   <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="9">9dp</div>
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="9">9dp</div>
   </div>
   <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="12">12dp</div>
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="12">12dp</div>
   </div>
   <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="16">16dp</div>
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="16">16dp</div>
   </div>
   <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="24">24dp</div>
+    <div class="docs-elevation__item mdw-elevation mdw-overlay" mdw-overlay-off="hover" mdw-elevation="24">24dp</div>
   </div>
 </div>
 <script src="elevation.min.js"></script>

package/docs/pages/fab.js

@@ -1,12 +1,11 @@
 import * as Button from '../../components/button/index.js';
 import * as Fab from '../../components/fab/index.js';
-import { iterateArrayLike } from '../../core/dom.js';
 
 /** @return {void} */
 function initializeMdwComponents() {
-  iterateArrayLike(document.querySelectorAll('.js .mdw-fab'), Fab.attach);
+  for (const element of document.querySelectorAll('.js .mdw-fab')) { Fab.attach(element); }
 
-  iterateArrayLike(document.querySelectorAll('.js .mdw-button'), Button.attach);
+  for (const element of document.querySelectorAll('.js .mdw-button')) { Button.attach(element); }
 
   document.querySelector('input[name="hover"]').addEventListener('change', (event) => {
     if (event.currentTarget.checked) {

package/docs/pages/grid.js

@@ -1,4 +1,4 @@
-import { iterateArrayLike, setTextNode } from '../../core/dom.js';
+import { setTextNode } from '../../core/dom.js';
 
 const sampleComponent = document.getElementById('sample-component');
 
@@ -115,14 +115,14 @@ function onOptionChange(event) {
 
 /** @return {void} */
 function setupInteractions() {
-  iterateArrayLike(sampleComponent.getElementsByClassName('mdw-grid__item'), (item) => {
+  for (const item of sampleComponent.getElementsByClassName('mdw-grid__item')) {
     item.addEventListener('click', () => {
       onGridItemClick(item);
     });
-  });
-  iterateArrayLike(document.querySelectorAll('[name]'), (el) => {
+  }
+  for (const el of document.querySelectorAll('[name]')) {
     el.addEventListener('change', onOptionChange);
-  });
+  }
 }
 
 setupInteractions();

package/docs/pages/list.js

@@ -1,9 +1,8 @@
 import * as List from '../../components/list/index.js';
-import { iterateArrayLike } from '../../core/dom.js';
 
 /** @return {void} */
 function initializeMdwComponents() {
-  iterateArrayLike(document.querySelectorAll('.js .mdw-list'), List.attach);
+  for (const element of document.querySelectorAll('.js .mdw-list')) List.attach(element);
 }
 
 initializeMdwComponents();