@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/core/_motion.scss

@@ -1,31 +0,0 @@
-// 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

@@ -1,12 +0,0 @@
-// 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

@@ -1,128 +0,0 @@
-@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

@@ -1,141 +0,0 @@
-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

@@ -1,49 +0,0 @@
-// 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

@@ -1,92 +0,0 @@
-// 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

@@ -1,175 +0,0 @@
-// 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

@@ -1,59 +0,0 @@
-// 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');
-}