@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/docs/pages/tab.eta

@@ -32,11 +32,11 @@
                   <%~ includeFile(T, { button: {  borderInk:true , text:'Unfocusable when inactive' }}) %>
                   <p>HTML Ordered List with (#) representing DOM position</p>
                   <ol>
-                    <li class="mdw-tabs__panel__active-hide">(1) Layer hidden when active (peek only)</li>
-                    <li class="mdw-tabs__panel__active-remove">(2) Layer removed when active (peek only)</li>
+                    <li class="mdw-tab__panel__active-hide">(1) Layer hidden when active (peek only)</li>
+                    <li class="mdw-tab__panel__active-remove">(2) Layer removed when active (peek only)</li>
                     <li>(3) Always visible</li>
-                    <li class="mdw-tabs__panel__inactive-hide">(4) Layer hidden when inactive (active only)</li>
-                    <li class="mdw-tabs__panel__inactive-remove">(5) Layer removed when inactive (active only)</li>
+                    <li class="mdw-tab__panel__inactive-hide">(4) Layer hidden when inactive (active only)</li>
+                    <li class="mdw-tab__panel__inactive-remove">(5) Layer removed when inactive (active only)</li>
                     <li>(6) Always visible</li>
                   </ol>
                 </div>
@@ -47,11 +47,11 @@
                   <%~ includeFile(T, { button: {  borderInk:true , text:'Unfocusable when inactive' }}) %>
                   <p>HTML Ordered List with (#) representing DOM position</p>
                   <ol>
-                    <li class="mdw-tabs__panel__active-hide">(1) Layer hidden when active (peek only)</li>
-                    <li class="mdw-tabs__panel__active-remove">(2) Layer removed when active (peek only)</li>
+                    <li class="mdw-tab__panel__active-hide">(1) Layer hidden when active (peek only)</li>
+                    <li class="mdw-tab__panel__active-remove">(2) Layer removed when active (peek only)</li>
                     <li>(3) Always visible</li>
-                    <li class="mdw-tabs__panel__inactive-hide">(4) Layer hidden when inactive (active only)</li>
-                    <li class="mdw-tabs__panel__inactive-remove">(5) Layer removed when inactive (active only)</li>
+                    <li class="mdw-tab__panel__inactive-hide">(4) Layer hidden when inactive (active only)</li>
+                    <li class="mdw-tab__panel__inactive-remove">(5) Layer removed when inactive (active only)</li>
                     <li>(6) Always visible</li>
                   </ol>
                 </div>
@@ -62,11 +62,11 @@
                   <%~ includeFile(T, { button: {  borderInk:true , text:'Unfocusable when inactive' }}) %>
                   <p>HTML Ordered List with (#) representing DOM position</p>
                   <ol>
-                    <li class="mdw-tabs__panel__active-hide">(1) Layer hidden when active (peek only)</li>
-                    <li class="mdw-tabs__panel__active-remove">(2) Layer removed when active (peek only)</li>
+                    <li class="mdw-tab__panel__active-hide">(1) Layer hidden when active (peek only)</li>
+                    <li class="mdw-tab__panel__active-remove">(2) Layer removed when active (peek only)</li>
                     <li>(3) Always visible</li>
-                    <li class="mdw-tabs__panel__inactive-hide">(4) Layer hidden when inactive (active only)</li>
-                    <li class="mdw-tabs__panel__inactive-remove">(5) Layer removed when inactive (active only)</li>
+                    <li class="mdw-tab__panel__inactive-hide">(4) Layer hidden when inactive (active only)</li>
+                    <li class="mdw-tab__panel__inactive-remove">(5) Layer removed when inactive (active only)</li>
                     <li>(6) Always visible</li>
                   </ol>
                 </div>
@@ -147,15 +147,13 @@
     <div class="render-fill">
       <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'cyan 700', dark:true }) %>
       <div class="mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark mdw-prominent>
-        <div class="mdw-appbar__action">
-          <div class="mdw-appbar__start">
-            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
-          </div>
-          <div class="mdw-appbar__title">Page title</div>
-          <div class="mdw-appbar__end">
-            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
-            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
-          </div>
+        <div class="mdw-appbar__start">
+          <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
+        </div>
+        <div class="mdw-appbar__title">Page title</div>
+        <div class="mdw-appbar__end">
+          <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
+          <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
         </div>
         <div class="mdw-tab">
           <div class="mdw-tab__list">
@@ -180,15 +178,13 @@
       <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'cyan 700', dark:true }) %>
       <div class="mdw-tab">
         <div class="mdw-tab__list-wrapper mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark>
