@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/core/document/index.js

@@ -1,39 +0,0 @@
-/** @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/overlay/_spec.scss

@@ -1,28 +0,0 @@
-.mdw-overlay {
-  position: relative;
-
-  outline: none;
-  -webkit-tap-highlight-color: transparent;
-  // Remove Firefox inner
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::before {
-    content: '';
-
-    position: absolute;
-    inset: 0;
-
-    pointer-events: none;
-
-    transition-delay: 1ms;
-    transition-duration: 0ms;
-    transition-property: opacity, color, background-color;
-
-    /* opacity handled by theme engine */
-
-    background-color: currentColor;
-    border-radius: inherit;
-  }
-}

package/core/overlay/_theme.scss

@@ -1,147 +0,0 @@
-// https://material.io/design/interaction/states.html
-
-.mdw-theme {
-  --mdw-overlay__overlay-rgb: var(--mdw-ink-default);
-  --mdw-overlay__high-opacity: var(--mdw-high-opacity);
-  --mdw-overlay__medium-opacity: var(--mdw-medium-opacity);
-  --mdw-overlay__inactive-opacity: var(--mdw-inactive-opacity);
-  --mdw-overlay__divider-opacity: var(--mdw-divider-opacity);
-  --mdw-overlay__base-opacity: var(--mdw-overlay__base-opacity-value);
-  --mdw-overlay__disabled-opacity: var(--mdw-overlay__disabled-opacity-value);
-  --mdw-overlay__hover-opacity: var(--mdw-overlay__hover-opacity-value);
-  --mdw-overlay__focus-opacity: var(--mdw-overlay__focus-opacity-value);
-  --mdw-overlay__selected-opacity: var(--mdw-overlay__selected-opacity-value);
-  --mdw-overlay__activated-opacity: var(--mdw-overlay__activated-opacity-value);
-
-}
-
-.mdw-theme[mdw-light] {
-  --mdw-overlay__base-opacity-value: 0;
-  --mdw-overlay__base-opacity-elevation_1: 0;
-  --mdw-overlay__base-opacity-elevation_2: 0;
-  --mdw-overlay__base-opacity-elevation_3: 0;
-  --mdw-overlay__base-opacity-elevation_4: 0;
-  --mdw-overlay__base-opacity-elevation_6: 0;
-  --mdw-overlay__base-opacity-elevation_8: 0;
-  --mdw-overlay__base-opacity-elevation_9: 0;
-  --mdw-overlay__base-opacity-elevation_12: 0;
-  --mdw-overlay__base-opacity-elevation_16: 0;
-  --mdw-overlay__base-opacity-elevation_24: 0;
-  --mdw-overlay__disabled-opacity-value: 0.38;
-  --mdw-overlay__hover-opacity-value: 0.04;
-  --mdw-overlay__focus-opacity-value: 0.12;
-  --mdw-overlay__selected-opacity-value: 0.08;
-  --mdw-overlay__activated-opacity-value: 0.12;
-}
-
-.mdw-theme[mdw-dark] {
-  --mdw-overlay__base-opacity-value: 0;
-  --mdw-overlay__base-opacity-elevation_1: 0.05;
-  --mdw-overlay__base-opacity-elevation_2: 0.07;
-  --mdw-overlay__base-opacity-elevation_3: 0.08;
-  --mdw-overlay__base-opacity-elevation_4: 0.09;
-  --mdw-overlay__base-opacity-elevation_6: 0.11;
-  --mdw-overlay__base-opacity-elevation_8: 0.12;
-  --mdw-overlay__base-opacity-elevation_9: 0.13;
-  --mdw-overlay__base-opacity-elevation_12: 0.14;
-  --mdw-overlay__base-opacity-elevation_16: 0.15;
-  --mdw-overlay__base-opacity-elevation_24: 0.16;
-  --mdw-overlay__disabled-opacity-value: 0.50;
-  --mdw-overlay__hover-opacity-value: 0.08;
-  --mdw-overlay__focus-opacity-value: 0.24;
-  --mdw-overlay__selected-opacity-value: 0.16;
-  --mdw-overlay__activated-opacity-value: 0.24;
-}
-
-.mdw-overlay {
-  // Disable Hover State
-  &[aria-disabled="true"],
-  &[mdw-overlay-touch="true"],
-  &[mdw-overlay-off~="hover"],
-  &:not(:hover) {
-    --mdw-overlay__hover-opacity: 0;
-  }
-
-  // Disable Focus State
-  &[aria-disabled="true"],
-  &[mdw-overlay-touch="true"],
-  &[mdw-overlay-off~="focus"],
-  &:not(:focus) {
-    --mdw-overlay__focus-opacity: 0;
-  }
-
-  // Disable Selected State
-  // Activated overrides Selected
-  &[mdw-overlay-off~="selected"],
-  &:not([aria-selected="true"]),
-  &[aria-current],
-  &[aria-pressed="true"] {
-    --mdw-overlay__selected-opacity: 0;
-  }
-
-  &[mdw-overlay-off~="activated"],
-  &:not([aria-current]):not([aria-pressed="true"]) {
-    --mdw-overlay__activated-opacity: 0;
-  }
-
-  &::before {
-    opacity: calc(var(--mdw-overlay__base-opacity) + var(--mdw-overlay__hover-opacity) + var(--mdw-overlay__focus-opacity) + var(--mdw-overlay__selected-opacity) + var(--mdw-overlay__activated-opacity));
-
-    color: RGB(var(--mdw-overlay__overlay-rgb));
-  }
-
-  &:hover,
-  &:focus,
-  &[aria-pressed="false"]:active,
-  &[aria-selected="true"],
-  &[aria-pressed="true"],
-  &[aria-current] {
-    &::before {
-      color: RGB(var(--mdw-ink));
-    }
-  }
-
-  &[aria-selected="false"],
-  &[aria-pressed="false"],
-  &[aria-disabled="true"],
-  &[aria-disabled="true"]:active {
-    &::before {
-      color: RGB(var(--mdw-overlay__overlay-rgb));
-    }
-  }
-
-  // Off color
-  &[aria-selected="false"],
-  &[aria-pressed="false"],
-  &[aria-selected="true"]:not([aria-current]) {
-    --mdw-overlay__text-opacity: var(--mdw-overlay__high-opacity);
-
-    color: RGBA(var(--mdw-overlay__overlay-rgb), var(--mdw-overlay__text-opacity));
-
-    &[mdw-overlay-default="medium"] {
-      --mdw-overlay__text-opacity: var(--mdw-overlay__medium-opacity);
-    }
-
-    &[mdw-overlay-default="inactive"] {
-      --mdw-overlay__text-opacity: var(--mdw-overlay__inactive-opacity);
-    }
-
-    &[mdw-overlay-default="divider"] {
-      --mdw-overlay__text-opacity: var(--mdw-overlay__divider-opacity);
-    }
-
-    &[mdw-border-ink] {
-      border-color: RGBA(var(--mdw-overlay__overlay-rgb), var(--mdw-overlay__divider-opacity));
-    }
-  }
-
-  &[aria-disabled="true"] {
-    &[mdw-overlay-disabled="ink"] {
-      color: RGBA(var(--mdw-overlay__overlay-rgb), var(--mdw-overlay__inactive-opacity));
-    }
-
-    &:not([mdw-overlay-disabled]) {
-      opacity: var(--mdw-overlay__disabled-opacity);
-    }
-  }
-}

