@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/docs/docs.scss

@@ -5,23 +5,26 @@
   direction: inherit;
 }
 
-
 .comparison {
   display: flex;
-  flex-direction: row;
   position: relative;
+  flex-direction: row;
 }
 
 .androidstatusbar {
-  z-index: 16;
   display: flex;
   align-items: center;
   flex-direction: row-reverse;
-  height: 24px;
+
+  block-size: 24px;
   padding: 0 8px;
-  font-size: 14px;
+
+  z-index: 16;
+
   color: white;
 
+  font-size: 14px;
+
   .mdw-theme[mdw-light] &,
   .mdw-theme[mdw-dark] .mdw-theme[mdw-light] & {
     &:not([mdw-surface]) {
@@ -44,17 +47,18 @@
 }
 
 .content {
-  flex: 1;
+  flex-direction: column;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
   overflow-y: auto;
+
+  flex: 1;
   -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  flex-direction: column;
 }
 
 .render,
 .target {
-  width: 360px;
-  max-width: 360px;
+  max-inline-size: 360px;
+  inline-size: 360px;
 }
 
 .render-fill {
@@ -63,93 +67,103 @@
 
 .render,
 .render-fill {
-  z-index: 1;
   overflow-x: hidden;
-  max-height: 640px;
-  border-color: #eee;
-  border-width: 1px;
-  border-style: solid;
+
   box-sizing: border-box;
+  max-block-size: 640px;
+  border-style: solid;
+  border-width: 1px;
+
+  z-index: 1;
+
+  border-color: #eee;
+
   .mdw-theme[mdw-light] & {
-    border-color: rgba(0,0,0,0.12);
+    border-color: rgba(0, 0, 0, 0.12);
   }
+
   .mdw-theme[mdw-dark] & {
-    border-color: rgba(255,255,255,0.12);
+    border-color: rgba(255, 255, 255, 0.12);
   }
 }
 
 .docs-option-list {
   & > .mdw-selection {
-    margin:16px 8px;
+    margin: 16px 8px;
   }
 }
 
 .render,
 .render-fill,
 .target {
+  display: flex;
   position: relative;
+  flex-direction: column;
+
+  block-size: 640px;
   margin: 8px;
-  height: 640px;
-  background-size: cover;
+
   background-repeat: no-repeat;
+  background-size: cover;
 
-  display: flex;
-  flex-direction: column;
   .clipped & {
-    max-height: 190px;
+    max-block-size: 190px;
   }
+
   .clipped-236 & {
-    max-height: 236px;
+    max-block-size: 236px;
   }
+
   .clipped-300 & {
-    max-height: 300px;
+    max-block-size: 300px;
   }
+
   .clipped-304 & {
-    max-height: 304px;
+    max-block-size: 304px;
   }
 }
 
+.horizontal-controls {
+  display: inline-flex;
 
+  inline-size: 100%;
 
-.horizontal-controls {
-  display:inline-flex;
-  width:100%;
   & > :not(:last-child) {
-    margin-right: 16px;
-    margin-left: 0;
+    margin-inline: 0 16px;
   }
-  [dir=rtl] & > :not(:last-child) {
-    margin-left: 16px;
-    margin-right: 0;
+
+  [dir="rtl"] & > :not(:last-child) {
+    margin-inline: 16px 0;
   }
 }
 
-
-
 .docs-render-overlay {
-  position:absolute;
-  left:0;
-  right:0;
-  bottom:0;
-  flex-direction:row-reverse
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: 0;
+  flex-direction: row-reverse;
 }
 
 .component-sample {
-  flex: 1;
-  position: relative;
   display: flex;
+  position: relative;
   align-items: center;
   justify-content: center;
-  padding: 24px;
+
+  min-block-size: 360px;
+  flex: 1;
   border-style: solid;
-  border-radius: 2px;
   border-width: 1px;
-  min-height: 360px;
+  padding: 24px;
+
+  border-radius: 2px;
+
   .mdw-theme[mdw-light] & {
-    border-color: rgba(0,0,0,0.12);
+    border-color: rgba(0, 0, 0, 0.12);
   }
+
   .mdw-theme[mdw-dark] & {
-    border-color: rgba(255,255,255,0.12);
+    border-color: rgba(255, 255, 255, 0.12);
   }
 }
 
@@ -159,137 +173,159 @@
 
 .component-code {
   display: flex;
+  position: relative;
   align-items: flex-start;
   justify-content: center;
+
+  flex-grow: 1;
   padding: 24px;
+
+  font-family: monospace;
   white-space: pre-wrap;
   word-break: break-word;
-  font-family: monospace;
-  flex-grow: 1;
-  position: relative;
 }
 
 #usePug {
   position: absolute;
-  top: 4px;
-  right: 4px;
-  left: auto;
-  font-size: 12px;
+  inset-block-start: 4px;
+  inset-inline: auto 4px;
+
   margin: 0;
+
+  font-size: 12px;
+
   :root[dir="rtl"] {
-    right: auto;
-    left: 4px;
+    inset-inline: 4px auto;
   }
 }
 
-
 .androidnavbar {
   display: flex;
+  align-items: center;
   flex-direction: row;
   justify-content: space-around;
-  align-items: center;
-  min-height: 48px;
-  height: 48px;
+
+  min-block-size: 48px;
+  block-size: 48px;
   padding: 0 30px;
+
   background-color: black;
   color: white;
+
   .material-icons {
     font-size: 20px;
   }
+
   .material-icons.back-button {
-   transform: rotate(90deg);
+    transform: rotate(90deg);
   }
 }
 
 .custom-no-results-indicator {
+  min-block-size: 48px;
   margin: 8px;
-  min-height: 48px;
 }
 
-
 #Vintage50Input {
   font-size: sp(34);
 }
 
 .type-comparison {
   .content {
-    margin: 8px;
+    display: flex;
     align-items: flex-start;
     flex-direction: column;
-    display: flex;
+
+    margin: 8px;
   }
+
   .target {
-    margin-top: 42px;
+    block-size: 568px;
+    inline-size: 760px;
+    margin-block-start: 42px;
     background-position-x: -200px;
-    width: 760px;
-    height: 568px;
   }
+
   .mdw-type {
     position: relative; // For tooltip position
   }
 }
+
 .type-comparison-2 {
   .target {
-    width: 760px;
-    height: 208px;
+    block-size: 208px;
+    inline-size: 760px;
   }
 }
+
 .type-comparison-3 {
   .target {
-    width: 360px;
-    height: 300px;
+    block-size: 300px;
+    inline-size: 360px;
   }
 }
 
 .docs-grid {
   .mdw-card {
-    padding: 16px 8px;
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+
+    padding: 16px 8px;
+
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
   }
 }
 
 .docs-elevation__item {
-  padding: 24px 0;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+
+  padding: 24px 0;
+
   border-radius: 4px;
 }
 
 .docs-tab {
   .component-sample__container {
-    width: 100%;
+    inline-size: 100%;
+
     > .mdw-tab {
-      width: 100%;
+      inline-size: 100%;
     }
   }
 }
 
 .demo-core-item {
-  border-radius: 8px;
-  min-width: 5em;
-  height: 5em;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+
+  block-size: 5em;
+  min-inline-size: 5em;
   margin: 4px;
+
   cursor: pointer;
   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
+
+  border-radius: 8px;
+
   &[demo-round] {
+    max-block-size: 5em;
+    max-inline-size: 5em;
+
     border-radius: 50%;
-    max-width: 5em;
-    max-height: 5em;
   }
+
   &[demo-square] {
+    max-block-size: 5em;
+    max-inline-size: 5em;
+
     border-radius: 0;
-    max-width: 5em;
-    max-height: 5em;
   }
-}
+}

package/docs/framework.scss

@@ -0,0 +1,26 @@
+@use "../core/theme/index.scss" as theme;
+@use "../core/overlay/index.scss" as overlay;
+@use "../core/ripple/index.scss" as ripple;
+@use "../components/appbar/index.scss" as appbar;
+@use "../components/banner/index.scss" as banner;
+@use "../components/bottomnav/index.scss" as bottomnav;
+@use "../components/button/index.scss" as button;
+@use "../components/card/index.scss" as card;
+@use "../components/chip/index.scss" as chip;
+@use "../components/datatable/index.scss" as datatable;
+@use "../components/dialog/index.scss" as dialog;
+@use "../components/divider/index.scss" as divider;
+@use "../components/elevation/index.scss" as elevation;
+@use "../components/fab/index.scss" as fab;
+@use "../components/grid/index.scss" as grid;
+@use "../components/layout/index.scss" as layout;
+@use "../components/list/index.scss" as list;
+@use "../components/menu/index.scss" as menu;
+@use "../components/progress/index.scss" as progress;
+@use "../components/selection/index.scss" as selection;
+@use "../components/slider/index.scss" as slider;
+@use "../components/snackbar/index.scss" as snackbar;
+@use "../components/tab/index.scss" as tab;
+@use "../components/textfield/index.scss" as textfield;
+@use "../components/tooltip/index.scss" as tooltip;
+@use "../components/type/index.scss" as type;

package/docs/index.eta

@@ -3,12 +3,8 @@
   <div class="mdw-grid__item" mdw-colspan="100%">
     <div class="mdw-grid__content">
       <h1 class="mdw-type">Material Design Web</h1>
-      <%~ includeFile('../components/button/index.eta', {
-        ink: 'primary', attributes: {href:"https://github.com/clshortfuse/materialdesignweb"}, text: 'GitHub',
-      }) %>
-      <%~ includeFile('../components/button/index.eta', {
-        ink: 'primary', attributes: {href:"./report.html"}, text: 'Bundle Analyzer Report',
-      }) %>
+      <a class="mdw-button mdw-theme" mdw-ink="primary" href="https://github.com/clshortfuse/materialdesignweb">GitHub</a>
+      <a class="mdw-button mdw-theme" mdw-ink="primary" href="./report.html">Bundle Analyzer Report</a>
     </div>
   </div>
 </div>

package/docs/index.js

@@ -0,0 +1,7 @@
+import * as Button from '../components/button/index.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  for (const el of document.getElementsByClassName('mdw-button')) {
+    Button.attach(el);
+  }
+});

