@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/bottomnav/index.js

@@ -0,0 +1,122 @@
+// https://www.w3.org/TR/wai-aria-practices/#tabpanel
+
+import * as Keyboard from '../../core/aria/keyboard.js';
+import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
+import { iterateArrayLike } from '../../core/dom.js';
+
+import * as BottomNavItem from './item.js';
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onTabIndexZeroed(event) {
+  event.stopPropagation();
+  /** @type {HTMLElement} */
+  const bottomnavElement = (event.currentTarget);
+  /** @type {HTMLElement} */
+  const currentItem = (event.target);
+  RovingTabIndex.removeTabIndex(bottomnavElement.querySelectorAll('[role="tab"]'), [currentItem]);
+}
+
+/**
+ * @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);
+  RovingTabIndex.selectNext(bottomnavElement.querySelectorAll('[role="tab"]'));
+}
+
+/**
+ * @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);
+  RovingTabIndex.selectPrevious(bottomnavElement.querySelectorAll('[role="tab"]'));
+}
+
+/**
+ * @param {Element} bottomnavElement
+ * @return {void}
+ */
+export function setupARIA(bottomnavElement) {
+  bottomnavElement.setAttribute('role', 'tablist');
+  bottomnavElement.setAttribute('aria-multiselectable', 'false');
+  bottomnavElement.setAttribute('aria-orientation', 'horizontal');
+}
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+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 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 {Element} bottomnavElement
+ * @return {void}
+ */
+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

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

package/components/bottomnav/item.js

