@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/components/dialog/_spec.scss

@@ -6,28 +6,26 @@
 @use '../../core/_motion.scss' as motion;
 @use '../../core/_type.scss' as type;
 
-$unitWidth: dp(56) !default;
+$unitWidth: 56px !default;
 
 .mdw-dialog__close {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   // Scroll mask
-  -ms-overflow-style: none;
   overflow-y: scroll;
   overscroll-behavior: none;
   overscroll-behavior: contain;
-  -ms-scroll-chaining: none;
   scrollbar-width: none;
-  
-  
-  height: 100%;
-  width: 100%;
-  
+
+  block-size: 100%;
+  inline-size: 100%;
+
   cursor: default;
-  -webkit-tap-highlight-color: transparent;
-  
+
   pointer-events: inherit;
+  -webkit-tap-highlight-color: transparent;
+
   visibility: hidden;
   z-index: 8;
 
@@ -37,39 +35,43 @@ $unitWidth: dp(56) !default;
   }
 
   &::after {
-    display: block;
     content: '';
 
-    height: 200%;
-    width: 200%;
+    display: block;
+
+    block-size: 200%;
+    inline-size: 200%;
   }
 }
 
 .mdw-dialog {
   display: flex;
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+
   align-items: center;
   flex-direction: row;
   justify-content: center;
-  
+
   box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-  padding: dp(84) dp(40);
-  
+  block-size: 100%;
+  inline-size: 100%;
+  padding: 84px 40px;
+
+  pointer-events: none;
+
   transition-duration: motion.$fadeOutDuration;
   transition-property: opacity;
   transition-timing-function: motion.$accelerateEasing;
   will-change: opacity;
-  
+
   opacity: 0;
-  pointer-events: none;
 
   z-index: 24;
 
-  background-color: rgba(0, 0, 0, 0.50);
+  /* Handled by theme */
+  // background-color: rgba(0, 0, 0, 0.50);
 
   &:not([aria-hidden]) {
     // Initial state
@@ -79,7 +81,7 @@ $unitWidth: dp(56) !default;
   @for $i from 3 to 8 {
     &[mdw-width-units="#{$i}"] {
       .mdw-dialog__popup {
-        min-width: #{$unitWidth * $i};
+        min-inline-size: #{$unitWidth * $i};
       }
     }
   }
@@ -94,31 +96,31 @@ $unitWidth: dp(56) !default;
 
   overscroll-behavior: none;
   overscroll-behavior: contain;
-  -ms-scroll-chaining: none;
-  
-  max-height: 100%;
-  min-width: dp(224);
-  max-width: 100%;
+
+  max-block-size: 100%;
+  min-inline-size: 224px;
+  max-inline-size: 100%;
   flex-shrink: 1;
 
   will-change: display, transform;
-  
+
   transform: scale(1);
   transform-origin: bottom center;
   z-index: 24;
 
-  border-radius: dp(4);
+  border-radius: 4px;
   box-shadow: elevation.boxShadow(24);
 }
 
 .mdw-dialog[aria-hidden="false"],
 .mdw-dialog[id]:target {
+  pointer-events: auto;
+
   transition-duration: motion.$fadeInDuration;
   transition-property: opacity;
   transition-timing-function: motion.$decelerateEasing;
 
   opacity: 1;
-  pointer-events: auto;
 
   .mdw-dialog__close {
     visibility: visible;
@@ -150,8 +152,8 @@ $unitWidth: dp(56) !default;
   @include type.addRules('h6');
   @include type.baselineToBottom(36);
 
-  margin-bottom: dp(-36);
-  padding: 0 dp(24);
+  margin-block-end: -36px;
+  padding: 0 24px;
 }
 
 .mdw-dialog__body {
@@ -159,11 +161,11 @@ $unitWidth: dp(56) !default;
   @include type.addRules('body');
   @include type.baselineToBottom(28);
 
-  padding: 0 dp(24);
+  padding: 0 24px;
 }
 
 .mdw-dialog__header {
-  min-height: dp(64);
+  min-block-size: 64px;
 }
 
 .mdw-dialog__scrolling {
@@ -175,39 +177,27 @@ $unitWidth: dp(56) !default;
   flex-direction: row-reverse;
   flex-wrap: wrap;
   justify-content: flex-start;
-  
+
   flex: none;
-  margin-top: dp(8);
-  margin-bottom: dp(8);
+  margin-block: 8px;
+
+  .mdw-button {
+    margin-inline: 0 8px;
+
+    text-align: end;
+  }
 
   &[mdw-stacked] {
-    margin-top: 0;
+    margin-block-start: 0;
 
     .mdw-button {
       justify-content: flex-end;
-      
-      min-height: dp(48);
-      flex-basis: 100%;
-      margin-right: 0;
-      padding-right: dp(16);
-      padding-left: dp(16);
-      
-      &,
-      :root[dir="rtl"] & {
-        margin-left: 0;
-      }
-    }
-  }
 
-  .mdw-button {
-    margin-right: dp(8);
-    margin-left: 0;
-
-    text-align: end;
+      min-block-size: 48px;
+      flex-basis: 100%;
+      margin-inline: 0;
+      padding-inline: 16px;
 
-    :root[dir="rtl"] & {
-      margin-right: 0;
-      margin-left: dp(8);
     }
   }
 }

package/components/dialog/_theme.scss

@@ -0,0 +1,7 @@
+.mdw-theme {
+  --mdw-dialog__scrim-color: RGBA(var(--mdw-alias-background-900), 0.60);
+}
+
+.mdw-dialog {
+  background-color: var(--mdw-dialog__scrim-color);
+}

package/components/dialog/index.js

@@ -2,10 +2,7 @@
 
 import {
   dispatchDomEvent,
-  findElementParentByClassName,
   getChildElementByClass,
-  iterateArrayLike,
-  iterateSomeOfArrayLike,
   setTextNode,
 } from '../../core/dom.js';
 import * as Button from '../button/index.js';
@@ -13,13 +10,13 @@ import * as Button from '../button/index.js';
 class DialogStack {
   /**
    * @param {Element} element
-   * @param {Element} previousFocus
-   * @param {Object} [state]
-   * @param {Object} [previousState]
+   * @param {?Element} [previousFocus]
+   * @param {{hash:string}} [state]
+   * @param {{hash:string}} [previousState]
    */
   constructor(element, previousFocus, state, previousState) {
-    this.element = (element);
-    this.previousFocus = (previousFocus);
+    this.element = element;
+    this.previousFocus = previousFocus;
     this.state = state;
     this.previousState = previousState;
   }
@@ -41,13 +38,11 @@ export function onTransitionEnd(event) {
   if (event.propertyName !== 'opacity') {
     return;
   }
-  /** @type {HTMLElement} */
-  const dialogElement = (event.currentTarget);
+  const dialogElement = /** @type {HTMLElement} */ (event.currentTarget);
   if (dialogElement.getAttribute('aria-hidden') !== 'true') {
     return;
   }
-  /** @type {HTMLElement} */
-  const popupElement = (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
+  const popupElement = /** @type {HTMLElement} */ (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
   if (!popupElement) {
     return;
   }
@@ -103,22 +98,18 @@ export function hide(dialogElement) {
   });
   if (stackIndex !== -1) {
     const stack = OPEN_DIALOGS[stackIndex];
-    if (stack.previousFocus && stack.previousFocus instanceof HTMLElement) {
-      if (findElementParentByClassName(document.activeElement, 'mdw-dialog') === dialogElement) {
-        // Only pop focus back when hiding a dialog with focus within itself.
-        try {
-          stack.previousFocus.focus();
-        } catch (e) {
-          // Failed to focus
-        }
+    if (stack.previousFocus && stack.previousFocus instanceof HTMLElement && document.activeElement?.closest('.mdw-dialog') === dialogElement) {
+      // Only pop focus back when hiding a dialog with focus within itself.
+      try {
+        stack.previousFocus.focus();
+      } catch {
+        // Failed to focus
       }
     }
     OPEN_DIALOGS.splice(stackIndex, 1);
-    if (stack.state && window.history && window.history.state) {
-      // IE11 returns a cloned state object, not the original
-      if (stack.state.hash === window.history.state.hash) {
-        window.history.back();
-      }
+    if (stack.state && window.history && window.history.state // IE11 returns a cloned state object, not the original
+      && stack.state.hash === window.history.state.hash) {
+      window.history.back();
     }
   }
   if (!OPEN_DIALOGS.length) {
@@ -156,9 +147,8 @@ export function onCancelClick(event) {
   if (event && event.currentTarget instanceof HTMLAnchorElement) {
     event.preventDefault();
   }
-  /** @type {HTMLElement} */
-  const cancelElement = (event.currentTarget);
-  const dialogElement = findElementParentByClassName(cancelElement, 'mdw-dialog');
+  const cancelElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const dialogElement = cancelElement.closest('.mdw-dialog');
   cancel(dialogElement);
 }
 
@@ -170,9 +160,8 @@ export function onConfirmClick(event) {
   if (event && event.currentTarget instanceof HTMLAnchorElement) {
     event.preventDefault();
   }
-  /** @type {HTMLElement} */
-  const button = (event.currentTarget);
-  const dialogElement = findElementParentByClassName(button, 'mdw-dialog');
+  const button = /** @type {HTMLElement} */ (event.currentTarget);
+  const dialogElement = button.closest('.mdw-dialog');
   confirm(dialogElement);
 }
 
@@ -184,10 +173,9 @@ export function onCustomButtonClick(event) {
   if (event && event.currentTarget instanceof HTMLAnchorElement) {
     event.preventDefault();
   }
-  /** @type {HTMLElement} */
-  const button = (event.currentTarget);
+  const button = /** @type {HTMLElement} */ (event.currentTarget);
   if (dispatchDomEvent(button, CUSTOM_EVENT)) {
-    const dialogElement = findElementParentByClassName(button, 'mdw-dialog');
+    const dialogElement = button.closest('.mdw-dialog');
     hide(dialogElement);
   }
 }
@@ -197,8 +185,7 @@ export function onCustomButtonClick(event) {
  * @return {void}
  */
 export function handleTabKeyPress(event) {
-  /** @type {Element} */
-  const popupElement = (event.currentTarget);
+  const popupElement = /** @type {Element} */ (event.currentTarget);
   const focusableElements = popupElement.querySelectorAll([
     'button:not(:disabled):not([tabindex="-1"])',
     '[href]:not(:disabled):not([tabindex="-1"])',
@@ -208,35 +195,28 @@ export function handleTabKeyPress(event) {
     '[tabindex]:not([tabindex="-1"])'].join(', '));
   let foundTarget = false;
   let candidate = null;
-  iterateSomeOfArrayLike(focusableElements, (el) => {
+  for (const el of focusableElements) {
     if (el === event.target) {
       foundTarget = true;
       if (event.shiftKey) {
-        return true;
+        break;
       }
     } else if (event.shiftKey) {
       candidate = el;
     } else if (foundTarget) {
       candidate = el;
-      return true;
+      break;
     }
-    return false;
-  });
+  }
   if (!candidate) {
-    if (event.shiftKey) {
-      // Select last item
-      candidate = focusableElements[focusableElements.length - 1];
-    } else {
-      // Select first item
-      candidate = focusableElements[0];
-    }
+    candidate = event.shiftKey ? focusableElements[focusableElements.length - 1] : focusableElements[0];
   }
   event.stopPropagation();
   event.preventDefault();
   if (candidate && candidate instanceof HTMLElement) {
     try {
       candidate.focus();
-    } catch (e) {
+    } catch {
       // Failed to focus
     }
   }
@@ -249,9 +229,8 @@ export function handleTabKeyPress(event) {
 export function onEscapeKeyDown(event) {
   event.stopPropagation();
   event.preventDefault();
-  /** @type {HTMLElement} */
-  const popupElement = (event.currentTarget);
-  const dialogElement = findElementParentByClassName(popupElement, 'mdw-dialog');
+  const popupElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const dialogElement = popupElement.closest('.mdw-dialog');
   cancel(dialogElement);
 }
 
@@ -277,11 +256,11 @@ export function getTitleText(dialogElement) {
   let title = 'Dialog';
   const titleElement = dialogElement.getElementsByClassName('mdw-dialog__title')[0];
   if (titleElement) {
-    title = titleElement.textContent;
+    title = titleElement.textContent ?? '';
   } else {
     const bodyElement = dialogElement.getElementsByClassName('mdw-dialog__body')[0];
     if (bodyElement) {
-      title = bodyElement.textContent;
+      title = bodyElement.textContent ?? '';
     }
   }
   return title;
@@ -313,7 +292,7 @@ export function onPopState(event) {
 
 /**
  * @param {Element} dialogElement
- * @param {(DocumentFragment|string)} [content]
+ * @param {(DocumentFragment|string|null)} [content]
  * @return {void}
  */
 export function updateTitle(dialogElement, content) {
@@ -323,14 +302,14 @@ export function updateTitle(dialogElement, content) {
       // Nothing to be done
       return;
     }
-    title.parentElement.removeChild(title);
+    title.remove();
     return;
   }
   if (!title) {
     title = document.createElement('div');
     title.className = 'mdw-dialog__title';
     const popup = dialogElement.getElementsByClassName('mdw-dialog__popup')[0];
-    popup.insertBefore(title, popup.firstChild);
+    popup.prepend(title);
   }
   if (content instanceof DocumentFragment) {
     while (title.lastChild) {
@@ -349,9 +328,9 @@ export function updateTitle(dialogElement, content) {
  */
 export function updateButtonText(dialogElement, texts) {
   const buttons = dialogElement.querySelectorAll('.mdw-dialog__button-area .mdw-button');
-  iterateArrayLike(buttons, (button, index) => {
-    setTextNode(button, texts[index]);
-  });
+  for (let i = 0; i < buttons.length; i++) {
+    setTextNode(buttons.item(i), texts[i]);
+  }
 }
 
 /**
@@ -366,7 +345,7 @@ export function updateBody(dialogElement, content) {
       // Nothing to be done
       return;
     }
-    body.parentElement.removeChild(body);
+    body.remove();
     return;
   }
   if (!body) {
@@ -375,10 +354,10 @@ export function updateBody(dialogElement, content) {
     body.setAttribute('mdw-ink', 'medium');
     const title = dialogElement.getElementsByClassName('mdw-dialog__title')[0];
     if (title) {
-      title.insertAdjacentElement('afterend', body);
+      title.after(body);
     } else {
       const popup = dialogElement.getElementsByClassName('mdw-dialog__popup')[0];
-      popup.insertBefore(body, popup.firstChild);
+      popup.prepend(body);
     }
   }
   if (content instanceof DocumentFragment) {
@@ -393,12 +372,11 @@ export function updateBody(dialogElement, content) {
 
 /**
  * @param {Element} dialogElement
- * @param {Event} [event]
+ * @param {Event|MouseEvent} [event]
  * @return {void}
  */
 export function updateTransformOrigin(dialogElement, event) {
-  /** @type {HTMLElement} */
-  const popup = (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
+  const popup = /** @type {HTMLElement} */ (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
   popup.style.removeProperty('transform-origin');
   if (!event) {
     return;
@@ -411,13 +389,11 @@ export function updateTransformOrigin(dialogElement, event) {
   let pageY;
   const dialogRect = dialogElement.getBoundingClientRect();
   if ('pageX' in event && 'pageY' in event) {
-    ({ pageX, pageY } = event);
-    pageX -= window.pageXOffset;
-    pageY -= window.pageYOffset;
+    pageX = event.pageX - window.pageXOffset;
+    pageY = event.pageY - window.pageYOffset;
   } else {
-    /** @type {Element} */
     const target = (event.target || event.currentTarget);
-    if (target instanceof Element === false) {
+    if (!(target instanceof Element)) {
       return;
     }
     const rect = target.getBoundingClientRect();
@@ -448,7 +424,7 @@ export function attach(element) {
     dialogCloser = document.createElement('div');
     dialogCloser.className = 'mdw-dialog__close';
     if (element.firstChild) {
-      element.insertBefore(dialogCloser, element.firstChild);
+      element.prepend(dialogCloser);
     } else {
       element.appendChild(dialogCloser);
     }
@@ -459,24 +435,24 @@ export function attach(element) {
   const buttons = popup.querySelectorAll('.mdw-dialog__button-area .mdw-button');
   let foundConfirmButton = false;
   let foundCancelButton = false;
-  iterateArrayLike(buttons, (button) => {
+  for (const button of buttons) {
     Button.attach(button);
     if (button.hasAttribute('mdw-custom')) {
       button.addEventListener('click', onCustomButtonClick);
-      return;
+      continue;
     }
     if (!foundConfirmButton) {
       button.addEventListener('click', onConfirmClick);
       foundConfirmButton = true;
-      return;
+      continue;
     }
     if (!foundCancelButton) {
       button.addEventListener('click', onCancelClick);
       foundCancelButton = true;
-      return;
+      continue;
     }
     button.addEventListener('click', onCustomButtonClick);
-  });
+  }
   setupARIA(element);
 }
 
@@ -507,7 +483,7 @@ export function create(options) {
     const buttonArea = document.createElement('div');
     buttonArea.className = 'mdw-dialog__button-area';
     let index = 0;
-    options.buttons.forEach((buttonText) => {
+    for (const buttonText of options.buttons) {
       const button = document.createElement('div');
       button.className = 'mdw-button mdw-theme';
       button.setAttribute('tabindex', '0');
@@ -522,7 +498,7 @@ export function create(options) {
         button.setAttribute('mdw-autofocus', '');
       }
       index += 1;
-    });
+    }
     if (options.stacked) {
       buttonArea.setAttribute('mdw-stacked', '');
     }
@@ -549,8 +525,7 @@ export function show(dialogElement, event) {
 
   if (dialogElement.getAttribute('aria-hidden') !== 'false') {
     dialogElement.setAttribute('aria-hidden', 'false');
-    /** @type {HTMLElement} */
-    const popupElement = (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
+    const popupElement = /** @type {HTMLElement} */ (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
     popupElement.style.setProperty('display', 'flex');
     changed = true;
   }
@@ -562,13 +537,13 @@ export function show(dialogElement, event) {
   }
   attach(dialogElement);
   const previousFocus = document.activeElement;
-  const newState = { hash: Math.random().toString(36).substr(2, 16) };
+  const newState = { hash: Math.random().toString(36).slice(2, 18) };
   let previousState = null;
   if (window.history && window.history.pushState) {
     if (!window.history.state) {
       // Create new previous state
       window.history.replaceState({
-        hash: Math.random().toString(36).substr(2, 16),
+        hash: Math.random().toString(36).slice(2, 18),
       }, document.title);
     }
     previousState = window.history.state;
@@ -588,7 +563,7 @@ export function show(dialogElement, event) {
     } else if (dialogElement instanceof HTMLElement) {
       dialogElement.focus();
     }
-  } catch (e) {
+  } catch {
     // Failed to focus
   }
   return true;
@@ -605,8 +580,7 @@ export function detach(dialogElement) {
   if (dialogCloser) {
     dialogCloser.removeEventListener('click', onCancelClick);
   }
-  /** @type {HTMLElement} */
-  const popupElement = (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
+  const popupElement = /** @type {HTMLElement} */ (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
   if (popupElement) {
     popupElement.removeEventListener('keydown', onKeyDown);
     popupElement.style.removeProperty('transform-origin');
@@ -615,12 +589,12 @@ export function detach(dialogElement) {
     }
   }
   const buttons = popupElement.querySelectorAll('.mdw-dialog__button-area .mdw-button');
-  iterateArrayLike(buttons, (button) => {
+  for (const button of buttons) {
     Button.detach(button);
     button.removeEventListener('click', onConfirmClick);
     button.removeEventListener('click', onCancelClick);
     button.removeEventListener('click', onCustomButtonClick);
-  });
+  }
 }
 
 // Aliases

package/components/divider/_spec.scss

@@ -1,13 +1,11 @@
 @use '../../core/_length.scss' as *;
 
 .mdw-divider {
-  width: 100%;
-  margin-top: dp(-1);
-  border-bottom: dp(1) solid;
-}
+  inline-size: 100%;
+  margin-block-start: -1px;
+  border-block-end: 1px solid;
 
-.mdw-divider__vertical {
-  height: 100%;
-  margin-right: dp(-1);
-  border-left: dp(1) solid;
+  &[mdw-vertical] {
+    writing-mode: vertical-lr;
+  }
 }

package/components/elevation/_spec.scss

@@ -3,7 +3,7 @@
 .mdw-elevation {
   @each $value in (1, 2, 3, 4, 6, 8, 9, 12, 16, 24) {
     &[mdw-elevation="#{$value}"] {
-      box-shadow: elevation.boxShadow($value);
+      @include elevation.boxShadowMixin($value);
     }
   }
 }