@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/selection/_theme.scss

@@ -1,24 +1,21 @@
 // https://material.io/archive/guidelines/components/selection-controls.html#selection-controls-switch
 
-@import '../../core/theme/index.scss';
+@use '../../core/_platform.scss' as platform;
+@use '../../core/theme/_mixins.scss' as theme;
 
-$mdw-selection__theme-values: (
-  text-color:              $mdw-theme__default-ink,
-  icon-color:              $mdw-theme__medium-ink,
-  disabled-color:          $mdw-theme__inactive-ink,
+$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)),
 
-  thumb-off-color:         (('background', '50', 1.00), ('background','400',1.0)),
-  thumb-on-color:          (currentColor, currentColor),
-
-  track-on-color:          (currentColor, currentColor),
   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-disabled-color:          (('background', '400', 1.00), ('background','800',1.00)),
-  track-disabled-opacity:        (0.12, 0.10),
+  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),
 
@@ -34,128 +31,136 @@ $mdw-selection__theme-values: (
 
 ) !default;
 
-@function mdwSelectionThemeValue($key, $type) {
-  @return mdwGetThemeValue('selection', $mdw-selection__theme-values, $key, $type);
+@function getThemeValue($key, $type) {
+  @return theme.getThemeValue('selection', $themeValues, $key, $type);
 }
 
-@mixin mdw-selection__theme-rules($type: 'var') {
+@mixin addThemeRules($type: 'var') {
   .mdw-selection__input {
-    &:not(:checked),
-    &:checked:active:not(:disabled) {
-      color: mdwSelectionThemeValue("ripple-color", $type);
-      
-      & ~ .mdw-selection__icon {
-        color: mdwSelectionThemeValue("icon-color", $type);
-      }
-    }
+    opacity: 0;
+  }
 
-    &:not([mdw-overlay-touch="true"]) {
-      &:focus:not([mdw-overlay-off~="focus"]):not([mdw-overlay-touch="true"]) {
-        opacity: mdwOverlayThemeValue("focus-opacity", $type);
-      }
+  // Unchecked
+  .mdw-selection:not([aria-checked="true"]) .mdw-selection__input:not(:checked) {
+    color: RGBA(getThemeValue("icon-color", $type), getThemeValue("icon-opacity", $type));
+  }
 
-      &:not([disabled]):not([aria-disabled="true"]):not([mdw-overlay-touch="true"]) {
-        &:hover:not([mdw-overlay-off~="hover"]) {
-          opacity: mdwOverlayThemeValue("hover-opacity", $type);
-        }
+  // Default Focus
+  .mdw-selection__input:not([mdw-overlay-touch="true"]):focus:not([mdw-overlay-off~="focus"]) {
+    opacity: getThemeValue("focus-opacity", $type);
+  }
 
-        &:hover:focus:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"]) {
-          opacity: mdwOverlayThemeValue("hover-focus-opacity", $type);
-        }
-      }
+  // 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);
     }
+  }
 
-    // Selected
-    &:checked:not([mdw-overlay-off~="selected"]) {
-      opacity: mdwOverlayThemeValue("selected-opacity", $type);
+  // 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);
 
-      &:not([mdw-overlay-touch="true"]) {
         &:focus:not([mdw-overlay-off~="focus"]) {
-          opacity: mdwOverlayThemeValue("selected-focus-opacity", $type);
+          opacity: getThemeValue("hover-focus-opacity", $type);
         }
+      }
+    }
+  }
 
-        &:not([disabled]):not([aria-disabled="true"]) {
-          &:hover:not([mdw-overlay-off~="hover"]) {
-            opacity: mdwOverlayThemeValue("selected-hover-opacity", $type);
-          }
+  // 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);
 
-          &:hover:focus:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"]) {
-            opacity: mdwOverlayThemeValue("selected-hover-focus-opacity", $type);
+          &:focus:not([mdw-overlay-off~="focus"]) {
+            opacity: getThemeValue("selected-hover-focus-opacity", $type);
           }
         }
       }
     }
