@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/components/tooltip/_spec.scss

@@ -5,15 +5,13 @@
 @use '../../core/_platform.scss' as platform;
 @use '../../core/_type.scss' as type;
 
-
 // Guidelines state background is #616161, which is Gray 700
 
-$desktop-margin: dp(14) !default;
-$mobile-margin: dp(24) !default;
+$desktop-margin: 14px !default;
+$mobile-margin: 24px !default;
 $touch-fade-out-time: 1.5s !default;
 $touch-min-hold-time: 500ms !default;
 
-
 .mdw-tooltip__wrapper {
   position: relative;
   overflow: visible;
@@ -33,29 +31,30 @@ $touch-min-hold-time: 500ms !default;
 
   position: absolute;
 
-  top: 100%;
-  left: 50%;
+  inset-block-start: 100%;
+  inset-inline-start: 50%;
   align-items: center;
   flex-direction: column;
   justify-content: center;
 
-  width: auto;
-  padding: dp(6) dp(8);
-  
+  inline-size: auto;
+  padding: 6px 8px;
+
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   cursor: none;
-  
+  pointer-events: none;
+
   transition-duration: motion.$fadeOutDuration;
   transition-property: opacity;
   transition-timing-function: motion.$accelerateEasing;
-  
+
   opacity: 0;
-  pointer-events: none;
   // Default Alignment is Center
-  
+
   transform: translateX(-50%) translateY($desktop-margin);
   z-index: 8;
 
-  border-radius: dp(4);
+  border-radius: 4px;
 
   line-height: 1;
   white-space: nowrap;
@@ -66,20 +65,18 @@ $touch-min-hold-time: 500ms !default;
   .mdw-tooltip__wrapper > .mdw-tooltip__target:not([tabindex="-1"]):focus ~ & {
     transition-duration: motion.$fadeInDuration;
     transition-timing-function: motion.$accelerateEasing;
-    
+
     opacity: 0.9;
   }
 
   &[mdw-align="start"],
   :root[dir="rtl"] &[mdw-align="end"] {
-    right: auto;
-    left: 0;
+    inset-inline: 0 auto;
   }
 
   &[mdw-align="end"],
   :root[dir="rtl"] &[mdw-align="start"] {
-    right: 0;
-    left: auto;
+    inset-inline: auto 0;
   }
 
   &[mdw-align="start"],
@@ -91,8 +88,8 @@ $touch-min-hold-time: 500ms !default;
   &[mdw-position="end"],
   &[mdw-position="left"],
   &[mdw-position="right"] {
-    top: 50%;
-    left: 0;
+    inset-block-start: 50%;
+    inset-inline-start: 0;
   }
 
   &[mdw-position="start"],
@@ -110,7 +107,7 @@ $touch-min-hold-time: 500ms !default;
   }
 
   &[mdw-position="top"] {
-    top: 0;
+    inset-block-start: 0;
 
     transform: translateX(-50%) translateY(-100%) translateY(-$desktop-margin);
 
@@ -119,18 +116,18 @@ $touch-min-hold-time: 500ms !default;
       transform: translateY(-100%) translateY(-$desktop-margin);
     }
   }
-  
+
 }
 
 // Button position fix
 .mdw-tooltip__wrapper > .mdw-button[mdw-icon] ~ .mdw-tooltip {
   &:not([mdw-position]) {
     // Bottom
-    margin-top: dp(-8);
+    margin-block-start: -8px;
   }
 
   &[mdw-position="top"] {
-    margin-top: dp(8);
+    margin-block-start: 8px;
   }
 }
 
