@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/core/document/index.js

@@ -0,0 +1,39 @@
+/** @return {void} */
+export function detectStandalone() {
+  // @ts-ignore: Safari uses navigator.standalone
+  if (navigator.standalone === true || window.matchMedia('(display-mode: standalone)').matches) {
+    document.documentElement.setAttribute('mdw-standalone', '');
+  }
+}
+
+/** @return {void} */
+export function detectUserAgent() {
+  const ua = navigator.userAgent.toLowerCase();
+  if (/iphone/i.test(ua) || /ipad/i.test(ua) || /macintosh/i.test(ua)) {
+    document.documentElement.setAttribute('mdw-ios', '');
+  }
+}
+
+/** @return {void} */
+export function detectColorScheme() {
+  // Auto lightness and fill
+  if (!document.documentElement.hasAttribute('mdw-surface')
+    && !document.documentElement.hasAttribute('mdw-light')
+    && !document.documentElement.hasAttribute('mdw-dark')) {
+    if (window.matchMedia('(prefers-color-scheme:dark)').matches) {
+      document.documentElement.setAttribute('mdw-dark', '');
+    } else {
+      document.documentElement.setAttribute('mdw-light', '');
+    }
+  }
+}
+
+/**
+ * Run before document has loaded
+ * @return {void}
+ */
+export function onPrerender() {
+  detectStandalone();
+  detectUserAgent();
+  detectColorScheme();
+}

package/core/dom.js

@@ -1,3 +1,4 @@
+/** @type {?boolean} */
 let passiveEventListenerSupported = null;
 
 /** @return {void} */
@@ -10,9 +11,9 @@ function testPassiveEventListenerOptionSupport() {
         return true;
       },
     };
-    // @ts-ignore
+    // @ts-ignore: Custom test event
     window.addEventListener('test', options, options);