-    
-    &[type="checkbox"]:checked ~ .mdw-selection__icon::after {
-      // Checkbox color is based on currently filled background-color
-      @if($type == 'var') {
-        border-color: unquote("rgba(var(--surface-color))");
-      } @else {
-        // IE11 Fallback
-        border-color: #fff;
-      }
-    }
+  }
 
-    &[disabled],
-    &[aria-disabled="true"] {
-      & ~ .mdw-selection__label {
-        opacity: mdwSelectionThemeValue("disabled-opacity", $type);
-      }
-      & ~ .mdw-selection__icon,
-      & ~ .mdw-selection__icon::before {
-        color: mdwSelectionThemeValue("disabled-color", $type);
+
+  // Checkbox check default
+  .mdw-selection__icon[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));
     }
   }
 
-  .mdw-selection__label,
-  .mdw-selection[mdw-ink] .mdw-selection__input:not([disabled]):not([aria-disabled="true"]) ~ .mdw-selection__label {
-    color: mdwSelectionThemeValue("text-color", $type);
+  // Switch track default
+  .mdw-selection__icon[mdw-switch]::after {
+    opacity: getThemeValue("track-on-opacity", $type);
   }
 
-  .mdw-selection[mdw-switch] .mdw-selection__input {
-    & ~ .mdw-selection__icon {
+  // 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-checkbox],
+    &[mdw-radio] {
+      color: RGBA(getThemeValue("icon-color", $type), getThemeValue("icon-opacity", $type));
+    }
+
+    &[mdw-switch] {
+      // Thumb
       &::before {
-        background-color: mdwSelectionThemeValue("thumb-off-color", $type);
+        background-color: RGBA(getThemeValue("thumb-off-color", $type));
       }
-
+      // Track
       &::after {
-        opacity: mdwSelectionThemeValue("track-off-opacity", $type);
+        opacity: getThemeValue("track-off-opacity", $type);
 
-        background-color: mdwSelectionThemeValue("track-off-color", $type);
+        background-color: RGBA(getThemeValue("track-off-color", $type));
       }
     }
+  }
 
-    &:checked ~ .mdw-selection__icon {
-      &::before {
-        background-color: mdwSelectionThemeValue("thumb-on-color", $type);
-      }
+  // 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);
+  }
 
-      &::after {
-        background-color: mdwSelectionThemeValue("track-on-color", $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));
     }
-
-    &[disabled],
-    &[aria-disabled="true"] {
-      & ~ .mdw-selection__icon::before {
-        background-color: mdwSelectionThemeValue("thumb-disabled-color", $type);
-      }
-      &  ~ .mdw-selection__icon::after {
-        opacity: mdwSelectionThemeValue("track-disabled-opacity", $type);
-      }
+    // Track
+    &::after {
+      background-color: RGBA(getThemeValue("track-off-color", $type));
     }
   }
 }
 
 