@@ -144,7 +141,7 @@ $touch-min-hold-time: 500ms !default;
 
 @include platform.ifHasTouch() {
   .mdw-tooltip {
-    padding: dp(10) dp(16);
+    padding: 10px 16px;
 
     transition-delay: $touch-min-hold-time;
 

package/components/type/_spec.scss

@@ -7,7 +7,6 @@
 // 4 dp/sp baselines
 $baselines: (4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 48, 56, 64) !default;
 
-
 h1.mdw-type,
 h2.mdw-type,
 h3.mdw-type,
@@ -21,6 +20,7 @@ p.mdw-type {
 p.mdw-type {
   -ms-hyphens: auto;
   -webkit-hyphens: auto;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   hyphens: auto;
 }
 
@@ -86,7 +86,6 @@ p.mdw-type,
 
 // MD-2014 Typography
 
-
 .mdw-type[mdw-style|="display"] {
   font-weight: type.$weightRegular;
   font-size: sp(34);
@@ -140,53 +139,57 @@ p.mdw-type,
 }
 
 .mdw-type[mdw-texttop-top]::before {
-  display: inline-block;
   content: '';
 
-  height: 1em;
+  display: inline-block;
+
+  block-size: 1em;
 }
 
 .mdw-type[mdw-baseline-top]::before {
-  display: inline-block;
   content: '';
+
+  display: inline-block;
 }
 
 .mdw-type[mdw-baseline-next],
 .mdw-type[mdw-baseline-bottom] {
   &::after {
-    display: inline-block;
     content: '';
 
-    min-height: dp(1); // Safari workaround
+    display: inline-block;
+
+    min-block-size: 1px; // Safari workaround
   }
 }
 
 .mdw-type[mdw-baseline-next] {
   & + .mdw-type::before {
-    display: inline-block;
     content: '';
+
+    display: inline-block;
   }
 }
 
 @each $bl in $baselines {
   .mdw-type[mdw-texttop-top="#{$bl}dp"] {
     &::before {
-      margin-top: dp($bl);
+      margin-block-start: dp($bl);
     }
   }
   .mdw-type[mdw-texttop-top="#{$bl}"] {
     &::before {
-      margin-top: sp($bl);
+      margin-block-start: sp($bl);
     }
   }
   .mdw-type[mdw-baseline-top="#{$bl}dp"] {
     &::before {
-      height: dp($bl);
+      block-size: dp($bl);
     }
   }
   .mdw-type[mdw-baseline-top="#{$bl}"] {
     &::before {
-      height: sp($bl);
+      block-size: sp($bl);
     }
   }
   .mdw-type[mdw-baseline-bottom="#{$bl}dp"] {
@@ -200,25 +203,25 @@ p.mdw-type,
     }
   }
   .mdw-type[mdw-baseline-next="#{$bl}dp"] {
-    margin-bottom: dp(-$bl);
+    margin-block-end: dp(-$bl);
 
     &::after {
       vertical-align: dp(-$bl);
     }
 
     & + .mdw-type::before {
-      height: dp($bl);
+      block-size: dp($bl);
     }
   }
   .mdw-type[mdw-baseline-next="#{$bl}"] {
-    margin-bottom: sp(-$bl);
+    margin-block-end: sp(-$bl);
 
     &::after {
       vertical-align: sp(-$bl);
     }
 
     & + .mdw-type::before {
-      height: sp($bl);
+      block-size: sp($bl);
     }
   }
 }

package/core/_breakpoint.scss

@@ -2,29 +2,29 @@
 
 @use "./_length.scss" as *;
 
-$portraitSmallHandset: dp(0) !default;
-$portraitMediumHandset: dp(360) !default;
-$portraitLargeHandset: dp(400) !default;
-$portraitSmallTablet: dp(600) !default;
-$portraitLargeTablet: dp(720) !default;
-$portraitDesktop: dp(960) !default;
-
-$landscapeSmallHandset: dp(480) !default;
-$landscapeMediumHandset: dp(600) !default;
-$landscapeLargeHandset: dp(720) !default;
-$landscapeSmallTablet: dp(960) !default;
-$landscapeLargeTablet: dp(1024) !default;
-$landscapeDesktop: dp(1440) !default;
-
-$windowXSmall: dp(0) !default;
-$windowSmall: dp(600) !default;
-$windowMedium: dp(1024) !default;
-$windowLarge: dp(1440) !default;
-$windowXLarge: dp(1920) !default;
-
-$columns4: dp(0) !default;
-$columns8: dp(600) !default;
-$columns12: dp(840) !default;
+$portraitSmallHandset: 0 !default;
+$portraitMediumHandset: 360px !default;
+$portraitLargeHandset: 400px !default;
+$portraitSmallTablet: 600px !default;
+$portraitLargeTablet: 720px !default;
+$portraitDesktop: 960px !default;
+
+$landscapeSmallHandset: 480px !default;
+$landscapeMediumHandset: 600px !default;
+$landscapeLargeHandset: 720px !default;
+$landscapeSmallTablet: 960px !default;
+$landscapeLargeTablet: 1024px !default;
+$landscapeDesktop: 1440px !default;
+
+$windowXSmall: 0 !default;
+$windowSmall: 600px !default;
+$windowMedium: 1024px !default;
+$windowLarge: 1440px !default;
+$windowXLarge: 1920px !default;
+
+$columns4: 0 !default;
+$columns8: 600px !default;
+$columns12: 840px !default;
 
 // Column-count based mixins
 
@@ -62,8 +62,8 @@ $columns12: dp(840) !default;
 
 @mixin has16DPMargin {
   @media
-    (orientation:portrait) and (max-width: dp(599)),
-    (orientation:landscape) and (max-height: dp(599)) {
+    (orientation:portrait) and (max-width: 599px),
+    (orientation:landscape) and (max-height: 599px) {
     @content;
   }
 }
@@ -145,13 +145,13 @@ $columns12: dp(840) !default;
 
 @mixin isMobileDevicePortrait {
   @media (max-device-width: #{$portraitSmallTablet - 1})
-    and (max-device-aspect-ratio: 1/1) {
+    and (max-device-aspect-ratio: 1 / 1) {
     @content;
   }
 }
 @mixin isMobileDeviceLandscape {
   @media (max-device-width: #{$landscapeSmallTablet - 1})
-    and (min-device-aspect-ratio: 1/1) {
+    and (min-device-aspect-ratio: 1 / 1) {
     @content;
   }
 }
@@ -159,9 +159,9 @@ $columns12: dp(840) !default;
 @mixin isMobileDevice {
   @media
     (max-device-width: #{$portraitSmallTablet - 1})
-    and (max-device-aspect-ratio: 1/1),
+    and (max-device-aspect-ratio: 1 / 1),
     (max-device-width: #{$landscapeSmallTablet - 1})
-    and (min-device-aspect-ratio: 1/1) {
+    and (min-device-aspect-ratio: 1 / 1) {
     @content;
   }
 }
@@ -170,10 +170,10 @@ $columns12: dp(840) !default;
   @media
     (min-width: $portraitSmallTablet)
     and (max-device-width: #{$portraitDesktop - 1})
-    and (max-device-aspect-ratio: 1/1),
+    and (max-device-aspect-ratio: 1 / 1),
     (min-width: $landscapeSmallTablet)
     and (max-device-width: #{$landscapeDesktop - 1})
-    and (min-device-aspect-ratio: 1/1) {
+    and (min-device-aspect-ratio: 1 / 1) {
     @content;
   }
 }
@@ -181,9 +181,9 @@ $columns12: dp(840) !default;
 @mixin maxTabletDevice {
   @media
     (max-device-width: #{$portraitDesktop - 1})
-    and (max-device-aspect-ratio: 1/1),
+    and (max-device-aspect-ratio: 1 / 1),
     (max-device-width: #{$landscapeDesktop - 1})
-    and (min-device-aspect-ratio: 1/1) {
+    and (min-device-aspect-ratio: 1 / 1) {
     @content;
   }
 }

package/core/_elevation.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use 'sass:string';
 
 // https://material.io/archive/guidelines/resources/shadows.html#shadows-sketch
 $shadowValues: (
@@ -29,6 +31,44 @@ $filterValues: (
   24: "drop-shadow(0 22.12px 12.0px rgba(0,0,0,0.26)) drop-shadow(0 0 16.00px rgba(0,0,0,0.08))",
 ) !default;
 
+// https://material.io/design/color/dark-theme.html#properties
+$dark-theme-filter: (
+  0:  "none",
+  1:  "brightness(1.05)",
+  2:  "brightness(1.07)",
+  3:  "brightness(1.08)",
+  4:  "brightness(1.09)",
+  6:  "brightness(1.11)",
+  8:  "brightness(1.12)",
+  9:  "brightness(1.13)",
+  12: "brightness(1.14)",
+  16: "brightness(1.15)",
+  24: "brightness(1.16)"
+) !default;
+
+// https://material.io/design/color/dark-theme.html#properties
+$dark-theme-opacity: (
+  0:  0,
+  1:  0.05,
+  2:  0.07,
+  3:  0.08,
+  4:  0.09,
+  6:  0.11,
+  8:  0.12,
+  9:  0.13,
+  12: 0.14,
+  16: 0.15,
+  24: 0.16,
+) !default;
+
+@mixin boxShadowMixin($dp) {
+  box-shadow: #{string.unquote(map.get($shadowValues, $dp))};
+
+  &::before {
+    --mdw-overlay__base-opacity: var(--mdw-overlay__base-opacity-elevation_#{$dp});
+  }
+}
+
 @function boxShadow($dp) {
   @return unquote(map-get($shadowValues, $dp));
 }

package/core/_length.scss

@@ -3,7 +3,6 @@
 @function dp($multiplier) {
   @return $multiplier * 1px;
 }
-
 @function sp($multiplier) {
   @return math.div($multiplier,16.0) * 1rem;
 }

package/core/_platform.scss

@@ -10,25 +10,3 @@
     @content;
   }
 }
-
-// Browser specific mixins
-@mixin ifIE {
-  @media all\0 {
-    @content;
-  }
-}
-
-@mixin ifEdge {
-  @supports (-ms-ime-align:auto) {
-    @content;
-  }
-}
-
-@mixin ifMS {
-  @include ifIE {
-    @content;
-  }
-  @include ifEdge {
-    @content;
-  }
-}

package/core/_type.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use './_length.scss' as *;
 
 $weightThin: 100 !default;
@@ -90,9 +91,9 @@ $types: (
 ) !default;
 
 @mixin addRules($type) {
-  $rules: map-get($types, $type);
-  @each $key in map-keys($rules) {
-    #{$key}: map-get($rules, $key);
+  $rules: map.get($types, $type);
+  @each $key in map.keys($rules) {
+    #{$key}: map.get($rules, $key);
   }
 }
 
@@ -102,7 +103,7 @@ $types: (
 
     display: inline-block;
 
-    height: dp($dp);
+    block-size: dp($dp);
   }
 }
 
@@ -121,7 +122,7 @@ $types: (
 
     display: inline-block;
 
-    height: 1em;
-    margin-top: dp($dp);
+    block-size: 1em;
+    margin-block-start: dp($dp);
   }
 }

package/core/aria/button.js

@@ -8,8 +8,7 @@ function onKeyDown(event) {
   if (event.key !== 'Enter' && event.key !== 'Spacebar' && event.key !== ' ') {
     return;
   }
-  /** @type {HTMLElement} */
-  const buttonElement = (event.currentTarget);
+  const buttonElement = /** @type {HTMLElement} */ (event.currentTarget);
   if (!buttonElement) {
     return;
   }
@@ -29,13 +28,13 @@ function onKeyDown(event) {
  */
 export function attach(element) {
   element.setAttribute('role', 'button');
-  if (element instanceof HTMLButtonElement === false
+  if (!(element instanceof HTMLButtonElement)
       && !element.hasAttribute('tabindex')) {
     element.setAttribute('tabindex', '0');
   }
   element.setAttribute('mdw-aria-button-js', '');
-  if (element instanceof HTMLButtonElement === false
-    && element instanceof HTMLInputElement === false) {
+  if (!(element instanceof HTMLButtonElement)
+    && !(element instanceof HTMLInputElement)) {
     element.addEventListener('keydown', onKeyDown);
   }
 }

package/core/aria/keyboard.js

@@ -18,8 +18,7 @@ export const ENTER_KEY = 'mdw:keyboard-enterkey';
  * @return {void}
  */
 function onKeyDownHandler(event) {
-  /** @type {Element} */
-  const element = (event.currentTarget);
+  const element = /** @type {Element} */ (event.currentTarget);
   const detail = {
     ctrlKey: event.ctrlKey,
     shiftKey: event.shiftKey,

package/core/aria/rovingtabindex.js

@@ -2,8 +2,6 @@
 
 import {
   dispatchDomEvent,
-  iterateArrayLike,
-  iterateSomeOfArrayLike,
 } from '../dom.js';
 
 export const TABINDEX_ZEROED = 'mdw:rovingtabindex-tabindexzeroed';
@@ -13,8 +11,7 @@ export const TABINDEX_ZEROED = 'mdw:rovingtabindex-tabindexzeroed';
  * @return {void}
  */
 function onChildFocus(event) {
-  /** @type {Element} */
-  const child = (event.currentTarget);
+  const child = /** @type {Element} */ (event.currentTarget);
   if (child.getAttribute('tabindex') === '0') {
     return;
   }
@@ -23,19 +20,19 @@ function onChildFocus(event) {
 }
 
 /**
- * @param {ArrayLike<Element>} items
+ * @param {Iterable<Element>} items
  * @param {Element[]} [excludeItems]
  * @return {void}
  */
 export function removeTabIndex(items, excludeItems = []) {
-  iterateArrayLike(items, (item) => {
-    if (excludeItems.indexOf(item) !== -1) {
-      return;
+  for (const item of items) {
+    if (excludeItems.includes(item)) {
+      continue;
     }
     if (item.hasAttribute('tabindex')) {
       item.setAttribute('tabindex', '-1');
     }
-  });
+  }
 }
 
 /**
@@ -45,14 +42,14 @@ export function removeTabIndex(items, excludeItems = []) {
 function attemptFocus(element) {
   try {
     element.focus();
-  } catch (e) {
+  } catch {
     // Ignore error.
   }
   return document.activeElement === element;
 }
 
 /**
- * @param {ArrayLike<HTMLElement>} list
+ * @param {Iterable<HTMLElement>} list
  * @param {Element} [current]
  * @param {boolean} [loop=true]
  * @param {boolean} [reverse]
@@ -61,7 +58,7 @@ function attemptFocus(element) {
 export function selectNext(list, current = null, loop = true, reverse = false) {
   let foundCurrent = false;
 
-  const iterateResult = iterateSomeOfArrayLike(list, (item, index, array) => {
+  const iterateResult = [...list].some((item, index, array) => {
     const candidate = reverse ? (array[array.length - 1 - index]) : item;
     if (!foundCurrent) {
       if (current) {
@@ -93,7 +90,7 @@ export function selectNext(list, current = null, loop = true, reverse = false) {
     }
     return;
   }
-  iterateSomeOfArrayLike(list, (item, index, array) => {
+  [...list].some((item, index, array) => {
     const candidate = reverse ? (array[array.length - 1 - index]) : item;
     if (!candidate.hasAttribute('tabindex')) {
       return false;
@@ -112,7 +109,7 @@ export function selectNext(list, current = null, loop = true, reverse = false) {
 
 /**
  * Alias for selectNext(list, current, true);
- * @param {ArrayLike<HTMLElement>} list
+ * @param {Iterable<HTMLElement>} list
  * @param {Element} [current]
  * @param {boolean} [loop=true]
  * @return {void}
@@ -141,7 +138,7 @@ export function detach(element) {
 }
 
 /**
- * @param {ArrayLike<Element>} items
+ * @param {Iterable<Element>} items
  * @param {boolean} [focusableWhenDisabled=true]
  * @return {void}
  */
@@ -152,7 +149,7 @@ export function setupTabIndexes(items, focusableWhenDisabled = true) {
   let currentTabIndexChild = null;
   /** @type {Element} */
   let firstFocusableChild = null;
-  iterateArrayLike(items, (child) => {
+  for (const child of items) {
     if (!currentlyFocusedChild && document.activeElement === child) {
       currentlyFocusedChild = child;
     } else if (!currentTabIndexChild && child.getAttribute('tabindex') === '0') {
@@ -165,7 +162,7 @@ export function setupTabIndexes(items, focusableWhenDisabled = true) {
       child.setAttribute('tabindex', '-1');
     }
     attach(child);
-  });
+  }
   if (currentlyFocusedChild) {
     currentlyFocusedChild.setAttribute('tabindex', '0');
   } else if (currentTabIndexChild) {

package/core/aria/tab.js

@@ -26,8 +26,7 @@ function onKeyDown(event) {
   if (event.key !== 'Enter' && event.key !== 'Spacebar' && event.key !== ' ') {
     return;
   }
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
   if (!element) {
     return;
   }