@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/selection/input.js

@@ -0,0 +1,54 @@
+import {
+  dispatchDomEvent,
+} from '../../core/dom.js';
+
+export const CLICK_EVENT = 'mdw:selectioninput-click';
+export const FOCUS_EVENT = 'mdw:selectioninput-focus';
+
+/**
+ * @param {KeyboardEvent} event
+ * @return {void}
+ */
+function onKeyDown(event) {
+  if (event.target instanceof HTMLInputElement && (event.key === ' ' || event.key === 'Spacebar')) {
+    // Don't pass up Spacebar on native input elements
+    event.stopPropagation();
+  }
+}
+
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+function onClick(event) {
+  event.stopPropagation();
+  dispatchDomEvent(/** @type {HTMLElement} */ (event.target), CLICK_EVENT);
+}
+
+/**
+ * @param {FocusEvent} event
+ * @return {void}
+ */
+function onFocus(event) {
+  dispatchDomEvent(/** @type {HTMLElement} */ (event.target), FOCUS_EVENT);
+}
+
+/**
+ * @param {HTMLElement} element
+ * @return {void}
+ */
+export function attach(element) {
+  element.addEventListener('keydown', onKeyDown);
+  element.addEventListener('click', onClick);
+  element.addEventListener('focus', onFocus);
+}
+
+/**
+ * @param {HTMLElement} element
+ * @return {void}
+ */
+export function detach(element) {
+  element.removeEventListener('keydown', onKeyDown);
+  element.removeEventListener('click', onClick);
+  element.removeEventListener('focus', onFocus);
+}

package/components/selection/radiogroup.js