package/core/overlay/index.js

@@ -1,95 +0,0 @@
-let lastInteractionWasTouch = false;
-
-if (window && window.matchMedia) {
-  lastInteractionWasTouch = window.matchMedia('(any-pointer: coarse)').matches;
-}
-
-/**
- * @param {PointerEvent|MouseEvent} event
- * @return {void}
- */
-export function onMouseDown(event) {
-  const element = /** @type {HTMLElement} */ (event.currentTarget);
-  if (element.hasAttribute('mdw-overlay-touch')) {
-    return;
-  }
-  element.setAttribute('mdw-overlay-touch', 'false');
-}
-
-/**
- * @param {TouchEvent} event
- * @return {void}
- */
-export function onTouchStart(event) {
-  const element = /** @type {HTMLElement} */ (event.currentTarget);
-  element.setAttribute('mdw-overlay-touch', 'true');
-}
-
-/**
- * @param {TouchEvent} event
- * @return {void}
- */
-export function onKeyDown(event) {
-  const element = /** @type {HTMLElement} */ (event.currentTarget);
-  element.setAttribute('mdw-overlay-touch', 'false');
-}
-
-/**
- * @param {FocusEvent} event
- * @return {void}
- */
-export function onBlur(event) {
-  const element = /** @type {HTMLElement} */ (event.currentTarget);
-  const value = element.getAttribute('mdw-overlay-touch');
-  if (value == null) {
-    return;
-  }
-  lastInteractionWasTouch = value === 'true';
-  element.removeAttribute('mdw-overlay-touch');
-}
-
-/**
- * @param {FocusEvent} event
- * @return {void}
- */
-export function onFocus(event) {
-  const element = /** @type {HTMLElement} */ (event.currentTarget);
-  // Element was focused without a mouse or touch event (keyboard or programmatic)
-  if (!element.hasAttribute('mdw-overlay-touch') && 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, { passive: true });
-  element.addEventListener('touchstart', onTouchStart, { passive: true });
-  element.addEventListener('keydown', onKeyDown, { passive: true });
-  element.addEventListener('blur', onBlur, { passive: true });
-  element.addEventListener('focus', onFocus, { passive: true });
-}
-
-/**
- * @param {Element|Document} [root=document]
- * @return {void}
- */
-export function attachAll(root = document) {
-  for (const el of root.getElementsByClassName('mdw-overlay')) attach(el);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function detach(element) {
-  element.removeAttribute('mdw-overlay-js');
-  element.removeAttribute('mdw-overlay-touch');
-  element.removeEventListener('mousedown', onMouseDown);
-  element.removeEventListener('touchstart', onTouchStart);
-  element.removeEventListener('keydown', onKeyDown);
-  element.removeEventListener('blur', onBlur);
-}

package/core/overlay/index.scss

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

package/core/ripple/_spec.scss

@@ -1,196 +0,0 @@
-// https://android.googlesource.com/platform/frameworks/base/+/dbcbca4/graphics/java/android/graphics/drawable/Ripple.java
-
-@use "sass:math";
-
-@use "../_breakpoint.scss" as breakpoint;
-@use "../_platform.scss" as platform;
-@use "../_motion.scss" as motion;
-
-$enterDelay: 80ms !default;
-
-$fadeOutDuration: math.div(1000ms, 3.0) !default;
-$touchDownAcceleration: 1024 !default;
-$touchUpAcceleration: 3400 !default;
-
-// Ripple starts at 100% opacity
-// Ripple fills linearly
-// Ripple fills on touch down with duration: 1000ms * √(radius / 1024)
-// 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 motion.$expandDuration temporarily
-
-// TODO: Use variable ripple scale durations
-// TODO: Use enter-delay with JS Ripple
-
-/**
- * --Issues rendering a circle inside an element--
- * See: https://codepen.io/shortfuse/pen/VxYxYj
- *
- * When using block display:
- * - Firefox incorrectly stretches ripple when inside flexbox
- * - Safari incorrectly inherit parent's padding
- *
- * Using using table display:
- * - Firefox renders correctly
- * - Safari renders correctly
- * - IE and Edge don't animate opacity correctly
- * - Ripples don't show if inside actual table
- *
- * When using JS (wrapped with block element):
- * - Firefox renders correctly
- * - Safari renders correctly
- * - IE and Edge renders correctly but still has forced 0.26 opacity
- *
- * Chrome works fine under all conditions
- *
- */
-
-.mdw-ripple {
-  position: relative;
-
-  -webkit-tap-highlight-color: transparent;
-}
-
-.mdw-ripple:not([mdw-ripple-js]) {
-  overflow: hidden;
-  // Do not override any declarations
-}
-
-.mdw-ripple__container {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-
-  box-sizing: border-box;
-
-  pointer-events: none;
-
-  z-index: 1;
-
-  border-radius: inherit;
-}
-
-.mdw-ripple__inner {
-  display: block;
-  position: absolute;
-
-  pointer-events: none;
-
-  animation-name: none;
-  animation-duration: motion.$expandDuration;
-  animation-timing-function: linear;
-  animation-direction: normal;
-  animation-fill-mode: forwards;
-  transition-delay: 0s;
-  transition-duration: motion.$simpleDuration;
-  transition-property: background-color, color;
-  transition-timing-function: motion.$standardEasing;
-
-  opacity: 0.16;
-  transform: scale(0);
-
-  background-color: currentColor;
-
-  border-radius: 50%;
-}
-
-.mdw-ripple__inner[mdw-fade-in] {
-  animation-name: ripple-fade-in;
-}
-
-.mdw-ripple__inner[mdw-fade-in-repeat] {
-  animation-name: ripple-fade-in-repeat;
-}
-
-.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: $fadeOutDuration;
-  animation-timing-function: motion.$decelerateEasing;
-}
-
-@keyframes ripple-fade-in {
-  from {
-    transform: scale(0);
-  }
-
-  to {
-    transform: scale(2);
-  }
-}
-
-@keyframes ripple-fade-in-repeat {
-  from {
-    transform: scale(0);
-  }
-
-  to {
-    transform: scale(2);
-  }
-}
-
-@keyframes ripple-fade-out {
-  from {
-    transform: scale(2);
-  }
-
-  to {
-    opacity: 0;
-    transform: scale(2);
-  }
-}
-
-.mdw-ripple::after {
-  content: '';
-
-  display: table; // See above
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-
-  block-size: 0;
-  inline-size: 0;
-  padding: 50%;
-
-  pointer-events: none;
-  // z-index: -1; // Safari has a negative z-index scrolling bug (hides elements)
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-
-  transition:
-    transform #{motion.$expandDuration + $fadeOutDuration} linear $enterDelay,
-    background-color $fadeOutDuration motion.$decelerateEasing #{$enterDelay + motion.$expandDuration};
-  will-change: transform, background-color;
-
-  opacity: 0.16;
-  transform: translateX(-50%) translateY(-50%) scale(2);
-
-  background-color: transparent;
-  border-radius: 50%;
-  color: inherit;
-}
-
-// On active, pop up initial state
-.mdw-ripple:active::after {
-  transition-delay: 0s;
-  transition-duration: 0s;
-
-  transform: translateX(-50%) translateY(-50%) scale(0);
-
-  background-color: currentColor;
-}
-
-.mdw-ripple[mdw-ripple-js]::after {
-  display: none;
-}
-
-.mdw-ripple[disabled],
-.mdw-ripple[aria-disabled="true"] {
-  & > .mdw-ripple__container,
-  &::after {
-    visibility: hidden;
-  }
-}

package/core/ripple/_theme.scss

@@ -1,20 +0,0 @@
-/* https://material.io/design/interaction/states.html */
-/* https://material.io/design/components/buttons.html */
-/* https://material.io/design/iconography/system-icons.html#color */
-
-.mdw-theme[mdw-light] {
-  --mdw-ripple__pressed-opacity: 0.16;
-}
-
-.mdw-theme[mdw-dark] {
-  --mdw-ripple__pressed-opacity: 0.32;
-}
-
-.mdw-ripple {
-  & > .mdw-ripple__container > .mdw-ripple__inner,
-  &::after {
-    opacity: var(--mdw-ripple__pressed-opacity);
-
-    color: RGB(var(--mdw-ink));
-  }
-}