@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/core/_elevation.scss

@@ -1,14 +1,6 @@
-@function mdwElevation($dp, $filter:false) {
-  @if ($filter == true) {
-    @return unquote(map-get($mdw-elevation__filter-values, $dp));
-  } @else {
-    @return unquote(map-get($mdw-elevation__box-shadow-values, $dp));
-  }
-}
-
 
 // https://material.io/archive/guidelines/resources/shadows.html#shadows-sketch
-$mdw-elevation__box-shadow-values: (
+$shadowValues: (
   0:  "none",
   1:  "0 00px 02px 0px rgba(0,0,0,0.14), 0 02px 02px 0px rgba(0,0,0,0.12), 0 01px 03px 0 rgba(0,0,0,0.20)",
   2:  "0 00px 04px 0px rgba(0,0,0,0.14), 0 03px 04px 0px rgba(0,0,0,0.12), 0 01px 05px 0 rgba(0,0,0,0.20)",
@@ -23,7 +15,7 @@ $mdw-elevation__box-shadow-values: (
 ) !default;
 
 // https://material.io/archive/guidelines/resources/shadows.html#shadows-illustrator
-$mdw-elevation__filter-values: (
+$filterValues: (
   0:  "none",
   1:  "drop-shadow(0 00.92px 00.5px rgba(0,0,0,0.26)) drop-shadow(0 0 00.67px rgba(0,0,0,0.08))",
   2:  "drop-shadow(0 01.83px 01.0px rgba(0,0,0,0.26)) drop-shadow(0 0 01.33px rgba(0,0,0,0.08))",
@@ -36,3 +28,11 @@ $mdw-elevation__filter-values: (
   16: "drop-shadow(0 14.67px 08.0px rgba(0,0,0,0.26)) drop-shadow(0 0 10.67px rgba(0,0,0,0.08))",
   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;
+
+@function boxShadow($dp) {
+  @return unquote(map-get($shadowValues, $dp));
+}
+
+@function filter($dp) {
+  @return unquote(map-get($filterValues, $dp));
+}

package/core/_length.scss

@@ -0,0 +1,9 @@
+@use "sass:math";
+
+@function dp($multiplier) {
+  @return $multiplier * 1px;
+}
+
+@function sp($multiplier) {
+  @return math.div($multiplier,16.0) * 1rem;
+}

package/core/_motion.scss

@@ -1,31 +1,31 @@
 // Motion Durations
 // https://material.io/guidelines/motion/duration-easing.html#duration-easing-dynamic-durations
 
-$mdw-motion__simple-duration: 100ms !default;
-$mdw-motion__fade-in-duration: 150ms !default;
-$mdw-motion__fade-out-duration: 75ms !default;
+$simpleDuration: 100ms !default;
+$fadeInDuration: 150ms !default;
+$fadeOutDuration: 75ms !default;
 
-$mdw-motion__shape-change-duration: 200ms !default;
-$mdw-motion__icon-duration: 500ms !default;
+$shapeChangeDuration: 200ms !default;
+$iconDuration: 500ms !default;
 
-$mdw-motion__expand-duration: 250ms !default;
-$mdw-motion__collapse-duration: 200ms !default;
+$expandDuration: 250ms !default;
+$collapseDuration: 200ms !default;
 
-$mdw-motion__expand-duration__full: 300ms !default;
-$mdw-motion__collapse-duration__full: 250ms !default;
+$expandDurationFull: 300ms !default;
+$collapseDurationFull: 250ms !default;
 
 // Motion Easing Curves
 // https://material.io/guidelines/motion/duration-easing.html#duration-easing-natural-easing-curves
 
 // FastOutSlowInInterpolator
-$mdw-motion__standard-easing: cubic-bezier(0.4, 0.0, 0.2, 1) !default;
-$mdw-motion__standard-peak-velocity: 0.30 !default;
+$standardEasing: cubic-bezier(0.4, 0.0, 0.2, 1) !default;
+$standardPeakVelocity: 0.30 !default;
 
 // LinearOutSlowInInterpolator
-$mdw-motion__decelerate-easing: cubic-bezier(0.0, 0.0, 0.2, 1) !default;
+$decelerateEasing: cubic-bezier(0.0, 0.0, 0.2, 1) !default;
 
 // FastOutLinearInInterpolator
-$mdw-motion__accelerate-easing: cubic-bezier(0.4, 0.0, 1, 1) !default;
+$accelerateEasing: cubic-bezier(0.4, 0.0, 1, 1) !default;
 
 // FastOutLinearInInterpolator
-$mdw-motion__sharp-easing: cubic-bezier(0.4, 0.0, 0.6, 1) !default;
+$sharpEasing: cubic-bezier(0.4, 0.0, 0.6, 1) !default;

package/core/_platform.scss

@@ -1,40 +1,34 @@
-/* stylelint-disable-next-line scss/at-function-pattern */
-@function dp($multiplier) {
-  @return $multiplier * 1px;
-}
-
-@mixin mdw-platform__has-touch-support {
+// Touch support based mixins
+@mixin ifHasTouch {
   @media (any-pointer: coarse) {
     @content;
   }
 }
 
-@mixin mdw-platform__no-touch-support {
+@mixin ifNoTouch {
   @media not all and (any-pointer: coarse) {
     @content;
   }
 }
 
 // Browser specific mixins
-@mixin mdw-platform__ie {
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+@mixin ifIE {
+  @media all\0 {
     @content;
   }
 }
 
-// Touch support based mixins
-
-@mixin mdw-platform__edge {
+@mixin ifEdge {
   @supports (-ms-ime-align:auto) {
     @content;
   }
 }
 
-@mixin mdw-platform__ms {
-  @include mdw-platform__ie {
+@mixin ifMS {
+  @include ifIE {
     @content;
   }
-  @include mdw-platform__edge {
+  @include ifEdge {
     @content;
   }
 }

package/core/_type.scss

@@ -1,125 +1,126 @@
-@import './platform.scss';
+@use './_length.scss' as *;
 
-$font-weight-thin: 100;
-$font-weight-light: 300;
-$font-weight-regular: 400; // normal
-$font-weight-medium: 500;
-$font-weight-bold: 700;
-$font-weight-black: 900;
+$weightThin: 100 !default;
+$weightLight: 300 !default;
+$weightRegular: 400 !default;
+$weightMedium: 500 !default;
+$weightBold: 700 !default;
+$weightBlack: 900 !default;
 
-@function sp($multiplier) {
-  @return ($multiplier/16.0) * 1rem;
-}
-
-$mdw-types: (
+$types: (
   h1: (
-    font-weight: $font-weight-light,
+    font-weight: $weightLight,
     letter-spacing: sp(-1.5),
     font-size: sp(96),
     line-height: sp(112),
   ),
   h2: (
-    font-weight: $font-weight-light,
+    font-weight: $weightLight,
     letter-spacing: sp(-0.5),
     font-size: sp(60),
     line-height: sp(72),
   ),
   h3: (
-    font-weight: $font-weight-regular,
+    font-weight: $weightRegular,
     letter-spacing: 0,
     font-size: sp(48),
     line-height: sp(56),
   ),
   h4: (
-    font-weight: $font-weight-regular,
+    font-weight: $weightRegular,
     letter-spacing: sp(0.25),
     font-size: sp(34),
     line-height: sp(40),
   ),
   h5: (
-    font-weight: $font-weight-regular,
+    font-weight: $weightRegular,
     letter-spacing: 0,
     font-size: sp(24),
     line-height: sp(28),
   ),
   h6: (
-    font-weight: $font-weight-medium,
+    font-weight: $weightMedium,
     letter-spacing: sp(0.15),
     font-size: sp(20),
     line-height: sp(24),
   ),
   subtitle: (
-    font-weight: $font-weight-regular,
+    font-weight: $weightRegular,
     letter-spacing: sp(0.15),
     font-size: sp(16),
     line-height: sp(20),
   ),
   subtitle-2: (
-    font-weight: $font-weight-medium,
+    font-weight: $weightMedium,
     letter-spacing: sp(0.1),
     font-size: sp(14),
     line-height: sp(16),
   ),
   body: (
-    font-weight: $font-weight-regular,
+    font-weight: $weightRegular,
     letter-spacing: sp(0.5),
     font-size: sp(16),
     line-height: sp(24),
   ),
   body-2: (
-    font-weight: $font-weight-regular,
+    font-weight: $weightRegular,
     letter-spacing: sp(0.25),
     font-size: sp(14),
     line-height: sp(20),
   ),
   button: (
-    font-weight: $font-weight-medium,
+    font-weight: $weightMedium,
     text-transform: uppercase,
     letter-spacing: sp(1.25),
     font-size: sp(14),
     line-height: sp(16),
   ),
   caption: (
-    font-weight: $font-weight-regular,
+    font-weight: $weightRegular,
     letter-spacing: sp(0.4),
     font-size: sp(12),
     line-height: sp(16),
   ),
   overline: (
-    font-weight: $font-weight-regular,
+    font-weight: $weightRegular,
     letter-spacing: sp(1.5),
     font-size: sp(10),
     line-height: sp(12),
   ),
-);
+) !default;
 
-@mixin type-rules($type) {
-  $rules: map-get($mdw-types, $type);
+@mixin addRules($type) {
+  $rules: map-get($types, $type);
   @each $key in map-keys($rules) {
     #{$key}: map-get($rules, $key);
   }
 }
 
-@mixin baseline-top($dp) {
+@mixin baselineToTop($dp) {
   &::before {
     content: '';
+
     display: inline-block;
+
     height: dp($dp);
   }
 }
 
-@mixin baseline-bottom($dp) {
+@mixin baselineToBottom($dp) {
   &::after {
     content: '';
+
     display: inline-block;
     vertical-align: dp(-$dp);
   }
 }
 
-@mixin texttop-to-top($dp) {
+@mixin textTopToTop($dp) {
   &::before {
-    content: '';
+    content: "\200B";
+
     display: inline-block;
+
     height: 1em;
     margin-top: dp($dp);
   }

package/core/aria/attributes.js

@@ -1,41 +1,141 @@
-import { dispatchDomEvent } from '../dom';
-
-export const SELECTED_CHANGED_EVENT = 'mdw:aria-selectedchanged';
+import { dispatchDomEvent } from '../dom.js';
 
 /**
- * @param {Element} element
- * @param {'false'|'true'} value
- * @param {boolean} [dispatchEvent=true]
- * @return {boolean} changed
+ * @param {string} name Attribute Name
+ * @param {Element} element Element
+ * @param {string|boolean} value Boolean Attribute Value
+ * @param {string} [dispatchEventName] OnChangeEvent
+ * @param {boolean} [explicit=true]
+ * @param {string} [emptyValue=false] Default empty value
+ * @return {boolean} successful
  */
-export function setSelected(element, value, dispatchEvent = true) {
-  const originalAttr = element.getAttribute('aria-selected');
-  if (value === 'true') {
-    if (originalAttr === 'true') {
-      return false;
-    }
-    element.setAttribute('aria-selected', 'true');
+function setAttribute(name, element, value, dispatchEventName, explicit = true, emptyValue = 'false') {
+  const attr = element.getAttribute(name);
+  let stringValue;
+  if (typeof value === 'string') {
+    stringValue = value;
   } else {
-    if (originalAttr === 'false') {
-      return false;
+    stringValue = (value ? 'true' : 'false');
+  }
+  if (attr === stringValue) {
+    // Nothing to change
+    return true;
+  }
+  if (stringValue === emptyValue) {
+    // Set default empty value
+    if (attr == null) {
+      // No attribute set
+      if (explicit) {
+        // Explicitly set attribute
+        element.setAttribute(name, stringValue);
+      }
+      return true;
     }
-    if (!originalAttr || originalAttr !== 'false') {
-      element.setAttribute('aria-selected', 'false');
-      return false;
+    if (!explicit) {
+      element.removeAttribute(name);
+    } else {
+      element.setAttribute(name, stringValue);
     }
-    element.setAttribute('aria-selected', 'false');
+  } else {
+    // Non default value;
+    element.setAttribute(name, stringValue);
   }
-  if (!dispatchEvent) {
+  if (!dispatchEventName) {
     return true;
   }
-  if (!dispatchDomEvent(element, SELECTED_CHANGED_EVENT)) {
+  // Alert change
+  if (!dispatchDomEvent(element, dispatchEventName, { value: stringValue })) {
     // Revert
-    if (originalAttr == null) {
-      element.removeAttribute('aria-selected');
+    if (attr == null) {
+      element.removeAttribute(name);
     } else {
-      element.setAttribute('aria-selected', originalAttr);
+      element.setAttribute(name, attr);
     }
     return false;
   }
   return true;
 }
+
+/**
+ * @param {Element} element
+ * @param {string|boolean} value
+ * @param {string} [dispatchEventName]
+ * @return {boolean} successful
+ */
+export function setCurrent(element, value, dispatchEventName) {
+  // Some browsers incorrectly style [aria-current="false"]
+  // Attribute will be removed when false|"false"
+  return setAttribute('aria-current', element, value, dispatchEventName, false);
+}
+
+/**
+ * @param {Element} element
+ * @param {string|boolean} value
+ * @param {string} [dispatchEventName]
+ * @return {boolean} successful
+ */
+export function setSelected(element, value, dispatchEventName) {
+  return setAttribute('aria-selected', element, value, dispatchEventName);
+}
+
+/**
+ * @param {Element} element
+ * @return {boolean}
+ */
+export function isChecked(element) {
+  return element.getAttribute('aria-checked') === 'true';
+}
+
+/**
+ * @param {Element} element
+ * @param {string|boolean} value
+ * @param {string} [dispatchEventName]
+ * @return {boolean} successful
+ */
+export function setChecked(element, value, dispatchEventName) {
+  return setAttribute('aria-checked', element, value, dispatchEventName);
+}
+
+/**
+ * @param {Element} element
+ * @return {boolean}
+ */
+export function isDisabled(element) {
+  return element.getAttribute('aria-disabled') === 'true';
+}
+
+/**
+ * @param {Element} element
+ * @param {string|boolean} value
+ * @param {string} [dispatchEventName]
+ * @return {boolean} successful
+ */
+export function setDisabled(element, value, dispatchEventName) {
+  return setAttribute('aria-disabled', element, value, dispatchEventName);
+}
+
+/**
+ * @param {Element} element
+ * @return {boolean}
+ */
+export function isExpanded(element) {
+  return element.getAttribute('aria-expanded') === 'true';
+}
+
+/**
+ * @param {Element} element
+ * @param {string|boolean} value
+ * @param {string} [dispatchEventName]
+ * @return {boolean} successful
+ */
+export function setExpanded(element, value, dispatchEventName) {
+  return setAttribute('aria-expanded', element, value, dispatchEventName);
+}
+
+/**
+ * @param {Element} element
+ * @return {boolean}
+ */
+export function isReadonly(element) {
+  return element.getAttribute('aria-readonly') === 'true';
+}

package/core/aria/button.js

@@ -1,5 +1,28 @@
 // https://www.w3.org/TR/wai-aria-practices/#button
 
+/**
+ * @param {KeyboardEvent} event
+ * @return {void}
+ */
+function onKeyDown(event) {
+  if (event.key !== 'Enter' && event.key !== 'Spacebar' && event.key !== ' ') {
+    return;
+  }
+  /** @type {HTMLElement} */
+  const buttonElement = (event.currentTarget);
+  if (!buttonElement) {
+    return;
+  }
+  if (buttonElement.getAttribute('aria-disabled') === 'true') {
+    return;
+  }
+  event.stopPropagation();
+  event.preventDefault();
+  const newEvent = document.createEvent('Event');
+  newEvent.initEvent('click', true, true);
+  buttonElement.dispatchEvent(newEvent);
+}
+
 /**
  * @param {Element} element
  * @return {void}
@@ -25,26 +48,3 @@ export function detach(element) {
   element.removeEventListener('keydown', onKeyDown);
   element.removeAttribute('mdw-aria-button-js');
 }
-
-/**
- * @param {KeyboardEvent} event
- * @return {void}
- */
-function onKeyDown(event) {
-  if (event.key !== 'Enter' && event.key !== 'Spacebar' && event.key !== ' ') {
-    return;
-  }
-  /** @type {HTMLElement} */
-  const buttonElement = (event.currentTarget);
-  if (!buttonElement) {
-    return;
-  }
-  if (buttonElement.getAttribute('aria-disabled') === 'true') {
-    return;
-  }
-  event.stopPropagation();
-  event.preventDefault();
-  const newEvent = document.createEvent('Event');
-  newEvent.initEvent('click', true, true);
-  buttonElement.dispatchEvent(newEvent);
-}

package/core/aria/keyboard.js

@@ -0,0 +1,93 @@
+// Keyboard Navigation
+
+import { dispatchDomEvent, isRtl } from '../dom.js';
+
+export const FORWARD_ARROW_KEY = 'mdw:keyboard-forwardarrowkey';
+export const BACK_ARROW_KEY = 'mdw:keyboard-backarrowkey';
+export const UP_ARROW_KEY = 'mdw:keyboard-uparrowkey';
+export const DOWN_ARROW_KEY = 'mdw:keyboard-downarrowkey';
+export const HOME_KEY = 'mdw:keyboard-homekey';
+export const END_KEY = 'mdw:keyboard-endkey';
+export const PAGEUP_KEY = 'mdw:keyboard-pageupkey';
+export const PAGEDOWN_KEY = 'mdw:keyboard-pagedownkey';
+export const SPACEBAR_KEY = 'mdw:keyboard-spacebarkey';
+export const ENTER_KEY = 'mdw:keyboard-enterkey';
+
+/**
+ * @param {KeyboardEvent} event
+ * @return {void}
+ */
+function onKeyDownHandler(event) {
+  /** @type {Element} */
+  const element = (event.currentTarget);
+  const detail = {
+    ctrlKey: event.ctrlKey,
+    shiftKey: event.shiftKey,
+    altKey: event.altKey,
+    metaKey: event.metaKey,
+    repeat: event.repeat,
+  };
+
+  let type;
+  switch (event.key) {
+    case 'Enter':
+      type = ENTER_KEY;
+      break;
+    case ' ':
+    case 'Spacebar':
+      type = SPACEBAR_KEY;
+      break;
+    case 'ArrowDown':
+    case 'Down':
+      type = DOWN_ARROW_KEY;
+      break;
+    case 'ArrowUp':
+    case 'Up':
+      type = UP_ARROW_KEY;
+      break;
+    case 'ArrowLeft':
+    case 'Left':
+      type = isRtl() ? FORWARD_ARROW_KEY : BACK_ARROW_KEY;
+      break;
+    case 'ArrowRight':
+    case 'Right':
+      type = isRtl() ? BACK_ARROW_KEY : FORWARD_ARROW_KEY;
+      break;
+    case 'Home':
+      type = HOME_KEY;
+      break;
+    case 'End':
+      type = END_KEY;
+      break;
+    case 'PageUp':
+      type = PAGEUP_KEY;
+      break;
+    case 'PageDown':
+      type = PAGEDOWN_KEY;
+      break;
+    default:
+      return;
+  }
+
+  if (!dispatchDomEvent(element, type, detail)) {
+    // preventDefault called
+    event.stopPropagation();
+    event.preventDefault();
+  }
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attach(element) {
+  element.addEventListener('keydown', onKeyDownHandler);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detach(element) {
+  element.removeEventListener('keydown', onKeyDownHandler);
+}