@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/core/_motion.scss

@@ -0,0 +1,31 @@
+// Motion Durations
+// https://material.io/guidelines/motion/duration-easing.html#duration-easing-dynamic-durations
+
+$simpleDuration: 100ms !default;
+$fadeInDuration: 150ms !default;
+$fadeOutDuration: 75ms !default;
+
+$shapeChangeDuration: 200ms !default;
+$iconDuration: 500ms !default;
+
+$expandDuration: 250ms !default;
+$collapseDuration: 200ms !default;
+
+$expandDurationFull: 300ms !default;
+$collapseDurationFull: 250ms !default;
+
+// Motion Easing Curves
+// https://material.io/guidelines/motion/duration-easing.html#duration-easing-natural-easing-curves
+
+// FastOutSlowInInterpolator
+$standardEasing: cubic-bezier(0.4, 0.0, 0.2, 1) !default;
+$standardPeakVelocity: 0.30 !default;
+
+// LinearOutSlowInInterpolator
+$decelerateEasing: cubic-bezier(0.0, 0.0, 0.2, 1) !default;
+
+// FastOutLinearInInterpolator
+$accelerateEasing: cubic-bezier(0.4, 0.0, 1, 1) !default;
+
+// FastOutLinearInInterpolator
+$sharpEasing: cubic-bezier(0.4, 0.0, 0.6, 1) !default;

package/core/_platform.scss

@@ -0,0 +1,12 @@
+// Touch support based mixins
+@mixin ifHasTouch {
+  @media (any-pointer: coarse) {
+    @content;
+  }
+}
+
+@mixin ifNoTouch {
+  @media not all and (any-pointer: coarse) {
+    @content;
+  }
+}

package/core/_type.scss

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

package/core/aria/attributes.js