package/docs/pages/appbar.eta

@@ -36,14 +36,12 @@
     <!-- Elevation and z-index only for demo-->
     <!-- Normally handled with .mdw-layout__appbar-->
     <div class="mdw-appbar mdw-elevation" mdw-dense mdw-elevation="4" style="z-index:4">
-      <div class="mdw-appbar__action">
-        <div class="mdw-appbar__start">
-          <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'menu' }}) %>
-        </div>
-        <div class="mdw-appbar__title">Dense (Desktop)</div>
-        <div class="mdw-appbar__end">
-          <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'more_vert' }}) %>
-        </div>
+      <div class="mdw-appbar__start">
+        <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'menu' }}) %>
+      </div>
+      <div class="mdw-appbar__title">Dense (Desktop)</div>
+      <div class="mdw-appbar__end">
+        <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'more_vert' }}) %>
       </div>
     </div>
     <div class="content mdw-theme" mdw-surface="background alt"></div>
@@ -53,15 +51,13 @@
   <div class="render">
     <%~ includeFile('../_partials/_androidstatusbar.eta') %>
     <div class="mdw-appbar mdw-elevation" mdw-prominent mdw-dense mdw-elevation="4" style="z-index:4">
-      <div class="mdw-appbar__action">
-        <div class="mdw-appbar__start">
-          <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'menu' }}) %>
-        </div>
-        <div class="mdw-appbar__title">Prominent Dense</div>
-        <div class="mdw-appbar__end">
-          <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'search' }}) %>
-          <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'more_vert' }}) %>
-        </div>
+      <div class="mdw-appbar__start">
+        <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'menu' }}) %>
+      </div>
+      <div class="mdw-appbar__title">Prominent Dense</div>
+      <div class="mdw-appbar__end">
+        <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'search' }}) %>
+        <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'more_vert' }}) %>
       </div>
     </div>
     <div class="content mdw-theme" mdw-surface="background alt"></div>
