@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/bottomnav/index.js

@@ -1,122 +0,0 @@
-// 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

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

package/components/bottomnav/item.js

@@ -1,89 +0,0 @@
-// 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/button/README.md

@@ -1,61 +0,0 @@
-# Syntax
-
-
-## Flat
-```
-.mdw-button
-```
-
-## Raised
-```
-.mdw-button(mdw-raised)
-```
-
-## Colored (Primary)
-```
-.mdw-button.mdw-theme(mdw-ink="primary contrast")
-```
-
-## Colored (Custom)
-```
-.mdw-button.mdw-theme(mdw-ink="green contrast")
-```
-
-## Filled Light
-```
-.mdw-button.mdw-theme(mdw-surface="primary 100" mdw-light)
-```
-
-## Filled Dark
-```
-.mdw-button.mdw-theme(mdw-surface="secondary 600" mdw-dark)
-```
-
-## Toggled
-```
-.mdw-button(aria-pressed="true")
-```
-
-## Disabled
-```
-a.mdw-button(disabled)
-button.mdw-button(disabled)
-.mdw-button(aria-disabled="true")
-```
-
-## Icon Button
-```
-.mdw-button(mdw-icon).material-icons favorite
-```
-
-# Javascript
-
-```
-  [...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.

package/components/button/_spec.scss

@@ -1,161 +0,0 @@
-// 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

@@ -1,65 +0,0 @@
-// 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

@@ -1,32 +0,0 @@
-<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,43 +0,0 @@
-/** @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

@@ -1,18 +0,0 @@
-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

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