-          <div class="mdw-appbar__action">
-            <div class="mdw-appbar__start">
-              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
-            </div>
-            <div class="mdw-appbar__title">Page title</div>
-            <div class="mdw-appbar__end">
-              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
-              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
-            </div>
+          <div class="mdw-appbar__start">
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
+          </div>
+          <div class="mdw-appbar__title">Page title</div>
+          <div class="mdw-appbar__end">
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
           </div>
           <div class="mdw-tab__list">
             <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
@@ -216,15 +212,13 @@
       <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'background 600', dark:true }) %>
       <div class="mdw-tab">
         <div class="mdw-tab__list-wrapper mdw-appbar">
-          <div class="mdw-appbar__action">
-            <div class="mdw-appbar__start">
-              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
-            </div>
-            <div class="mdw-appbar__title">Page title</div>
-            <div class="mdw-appbar__end">
-              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
-              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
-            </div>
+          <div class="mdw-appbar__start">
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
+          </div>
+          <div class="mdw-appbar__title">Page title</div>
+          <div class="mdw-appbar__end">
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
           </div>
           <div class="mdw-tab__list">
             <div class="mdw-tab__item mdw-theme" mdw-ink="cyan A700" mdw-overlay-default="medium">
@@ -251,15 +245,13 @@
     <div class="render-fill">
       <%~ 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">
-            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
-          </div>
-          <div class="mdw-appbar__title">Page title</div>
-          <div class="mdw-appbar__end">
-            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
-            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
-          </div>
+        <div class="mdw-appbar__start">
+          <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
+        </div>
+        <div class="mdw-appbar__title">Page title</div>
+        <div class="mdw-appbar__end">
+          <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
+          <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
         </div>
         <div class="mdw-tab">
           <div class="mdw-tab__list">
@@ -286,15 +278,13 @@
     <div class="render-fill">
       <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'background 600', dark:true }) %>
       <div class="mdw-appbar">
-        <div class="mdw-appbar__action">
-          <div class="mdw-appbar__start">
-            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
-          </div>
-          <div class="mdw-appbar__title">Page title</div>
-          <div class="mdw-appbar__end">
-            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
-            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
-          </div>
+        <div class="mdw-appbar__start">
+          <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
+        </div>
+        <div class="mdw-appbar__title">Page title</div>
+        <div class="mdw-appbar__end">
+          <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
+          <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
         </div>
         <div class="mdw-tab">
           <div class="mdw-tab__list">
@@ -319,15 +309,13 @@
       <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'cyan 700', dark:true }) %>
       <div class="mdw-tab">
         <div class="mdw-tab__list-wrapper mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark>
-          <div class="mdw-appbar__action">
-            <div class="mdw-appbar__start">
-              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
-            </div>
-            <div class="mdw-appbar__title">Clustered</div>
-            <div class="mdw-appbar__end">
-              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
-              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
-            </div>
+          <div class="mdw-appbar__start">
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
+          </div>
+          <div class="mdw-appbar__title">Clustered</div>
+          <div class="mdw-appbar__end">
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
           </div>
           <div class="mdw-tab__list" style="align-self:center;">
             <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">