@@ -71,18 +67,16 @@
   <div class="render">
     <%~ includeFile('../_partials/_androidstatusbar.eta') %>
     <div class="mdw-appbar mdw-elevation" mdw-elevation="4" style="z-index:4">
-      <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', body: 'arrow_back' }}) %>
-            <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>Back</div>
-          </div>
+      <div class="mdw-appbar__start">
+        <div class="mdw-tooltip__wrapper">
+          <%~ includeFile(T, { button: {icon:true, class: 'mdw-tooltip__target material-icons', body: 'arrow_back' }}) %>
+          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>Back</div>
         </div>
-        <div class="mdw-appbar__end">
-          <div class="mdw-tooltip__wrapper">
-            <%~ includeFile(T, { button: {icon:true, class: 'mdw-tooltip__target material-icons', body: 'more_vert', attributes: {'mdw-more-button': true} }}) %>
-            <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>More</div>
-          </div>
+      </div>
+      <div class="mdw-appbar__end">
+        <div class="mdw-tooltip__wrapper">
+          <%~ includeFile(T, { button: {icon:true, class: 'mdw-tooltip__target material-icons', body: 'more_vert', attributes: {'mdw-more-button': true} }}) %>
+          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>More</div>
         </div>
       </div>
       <div class="mdw-appbar__content">

package/docs/pages/bottomnav.js

@@ -1,12 +1,14 @@
 import * as BottomNav from '../../components/bottomnav/index.js';
 import * as BottomNavItem from '../../components/bottomnav/item.js';
 import * as Button from '../../components/button/index.js';
-import { iterateArrayLike, setTextNode } from '../../core/dom.js';
+import { setTextNode } from '../../core/dom.js';
 import { convertElementToCode } from '../_sample-utils.js';
 
 /** @return {void} */
 function initializeSampleComponents() {
-  iterateArrayLike(document.querySelectorAll('.mdw-bottomnav'), BottomNav.attach);
+  for (const element of document.querySelectorAll('.mdw-bottomnav')) {
+    BottomNav.attach(element);
+  }
 }
 
 /** @type {HTMLElement} */
