@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/bottomnav/item.js

@@ -0,0 +1,88 @@
+// https://www.w3.org/TR/wai-aria-1.1/#tab
+
+import * as AriaTab from '../../core/aria/tab.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) {
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
+  if (element.getAttribute('aria-disabled') === 'true') {
+    return;
+  }
+  setSelected(element, true);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attachAria(element) {
+  AriaTab.attach(element);
+  for (const el of element.getElementsByClassName('mdw-bottomnav__icon')) {
+    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

@@ -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);
-  });
+  for (const el of document.getElementsByClassName("mdw-button")) Button.attach(el);
 ```
 
 # 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,162 @@
+// https://material.io/guidelines/components/buttons.html#buttons-raised-buttons
+// https://material.io/guidelines/style/icons.html#
+
+@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;
+
+:root {
+  --mdw-button__click-target-size: 48px;
+  --mdw-button__outline-size: 1px;
+}
+
+.mdw-button {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  box-sizing: border-box;
+  block-size: 36px;
+  min-inline-size: 64px;
+  margin: 0 8px;
+  border: none;
+  padding: 0 8px;
+
+  -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: 4px;
+  color: inherit;
+
+  text-align: center;
+  text-decoration: none;
+
+  // Remove Firefox inner
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &[mdw-border-ink],
+  &[mdw-surface] {
+    padding: 0 16px;
+  }
+
+  &: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: var(--mdw-button__outline-size);
+
+    &::before,
+    & > .mdw-ripple {
+      box-sizing: content-box;
+      block-size: 100%;
+      inline-size: 100%;
+      margin-block-start: calc(-1 * var(--mdw-button__outline-size));
+      margin-inline-start: calc(-1 * var(--mdw-button__outline-size));
+      padding-block-end: calc(2 * var(--mdw-button__outline-size));
+      padding-inline-end: calc(2 * var(--mdw-button__outline-size));
+    }
+  }
+
+  // Icon properties
+
+  &[mdw-icon] {
+    block-size: 40px;
+    min-inline-size: 40px;
+    padding: 8px;
+
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+
+    border-radius: 50%;
+
+    font-size: 24px; // Internal padding provided by font
+  }
+
+  &[mdw-image] {
+    block-size: 24px;
+    min-inline-size: 24px;
+    margin: 0;
+    padding: 0;
+
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+
+    border-radius: 50%;
+
+    & > {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+
+      block-size: 100%;
+      inline-size: auto;
+    }
+  }
+}
+
+// Extended touch target
+@mixin touchTarget {
+  @include platform.ifHasTouch() {
+    content: "";
+
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 0;
+
+    block-size: var(--mdw-button__click-target-size);
+    inline-size: 100%;
+
+    transform: translateY(-50%);
+  }
+}
+
+// Raised
+
+.mdw-button[mdw-raised]:not([disabled]):not([aria-disabled="true"]) {
+  @include elevation.boxShadowMixin(2);
+
+  &:active {
+    @include elevation.boxShadowMixin(8);
+  }
+}
+
+// Disabled
+.mdw-button[disabled],
+.mdw-button[aria-disabled="true"] {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  cursor: not-allowed;
+}

package/components/button/_theme.scss

@@ -0,0 +1,42 @@
+// https://material.io/design/interaction/states.html
+// https://material.io/design/components/buttons.html
+// https://material.io/design/iconography/system-icons.html#color
+
+.mdw-theme {
+  --mdw-button__default-text-rgb: var(--mdw-ink-default);
+  --mdw-button__disabled-text-rgb: var(--mdw-ink-default);
+  --mdw-button__disabled-surface-text-rgb: var(--mdw-ink-default);
+  --mdw-button__disabled-surface-background-rgb: var(--mdw-ink-default);
+  --mdw-button__default-text-opacity: var(--mdw-high-opacity);
+  --mdw-button__disabled-text-opacity: var(--mdw-inactive-opacity);
+  --mdw-button__disabled-surface-text-opacity: var(--mdw-high-opacity);
+  --mdw-button__disabled-surface-background-opacity: var(--mdw-inactive-opacity);
+}
+
+.mdw-button {
+  &:disabled:not([aria-disabled="true"]) {
+    color: RGBA(var(--mdw-button__disabled-text-rgb), var(--mdw-button__disabled-text-opacity));
+
+    &.mdw-overlay::before {
+      display: none;
+    }
+  }
+
+  &.mdw-overlay[aria-disabled="true"] {
+    // Sets foreground to default ink color
+    color: RGBA(var(--mdw-button__default-text-rgb), var(--mdw-button__default-text-opacity));
+
+    &[mdw-surface] {
+      background-color: RGBA(var(--mdw-button__disabled-surface-background-rgb), var(--mdw-button__disabled-surface-background-opacity));
+      color: RGBA(var(--mdw-button__disabled-surface-text-rgb), var(--mdw-button__disabled-surface-text-opacity));
+
+      &[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;
+      }
+    }
+  }
+}

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,54 +1,43 @@
+/** @see https://www.w3.org/TR/wai-aria-practices/#button */
 
-// 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';
 
-import { Ripple } from '../ripple/index';
-
-class Button {
-  /**
-   * @param {Element} element
-   * @return {void}
-   */
-  static attach(element) {
-    element.setAttribute('mdw-js', '');
-    if (!element.hasAttribute('mdw-icon')) {
-      Ripple.attach(element);
-    }
-    if (element instanceof HTMLButtonElement === false
-      && element instanceof HTMLInputElement === false) {
-      element.addEventListener('keydown', Button.onKeyDown);
-    }
-  }
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attachCore(element) {
+  AriaButton.attach(element);
+}
 
-  /**
-   * @param {Element} element
-   * @return {void}
-   */
-  static detach(element) {
-    element.removeEventListener('keydown', Button.onKeyDown);
-    element.removeAttribute('mdw-js');
-    Ripple.detach(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 {KeyboardEvent} event
-   * @return {void}
-   */
-  static onKeyDown(event) {
-    if (event.key !== 'Enter' && event.key !== 'Spacebar' && event.key !== ' ') {
-      return;
-    }
-    const buttonElement = event.currentTarget;
-    if (!buttonElement) {
-      return;
-    }
-    event.stopPropagation();
-    event.preventDefault();
-    const newEvent = document.createEvent('Event');
-    newEvent.initEvent('click', true, true);
-    buttonElement.dispatchEvent(newEvent);
-  }
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detachCore(element) {
+  AriaButton.detach(element);
 }
 
-export {
-  Button,
-};
+/**
+ * @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';