@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/components/selection/_theme.scss

@@ -1,166 +1,134 @@
 // https://material.io/archive/guidelines/components/selection-controls.html#selection-controls-switch
 
 @use '../../core/_platform.scss' as platform;
-@use '../../core/theme/_mixins.scss' as theme;
 
-$themeValues: (
-  icon-color:              theme.$foreground,
-  icon-opacity:            theme.$medium-opacity,
-  
-  fallback-check-color:    (('background', '50', 1.00), ('background','900',1.0)),
-  ripple-color:            (('foreground-light', 1.00), ('foreground-dark', 1.00)),
+.mdw-theme {
+  --mdw-selection__icon-color: var(--mdw-medium-color);
+  --mdw-selection__track-on-opacity: 0.50;
+  --mdw-selection__track-off-color: RGBA(var(--mdw-ink-default), 1.00);
 
-  track-on-opacity:        (0.50, 0.50),
-  track-off-color:         (('foreground-light', 1.00), ('foreground-dark', 1.00)),
-  track-off-opacity:       (0.38, 0.30),
-
-  thumb-off-color:         (('background', '50', 1.00), ('background','400',1.0)),
-  thumb-disabled-color:    (('background', '400', 1.00), ('background','800',1.00)),
-
-  disabled-opacity:              (0.38, 0.50),
-
-  hover-opacity:                 (0.04, 0.08),
-  focus-opacity:                 (0.12, 0.24),
-  selected-opacity:              (0.08, 0.16),
-  
-  hover-focus-opacity:           (0.04 + 0.12, 0.08 + 0.24),
+  --mdw-selection__hover-opacity: var(--mdw-selection__hover-opacity-value);
+  --mdw-selection__focus-opacity: var(--mdw-selection__focus-opacity-value);
+  --mdw-selection__selected-opacity: var(--mdw-selection__selected-opacity-value);
+}
 
-  selected-hover-opacity:        (0.08 + 0.04, 0.16 + 0.08),
-  selected-focus-opacity:        (0.08 + 0.12, 0.16 + 0.24),
-  selected-hover-focus-opacity:  (0.08 + 0.04 + 0.12, 0.16 + 0.08 + 0.24),
+.mdw-theme[mdw-light] {
+  --mdw-selection__track-off-opacity: 0.38;
+  --mdw-selection__thumb-off-color: RGBA(var(--mdw-alias-background-50), 1.00);
+  --mdw-selection__thumb-disabled-color: RGBA(var(--mdw-alias-background-400), 1.00);
+  --mdw-selection__disabled-opacity: 0.38;
+  --mdw-selection__hover-opacity-value: 0.04;
+  --mdw-selection__focus-opacity-value: 0.12;
+  --mdw-selection__selected-opacity-value: 0.08;
+}
 
-) !default;
+.mdw-theme[mdw-dark] {
+  --mdw-selection__track-off-opacity: 0.30;
+  --mdw-selection__thumb-off-color: RGBA(var(--mdw-alias-background-400), 1.00);
+  --mdw-selection__thumb-disabled-color: RGBA(var(--mdw-alias-background-800), 1.00);
+  --mdw-selection__disabled-opacity: 0.50;
+  --mdw-selection__hover-opacity-value: 0.08;
+  --mdw-selection__focus-opacity-value: 0.24;
+  --mdw-selection__selected-opacity-value: 0.16;
+}
 