-    // @ts-ignore
+    // @ts-ignore: Custom test event
     window.removeEventListener('test', options, options);
   } catch (err) {
     passiveEventListenerSupported = false;
@@ -30,7 +31,7 @@ export function getPassiveEventListenerOption() {
   return false;
 }
 
-export const nextTick = window.requestAnimationFrame || (cb => window.setTimeout(cb, 17));
+export const nextTick = window.requestAnimationFrame || ((cb) => window.setTimeout(cb, 17));
 
 export const cancelTick = window.cancelAnimationFrame || window.clearTimeout;
 
@@ -48,18 +49,18 @@ export function getChildElementByClass(element, className) {
 }
 
 /**
- * @param {HTMLElement} element
+ * @param {Element} element
  * @param {string} className
  * @param {boolean} [includeSelf=true]
  * @return {HTMLElement}
  */
 export function findElementParentByClassName(element, className, includeSelf) {
-  /** @type {HTMLElement} */
   let el;
   if (includeSelf === false) {
     el = element.parentElement;
   } else {
-    el = element;
+    /** @type {HTMLElement} */
+    el = (element);
   }
   while (el != null && !el.classList.contains(className)) {
     el = el.parentElement;
@@ -69,17 +70,16 @@ export function findElementParentByClassName(element, className, includeSelf) {
 
 /** @return {boolean} */
 export function isRtl() {
-  return document.documentElement.hasAttribute('dir')
-    && document.documentElement.getAttribute('dir').toLowerCase() === 'rtl';
+  return document.documentElement.dir === 'rtl';
 }
 
 /**
- * @param {Element} element
+ * @param {EventTarget} eventTarget
  * @param {string} type
  * @param {Object} [detail]
  * @return {boolean}
  */
-export function dispatchDomEvent(element, type, detail) {
+export function dispatchDomEvent(eventTarget, type, detail) {
   let event;
   if (typeof CustomEvent === 'function') {
     event = new CustomEvent(type, {
@@ -101,7 +101,7 @@ export function dispatchDomEvent(element, type, detail) {
     event = document.createEvent('CustomEvent');
     event.initCustomEvent(type, true, true, detail);
   }
-  return element.dispatchEvent(event);
+  return eventTarget.dispatchEvent(event);
 }
 
 /**
@@ -177,7 +177,7 @@ export function iterateSomeOfElementSiblings(element, fn) {
 /**
  * @param {Node} node
  * @param {boolean} [create]
- * @return {Node}
+ * @return {Text}
  */
 export function getTextNode(node, create) {
   let textNode;

package/core/overlay/_spec.scss

@@ -1,6 +1,3 @@
-@import '../_breakpoint.scss';
-@import '../_motion.scss';
-
 .mdw-overlay {
   position: relative;
 

package/core/overlay/_theme.scss

@@ -1,18 +1,18 @@
 // https://material.io/design/interaction/states.html
 
-@import '../theme/index.scss';
+@use '../theme/_mixins.scss' as theme;
 
-$mdw-overlay__theme-values: (
-  
-  off-color:                     $mdw-theme__default-ink,
-  off-medium-color:              $mdw-theme__medium-ink,
-  off-inactive-color:            $mdw-theme__inactive-ink,
-  off-divider-color:             $mdw-theme__divider-ink,
+$themeValues: (
+  overlay-color:                 theme.$foreground,
 
+  high-opacity:                  theme.$high-opacity,
+  medium-opacity:                theme.$medium-opacity,
+  inactive-opacity:              theme.$inactive-opacity,
+  divider-opacity:               theme.$divider-opacity,
+  
   disabled-opacity:              (0.38, 0.50),
   
   // states   
-  overlay-color:                 (('foreground-light', 1.00), ('foreground-dark', 1.00)),
 
   hover-opacity:                 (0.04, 0.08),
   focus-opacity:                 (0.12, 0.24),
@@ -30,98 +30,81 @@ $mdw-overlay__theme-values: (
   activated-hover-focus-opacity: (0.12 + 0.04 + 0.12, 0.24 + 0.08 + 0.24),
 ) !default;
 
-@function mdwOverlayThemeValue($key, $type) {
-  @return mdwGetThemeValue('overlay', $mdw-overlay__theme-values, $key, $type);
+@function getThemeValue($key, $type) {
+  @return theme.getThemeValue('overlay', $themeValues, $key, $type);
 }
 
-@mixin mdw-overlay__theme-rules($type: 'var') {
+@mixin addThemeRules($type: 'var') {
   .mdw-overlay {
     &,
-    &:active,
-    &:active,
+    &[aria-pressed="false"]:active,
     &[aria-selected="true"],
     &[aria-pressed="true"],
     &[aria-current] {
       &::before {
-        color: inherit;
         @if ($type == 'var') {
-          color: RGB(var(--ink-color));
+          color: RGB(var(--mdw-ink));
+        } @else {
+          // Handled by mdw-color
         }
       }
     }
 
     &[aria-selected="false"],
     &[aria-pressed="false"],
-    &[disabled],
     &[aria-disabled="true"],
-    &[disabled]:active,
     &[aria-disabled="true"]:active {
       &::before {
-        color: mdwOverlayThemeValue("overlay-color", $type);
-      }
-    }
-
-    @if ($type == 'var') {
-      .mdw-overlay__group[aria-multiselectable="true"] &[aria-selected="true"] {
-        color: mdwOverlayThemeValue("off-color", $type);
+        @if ($type == 'var') {
+          color: RGB(getThemeValue("overlay-color", $type));
+        } @else {
+          background-color: RGB(getThemeValue("overlay-color", $type));
+        }
       }
     }
 
+    // Off color
     &[aria-selected="false"],
     &[aria-pressed="false"],
-    &[disabled],
-    &[aria-disabled="true"] {
-      @if ($type == 'var') {
-        color: mdwOverlayThemeValue("off-color", $type);
+    &[aria-selected="true"]:not([aria-current]) {
+      #{if($type == 'var', '&', '&,&.mdw-theme')} {
+        color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("high-opacity", $type));
         &[mdw-border-ink] {
-          border-color: mdwOverlayThemeValue("off-divider-color", $type);
+          border-color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("divider-opacity", $type));
         }
         &[mdw-overlay-default="medium"] {
-          color: mdwOverlayThemeValue("off-medium-color", $type);
+          color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("medium-opacity", $type));
         }
         &[mdw-overlay-default="inactive"] {
-          color: mdwOverlayThemeValue("off-inactive-color", $type);
+          color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("inactive-opacity", $type));
         }
         &[mdw-overlay-default="divider"] {
-          color: mdwOverlayThemeValue("off-divider-color", $type);
+          color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("divider-opacity", $type));
         }
-      } @else {
-        &,&.mdw-theme {
-          color: mdwOverlayThemeValue("off-color", $type);
-          &[mdw-border-ink] {
-            border-color: mdwOverlayThemeValue("off-divider-color", $type);
-          }
-          &[mdw-overlay-default="medium"] {
-            color: mdwOverlayThemeValue("off-medium-color", $type);
-          }
-          &[mdw-overlay-default="inactive"] {
-            color: mdwOverlayThemeValue("off-inactive-color", $type);
-          }
-          &[mdw-overlay-default="divider"] {
-            color: mdwOverlayThemeValue("off-divider-color", $type);
-          }
-        }
-      }  
-      
+      }
     }
 
-    &[disabled],
     &[aria-disabled="true"] {
-      opacity: mdwOverlayThemeValue("disabled-opacity", $type);
+      &[mdw-overlay-disabled="ink"] {
+        color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("inactive-opacity", $type));
+      }
+      &:not([mdw-overlay-disabled]) {
+        opacity: getThemeValue("disabled-opacity", $type);
+      }
     }
 
     &:not([mdw-overlay-touch="true"]) {
       &:focus:not([mdw-overlay-off~="focus"]):not([mdw-overlay-touch="true"])::before {
-        opacity: mdwOverlayThemeValue("focus-opacity", $type);
+        opacity: getThemeValue("focus-opacity", $type);
       }
 
-      &:not([disabled]):not([aria-disabled="true"]):not([mdw-overlay-touch="true"]) {
+      &:not([aria-disabled="true"]):not([mdw-overlay-touch="true"]) {
         &:hover:not([mdw-overlay-off~="hover"])::before {
-          opacity: mdwOverlayThemeValue("hover-opacity", $type);
+          opacity: getThemeValue("hover-opacity", $type);
         }
 
         &:hover:focus:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-          opacity: mdwOverlayThemeValue("hover-focus-opacity", $type);
+          opacity: getThemeValue("hover-focus-opacity", $type);
         }
       }
     }
@@ -129,46 +112,45 @@ $mdw-overlay__theme-values: (
     // Selected
     &[aria-selected="true"]:not([mdw-overlay-off~="selected"]) {
       &::before {
-        opacity: mdwOverlayThemeValue("selected-opacity", $type);
+        opacity: getThemeValue("selected-opacity", $type);
       }
 
       &:not([mdw-overlay-touch="true"]) {
         &:focus:not([mdw-overlay-off~="focus"])::before {
-          opacity: mdwOverlayThemeValue("selected-focus-opacity", $type);
+          opacity: getThemeValue("selected-focus-opacity", $type);
         }
 
-        &:not([disabled]):not([aria-disabled="true"]) {
+        &:not([aria-disabled="true"]) {
           &:hover:not([mdw-overlay-off~="hover"])::before {
-            opacity: mdwOverlayThemeValue("selected-hover-opacity", $type);
+            opacity: getThemeValue("selected-hover-opacity", $type);
           }
 
           &:hover:focus:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-            opacity: mdwOverlayThemeValue("selected-hover-focus-opacity", $type);
+            opacity: getThemeValue("selected-hover-focus-opacity", $type);
           }
         }
       }
     }
 
     // Activated
-    .mdw-overlay__group[aria-multiselectable="false"] &[aria-selected="true"]:not([mdw-overlay-off~="selected"]),
-    &[aria-current]:not([mdw-overlay-off~="current"]),
+    &[aria-current]:not([mdw-overlay-off~="activated"]),
     &[aria-pressed="true"]:not([mdw-overlay-off~="activated"]) {
       &::before {
-        opacity: mdwOverlayThemeValue("activated-opacity", $type);
+        opacity: getThemeValue("activated-opacity", $type);
       }
 
       &:not([mdw-overlay-touch="true"]) {
         &:focus:not([mdw-overlay-off~="focus"])::before {
-          opacity: mdwOverlayThemeValue("activated-focus-opacity", $type);
+          opacity: getThemeValue("activated-focus-opacity", $type);
         }
 
-        &:not([disabled]):not([aria-disabled="true"]) {
+        &:not([aria-disabled="true"]) {
           &:hover:not([mdw-overlay-off~="hover"])::before {
-            opacity: mdwOverlayThemeValue("activated-hover-opacity", $type);
+            opacity: getThemeValue("activated-hover-opacity", $type);
           }
 
           &:hover:focus:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-            opacity: mdwOverlayThemeValue("activated-hover-focus-opacity", $type);
+            opacity: getThemeValue("activated-hover-focus-opacity", $type);
           }
         }
       }
@@ -176,14 +158,14 @@ $mdw-overlay__theme-values: (
   }
 }
 
-@include mdw-theme__add-component-fallback-rules('light') {
-  @include mdw-overlay__theme-rules('light');
+@include theme.addComponentFallbackRules('light') {
+  @include addThemeRules('light');
 }
-@include mdw-theme__add-component-fallback-rules('dark') {
-  @include mdw-overlay__theme-rules('dark');
+@include theme.addComponentFallbackRules('dark') {
+  @include addThemeRules('dark');
 }
 
 
-@include mdw-theme__add-component-variable-rules('overlay', $mdw-overlay__theme-values) {
-  @include mdw-overlay__theme-rules();
+@include theme.addComponentCSSVariableRules('overlay', $themeValues) {
+  @include addThemeRules();
 }

package/core/overlay/index.js

@@ -1,23 +1,9 @@
-import { getPassiveEventListenerOption, iterateArrayLike } from '../dom';
+import { getPassiveEventListenerOption, iterateArrayLike } from '../dom.js';
 
-/**
- * @param {Element|Document} [root=document]
- * @return {void}
- */
-export function attachAll(root = document) {
-  iterateArrayLike(root.getElementsByClassName('mdw-overlay'), attach);
-}
+let lastInteractionWasTouch = false;
 
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attach(element) {
-  element.setAttribute('mdw-overlay-js', '');
-  element.addEventListener('mousedown', onMouseDown, getPassiveEventListenerOption());
-  element.addEventListener('touchstart', onTouchStart, getPassiveEventListenerOption());
-  element.addEventListener('keydown', onKeyDown, getPassiveEventListenerOption());
-  element.addEventListener('blur', onBlur, getPassiveEventListenerOption());
+if (window && window.matchMedia) {
+  lastInteractionWasTouch = window.matchMedia('(any-pointer: coarse)').matches;
 }
 
 /**
@@ -60,9 +46,54 @@ export function onKeyDown(event) {
 export function onBlur(event) {
   /** @type {HTMLElement} */
   const element = (event.currentTarget);
+  const value = element.getAttribute('mdw-overlay-touch');
+  if (value == null) {
+    return;
+  }
+  if (value === 'true') {
+    lastInteractionWasTouch = true;
+  } else {
+    lastInteractionWasTouch = false;
+  }
   element.removeAttribute('mdw-overlay-touch');
 }
 
+/**
+ * @param {FocusEvent} event
+ * @return {void}
+ */
+export function onFocus(event) {
+  /** @type {HTMLElement} */
+  const element = (event.currentTarget);
+  if (!element.hasAttribute('mdw-overlay-touch')) {
+    // Element was focused without a mouse or touch event (keyboard or programmatic)
+    if (lastInteractionWasTouch) {
+      element.setAttribute('mdw-overlay-touch', 'true');
+    }
+  }
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attach(element) {
+  element.setAttribute('mdw-overlay-js', '');
+  element.addEventListener('mousedown', onMouseDown, getPassiveEventListenerOption());
+  element.addEventListener('touchstart', onTouchStart, getPassiveEventListenerOption());
+  element.addEventListener('keydown', onKeyDown, getPassiveEventListenerOption());
+  element.addEventListener('blur', onBlur, getPassiveEventListenerOption());
+  element.addEventListener('focus', onFocus, getPassiveEventListenerOption());
+}
+
+/**
+ * @param {Element|Document} [root=document]
+ * @return {void}
+ */
+export function attachAll(root = document) {
+  iterateArrayLike(root.getElementsByClassName('mdw-overlay'), attach);
+}
+
 /**
  * @param {Element} element
  * @return {void}

package/core/overlay/index.scss

@@ -1,2 +1,2 @@
-@import './_spec.scss';
-@import './_theme.scss';
+@forward './_spec.scss';
+@forward './_theme.scss';

package/core/ripple/_spec.scss

@@ -1,14 +1,16 @@
 // https://android.googlesource.com/platform/frameworks/base/+/dbcbca4/graphics/java/android/graphics/drawable/Ripple.java
 
-@import "../_breakpoint.scss";
-@import "../_platform.scss";
-@import "../_motion.scss";
+@use "sass:math";
 
-$mdw-ripple__enter-delay: 80ms !default;
+@use "../_breakpoint.scss" as breakpoint;
+@use "../_platform.scss" as platform;
+@use "../_motion.scss" as motion;
 
-$mdw-ripple__fade-out-duration: 1000ms / 3.0 !default;
-$mdw-ripple__touch-down-acceleration: 1024 !default;
-$mdw-ripple__touch-up-acceleration: 3400 !default;
+$enterDelay: 80ms !default;
+
+$fadeOutDuration: math.div(1000ms, 3.0) !default;
+$touchDownAcceleration: 1024 !default;
+$touchUpAcceleration: 3400 !default;
 
 // Ripple starts at 100% opacity
 // Ripple fills linearly
@@ -16,7 +18,7 @@ $mdw-ripple__touch-up-acceleration: 3400 !default;
 // Ripple fills on touch up with duration: 1000ms * √(Δradius / (1024 + 3400)
 // Ripple opacity down to 0 on touch-up event with deceleration and duration: 1000ms / 3.0
 
-// Use $mdw-motion__expand-duration temporarily
+// Use motion.$expandDuration temporarily
 
 // TODO: Use variable ripple scale durations
 // TODO: Use enter-delay with JS Ripple
@@ -46,6 +48,7 @@ $mdw-ripple__touch-up-acceleration: 3400 !default;
 
 .mdw-ripple {
   position: relative;
+
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -75,14 +78,14 @@ $mdw-ripple__touch-up-acceleration: 3400 !default;
   position: absolute;
 
   animation-name: none;
-  animation-duration: $mdw-motion__expand-duration;
+  animation-duration: motion.$expandDuration;
   animation-timing-function: linear;
   animation-direction: normal;
   animation-fill-mode: forwards;
   transition-delay: 0s;
-  transition-duration: $mdw-motion__simple-duration;
+  transition-duration: motion.$simpleDuration;
   transition-property: background-color, color;
-  transition-timing-function: $mdw-motion__standard-easing;
+  transition-timing-function: motion.$standardEasing;
 
   opacity: 0.16;
   pointer-events: none;
@@ -91,13 +94,6 @@ $mdw-ripple__touch-up-acceleration: 3400 !default;
   background-color: currentColor;
   
   border-radius: 50%;
-
-  &[mdw-fade-in-out] {
-    animation-name: ripple-fade-in, ripple-fade-out;
-    animation-duration: $mdw-motion__expand-duration, $mdw-ripple__fade-out-duration;
-    animation-timing-function: linear, $mdw-motion__decelerate-easing;
-    animation-delay: 0ms, $mdw-motion__expand-duration;
-  }
 }
 
 .mdw-ripple__inner[mdw-fade-in] {
@@ -111,8 +107,8 @@ $mdw-ripple__touch-up-acceleration: 3400 !default;
 .mdw-ripple:not(:active) > .mdw-ripple__container > .mdw-ripple__inner[mdw-fade-in-complete][mdw-fade-in],
 .mdw-ripple__inner[mdw-fade-out] {
   animation-name: ripple-fade-out;
-  animation-duration: $mdw-ripple__fade-out-duration;
-  animation-timing-function: $mdw-motion__decelerate-easing;
+  animation-duration: $fadeOutDuration;
+  animation-timing-function: motion.$decelerateEasing;
 }
 
 
@@ -142,10 +138,8 @@ $mdw-ripple__touch-up-acceleration: 3400 !default;
   }
 
   to {
-
-    transform: scale(2);
-
     opacity: 0;
+    transform: scale(2);
   }
 }
 
@@ -164,21 +158,10 @@ $mdw-ripple__touch-up-acceleration: 3400 !default;
   -webkit-user-select: none;
   user-select: none;
 
-  transition-delay:
-    $mdw-ripple__enter-delay,
-    $mdw-ripple__enter-delay + $mdw-motion__expand-duration;
-  transition-duration:
-    $mdw-motion__expand-duration + $mdw-ripple__fade-out-duration,
-    $mdw-ripple__fade-out-duration;
-  transition-property:
-    transform,
-    background-color;
-  transition-timing-function:
-    linear,
-    $mdw-motion__decelerate-easing;
-  will-change:
-    transform,
-    background-color;
+  transition: 
+    transform #{motion.$expandDuration + $fadeOutDuration} linear $enterDelay,
+    background-color $fadeOutDuration motion.$decelerateEasing #{$enterDelay + motion.$expandDuration};
+  will-change: transform, background-color;
 
   opacity: 0.16;
   pointer-events: none;
@@ -208,7 +191,7 @@ $mdw-ripple__touch-up-acceleration: 3400 !default;
 .mdw-ripple[aria-disabled="true"] {
   & > .mdw-ripple__container,
   &::after {
-    display: none;
+    visibility: hidden;
   }
 }
 

package/core/ripple/_theme.scss

@@ -2,39 +2,39 @@
 // https://material.io/design/components/buttons.html
 // https://material.io/design/iconography/system-icons.html#color
 
-@import '../theme/index.scss';
+@use '../theme/_mixins.scss' as theme;
 
-$mdw-ripple__theme-values: (
+$themeValues: (
   overlay-color:                 (('foreground-light', 1.00), ('foreground-dark', 1.00)),
   pressed-opacity:               (0.16, 0.32),
 ) !default;
 
-@function mdwRippleThemeValue($key, $type) {
-  @return mdwGetThemeValue('ripple', $mdw-ripple__theme-values, $key, $type);
+@function getThemeValue($key, $type) {
+  @return theme.getThemeValue('ripple', $themeValues, $key, $type);
 }
 
-@mixin mdw-ripple__theme-rules($type: 'var') {
+@mixin addThemeRules($type: 'var') {
   .mdw-ripple {
     & > .mdw-ripple__container > .mdw-ripple__inner,
     &::after {
-      opacity: mdwRippleThemeValue("pressed-opacity", $type);
+      opacity: getThemeValue("pressed-opacity", $type);
       color: inherit;
       @if ($type == 'var') {
         // Fallback handed by previous inherit rule
-        color: RGB(var(--ink-color));
+        color: RGB(var(--mdw-ink));
       }
     }
   }
 }
 
 
-@include mdw-theme__add-component-fallback-rules('light') {
-  @include mdw-ripple__theme-rules('light');
+@include theme.addComponentFallbackRules('light') {
+  @include addThemeRules('light');
 }
-@include mdw-theme__add-component-fallback-rules('dark') {
-  @include mdw-ripple__theme-rules('dark');
+@include theme.addComponentFallbackRules('dark') {
+  @include addThemeRules('dark');
 }
 
-@include mdw-theme__add-component-variable-rules('ripple', $mdw-ripple__theme-values) {
-  @include mdw-ripple__theme-rules();
+@include theme.addComponentCSSVariableRules('ripple', $themeValues) {
+  @include addThemeRules();
 }