@@ -358,15 +346,13 @@
       <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'cyan 700', dark:true }) %>
       <div class="mdw-tab">
         <div class="mdw-appbar mdw-theme" mdw-surface="cyan 500" mdw-dark>
-          <div class="mdw-appbar__action">
-            <div class="mdw-appbar__start">
-              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
-            </div>
-            <div class="mdw-appbar__title">Scrollable</div>
-            <div class="mdw-appbar__end">
-              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
-              <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
-            </div>
+          <div class="mdw-appbar__start">
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'menu' }}) %>
+          </div>
+          <div class="mdw-appbar__title">Scrollable</div>
+          <div class="mdw-appbar__end">
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'search' }}) %>
+            <%~ includeFile(T, { button: {  icon:true , class:'material-icons', text:'more_vert' }}) %>
           </div>
           <div class="mdw-tab__list" mdw-scrollable>
             <div class="mdw-tab__item mdw-theme" mdw-ink="yellow A400" mdw-overlay-default="medium">

package/docs/pages/tab.js

@@ -1,6 +1,6 @@
 import * as Button from '../../components/button/index.js';
 import * as Tab from '../../components/tab/index.js';
-import { iterateArrayLike, setTextNode } from '../../core/dom.js';
+import { setTextNode } from '../../core/dom.js';
 import { convertElementToCode } from '../_sample-utils.js';
 
 /** @type {HTMLElement} */
@@ -8,24 +8,26 @@ let sampleComponent;
 
 /** @return {void} */
 function onWindowResize() {
-  iterateArrayLike(document.getElementsByClassName('mdw-tab'), Tab.onResize);
+  for (const element of document.getElementsByClassName('mdw-tab')) { Tab.onResize(element); }
 }
 
 /** @return {void} */
 function updateSampleCode() {
   // Strip automatic attributes and classes
   Tab.detach(sampleComponent);
-  iterateArrayLike(sampleComponent.getElementsByClassName('mdw-tab__item'), (el) => {
+  for (const el of sampleComponent.getElementsByClassName('mdw-tab__item')) {
     el.classList.remove('mdw-overlay');
     el.classList.remove('mdw-ripple');
     el.removeAttribute('mdw-overlay-off');
-  });
+  }
   const indicator = sampleComponent.getElementsByClassName('mdw-tab__indicator')[0];
   indicator.removeAttribute('style');
 
   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',
+  ));
 
   Tab.attach(sampleComponent);
 