-@function getThemeValue($key, $type) {
-  @return theme.getThemeValue('selection', $themeValues, $key, $type);
+.mdw-selection[aria-checked="true"],
+.mdw-selection__input:checked, {
+  --mdw-selection__icon-color: RGB(var(--mdw-ink));
 }
 
-@mixin addThemeRules($type: 'var') {
-  .mdw-selection__input {
-    opacity: 0;
-  }
+.mdw-selection__input {
+  opacity: calc(var(--mdw-selection__hover-opacity) + var(--mdw-selection__focus-opacity) + var(--mdw-selection__selected-opacity));
 
-  // Unchecked
-  .mdw-selection:not([aria-checked="true"]) .mdw-selection__input:not(:checked) {
-    color: RGBA(getThemeValue("icon-color", $type), getThemeValue("icon-opacity", $type));
+  &,
+  &.mdw-theme {
+    color: var(--mdw-selection__icon-color);
   }
 
-  // Default Focus
-  .mdw-selection__input:not([mdw-overlay-touch="true"]):focus:not([mdw-overlay-off~="focus"]) {
-    opacity: getThemeValue("focus-opacity", $type);
+  &[mdw-overlay-off~="hover"],
+  &:not(:hover) {
+    --mdw-selection__hover-opacity-value: 0;
   }
 
-  // Checked Focus
-  .mdw-selection[aria-checked="true"] .mdw-selection__input,
-  .mdw-selection__input:checked {
-    &:not([mdw-overlay-touch="true"]):focus:not([mdw-overlay-off~="focus"]):not([mdw-overlay-off~="selected"]) {
-      opacity: getThemeValue("selected-focus-opacity", $type);
-    }
+  &[mdw-overlay-off~="focus"],
+  &:not(:focus) {
+    --mdw-selection__focus-opacity-value: 0;
   }
 
-  // Default Hover (only when not disabled)
-  .mdw-selection:not([aria-disabled="true"]) .mdw-selection__input:not(:disabled) {
-    &:not([mdw-overlay-touch="true"]) {
-      &:hover:not([mdw-overlay-off~="hover"]) {
-        opacity: getThemeValue("hover-opacity", $type);
-
-        &:focus:not([mdw-overlay-off~="focus"]) {
-          opacity: getThemeValue("hover-focus-opacity", $type);
-        }
-      }
-    }
+  // Unselected (unchecked) state
+  &:not([aria-checked="true"]):not(:checked),
+  &[aria-checked="false"],
+  &[mdw-overlay-touch="true"],
+  &[mdw-overlay-off~="selected"] {
+    --mdw-selection__selected-opacity-value: 0;
   }
 
-  // Checked Hover (only when not disabled)
-  .mdw-selection:not([aria-disabled="true"])[aria-checked="true"] .mdw-selection__input:not(:disabled),
-  .mdw-selection__input:not(:disabled):checked {
-    &:not([mdw-overlay-touch="true"]) {
-      &:not([mdw-overlay-off~="selected"]) {
-        &:hover:not([mdw-overlay-off~="hover"]) {
-          opacity: getThemeValue("selected-hover-opacity", $type);
-
-          &:focus:not([mdw-overlay-off~="focus"]) {
-            opacity: getThemeValue("selected-hover-focus-opacity", $type);
-          }
-        }
-      }
-    }
+  // No overlay when disabled, touch, not hovered, or not focused
+  .mdw-selection[aria-disabled="true"] > &,
+  &[aria-disabled="true"],
+  &[disabled],
+  &[mdw-overlay-touch="true"],
+  &:not(:focus):not(:hover) {
+    opacity: 0;
   }
+}
 
-
+.mdw-selection__icon {
   // Checkbox check default
-  .mdw-selection__icon[mdw-checkbox]::after {
+  &[mdw-checkbox]::after {
     // Checkbox color is based on currently filled background-color
-    @if($type == 'var') {
-      @include platform.ifEdge() {
-        // Edge will not inherit css variables for border in psuedos
-        border-color: RGBA(getThemeValue("fallback-check-color", $type));
-      }
-      border-color: RGB(var(--mdw-surface));
-    } @else {
-      border-color: RGBA(getThemeValue("fallback-check-color", $type));
-    }
+    border-color: RGB(var(--mdw-surface));
   }
 
   // Switch track default
-  .mdw-selection__icon[mdw-switch]::after {
-    opacity: getThemeValue("track-on-opacity", $type);
+  &[mdw-switch]::after {
+    opacity: var(--mdw-selection__track-on-opacity);
+  }
+
+  .mdw-selection[aria-disabled="true"] &,
+  .mdw-selection__input:disabled ~ & {
+    opacity: var(--mdw-selection__disabled-opacity);
+
+    &[mdw-switch] {
+      // Thumb
+      &::before {
+        background-color: var(--mdw-selection__thumb-disabled-color);
+      }
+      // Track
+      &::after {
+        background-color: var(--mdw-selection__track-off-color);
+      }
+    }
   }
 
   // Unchecked or disabled HTMLInputElement
-  .mdw-selection[aria-checked="false"] .mdw-selection__icon,
-  .mdw-selection[aria-disabled="true"] .mdw-selection__icon,
-  input.mdw-selection__input:not(:checked) ~ .mdw-selection__icon,
-  .mdw-selection__input:disabled ~ .mdw-selection__icon {
+  .mdw-selection[aria-checked="false"] &,
+  .mdw-selection[aria-disabled="true"] &,
+  .mdw-selection__input:disabled ~ &,
+  input.mdw-selection__input:not(:checked) ~ & {
     &[mdw-checkbox],
     &[mdw-radio] {
-      color: RGBA(getThemeValue("icon-color", $type), getThemeValue("icon-opacity", $type));
+      color: var(--mdw-selection__icon-color);
     }
 
     &[mdw-switch] {
       // Thumb
       &::before {
-        background-color: RGBA(getThemeValue("thumb-off-color", $type));
+        background-color: var(--mdw-selection__thumb-off-color);
       }
       // Track
       &::after {
-        opacity: getThemeValue("track-off-opacity", $type);
+        opacity: var(--mdw-selection__track-off-opacity);
 
-        background-color: RGBA(getThemeValue("track-off-color", $type));
+        background-color: var(--mdw-selection__track-off-color);
       }
     }
   }
-
-  // Disabled HTMLInputElement
-  .mdw-selection[aria-disabled="true"] .mdw-selection__label,
-  .mdw-selection[aria-disabled="true"] .mdw-selection__icon,
-  .mdw-selection__input:disabled ~ .mdw-selection__label,
-  .mdw-selection__input:disabled ~ .mdw-selection__icon {
-    opacity: getThemeValue("disabled-opacity", $type);
-  }
-
-  // Disabled switch colors
-  .mdw-selection[aria-disabled="true"] .mdw-selection__icon[mdw-switch],
-  .mdw-selection__input:disabled ~ .mdw-selection__icon[mdw-switch] {
-    // Thumb
-    &::before {
-      background-color: RGBA(getThemeValue("thumb-disabled-color", $type));
-    }
-    // Track
-    &::after {
-      background-color: RGBA(getThemeValue("track-off-color", $type));
-    }
-  }
 }
 
-
-@include theme.addComponentFallbackRules('light') {
-  @include addThemeRules('light');
-}
-@include theme.addComponentFallbackRules('dark') {
-  @include addThemeRules('dark');
-}
-
-@include theme.addComponentCSSVariableRules('selection', $themeValues) {
-  @include addThemeRules();
+.mdw-selection__label {
+  .mdw-selection[aria-disabled="true"] &,
+  .mdw-selection__input:disabled ~ & {
+    opacity: var(--mdw-selection__disabled-opacity);
+  }
 }

package/components/selection/index.js

@@ -31,8 +31,7 @@ function onActivateEvent(event) {
     event.stopPropagation();
     event.preventDefault();
   }
-  /** @type {HTMLElement} */
-  const selectionElement = (event.currentTarget);
+  const selectionElement = /** @type {HTMLElement} */ (event.currentTarget);
   if (Attributes.isDisabled(selectionElement)) {
     return;
   }
@@ -42,28 +41,23 @@ function onActivateEvent(event) {
   if (!selectionElement.hasAttribute('aria-checked')) {
     return;
   }
-  if (event.type === 'click' || event.type === SelectionInput.CLICK_EVENT) {
-    if (selectionElement.hasAttribute('mdw-no-autocheck')) {
-      return;
-    }
-  }
+  if ((event.type === 'click' || event.type === SelectionInput.CLICK_EVENT)
+    && selectionElement.hasAttribute('mdw-no-autocheck')) return;
+
   const role = selectionElement.getAttribute('role');
-  if (event.type === 'focus' || event.type === SelectionInput.FOCUS_EVENT) {
-    if (role !== 'radio') {
-      return;
-    }
-  }
+  if ((event.type === 'focus' || event.type === SelectionInput.FOCUS_EVENT)
+    && role !== 'radio') return;
+
   const newValue = (role === 'radio' ? true : !Attributes.isChecked(selectionElement));
   setChecked(selectionElement, newValue, true);
 }
 
 /**
- * @param {HTMLElement} element
+ * @param {Element} element
  * @return {void}
  */
 export function attach(element) {
-  /** @type {HTMLElement} */
-  const inputElement = (element.getElementsByClassName('mdw-selection__input')[0]);
+  const inputElement = /** @type {HTMLElement} */ (element.getElementsByClassName('mdw-selection__input')[0]);
   if (inputElement) {
     SelectionInput.attach(inputElement);
   }

package/components/selection/input.js

@@ -10,11 +10,9 @@ export const FOCUS_EVENT = 'mdw:selectioninput-focus';
  * @return {void}
  */
 function onKeyDown(event) {
-  if (event.target instanceof HTMLInputElement) {
-    if (event.key === ' ' || event.key === 'Spacebar') {
-      // Don't pass up Spacebar on native input elements
-      event.stopPropagation();
-    }
+  if (event.target instanceof HTMLInputElement && (event.key === ' ' || event.key === 'Spacebar')) {
+    // Don't pass up Spacebar on native input elements
+    event.stopPropagation();
   }
 }
 

package/components/selection/radiogroup.js

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

package/components/slider/_spec.scss

@@ -3,62 +3,57 @@
 @use '../../core/_length.scss' as *;
 
 @mixin track {
-  width: 100%;
-  height: dp(2);
+  block-size: 2px;
+  inline-size: 100%;
+
   background-color: currentColor;
   border-color: transparent;
   color: inherit;
 }
 
 @mixin thumb {
-  height: dp(12);
-  width: dp(12);
-  border-radius: 50%;
+  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 track;
   }
-  &::-ms-track {
-    @include track;
-  }
+
   &::-webkit-slider-runnable-track {
     @include track;
   }
-  &::-ms-thumb {
-    @include thumb;
-  }
+
   &::-moz-range-thumb {
     @include thumb;
+    border: none;
   }
+
   &::-webkit-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/snackbar/_spec.scss

@@ -18,9 +18,8 @@ $scale-initial: 0.85 !default;
 .mdw-snackbar__container {
   display: flex;
   position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-end: 0;
+  inset-inline: 0;
   flex-direction: row;
   justify-content: flex-start;
 
@@ -33,21 +32,23 @@ $scale-initial: 0.85 !default;
   &[mdw-position="center"] {
     justify-content: center;
   }
-} 
+}
 
 .mdw-snackbar {
   @include type.addRules('body-2');
 
   display: flex;
   position: absolute;
-  bottom: 0;
+  inset-block-end: 0;
   align-items: center;
   justify-content: space-between;
 
-  min-height: dp(48);
-  max-width: 100%;
-  padding-right: dp(8);
-  padding-left: dp(8);
+  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;
@@ -57,14 +58,11 @@ $scale-initial: 0.85 !default;
   will-change: opacity, transform, visibility;
 
   opacity: 0;
-
-  // Default state is hidden
-  pointer-events: auto;
   transform: scale($scale-initial);
   visibility: hidden;
 
-  border-radius: dp(4);
-  
+  border-radius: 4px;
+
   box-shadow: elevation.boxShadow(6);
 
   &[aria-hidden="false"] {
@@ -119,22 +117,21 @@ $scale-initial: 0.85 !default;
   order: 1;
 
   flex: none;
-  margin: dp(6) 0;
+  margin: 6px 0;
 }
 
 .mdw-snackbar > span {
   @include type.textTopToTop(16);
   @include type.baselineToBottom(48 - 30);
   box-sizing: border-box;
-  padding: 0 dp(8);
+  padding: 0 8px;
 
   white-space: pre-line;
 }
 
 @include breakpoint.isXSmallWindow() {
   .mdw-snackbar {
-    right: 0;
-    left: 0;
+    inset-inline: 0;
 
     &[mdw-stacked] {
       align-items: flex-end;
@@ -142,54 +139,12 @@ $scale-initial: 0.85 !default;
       justify-content: center;
 
       > span {
-        width: 100%;
+        inline-size: 100%;
       }
 
       .mdw-button {
-        margin-top: dp(2);
-        margin-bottom: dp(8);
-      }
-    }
-  }
-}
-
-@include platform.ifIE() {
-  // Fix IE flexbug
-  .mdw-snackbar {
-    &::after {
-      min-height: inherit;
-      min-width: 0;
-      content: '';
-    }
-  }
-
-  .mdw-snackbar__container[mdw-position="center"] {
-    .mdw-snackbar {
-      transform: translateX(-50%);
-
-      html[dir="rtl"] & {
-        transform: translateX(50%);
-
-        &[mdw-hide] {
-          transform: translateX(50%) scale($scale-initial);
-        }
-      }
-
-      &[mdw-hide] {
-        transform: translateX(-50%) scale($scale-initial);
-      }
-    }
-  }
-
-  .mdw-snackbar__container[mdw-position="end"] {
-    .mdw-snackbar {
-      right: 0;
-
-      html[dir="rtl"] & {
-        right: auto;
-        left: 0;
+        margin-block: 2px 8px;
       }
     }
   }
-  
 }