@@ -0,0 +1,40 @@
+import * as Selection from './index.js';
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+function onCheckedChange(event) {
+  if (event.detail.value === 'false') {
+    return;
+  }
+  const radiogroupElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const itemElement = /** @type {HTMLElement} */ (event.target);
+  setTimeout(() => {
+    // Wait to see if event is cancelled
+    if (event.defaultPrevented) {
+      return;
+    }
+    for (const item of radiogroupElement.querySelectorAll('[role="radio"][aria-checked="true"]')) {
+      if (item !== itemElement) {
+        item.setAttribute('aria-checked', 'false');
+      }
+    }
+  });
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attach(element) {
+  element.addEventListener(Selection.CHECKED_CHANGE_EVENT, onCheckedChange);
+}
+
+/**
+ * @param {HTMLElement} element
+ * @return {void}
+ */
+export function detach(element) {
+  element.removeEventListener(Selection.CHECKED_CHANGE_EVENT, onCheckedChange);
+}

package/components/slider/{style.scss → _spec.scss}

@@ -1,62 +1,59 @@
 // https://material.io/design/components/sliders.html#spec
 
-@mixin mdw-slider__track {
-  width: 100%;
-  height: dp(2);
+@use '../../core/_length.scss' as *;
+
+@mixin track {
+  block-size: 2px;
+  inline-size: 100%;
+
   background-color: currentColor;
   border-color: transparent;
   color: inherit;
 }
 
-@mixin mdw-slider__thumb {
-  height: dp(12);
-  width: dp(12);
-  border-radius: 50%;
+@mixin thumb {
+  block-size: 12px;
+  inline-size: 12px;
+
+  cursor: pointer;
+
   background-color: currentColor;
+  border-radius: 50%;
   color: inherit;
-  cursor: pointer;
 }
 
 .mdw-slider__input {
+  inline-size: 100%;
+
   -moz-appearance: none;
   -webkit-appearance: none;
-  width: 100%;
-  color: inherit;
+  appearance: none;
+
   background: transparent;
-  
-  
+  color: inherit;
+
   &:focus {
     outline: none;
   }
-  
-  &::-ms-track {
-    width: 100%;
-    cursor: pointer;
-  
-    background: transparent; 
-    border-color: transparent;
-    color: transparent;
-  }
-  
+
   &::-moz-range-track {
-    @include mdw-slider__track;
-  }
-  &::-ms-track {
-    @include mdw-slider__track;
+    @include track;
   }
+
   &::-webkit-slider-runnable-track {
-    @include mdw-slider__track;
-  }
-  &::-ms-thumb {
-    @include mdw-slider__thumb;
+    @include track;
   }
+
   &::-moz-range-thumb {
-    @include mdw-slider__thumb;
+    @include thumb;
+    border: none;
   }
+
   &::-webkit-slider-thumb {
-    @include mdw-slider__thumb;
+    @include thumb;
+    margin-block-start: -5px;
+
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     -webkit-appearance: none;
-    margin-top: dp(-5);
   }
 }
-

package/components/slider/index.scss

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

package/components/snackbar/_spec.scss

@@ -0,0 +1,150 @@
+// https://material.io/design/components/snackbars.html#spec
+
+@use '../../core/_breakpoint.scss' as breakpoint;
+@use '../../core/_elevation.scss' as elevation;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_platform.scss' as platform;
+@use '../../core/_type.scss' as type;
+
+$scale-initial: 0.85 !default;
+
+.mdw-snackbar__wrapper {
+  position: relative;
+
+  z-index: 6;
+}
+
+.mdw-snackbar__container {
+  display: flex;
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: 0;
+  flex-direction: row;
+  justify-content: flex-start;
+
+  z-index: 6;
+
+  &[mdw-position="end"] {
+    justify-content: flex-end;
+  }
+
+  &[mdw-position="center"] {
+    justify-content: center;
+  }
+}
+
+.mdw-snackbar {
+  @include type.addRules('body-2');
+
+  display: flex;
+  position: absolute;
+  inset-block-end: 0;
+  align-items: center;
+  justify-content: space-between;
+
+  min-block-size: 48px;
+  max-inline-size: 100%;
+  padding-inline: 8px;
+
+  // Default state is hidden
+  pointer-events: auto;
+
+  animation-name: none;
+  animation-duration: motion.$fadeInDuration;
+  animation-timing-function: motion.$decelerateEasing;
+  animation-direction: normal;
+  animation-fill-mode: forwards;
+  will-change: opacity, transform, visibility;
+
+  opacity: 0;
+  transform: scale($scale-initial);
+  visibility: hidden;
+
+  border-radius: 4px;
+
+  box-shadow: elevation.boxShadow(6);
+
+  &[aria-hidden="false"] {
+    animation-name: showSnackbar;
+
+    // Fallback if animations are disabled
+    opacity: 1;
+    transform: scale(1.0);
+    visibility: visible;
+  }
+
+  &[aria-hidden="true"] {
+    animation-name: hideSnackbar;
+    animation-duration: motion.$fadeOutDuration;
+    animation-timing-function: motion.$accelerateEasing;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+@keyframes hideSnackbar {
+  from {
+    opacity: 1;
+    transform: scale(1.0);
+    visibility: visible;
+  }
+
+  to {
+    opacity: 0;
+    transform: scale($scale-initial);
+    visibility: hidden;
+  }
+}
+
+@keyframes showSnackbar {
+  from {
+    opacity: 0;
+    transform: scale($scale-initial);
+    visibility: hidden;
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1.0);
+    visibility: visible;
+  }
+}
+
+.mdw-snackbar .mdw-button {
+  order: 1;
+
+  flex: none;
+  margin: 6px 0;
+}
+
+.mdw-snackbar > span {
+  @include type.textTopToTop(16);
+  @include type.baselineToBottom(48 - 30);
+  box-sizing: border-box;
+  padding: 0 8px;
+
+  white-space: pre-line;
+}
+
+@include breakpoint.isXSmallWindow() {
+  .mdw-snackbar {
+    inset-inline: 0;
+
+    &[mdw-stacked] {
+      align-items: flex-end;
+      flex-direction: column;
+      justify-content: center;
+
+      > span {
+        inline-size: 100%;
+      }
+
+      .mdw-button {
+        margin-block: 2px 8px;
+      }
+    }
+  }
+}