@@ -53,11 +55,11 @@ function setupPugButton() {
 
 /** @return {void} */
 function initializeSampleComponents() {
-  iterateArrayLike(document.getElementsByClassName('mdw-tab'), Tab.attach);
+  for (const element of document.getElementsByClassName('mdw-tab')) { Tab.attach(element); }
   window.addEventListener('resize', onWindowResize);
-  iterateArrayLike(document.getElementsByTagName('form'), (formElement) => {
+  for (const formElement of document.getElementsByTagName('form')) {
     formElement.reset();
-  });
+  }
 }
 
 /**
@@ -65,8 +67,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;
   const tabListElement = sampleComponent.querySelector('.mdw-tab__list');
 
@@ -99,12 +100,12 @@ function onOptionChange(event) {
           break;
         default:
           tabListElement.setAttribute('mdw-surface', value.replace(/ (light|dark)/, ''));
-          if (value.indexOf(' light') === -1) {
+          if (!value.includes(' light')) {
             tabListElement.removeAttribute('mdw-light');
           } else {
             tabListElement.setAttribute('mdw-light', '');
           }
-          if (value.indexOf(' dark') === -1) {
+          if (!value.includes(' dark')) {
             tabListElement.removeAttribute('mdw-dark');
           } else {
             tabListElement.setAttribute('mdw-dark', '');
@@ -141,9 +142,9 @@ function onOptionChange(event) {
 function setupComponentOptions() {
   setupPugButton();
   sampleComponent = document.querySelector('.component-sample .mdw-tab');
-  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
+  for (const el of document.querySelectorAll('input[name]')) {
     el.addEventListener('change', onOptionChange);
-  });
+  }
 }
 
 initializeSampleComponents();

package/docs/pages/textfield.eta

@@ -58,6 +58,7 @@
     <div class="mdw-type" mdw-style="subtitle">Attributes</div>
     <div class="docs-option-list">
       <%~ includeFile(T, { selection: { ink:'secondary', name:'autosize', checked:true, text:'Autosize' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'dense', text:'Dense' }}) %>
       <%~ includeFile(T, { selection: { ink:'secondary', name:'disabled', text:'Disabled' }}) %>
       <%~ includeFile(T, { selection: { ink:'secondary', name:'4minlength', text:'4 Min Length' }}) %>
       <%~ includeFile(T, { selection: { ink:'secondary', name:'required', text:'Required' }}) %>
@@ -75,7 +76,7 @@
   <div class="mdw-grid__item" mdw-colspan="100%">
     <h6 class="mdw-type">Samples</h6>
   </div>
-  <div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center">
+  <div class="mdw-grid__item" mdw-colspan="6" flex-justify-content="center">
     <div class="render-fill">
       <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'primary 700', dark:true }) %>
       <%~ includeFile('../_partials/_appbar.eta', { surface: 'primary 500', dark: true, start:['arrow_back'], end: ['more_vert'], body: 'Application' }) %>
@@ -118,7 +119,7 @@
       <%~ includeFile('../_partials/_androidnavbar.eta') %>
     </div>
   </div>
-  <div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center">
+  <div class="mdw-grid__item" mdw-colspan="6" flex-justify-content="center">
     <div class="render-fill">
       <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'secondary 300', light:true }) %>
       <%~ includeFile('../_partials/_appbar.eta', { surface: 'secondary 100', light: true, start: ['arrow_back'], end: ['search'], body: 'Auto-fill styling' }) %>
@@ -203,7 +204,7 @@
       <%~ includeFile('../_partials/_androidnavbar.eta') %>
     </div>
   </div>
-  <div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center">
+  <div class="mdw-grid__item" mdw-colspan="6" flex-justify-content="center">
     <div class="render-fill">
       <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'secondary 800', dark:true }) %>
       <%~ includeFile('../_partials/_appbar.eta', { surface: 'secondary 700', dark: true, start: ['arrow_back'], end: ['search'] }) %>
@@ -275,7 +276,7 @@
       <%~ includeFile('../_partials/_androidnavbar.eta') %>
     </div>
   </div>
-  <div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center">
+  <div class="mdw-grid__item" mdw-colspan="6" flex-justify-content="center">
     <div class="render-fill">
       <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'primary 700', dark:true }) %>
       <%~ includeFile('../_partials/_appbar.eta', { surface: 'primary 500', dark: true, start: ['arrow_back'], end: ['done'] }) %>
@@ -335,7 +336,7 @@
       <%~ includeFile('../_partials/_androidnavbar.eta') %>
     </div>
   </div>
-  <div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center">
+  <div class="mdw-grid__item" mdw-colspan="6" flex-justify-content="center">
     <div class="render-fill">
       <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'amber 600', dark:true }) %>
       <%~ includeFile('../_partials/_appbar.eta', { surface: 'amber 400', dark: true, start: ['arrow_back'], end: ['done'] }) %>
@@ -369,7 +370,7 @@
       <%~ includeFile('../_partials/_androidnavbar.eta') %>
     </div>
   </div>
-  <div class="mdw-grid__item" mdw-colspan="4" flex-justify-content="center">
+  <div class="mdw-grid__item" mdw-colspan="6" flex-justify-content="center">
     <div class="render-fill">
       <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'amber 700', dark:true }) %>
       <%~ includeFile('../_partials/_appbar.eta', { surface: 'amber 400', dark: true, start: ['arrow_back'], end: ['done'] }) %>
@@ -407,7 +408,7 @@
       <%~ includeFile('../_partials/_androidnavbar.eta') %>
     </div>
   </div>
-  <div class="mdw-grid__item js" mdw-colspan="4">
+  <div class="mdw-grid__item js" mdw-colspan="6">
     <div class="render-fill">
       <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'primary 700', dark:true }) %>
       <%~ includeFile('../_partials/_appbar.eta', { surface: 'primary 500', dark: true, start: ['arrow_back'], end: ['done'], text: 'With Javascript' }) %>
@@ -480,7 +481,7 @@
       <%~ includeFile('../_partials/_androidnavbar.eta') %>
     </div>
   </div>
-  <div class="mdw-grid__item" mdw-colspan="4"></div>
+  <div class="mdw-grid__item" mdw-colspan="6"></div>
   <div class="mdw-grid__item" mdw-colspan="4"></div>
 </div>
 <script src="textfield.min.js"></script>

package/docs/pages/textfield.js

@@ -1,10 +1,9 @@
 import * as TextField from '../../components/textfield/index.js';
-import { iterateArrayLike } from '../../core/dom.js';
 import { convertElementToCode } from '../_sample-utils.js';
 
 /** @return {void} */
 function initializeSampleComponents() {
-  iterateArrayLike(document.querySelectorAll('.js .mdw-textfield'), TextField.attach);
+  for (const el of document.querySelectorAll('.js .mdw-textfield')) TextField.attach(el);
 }
 
 /** @type {HTMLElement} */
@@ -101,6 +100,13 @@ function onOptionChange(event) {
         sampleComponent.removeAttribute('mdw-outlined');
       }
       break;
+    case 'dense':
+      if (checked) {
+        sampleComponent.setAttribute('mdw-dense', '');
+      } else {
+        sampleComponent.removeAttribute('mdw-dense');
+      }
+      break;
     case 'disabled':
       if (checked) {
         sampleComponent.getElementsByClassName('mdw-textfield__input')[0].setAttribute('disabled', '');
@@ -132,7 +138,7 @@ function onOptionChange(event) {
           sampleComponent.appendChild(prefixText);
         }
       } else if (prefixText) {
-        prefixText.parentElement.removeChild(prefixText);
+        prefixText.remove();
       }
       break;
     case 'suffix':
@@ -145,7 +151,7 @@ function onOptionChange(event) {
           sampleComponent.appendChild(suffixText);
         }
       } else if (suffixText) {
-        suffixText.parentElement.removeChild(suffixText);
+        suffixText.remove();
       }
       break;
     case 'signifier':