@@ -17,17 +19,19 @@ function updateSampleCode() {
   // Strip JS related elements and attributes
   BottomNav.detach(sampleComponent);
   sampleComponent.removeAttribute('role');
-  iterateArrayLike(sampleComponent.getElementsByClassName('mdw-bottomnav__item'), (item) => {
+  for (const item of sampleComponent.getElementsByClassName('mdw-bottomnav__item')) {
     BottomNavItem.detach(item);
     item.classList.remove('mdw-ripple');
     item.classList.remove('mdw-overlay');
     item.removeAttribute('mdw-overlay-off');
     item.removeAttribute('role');
-  });
+  }
 
   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',
+  ));
 
   // Reattach JS if requested
   BottomNav.attach(sampleComponent);
@@ -55,16 +59,15 @@ function setupPugButton() {
  * @return {void}
  */
 function onOptionChange(event) {
-  /** @type {HTMLInputElement} */
-  const { name, value } = (event.target);
+  const { name, value } = /** @type {HTMLInputElement} */ (event.target);
   switch (name) {
     case 'ink':
       switch (value) {
         case 'default':
-          iterateArrayLike(sampleComponent.getElementsByClassName('mdw-bottomnav__item'), (el) => el.removeAttribute('mdw-ink'));
+          for (const el of sampleComponent.getElementsByClassName('mdw-bottomnav__item')) el.removeAttribute('mdw-ink');
           break;
         default:
-          iterateArrayLike(sampleComponent.getElementsByClassName('mdw-bottomnav__item'), (el) => el.setAttribute('mdw-ink', value));
+          for (const el of sampleComponent.getElementsByClassName('mdw-bottomnav__item')) el.setAttribute('mdw-ink', value);
           break;
       }
       break;
@@ -77,12 +80,12 @@ function onOptionChange(event) {
           break;
         default:
           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', '');
@@ -104,9 +107,9 @@ function onOptionChange(event) {
 function setupComponentOptions() {
   sampleComponent = document.querySelector('.component-sample .mdw-bottomnav');
   BottomNav.attach(sampleComponent);
-  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
+  for (const el of document.querySelectorAll('input[name]')) {
     el.addEventListener('change', onOptionChange);
-  });
+  }
 }
 
 initializeSampleComponents();

package/docs/pages/button.js

@@ -1,12 +1,12 @@
 import * as Button from '../../components/button/index.js';
-import { iterateArrayLike, setTextNode } from '../../core/dom.js';
+import { setTextNode } from '../../core/dom.js';
 import * as Overlay from '../../core/overlay/index.js';
 import * as Ripple from '../../core/ripple/index.js';
 import { convertElementToCode } from '../_sample-utils.js';
 
 /** @return {void} */
 function initializeSampleComponents() {
-  iterateArrayLike(document.querySelectorAll('.js .mdw-button'), Button.attach);
+  for (const element of document.querySelectorAll('.js .mdw-button')) { Button.attach(element); }
 }
 
 /** @type {HTMLElement} */
@@ -27,13 +27,13 @@ function toggleOverlayOption(name, value) {
     return;
   }
   if (value) {
-    if (attr.indexOf(name) !== -1) {
+    if (attr.includes(name)) {
       return;
     }
     sampleComponent.setAttribute('mdw-overlay-off', `${attr} ${name}`);
     return;
   }
-  if (attr.indexOf(name) === -1) {
+  if (!attr.includes(name)) {
     return;
   }
   sampleComponent.setAttribute('mdw-overlay-off', attr.replace(name, '').trim());
@@ -175,12 +175,12 @@ function onOptionChange(event) {
           break;
         default:
           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', '');
@@ -198,9 +198,9 @@ function onOptionChange(event) {
       while (sampleComponent.firstChild) {
         newElement.appendChild(sampleComponent.firstChild);
       }
-      iterateArrayLike(sampleComponent.attributes, (attr) => {
+      for (const attr of sampleComponent.attributes) {
         newElement.attributes.setNamedItem(attr.cloneNode());
-      });
+      }
       sampleComponent.parentElement.replaceChild(newElement, sampleComponent);
       sampleComponent = newElement;
       break;
@@ -213,9 +213,9 @@ function onOptionChange(event) {
 function setupComponentOptions() {
   sampleComponent = document.querySelector('.component-sample .mdw-button');
   Button.attach(sampleComponent);
-  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
+  for (const el of document.querySelectorAll('input[name]')) {
     el.addEventListener('change', onOptionChange);
-  });
+  }
 }
 
 initializeSampleComponents();