@@ -0,0 +1,89 @@
+// https://www.w3.org/TR/wai-aria-1.1/#tab
+
+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
+ * @param {string|boolean} value
+ * @param {boolean} [dispatchEvent=true]
+ * @return {boolean} successful
+ */
+export function setSelected(element, value, dispatchEvent = true) {
+  return AriaTab.setSelected(element, value, dispatchEvent ? SELECTED_CHANGE_EVENT : null);
+}
+
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+function onClick(event) {
+  /** @type {HTMLElement} */
+  const element = (event.currentTarget);
+  if (element.getAttribute('aria-disabled') === 'true') {
+    return;
+  }
+  setSelected(element, true);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attachAria(element) {
+  AriaTab.attach(element);
+  iterateArrayLike(element.getElementsByClassName('mdw-bottomnav__icon'),
+    (el) => el.setAttribute('aria-hidden', 'true'));
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+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);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detachCore(element) {
+  AriaTab.detach(element);
+  element.removeEventListener('click', onClick);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detach(element) {
+  detachCore(element);
+  Ripple.detach(element);
+  Overlay.detach(element);
+}

package/components/{core/button → button}/README.md

@@ -11,34 +11,36 @@
 .mdw-button(mdw-raised)
 ```
 
-## Always Raised
+## Colored (Primary)
 ```
-.mdw-button(mdw-raised="always")
+.mdw-button.mdw-theme(mdw-ink="primary contrast")
 ```
 
-## Colored
+## Colored (Custom)
 ```
-.mdw-button(mdw-theme-color="primary")
+.mdw-button.mdw-theme(mdw-ink="green contrast")
 ```
 
-## Colored (Custom Tone)
+## Filled Light
 ```
-.mdw-button(mdw-theme-color="accent-A100")
+.mdw-button.mdw-theme(mdw-surface="primary 100" mdw-light)
 ```
 
-## Filled
+## Filled Dark
 ```
-.mdw-button(mdw-theme-fill="primary")
+.mdw-button.mdw-theme(mdw-surface="secondary 600" mdw-dark)
 ```
 
-## Filled (Custom Tone)
+## Toggled
 ```
-.mdw-button(mdw-theme-fill="accent-A400")
+.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
@@ -46,22 +48,14 @@
 .mdw-button(mdw-icon).material-icons favorite
 ```
 
-## Focus Ring
-```
-.mdw-button
-  .mdw-button__focus-ring
-```
-
 # Javascript
 
 ```
-  document.querySelectorAll(".mdw-button").forEach((element) => {
-    new mdw.Button(element);
-  });
+  [...document.getElementsByClassName("mdw-button")].forEach(Button.attach);
 ```
 
 # Notes
 
 The click ripple aftereffect is centered when using keyboard or when using only CSS. Initializing the element with Javascript will ensure the ripple will spawn from the cursor position.
 
-Use of `HTMLElementButton` or `HTMLAnchorElement` is supported, but note that using interactive content descendents violates the HTML specifications. Therefore, some browsers may not apply interactive elements such as ripples or focus rings.
+Use of `HTMLElementButton` or `HTMLAnchorElement` is supported, but note that using interactive content descendents violates the HTML specifications. Therefore, some browsers may not apply interactive elements such as ripples.

package/components/button/_spec.scss

@@ -0,0 +1,161 @@
+// https://material.io/guidelines/components/buttons.html#buttons-raised-buttons
+// https://material.io/guidelines/style/icons.html#
+
+@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;
+
+$externalPadding: dp(8) !default;
+$minimumClickTarget: dp(48) !default;
+$outlineSize: dp(1) !default;
+
+.mdw-button {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  box-sizing: border-box;
+  height: dp(36);
+  min-width: dp(64);
+  margin: 0 dp(8);
+  border: none;
+  padding: 0 dp(8);
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  transition-duration: motion.$shapeChangeDuration, motion.$simpleDuration;
+  transition-property: box-shadow, background-color, color;
+  transition-timing-function: motion.$standardEasing;
+
+  z-index: 0;
+
+  border-radius: dp(4);
+  color: inherit;
+
+  text-align: center;
+  text-decoration: none;
+  
+  // Remove Firefox inner
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &[mdw-border-ink],
+  &[mdw-surface] {
+    padding: 0 dp(16);
+  }
+
+  &:not([mdw-surface]) {
+    background-color: transparent;
+  }
+
+  // Don't override font icon properties
+  &:not([mdw-icon]) {
+    @include type.addRules('button');
+    font-family: inherit;
+    word-spacing: normal;
+  }
+
+  &[mdw-border-ink] {
+    border-style: solid;
+    border-width: $outlineSize;
+
+    &::before,
+    & > .mdw-ripple {
+      box-sizing: content-box;
+      height: 100%;
+      width: 100%;
+      margin-top: -$outlineSize;
+      margin-left: -$outlineSize;
+      padding-right: 2 * $outlineSize;
+      padding-bottom: 2 * $outlineSize;
+    }
+  }
+
+  // Icon properties
+  &[mdw-icon] {
+    height: dp(40);
+    min-width: dp(40);
+    padding: dp(8);
+
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+
+    border-radius: 50%;
+
+    font-size: dp(24); // Internal padding provided by font
+  }
+
+  &[mdw-image] {
+    height: dp(24);
+    min-width: dp(24);
+    margin: 0;
+    padding: 0;
+
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+
+    border-radius: 50%;
+
+    & > {
+      position: absolute;
+      top: 0;
+      left: 0;
+      
+      height: 100%;
+      width: auto;
+    }
+  }
+}
+
+// Extended touch target
+@mixin touchTarget {
+  @include platform.ifHasTouch() {
+    content: "";
+
+    position: absolute;
+    top: 50%;
+    left: 0;
+    
+    height: $minimumClickTarget;
+    width: 100%;
+
+    transform: translateY(-50%);
+  }
+}
+
+// Raised
+.mdw-button[mdw-raised] {
+  box-shadow: elevation.boxShadow(2);
+
+  &:active {
+    box-shadow: elevation.boxShadow(8);
+  }
+}
+
+.mdw-button[disabled],
+.mdw-button[aria-disabled="true"] {
+  cursor: not-allowed;
+
+  &,
+  &[mdw-raised] {
+    box-shadow: elevation.boxShadow(0);
+  }
+}

package/components/button/_theme.scss

@@ -0,0 +1,65 @@
+// https://material.io/design/interaction/states.html
+// https://material.io/design/components/buttons.html
+// https://material.io/design/iconography/system-icons.html#color
+
+@use '../../core/theme/_mixins.scss' as theme;
+
+$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 getThemeValue($key, $type) {
+  @return theme.getThemeValue('button', $themeValues, $key, $type);
+}
+
+@mixin addThemeRules($type: 'var') {
+  .mdw-button {
+    &: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: 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] {
+            --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;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+@include theme.addComponentFallbackRules('light') {
+  @include addThemeRules('light');
+}
+@include theme.addComponentFallbackRules('dark') {
+  @include addThemeRules('dark');
+}
+
+@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

@@ -0,0 +1,43 @@
+/** @see https://www.w3.org/TR/wai-aria-practices/#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 attachCore(element) {
+  AriaButton.attach(element);
+}
+
+/**
+ * @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);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detachCore(element) {
+  AriaButton.detach(element);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detach(element) {
+  detachCore(element);
+  Ripple.detach(element);
+  Overlay.detach(element);
+}

package/components/button/index.pug

@@ -0,0 +1,18 @@
+mixin mdwButton(options={})
+  a.mdw-button(class=([
+  options.overlay != false ? 'mdw-overlay' : '',
+  options.ripple != false ? 'mdw-ripple' : '',
+  options.ink || options.surface || options.light || options.dark || options.borderInk ? 'mdw-theme' : '',
+  ].filter(v=>v).join(' '))
+  mdw-ink=(options.ink)
+  mdw-surface=(options.surface)
+  mdw-border-ink=(options.borderInk === true ? '' : options.borderInk)
+  mdw-light=(options.light ? '' : false)
+  mdw-dark=(options.dark ? '' : false)
+  mdw-icon=(options.icon ? '' : false)
+  mdw-raised=(options.raised ? '' : false)
+  disabled=(options.disabled ? '' : false)
+  aria-disabled=(options.disabled ? 'true' : false)
+  tabindex=(options.tabindex == null ? '0' : options.tabindex)
+  )&attributes(attributes)
+    block

package/components/button/index.scss

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