@@ -163,7 +169,7 @@ function onOptionChange(event) {
           }
         }
       } else if (signifierElement) {
-        signifierElement.parentElement.removeChild(signifierElement);
+        signifierElement.remove();
       }
       break;
     case 'helper-text':
@@ -176,7 +182,7 @@ function onOptionChange(event) {
           sampleComponent.appendChild(helperText);
         }
       } else if (helperText) {
-        helperText.parentElement.removeChild(helperText);
+        helperText.remove();
       }
       break;
     case 'error-text':
@@ -189,7 +195,7 @@ function onOptionChange(event) {
           sampleComponent.appendChild(errorText);
         }
       } else if (errorText) {
-        errorText.parentElement.removeChild(errorText);
+        errorText.remove();
       }
       break;
     case 'ink':
@@ -207,7 +213,8 @@ function onOptionChange(event) {
 
   if (inputElement.tagName.toLowerCase() !== desiredTagName) {
     const newElement = document.createElement(desiredTagName);
-    for (let i = inputElement.attributes.length - 1; i >= 0; i -= 1) {
+    let i = inputElement.attributes.length;
+    while (i--) {
       const attr = inputElement.attributes.item(i);
       newElement.attributes.setNamedItem(attr.cloneNode());
     }
@@ -215,18 +222,14 @@ function onOptionChange(event) {
     inputElement = newElement;
     let dropdown = sampleComponent.getElementsByClassName('mdw-textfield__icon')[0];
     if (desiredTagName === 'select') {
-      const option1 = document.createElement('option');
-      option1.setAttribute('value', '');
-      option1.textContent = 'Empty';
-      const option2 = document.createElement('option');
-      option2.setAttribute('value', 'option1');
-      option2.textContent = 'Option 1';
-      const option3 = document.createElement('option');
-      option3.setAttribute('value', 'option2');
-      option3.textContent = 'Option 2';
-      inputElement.appendChild(option1);
-      inputElement.appendChild(option2);
-      inputElement.appendChild(option3);
+      for (const [valueAttr, textContent] of [['', 'Empty'], ['option1', 'Option 1'], ['option2', 'Option 2']]) {
+        const option = document.createElement('option');
+        option.className = 'mdw-theme';
+        option.setAttribute('mdw-surface', 'card');
+        option.setAttribute('value', valueAttr);
+        option.textContent = textContent;
+        inputElement.appendChild(option);
+      }
       if (!dropdown) {
         dropdown = document.createElement('div');
         dropdown.classList.add('mdw-textfield__icon');
@@ -234,7 +237,7 @@ function onOptionChange(event) {
         sampleComponent.appendChild(dropdown);
       }
     } else if (dropdown) {
-      dropdown.parentElement.removeChild(dropdown);
+      dropdown.remove();
     }
   }
   inputElement.removeAttribute('rows');
@@ -244,9 +247,9 @@ function onOptionChange(event) {
 /** @return {void} */
 function setupComponentOptions() {
   sampleComponent = document.querySelector('.component-sample .mdw-textfield');
-  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
+  for (const el of document.querySelectorAll('input[name]')) {
     el.addEventListener('change', onOptionChange);
-  });
+  }
 }
 
 initializeSampleComponents();

package/docs/pages/tooltip.eta

@@ -4,19 +4,17 @@
   <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 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 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 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>

package/docs/pages/transition.js

@@ -1,10 +1,9 @@
-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);
+for (const element of document.getElementsByClassName('mdw-overlay')) { Overlay.attach(element); }
+for (const element of document.getElementsByClassName('mdw-ripple')) { Ripple.attach(element); }
 
 /** @type {HTMLElement} */
 let target1;
@@ -48,7 +47,6 @@ function onItemClick(event) {
   target2 = null;
 }
 
-iterateArrayLike(
-  document.getElementsByClassName('demo-core-item'),
-  (item) => item.addEventListener('click', onItemClick),
-);
+for (const item of document.getElementsByClassName('demo-core-item')) {
+  item.addEventListener('click', onItemClick);
+}

package/docs/postrender.js

@@ -2,12 +2,13 @@ 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);
+for (const element of document.querySelectorAll('.mdw-layout__appbar .mdw-button')) {
+  Button.attach(element);
+}
 
 navDrawer.querySelector('[aria-current]').scrollIntoView({
   behavior: 'auto',
@@ -17,12 +18,13 @@ navDrawer.querySelector('[aria-current]').scrollIntoView({
 
 /** @return {void} */
 function clearCurrentPage() {
-  iterateArrayLike(navDrawer.querySelectorAll('[aria-current]'), (item) => item.removeAttribute('aria-current'));
+  for (const item of navDrawer.querySelectorAll('[aria-current]')) {
+    item.removeAttribute('aria-current');
+  }
 }
 
 navDrawer.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
-  /** @type {HTMLElement} */
-  const item = (event.target);
+  const item = /** @type {HTMLElement} */ (event.target);
   ListContent.setSelected(item, true);
   if (item instanceof HTMLAnchorElement) {
     if (item.hasAttribute('aria-current')) {