-@include mdw-theme__add-component-fallback-rules('light') {
-  @include mdw-selection__theme-rules('light');
+@include theme.addComponentFallbackRules('light') {
+  @include addThemeRules('light');
 }
-@include mdw-theme__add-component-fallback-rules('dark') {
-  @include mdw-selection__theme-rules('dark');
+@include theme.addComponentFallbackRules('dark') {
+  @include addThemeRules('dark');
 }
 
-@include mdw-theme__add-component-variable-rules('selection', $mdw-selection__theme-values) {
-  @include mdw-selection__theme-rules();
+@include theme.addComponentCSSVariableRules('selection', $themeValues) {
+  @include addThemeRules();
 }

package/components/selection/index.eta

@@ -0,0 +1,60 @@
+<label <%~ Object.entries({
+  'class': [
+    'mdw-selection',
+    it?.labelClass,
+  ].filter(v=>v).join(' '),
+  ...it?.labelAttributes,
+  }).map(([key, value]) => {
+    if (value === true) return key;
+    if (value === false || value == null) return false;
+    return `${key}="${value}"`
+  }).filter(v=>v).join(' ')-%>>
+
+  <%_ _%>
+
+  <input <%~ Object.entries({
+    class: [
+      'mdw-selection__input',
+      'mdw-overlay',
+      it?.ink || it?.theme ? 'mdw-theme': '',
+    ].filter(v=>v).join(' '),
+    'mdw-overlay-disabled': 'none',
+    'mdw-ink': it?.ink,
+    'role': it?.type === 'switch' ? 'switch' : false,
+    'type': it?.type === 'radio' ? 'radio' : 'checkbox',
+    'checked': it?.checked,
+    'disabled': it?.disabled && it?.disabled !== 'false',
+    'aria-disabled': it?.disabled === true ? 'true' : it?.disabled,
+    'name': it?.name,
+    'value': it?.value,
+    ...it?.attributes,
+  }).map(([key, value]) => {
+    if (value === true) return key;
+    if (value === false || value == null) return false;
+    return `${key}="${value}"`;
+  }).filter(v=>v).join(' ')-%> />
+
+  <%_ if (it?.prefix) { _%>
+  <div class="mdw-selection__label"><%~ it?.body ?? '' %><%= it?.text ?? '' %></div>
+  <%_ } _%>
+
+  <div <%~ Object.entries({
+    'class': [
+      'mdw-selection__icon',
+      it?.ink || it?.theme ? 'mdw-theme' : false,
+    ].filter(v=>v).join(' '),
+    'mdw-ink': it?.ink,
+    'mdw-radio': it?.type === 'radio',
+    'mdw-switch': it?.type === 'switch',
+    'mdw-checkbox': it?.type !== 'radio' && it?.type !== 'switch',
+  }).map(([key, value]) => {
+    if (value === true) return key;
+    if (value === false || value == null) return false;
+    return `${key}="${value}"`;
+  }).filter(v=>v).join(' ')-%>></div>
+
+  <%_ if (!it?.prefix) { _%>
+  <div class="mdw-selection__label"><%~ it?.body ?? '' %><%= it?.text ?? '' %></div>
+  <%_ } _%>
+
+</label>

package/components/selection/index.js

@@ -0,0 +1,76 @@
+import * as Attributes from '../../core/aria/attributes.js';
+import * as Keyboard from '../../core/aria/keyboard.js';
+
+import * as SelectionInput from './input.js';
+
+export const CHECKED_CHANGE_EVENT = 'mdw:selection-checkedchange';
+
+/**
+ * @param {Element} selectionElement
+ * @param {boolean|string} newValue
+ * @param {boolean} [dispatchEvent=false]
+ * @return {boolean} successful
+ */
+export function setChecked(selectionElement, newValue, dispatchEvent) {
+  return Attributes.setChecked(
+    selectionElement,
+    newValue,
+    dispatchEvent ? CHECKED_CHANGE_EVENT : null,
+  );
+}
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+function onActivateEvent(event) {
+  if (event.target instanceof HTMLInputElement) {
+    return;
+  }
+  if (event.type === Keyboard.SPACEBAR_KEY) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  /** @type {HTMLElement} */
+  const selectionElement = (event.currentTarget);
+  if (Attributes.isDisabled(selectionElement)) {
+    return;
+  }
+  if (Attributes.isReadonly(selectionElement)) {
+    return;
+  }
+  if (!selectionElement.hasAttribute('aria-checked')) {
+    return;
+  }
+  if (event.type === 'click' || event.type === SelectionInput.CLICK_EVENT) {
+    if (selectionElement.hasAttribute('mdw-no-autocheck')) {
+      return;
+    }
+  }
+  const role = selectionElement.getAttribute('role');
+  if (event.type === 'focus' || event.type === SelectionInput.FOCUS_EVENT) {
+    if (role !== 'radio') {
+      return;
+    }
+  }
+  const newValue = (role === 'radio' ? true : !Attributes.isChecked(selectionElement));
+  setChecked(selectionElement, newValue, true);
+}
+
+/**
+ * @param {HTMLElement} element
+ * @return {void}
+ */
+export function attach(element) {
+  /** @type {HTMLElement} */
+  const inputElement = (element.getElementsByClassName('mdw-selection__input')[0]);
+  if (inputElement) {
+    SelectionInput.attach(inputElement);
+  }
+  Keyboard.attach(element);
+  element.addEventListener('focus', onActivateEvent);
+  element.addEventListener('click', onActivateEvent);
+  element.addEventListener(Keyboard.SPACEBAR_KEY, onActivateEvent);
+  element.addEventListener(SelectionInput.FOCUS_EVENT, onActivateEvent);
+  element.addEventListener(SelectionInput.CLICK_EVENT, onActivateEvent);
+}

package/components/selection/index.pug

@@ -1,11 +1,10 @@
 mixin mdwSelection(options={})
-  label.mdw-selection(class=([
-  options.ink ? 'mdw-theme' : '',
-  ].filter(v=>v).join(' '))
-  mdw-ink=(options.ink)
-  mdw-switch=(options.type === 'switch' ? '' : false)
-  )
+  label.mdw-selection
     input.mdw-selection__input.mdw-overlay(
+    mdw-overlay-disabled="none"
+    class=(options.ink ? 'mdw-theme' : false)
+    mdw-ink=(options.ink)
+    role=(options.type === 'switch' ? 'switch' : false)
     type=(options.type === 'radio' ? 'radio' : 'checkbox')
     checked=(options.checked ? '' : false)
     disabled=(options.disabled ? '' : false)
@@ -16,8 +15,16 @@ mixin mdwSelection(options={})
     if (options.prefix)
       .mdw-selection__label
         block
-      .mdw-selection__icon
+      .mdw-selection__icon(class=(options.ink ? 'mdw-theme' : false)
+      mdw-ink=(options.ink)
+      mdw-radio=(options.type === 'radio' ? '' : false)
+      mdw-switch=(options.type === 'switch' ? '' : false)
+      mdw-checkbox=(options.type !== 'radio' && options.type !== 'switch' ? '' : false))
     else
-      .mdw-selection__icon
+      .mdw-selection__icon(class=(options.ink ? 'mdw-theme' : false)
+      mdw-ink=(options.ink)
+      mdw-radio=(options.type === 'radio' ? '' : false)
+      mdw-switch=(options.type === 'switch' ? '' : false)
+      mdw-checkbox=(options.type !== 'radio' && options.type !== 'switch' ? '' : false))
       .mdw-selection__label
         block

package/components/selection/index.scss

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

package/components/selection/input.js

@@ -0,0 +1,56 @@
+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) {
+    if (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,47 @@
+import { iterateArrayLike } from '../../core/dom.js';
+
+import * as Selection from './index.js';
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+function onCheckedChange(event) {
+  const { detail } = event;
+  if (detail.value === 'false') {
+    return;
+  }
+  /** @type {HTMLElement} */
+  const radiogroupElement = (event.currentTarget);
+  /** @type {HTMLElement} */
+  const itemElement = (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;
+        }
+        item.setAttribute('aria-checked', 'false');
+      });
+  });
+}
+
+/**
+ * @param {HTMLElement} 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/_spec.scss

@@ -1,6 +1,8 @@
 // https://material.io/design/components/sliders.html#spec
 
-@mixin mdw-slider__track {
+@use '../../core/_length.scss' as *;
+
+@mixin track {
   width: 100%;
   height: dp(2);
   background-color: currentColor;
@@ -8,7 +10,7 @@
   color: inherit;
 }
 
-@mixin mdw-slider__thumb {
+@mixin thumb {
   height: dp(12);
   width: dp(12);
   border-radius: 50%;
@@ -39,22 +41,22 @@
   }
   
   &::-moz-range-track {
-    @include mdw-slider__track;
+    @include track;
   }
   &::-ms-track {
-    @include mdw-slider__track;
+    @include track;
   }
   &::-webkit-slider-runnable-track {
-    @include mdw-slider__track;
+    @include track;
   }
   &::-ms-thumb {
-    @include mdw-slider__thumb;
+    @include thumb;
   }
   &::-moz-range-thumb {
-    @include mdw-slider__thumb;
+    @include thumb;
   }
   &::-webkit-slider-thumb {
-    @include mdw-slider__thumb;
+    @include thumb;
     -webkit-appearance: none;
     margin-top: dp(-5);
   }

package/components/slider/index.scss

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