@@ -0,0 +1,141 @@
+import { dispatchDomEvent } from '../dom.js';
+
+/**
+ * @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
+ */
+function setAttribute(name, element, value, dispatchEventName, explicit = true, emptyValue = 'false') {
+  const attr = element.getAttribute(name);
+  let stringValue;
+  if (typeof value === 'string') {
+    stringValue = value;
+  } else {
+    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 (!explicit) {
+      element.removeAttribute(name);
+    } else {
+      element.setAttribute(name, stringValue);
+    }
+  } else {
+    // Non default value;
+    element.setAttribute(name, stringValue);
+  }
+  if (!dispatchEventName) {
+    return true;
+  }
+  // Alert change
+  if (!dispatchDomEvent(element, dispatchEventName, { value: stringValue })) {
+    // Revert
+    if (attr == null) {
+      element.removeAttribute(name);
+    } else {
+      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

@@ -0,0 +1,49 @@
+// 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;
+  }
+  const buttonElement = /** @type {HTMLElement} */ (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}
+ */
+export function attach(element) {
+  element.setAttribute('role', 'button');
+  if (!(element instanceof HTMLButtonElement)
+      && !element.hasAttribute('tabindex')) {
+    element.setAttribute('tabindex', '0');
+  }
+  element.setAttribute('mdw-aria-button-js', '');
+  if (!(element instanceof HTMLButtonElement)
+    && !(element instanceof HTMLInputElement)) {
+    element.addEventListener('keydown', onKeyDown);
+  }
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detach(element) {
+  element.removeEventListener('keydown', onKeyDown);
+  element.removeAttribute('mdw-aria-button-js');
+}

package/core/aria/keyboard.js

@@ -0,0 +1,92 @@
+// 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) {
+  const element = /** @type {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);
+}

package/core/aria/rovingtabindex.js

@@ -0,0 +1,175 @@
+// https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
+
+import {
+  dispatchDomEvent,
+} from '../dom.js';
+
+export const TABINDEX_ZEROED = 'mdw:rovingtabindex-tabindexzeroed';
+
+/**
+ * @param {FocusEvent} event
+ * @return {void}
+ */
+function onChildFocus(event) {
+  const child = /** @type {Element} */ (event.currentTarget);
+  if (child.getAttribute('tabindex') === '0') {
+    return;
+  }
+  child.setAttribute('tabindex', '0');
+  dispatchDomEvent(child, TABINDEX_ZEROED);
+}
+
+/**
+ * @param {Iterable<Element>} items
+ * @param {Element[]} [excludeItems]
+ * @return {void}
+ */
+export function removeTabIndex(items, excludeItems = []) {
+  for (const item of items) {
+    if (excludeItems.includes(item)) {
+      continue;
+    }
+    if (item.hasAttribute('tabindex')) {
+      item.setAttribute('tabindex', '-1');
+    }
+  }
+}
+
+/**
+ * @param {HTMLElement} element
+ * @return {boolean}
+ */
+function attemptFocus(element) {
+  try {
+    element.focus();
+  } catch {
+    // Ignore error.
+  }
+  return document.activeElement === element;
+}
+
+/**
+ * @param {Iterable<HTMLElement>} list
+ * @param {Element} [current]
+ * @param {boolean} [loop=true]
+ * @param {boolean} [reverse]
+ * @return {void}
+ */
+export function selectNext(list, current = null, loop = true, reverse = false) {
+  let foundCurrent = false;
+
+  const iterateResult = [...list].some((item, index, array) => {
+    const candidate = reverse ? (array[array.length - 1 - index]) : item;
+    if (!foundCurrent) {
+      if (current) {
+        if (candidate === current) {
+          foundCurrent = true;
+        }
+      } else if (candidate.getAttribute('tabindex') === '0') {
+        foundCurrent = true;
+      }
+      return false;
+    }
+    if (!candidate.hasAttribute('tabindex')) {
+      return false;
+    }
+    if (candidate.getAttribute('aria-hidden') === 'true') {
+      return false;
+    }
+    if (candidate.getAttribute('mdw-skip-tab') === 'true') {
+      return false;
+    }
+    return attemptFocus(candidate);
+  });
+  if (iterateResult) {
+    return;
+  }
+  if (!loop) {
+    if (document.activeElement !== current && current instanceof HTMLElement) {
+      current.focus();
+    }
+    return;
+  }
+  [...list].some((item, index, array) => {
+    const candidate = reverse ? (array[array.length - 1 - index]) : item;
+    if (!candidate.hasAttribute('tabindex')) {
+      return false;
+    }
+    if (candidate.getAttribute('aria-hidden') === 'true') {
+      return false;
+    }
+    if (candidate.getAttribute('mdw-skip-tab') === 'true') {
+      return false;
+    }
+    // Abort if we've looped all the way back to original element
+    // Abort if candidate received focus
+    return (attemptFocus(candidate) || candidate === current);
+  });
+}
+
+/**
+ * Alias for selectNext(list, current, true);
+ * @param {Iterable<HTMLElement>} list
+ * @param {Element} [current]
+ * @param {boolean} [loop=true]
+ * @return {void}
+ */
+export function selectPrevious(list, current, loop = true) {
+  return selectNext(list, current, loop, true);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attach(element) {
+  if (!element.hasAttribute('tabindex')) {
+    element.setAttribute('tabindex', (document.activeElement === element) ? '0' : '-1');
+  }
+  element.addEventListener('focus', onChildFocus);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detach(element) {
+  element.removeEventListener('focus', onChildFocus);
+}
+
+/**
+ * @param {Iterable<Element>} items
+ * @param {boolean} [focusableWhenDisabled=true]
+ * @return {void}
+ */
+export function setupTabIndexes(items, focusableWhenDisabled = true) {
+  /** @type {Element} */
+  let currentlyFocusedChild = null;
+  /** @type {Element} */
+  let currentTabIndexChild = null;
+  /** @type {Element} */
+  let firstFocusableChild = null;
+  for (const child of items) {
+    if (!currentlyFocusedChild && document.activeElement === child) {
+      currentlyFocusedChild = child;
+    } else if (!currentTabIndexChild && child.getAttribute('tabindex') === '0') {
+      currentTabIndexChild = child;
+    } else {
+      if (!firstFocusableChild && child.getAttribute('aria-hidden') !== 'true'
+        && (focusableWhenDisabled || child.getAttribute('aria-disabled') !== 'true')) {
+        firstFocusableChild = child;
+      }
+      child.setAttribute('tabindex', '-1');
+    }
+    attach(child);
+  }
+  if (currentlyFocusedChild) {
+    currentlyFocusedChild.setAttribute('tabindex', '0');
+  } else if (currentTabIndexChild) {
+    if (currentlyFocusedChild) {
+      currentTabIndexChild.setAttribute('tabindex', '-1');
+    }
+  } else if (firstFocusableChild) {
+    firstFocusableChild.setAttribute('tabindex', '0');
+  }
+}

package/core/aria/tab.js

@@ -0,0 +1,59 @@
+// https://www.w3.org/TR/wai-aria-1.1/#tab
+
+import * as Attributes from './attributes.js';
+import * as Keyboard from './keyboard.js';
+
+/**
+ * @param {Element} element
+ * @param {string|boolean} value
+ * @param {string} [dispatchEventName]
+ * @return {boolean} successful
+ */
+export function setSelected(element, value, dispatchEventName) {
+  if (Attributes.setSelected(element, value, dispatchEventName)) {
+    Attributes.setCurrent(element, value);
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Remap Space and Enter as Click
+ * @param {KeyboardEvent} event
+ * @return {void}
+ */
+function onKeyDown(event) {
+  if (event.key !== 'Enter' && event.key !== 'Spacebar' && event.key !== ' ') {
+    return;
+  }
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
+  if (!element) {
+    return;
+  }
+  event.stopPropagation();
+  event.preventDefault();
+  const newEvent = document.createEvent('Event');
+  newEvent.initEvent('click', true, true);
+  element.dispatchEvent(newEvent);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attach(element) {
+  element.setAttribute('role', 'tab');
+  element.setAttribute('mdw-aria-tab-js', '');
+  element.addEventListener('keydown', onKeyDown);
+  Keyboard.attach(element);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detach(element) {
+  Keyboard.detach(element);
+  element.removeEventListener('keydown', onKeyDown);
+  element.removeAttribute('mdw-aria-tab-js');
+}