@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/bottomnav/index.js

@@ -1,25 +1,10 @@
 // https://www.w3.org/TR/wai-aria-practices/#tabpanel
 
-import { iterateArrayLike } from '../../core/dom';
+import * as Keyboard from '../../core/aria/keyboard.js';
+import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
+import { iterateArrayLike } from '../../core/dom.js';
 
-import * as AriaAttributes from '../../core/aria/attributes';
-import * as RovingTabIndex from '../../core/aria/rovingtabindex';
-import * as BottomNavItem from './item';
-
-/**
- * @param {Element} bottomnavElement
- * @return {void}
- */
-export function attach(bottomnavElement) {
-  bottomnavElement.classList.add('mdw-overlay__group');
-  iterateArrayLike(bottomnavElement.getElementsByClassName('mdw-bottomnav__item'), BottomNavItem.attach);
-  bottomnavElement.addEventListener(AriaAttributes.SELECTED_CHANGED_EVENT, onSelectedChangedEvent);
-  setupARIA(bottomnavElement);
-  RovingTabIndex.setupTabIndexes(bottomnavElement, '[role="tab"]');
-  bottomnavElement.addEventListener(RovingTabIndex.FORWARDS_REQUESTED, onForwardsRequested);
-  bottomnavElement.addEventListener(RovingTabIndex.BACKWARDS_REQUESTED, onBackwardsRequested);
-  bottomnavElement.addEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
-}
+import * as BottomNavItem from './item.js';
 
 /**
  * @param {Event} event
@@ -33,11 +18,17 @@ function onTabIndexZeroed(event) {
   const currentItem = (event.target);
   RovingTabIndex.removeTabIndex(bottomnavElement.querySelectorAll('[role="tab"]'), [currentItem]);
 }
+
 /**
- * @param {Event} event
+ * @param {CustomEvent} event
  * @return {void}
  */
 function onForwardsRequested(event) {
+  if (event.detail.ctrlKey || event.detail.altKey
+    || event.detail.shiftKey || event.detail.metaKey) {
+    return;
+  }
+  event.preventDefault();
   event.stopPropagation();
   /** @type {HTMLElement} */
   const bottomnavElement = (event.currentTarget);
@@ -45,10 +36,15 @@ function onForwardsRequested(event) {
 }
 
 /**
- * @param {Event} event
+ * @param {CustomEvent} event
  * @return {void}
  */
 function onBackwardsRequested(event) {
+  if (event.detail.ctrlKey || event.detail.altKey
+    || event.detail.shiftKey || event.detail.metaKey) {
+    return;
+  }
+  event.preventDefault();
   event.stopPropagation();
   /** @type {HTMLElement} */
   const bottomnavElement = (event.currentTarget);
@@ -60,54 +56,67 @@ function onBackwardsRequested(event) {
  * @return {void}
  */
 export function setupARIA(bottomnavElement) {
-  if (bottomnavElement.hasAttribute('mdw-no-aria')) {
-    return;
-  }
   bottomnavElement.setAttribute('role', 'tablist');
   bottomnavElement.setAttribute('aria-multiselectable', 'false');
   bottomnavElement.setAttribute('aria-orientation', 'horizontal');
 }
 
 /**
- * @param {Element} bottomnavElement
+ * @param {CustomEvent} event
  * @return {void}
  */
-export function detach(bottomnavElement) {
-  iterateArrayLike(bottomnavElement.getElementsByClassName('mdw-bottomnav__item'), BottomNavItem.detach);
-  bottomnavElement.removeEventListener(AriaAttributes.SELECTED_CHANGED_EVENT, onSelectedChangedEvent);
-  RovingTabIndex.detach(bottomnavElement, '[role="tab"]');
-  bottomnavElement.removeEventListener(RovingTabIndex.FORWARDS_REQUESTED, onForwardsRequested);
-  bottomnavElement.removeEventListener(RovingTabIndex.BACKWARDS_REQUESTED, onBackwardsRequested);
-  bottomnavElement.removeEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
+export function onSelectedChangeEvent(event) {
+  /** @type {HTMLElement} */
+  const itemElement = (event.target);
+  if (event.detail.value !== 'true') {
+    return;
+  }
+  /** @type {HTMLElement} */
+  const bottomnavElement = (event.currentTarget);
+  iterateArrayLike(bottomnavElement.querySelectorAll('[role="tab"]'), (item) => {
+    if (item !== itemElement) {
+      BottomNavItem.setSelected(item, false);
+    }
+  });
 }
 
-
 /**
  * @param {Element} bottomnavElement
  * @return {void}
  */
-export function removeSelection(bottomnavElement) {
-  return iterateArrayLike(
-    bottomnavElement.querySelectorAll('mdw-bottomnav__item[aria-selected="true"]'),
-    item => item.setAttribute('aria-selected', 'false')
-  );
+export function attach(bottomnavElement) {
+  setupARIA(bottomnavElement);
+  /** @type {Element} */
+  let selectedItem;
+  const items = bottomnavElement.getElementsByClassName('mdw-bottomnav__item');
+
+  iterateArrayLike(items, (item) => {
+    BottomNavItem.attach(item);
+    if (!selectedItem && item.getAttribute('aria-selected') === 'true') {
+      selectedItem = item;
+    }
+  });
+  if (!selectedItem) {
+    selectedItem = items[0];
+  }
+  if (selectedItem) {
+    BottomNavItem.setSelected(selectedItem, true, true);
+  }
+  RovingTabIndex.setupTabIndexes(bottomnavElement.querySelectorAll('[role="tab"]'));
+  bottomnavElement.addEventListener(BottomNavItem.SELECTED_CHANGE_EVENT, onSelectedChangeEvent);
+  bottomnavElement.addEventListener(Keyboard.FORWARD_ARROW_KEY, onForwardsRequested);
+  bottomnavElement.addEventListener(Keyboard.BACK_ARROW_KEY, onBackwardsRequested);
+  bottomnavElement.addEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
 }
 
 /**
- * @param {Event} event
+ * @param {Element} bottomnavElement
  * @return {void}
  */
-export function onSelectedChangedEvent(event) {
-  /** @type {HTMLElement} */
-  const itemElement = (event.target);
-  if (itemElement.getAttribute('aria-selected') !== 'true') {
-    return;
-  }
-  /** @type {HTMLElement} */
-  const bottomnavElement = (event.currentTarget);
-  iterateArrayLike(bottomnavElement.querySelectorAll('[role="tab"]'), (item) => {
-    if (item !== itemElement) {
-      item.setAttribute('aria-selected', 'false');
-    }
-  });
+export function detach(bottomnavElement) {
+  bottomnavElement.removeEventListener(BottomNavItem.SELECTED_CHANGE_EVENT, onSelectedChangeEvent);
+  bottomnavElement.removeEventListener(Keyboard.FORWARD_ARROW_KEY, onForwardsRequested);
+  bottomnavElement.removeEventListener(Keyboard.BACK_ARROW_KEY, onBackwardsRequested);
+  bottomnavElement.removeEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
+  iterateArrayLike(bottomnavElement.getElementsByClassName('mdw-bottomnav__item'), BottomNavItem.detach);
 }

package/components/bottomnav/index.scss

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

package/components/bottomnav/item.js

@@ -1,36 +1,33 @@
 // https://www.w3.org/TR/wai-aria-1.1/#tab
 
-import * as AriaTab from '../../core/aria/tab';
-import { iterateArrayLike } from '../../core/dom';
-import * as Overlay from '../../core/overlay/index';
-import * as Ripple from '../../core/ripple/index';
+import * as AriaTab from '../../core/aria/tab.js';
+import { iterateArrayLike } from '../../core/dom.js';
+import * as Overlay from '../../core/overlay/index.js';
+import * as Ripple from '../../core/ripple/index.js';
+
+export const SELECTED_CHANGE_EVENT = 'mdw:bottomnavitem-selectedchange';
 
 /**
  * @param {Element} element
- * @return {void}
+ * @param {string|boolean} value
+ * @param {boolean} [dispatchEvent=true]
+ * @return {boolean} successful
  */
-export function attach(element) {
-  element.classList.add('mdw-overlay');
-  if (!element.hasAttribute('mdw-overlay-off')) {
-    element.setAttribute('mdw-overlay-off', 'selected');
-  }
-  if (!element.hasAttribute('mdw-overlay-default')) {
-    element.setAttribute('mdw-overlay-default', 'medium');
-  }
-  Overlay.attach(element);
-
-  element.classList.add('mdw-ripple');
-  Ripple.attach(element);
-
-  attachCore(element);
+export function setSelected(element, value, dispatchEvent = true) {
+  return AriaTab.setSelected(element, value, dispatchEvent ? SELECTED_CHANGE_EVENT : null);
 }
 
 /**
- * @param {Element} element
+ * @param {MouseEvent} event
  * @return {void}
  */
-export function attachCore(element) {
-  attachAria(element);
+function onClick(event) {
+  /** @type {HTMLElement} */
+  const element = (event.currentTarget);
+  if (element.getAttribute('aria-disabled') === 'true') {
+    return;
+  }
+  setSelected(element, true);
 }
 
 /**
@@ -40,15 +37,36 @@ export function attachCore(element) {
 export function attachAria(element) {
   AriaTab.attach(element);
   iterateArrayLike(element.getElementsByClassName('mdw-bottomnav__icon'),
-    el => el.setAttribute('aria-hidden', 'true'));
+    (el) => el.setAttribute('aria-hidden', 'true'));
 }
 
 /**
  * @param {Element} element
  * @return {void}
  */
-export function detachAria(element) {
-  AriaTab.attach(element);
+export function attachCore(element) {
+  attachAria(element);
+  element.addEventListener('click', onClick);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attach(element) {
+  element.classList.add('mdw-overlay');
+  if (!element.hasAttribute('mdw-overlay-off')) {
+    element.setAttribute('mdw-overlay-off', 'selected activated');
+  }
+  if (!element.hasAttribute('mdw-overlay-default')) {
+    element.setAttribute('mdw-overlay-default', 'medium');
+  }
+  Overlay.attach(element);
+
+  element.classList.add('mdw-ripple');
+  Ripple.attach(element);
+
+  attachCore(element);
 }
 
 /**
@@ -57,6 +75,7 @@ export function detachAria(element) {
  */
 export function detachCore(element) {
   AriaTab.detach(element);
+  element.removeEventListener('click', onClick);
 }
 
 /**

package/components/button/README.md

@@ -11,34 +11,36 @@
 .mdw-button(mdw-raised)
 ```
 
-## Colored
+## Colored (Primary)
 ```
-.mdw-button.mdw-theme(mdw-ink="primary A200")
+.mdw-button.mdw-theme(mdw-ink="primary contrast")
 ```
 
 ## Colored (Custom)
 ```
-.mdw-button.mdw-theme(mdw-ink="green A100")
+.mdw-button.mdw-theme(mdw-ink="green contrast")
 ```
 
-## Colored (Dark Themed)
+## Filled Light
 ```
-.mdw-button.mdw-theme(mdw-ink="primary A200" mdw-dark)
+.mdw-button.mdw-theme(mdw-surface="primary 100" mdw-light)
 ```
 
-## Filled
+## Filled Dark
 ```
-.mdw-button.mdw-theme(mdw-surface="primary 500")
+.mdw-button.mdw-theme(mdw-surface="secondary 600" mdw-dark)
 ```
 
-## Filled (Custom Tone)
+## Toggled
 ```
-.mdw-button.mdw-theme(mdw-surface="secondary 500")
+.mdw-button(aria-pressed="true")
 ```
 
-## Filled (Custom Tone)
+## Disabled
 ```
-.mdw-button(disabled)
+a.mdw-button(disabled)
+button.mdw-button(disabled)
+.mdw-button(aria-disabled="true")
 ```
 
 ## Icon Button
@@ -49,9 +51,7 @@
 # Javascript
 
 ```
-  [...document.getElementsByClassName("mdw-button")].forEach((element) => {
-    Button.attach(element);  
-  });
+  [...document.getElementsByClassName("mdw-button")].forEach(Button.attach);
 ```
 
 # Notes

package/components/button/_spec.scss

@@ -1,15 +1,16 @@
 // https://material.io/guidelines/components/buttons.html#buttons-raised-buttons
 // https://material.io/guidelines/style/icons.html#
 
-@import '../../core/_breakpoint.scss';
-@import '../../core/_elevation.scss';
-@import '../../core/_motion.scss';
-@import '../../core/_platform.scss';
-@import '../../core/_type.scss';
+@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;
 
-$mdw-button__external-padding: dp(8) !default;
-$mdw-button__minimum-click-target: dp(48) !default;
-$mdw-button__outline-size: dp(1) !default;
+$externalPadding: dp(8) !default;
+$minimumClickTarget: dp(48) !default;
+$outlineSize: dp(1) !default;
 
 .mdw-button {
   display: inline-flex;
@@ -35,9 +36,9 @@ $mdw-button__outline-size: dp(1) !default;
   -webkit-user-select: none;
   user-select: none;
 
-  transition-duration: $mdw-motion__shape-change-duration, $mdw-motion__simple-duration;
+  transition-duration: motion.$shapeChangeDuration, motion.$simpleDuration;
   transition-property: box-shadow, background-color, color;
-  transition-timing-function: $mdw-motion__standard-easing;
+  transition-timing-function: motion.$standardEasing;
 
   z-index: 0;
 
@@ -63,24 +64,24 @@ $mdw-button__outline-size: dp(1) !default;
 
   // Don't override font icon properties
   &:not([mdw-icon]) {
-    @include type-rules('button');
+    @include type.addRules('button');
     font-family: inherit;
     word-spacing: normal;
   }
 
   &[mdw-border-ink] {
     border-style: solid;
-    border-width: $mdw-button__outline-size;
+    border-width: $outlineSize;
 
     &::before,
     & > .mdw-ripple {
       box-sizing: content-box;
       height: 100%;
       width: 100%;
-      margin-top: -$mdw-button__outline-size;
-      margin-left: -$mdw-button__outline-size;
-      padding-right: 2 * $mdw-button__outline-size;
-      padding-bottom: 2 * $mdw-button__outline-size;
+      margin-top: -$outlineSize;
+      margin-left: -$outlineSize;
+      padding-right: 2 * $outlineSize;
+      padding-bottom: 2 * $outlineSize;
     }
   }
 
@@ -125,15 +126,15 @@ $mdw-button__outline-size: dp(1) !default;
 }
 
 // Extended touch target
-@mixin mdw-button__touch-target {
-  @include mdw-platform__has-touch-support {
+@mixin touchTarget {
+  @include platform.ifHasTouch() {
     content: "";
 
     position: absolute;
     top: 50%;
     left: 0;
     
-    height: $mdw-button__minimum-click-target;
+    height: $minimumClickTarget;
     width: 100%;
 
     transform: translateY(-50%);
@@ -142,10 +143,10 @@ $mdw-button__outline-size: dp(1) !default;
 
 // Raised
 .mdw-button[mdw-raised] {
-  box-shadow: mdwElevation(2);
+  box-shadow: elevation.boxShadow(2);
 
   &:active {
-    box-shadow: mdwElevation(8);
+    box-shadow: elevation.boxShadow(8);
   }
 }
 
@@ -155,6 +156,6 @@ $mdw-button__outline-size: dp(1) !default;
 
   &,
   &[mdw-raised] {
-    box-shadow: mdwElevation(0);
+    box-shadow: elevation.boxShadow(0);
   }
 }

package/components/button/_theme.scss

@@ -2,33 +2,49 @@
 // https://material.io/design/components/buttons.html
 // https://material.io/design/iconography/system-icons.html#color
 
-@import '../../core/theme/index.scss';
+@use '../../core/theme/_mixins.scss' as theme;
 
-$mdw-button__theme-values: (
-  inactive-color:                $mdw-theme__inactive-ink,
-  disabled-text-color:           $mdw-theme__default-ink,
-  disabled-background-color:     $mdw-theme__inactive-ink,
-  outline-color:                 $mdw-theme__divider-ink,
+$themeValues: (
+  default-text-rgb:                    theme.$foreground,
+  disabled-text-rgb:                   theme.$foreground,
+  disabled-surface-text-rgb:           theme.$foreground,
+  disabled-surface-background-rgb:     theme.$foreground,
+  default-text-alpha:                  theme.$high-opacity,
+  disabled-text-alpha:                 theme.$inactive-opacity,
+  disabled-surface-text-alpha:         theme.$high-opacity,
+  disabled-surface-background-alpha:   theme.$inactive-opacity,
 ) !default;
 
-@function mdwButtonThemeValue($key, $type) {
-  @return mdwGetThemeValue('button', $mdw-button__theme-values, $key, $type);
+@function getThemeValue($key, $type) {
+  @return theme.getThemeValue('button', $themeValues, $key, $type);
 }
 
-@mixin mdw-button__theme-rules($type: 'var') {
+@mixin addThemeRules($type: 'var') {
   .mdw-button {
-    &[disabled],
-    &[aria-disabled="true"] {
+    &:disabled:not([aria-disabled="true"]) {
+      color: RGBA(getThemeValue("disabled-text-rgb", $type), getThemeValue("disabled-text-alpha", $type));
+
+      &.mdw-overlay::before {
+        display: none;
+      }
+    }
+
+    &.mdw-overlay[aria-disabled="true"] {
+      // Sets foreground to default ink color
+      color: RGBA(getThemeValue("default-text-rgb", $type), getThemeValue("default-text-alpha", $type));
+
       &[mdw-surface] {
-        background-color: mdwButtonThemeValue("disabled-background-color", $type);
-        color: mdwButtonThemeValue("disabled-text-color", $type);
+        background-color: RGBA(getThemeValue("disabled-surface-background-rgb", $type), getThemeValue("disabled-surface-background-alpha", $type));
+        color: RGBA(getThemeValue("disabled-surface-text-rgb", $type), getThemeValue("disabled-surface-text-alpha", $type));
 
         // Disabled filled buttons use parent's theming context
         @if ($type == 'var') {
           &[mdw-dark],
           &[mdw-light] {
-            --button__disabled-text-color: inherit;
-            --button__disabled-background-color: inherit;
+            --mdw-button__disabled-surface-text-rgb: inherit;
+            --mdw-button__disabled-surface-text-opacity: inherit;
+            --mdw-button__disabled-surface-background-rgb: inherit;
+            --mdw-button__disabled-surface-background-opacity: inherit;
           }
         }
       }
@@ -37,13 +53,13 @@ $mdw-button__theme-values: (
 }
 
 
-@include mdw-theme__add-component-fallback-rules('light') {
-  @include mdw-button__theme-rules('light');
+@include theme.addComponentFallbackRules('light') {
+  @include addThemeRules('light');
 }
-@include mdw-theme__add-component-fallback-rules('dark') {
-  @include mdw-button__theme-rules('dark');
+@include theme.addComponentFallbackRules('dark') {
+  @include addThemeRules('dark');
 }
 
-@include mdw-theme__add-component-variable-rules('button', $mdw-button__theme-values) {
-  @include mdw-button__theme-rules();
+@include theme.addComponentCSSVariableRules('button', $themeValues) {
+  @include addThemeRules();
 }

package/components/button/index.eta

@@ -0,0 +1,32 @@
+<a <%~ Object.entries({
+    'class': [
+      'mdw-button',
+      it?.overlay != false ? 'mdw-overlay' : '',
+      it?.ripple != false ? 'mdw-ripple' : '',
+      it?.ink || it?.surface || it?.light || it?.dark || it?.borderInk || it?.theme ? 'mdw-theme' : '',
+      it?.class,
+    ].filter(v=>v).join(' '),
+    id: it?.id,
+    'mdw-ink': it?.ink,
+    'mdw-surface': it?.surface,
+    'mdw-border-ink': it?.borderInk,
+    'mdw-light': it?.light,
+    'mdw-dark': it?.dark,
+    'mdw-icon': it?.icon,
+    'mdw-raised': it?.raised,
+    'mdw-more-button': it?.moreButton ?? (
+      it?.icon && (it?.text === 'more_vert' || it?.body === 'more_vert') && it?.class?.split(' ').includes('material-icons')),
+    'disabled': it?.disabled && it?.disabled !== 'false',
+    'aria-disabled': it?.disabled === true ? 'true' : it?.disabled,
+    'tabindex': it?.tabindex || '0',
+    'href': it?.href,
+    ...it?.attributes,
+  }).map(([key, value]) => {
+    if (value === true) return key;
+    if (value === false || value == null) return false;
+    return `${key}="${value}"`
+  }).filter(v=>v).join(' ')-%>>
+
+  <%_~ it?.body ?? '' %><%= it?.text ?? '' _%>
+
+</a>

package/components/button/index.js

@@ -1,27 +1,27 @@
-// https://www.w3.org/TR/wai-aria-practices/#button
+/** @see https://www.w3.org/TR/wai-aria-practices/#button */
 
-import * as Ripple from '../../core/ripple/index';
-import * as Overlay from '../../core/overlay/index';
-import * as AriaButton from '../../core/aria/button';
+import * as AriaButton from '../../core/aria/button.js';
+import * as Overlay from '../../core/overlay/index.js';
+import * as Ripple from '../../core/ripple/index.js';
 
 /**
  * @param {Element} element
  * @return {void}
  */
-export function attach(element) {
-  element.classList.add('mdw-overlay');
-  Ripple.attach(element);
-  element.classList.add('mdw-ripple');
-  Overlay.attach(element);
-  attachCore(element);
+export function attachCore(element) {
+  AriaButton.attach(element);
 }
 
 /**
  * @param {Element} element
  * @return {void}
  */
-export function attachCore(element) {
-  AriaButton.attach(element);
+export function attach(element) {
+  element.classList.add('mdw-overlay');
+  Ripple.attach(element);
+  element.classList.add('mdw-ripple');
+  Overlay.attach(element);
+  attachCore(element);
 }
 
 /**

package/components/button/index.scss

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