@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/appbar/_spec.scss

@@ -0,0 +1,165 @@
+// https://material.io/guidelines/layout/structure.html#structure-app-bar
+// https://material.io/archive/guidelines/components/toolbars.html
+
+@use '../../core/_breakpoint.scss' as breakpoint;
+@use '../../core/_length.scss' as *;
+@use '../../core/_type.scss' as type;
+
+:root {
+  --mdw-appbar__min-block-size: 64px;
+  --mdw-appbar__min-block-size__dense: 48px;
+  --mdw-appbar__min-block-size__prominent: 128px;
+  --mdw-appbar__min-block-size__prominent__dense: 96px;
+  --mdw-appbar__min-block-size__mobile: 56px;
+  --mdw-appbar__min-block-size__mobile__landscape: 48px;
+  --mdw-appbar__content-margin-inline: 24px;
+  --mdw-appbar__start-margin-inline-start: 8px;
+  @include breakpoint.has16DPMargin() {
+    --mdw-appbar__content-margin-inline: 16px;
+    --mdw-appbar__start-margin-inline-start: 0;
+  }
+  @include breakpoint.maxTabletDevice {
+    // No high density on mobile
+    --mdw-appbar__min-block-size: var(--mdw-appbar__min-block-size__mobile);
+    --mdw-appbar__min-block-size__dense: var(--mdw-appbar__min-block-size__mobile);
+    --mdw-appbar__min-block-size__prominent__dense: var(--mdw-appbar__min-block-size__prominent);
+  }
+  @include breakpoint.isMobileDeviceLandscape {
+    --mdw-appbar__min-block-size: var(--mdw-appbar__min-block-size__mobile__landscape);
+    --mdw-appbar__min-block-size__dense: var(--mdw-appbar__min-block-size__mobile__landscape);
+  }
+  --mdw-appbar__icon-min-block-size: 40px;
+}
+
+.mdw-appbar {
+  display: grid;
+
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: auto auto;
+
+  min-block-size: var(--mdw-appbar__min-block-size);
+
+  transition-duration: inherit;
+  transition-property: min-block-size;
+  transition-timing-function: inherit;
+
+  z-index: 1;
+
+  &[mdw-centered] {
+    grid-template-columns: minmax(auto, 1fr) minmax(0, auto) minmax(auto, 1fr);
+  }
+
+  &[mdw-dense] {
+    --mdw-appbar__min-block-size: var(--mdw-appbar__min-block-size__dense);
+  }
+}
+
+.mdw-appbar__action {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+
+  min-block-size: var(--mdw-appbar__min-block-size);
+
+  transition-duration: inherit;
+  transition-property: min-block-size;
+  transition-timing-function: inherit;
+
+  z-index: 1;
+}
+
+.mdw-appbar__content {
+  display: flex;
+  flex-direction: column;
+
+  grid-column: 1 / span 3;
+  grid-row: 2;
+
+  margin-inline: var(--mdw-appbar__content-margin-inline);
+  padding-inline-start: 56px;
+}
+
+.mdw-appbar__title {
+  display: flex;
+  align-items: center;
+
+  align-self: center;
+
+  grid-column: 2;
+  grid-row: 1 / span 2;
+
+  overflow: hidden;
+
+  min-block-size: auto;
+
+  block-size: auto;
+  margin: 0 16px;
+
+  transition-duration: inherit;
+  transition-property: font, letter-spacing, margin-block-size;
+  transition-timing-function: inherit;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  @include type.addRules('h6');
+
+  // TODO: Use CSS Variables instead of nesting
+  .mdw-appbar[mdw-prominent] & {
+    min-block-size: var(--mdw-appbar__min-block-size__prominent);
+
+    white-space: normal;
+    @include type.addRules('h5');
+  }
+
+  .mdw-appbar[mdw-prominent][mdw-dense] & {
+    min-block-size: var(--mdw-appbar__min-block-size__prominent__dense);
+  }
+
+  &[mdw-custom] {
+    margin-block-start: 0;
+
+    &::after {
+      display: none;
+    }
+  }
+}
+
+.mdw-appbar__start {
+  grid-column: 1;
+
+  margin-inline-start: var(--mdw-appbar__start-margin-inline-start);
+
+  padding-inline: 8px;
+}
+
+.mdw-appbar__end {
+  grid-column: 3;
+  justify-content: flex-end;
+
+  margin-inline-end: -12px;
+  padding-inline-end: var(--mdw-appbar__content-margin-inline);
+}
+
+.mdw-appbar__start,
+.mdw-appbar__end {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  grid-row: 1/1;
+
+  min-block-size: inherit;
+
+  transition-property: margin-block-start;
+}
+
+.mdw-appbar__start .mdw-button {
+  margin: 0;
+}
+
+.mdw-appbar__end .mdw-button {
+  margin: 0 4px;
+
+  &[mdw-more-button] {
+    margin-inline-end: -2px;
+  }
+}

package/components/appbar/index.scss

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

package/components/banner/_spec.scss

@@ -0,0 +1,83 @@
+// https://material.io/design/components/banners.html
+
+@use '../../core/_breakpoint.scss' as breakpoint;
+@use '../../core/_length.scss' as *;
+@use '../../core/_type.scss' as type;
+
+:root {
+  --mdw-banner__flex-wrap: nowrap;
+  --mdw-banner__text-padding-inline-start: 24px;
+  --mdw-banner__buttons-margin-inline-start: 0;
+  @include breakpoint.has16DPMargin() {
+    --mdw-banner__text-padding-inline-start: 16px;
+  }
+  @include breakpoint.minMediumWindow() {
+    --mdw-banner__flex-wrap: wrap;
+    --mdw-banner__buttons-margin-inline-start: 90px;
+  }
+}
+
+.mdw-banner {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: var(--mdw-banner__flex-wrap);
+  justify-content: center;
+
+  inline-size: 100%;
+  border-block-end: solid 1px;
+}
+
+.mdw-banner__container {
+  @include type.addRules('body-2');
+
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+
+  box-sizing: border-box;
+  max-inline-size: 960px;
+  flex: 1;
+  padding-block: 8px 7px;
+}
+
+.mdw-banner__icon {
+  position: absolute;
+
+  inset-block-start: 24px;
+  inset-inline: 16px auto;
+}
+
+.mdw-banner__text {
+  @include type.textTopToTop(12);
+  @include type.baselineToBottom(12);
+
+  flex-grow: 1;
+
+  padding-inline-start: var(--mdw-banner__text-padding-inline-start);
+
+  white-space: pre-line;
+
+  .mdw-banner__icon ~ & {
+    margin-inline: 56px 0; // 40 + 16
+  }
+}
+
+.mdw-banner__buttons {
+  display: flex;
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  max-inline-size: 100%;
+  flex: none;
+  margin-inline-start: var(--mdw-banner__buttons-margin-inline-start);
+
+  .mdw-button {
+    margin-inline: 0 8px;
+
+    text-align: end;
+  }
+}

package/components/banner/index.scss

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

package/components/bottomnav/README.md

@@ -4,7 +4,7 @@
 ## Fixed (Primary Color)
 
 ```
-form.mdw-bottomnav(mdw-theme-color="primary")
+form.mdw-bottomnav.mdw-theme(mdw-ink="primary 500")
   label.mdw-bottomnav__item
     input.mdw-bottomnav__input(type="radio" name="bottomnav" value="recents")
     .mdw-bottomnav__icon.material-icons history
@@ -21,7 +21,7 @@ form.mdw-bottomnav(mdw-theme-color="primary")
 
 ## Fixed (Filled)
 ```
-form.mdw-bottomnav(mdw-theme-fill="primary-700")
+form.mdw-bottomnav.mdw-theme(mdw-surface="primary 700")
   label.mdw-bottomnav__item
     input.mdw-bottomnav__input(type="radio" name="bottomnav" value="recents")
     .mdw-bottomnav__icon.material-icons history
@@ -38,7 +38,7 @@ form.mdw-bottomnav(mdw-theme-fill="primary-700")
 
 ## Shifting (Primary Color)
 ```
-form.mdw-bottomnav(mdw-theme-color="primary" mdw-shifting)
+form.mdw-bottomnav.mdw-theme(mdw-ink="primary 500" mdw-shifting)
   input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="movies" id='value1')
   label.mdw-bottomnav__item(for='value1')
     .mdw-bottomnav__icon.material-icons tv
@@ -59,7 +59,7 @@ form.mdw-bottomnav(mdw-theme-color="primary" mdw-shifting)
 
 ## Shifting (Filled)
 ```
-form.mdw-bottomnav(mdw-theme-fill="primary-700" mdw-shifting)
+form.mdw-bottomnav.mdw-theme(mdw-surface="primary 700" mdw-shifting)
   input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="movies" id='value1')
   label.mdw-bottomnav__item(for='value1')
     .mdw-bottomnav__icon.material-icons tv

package/components/bottomnav/_spec.scss

@@ -0,0 +1,149 @@
+// https://material.io/design/components/bottom-navigation.html#specs
+
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_type.scss' as type;
+
+:root {
+  --mdw-bottomnav__label-opacity: 1;
+  --mdw-bottomnav__label-transform: none;
+  --mdw-bottomnav__icon-transform: #{translateY(8px)};
+}
+
+.mdw-bottomnav {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  overflow: hidden;
+
+  min-block-size: 56px;
+  inline-size: 100%;
+
+  &[mdw-shifting] {
+    .mdw-bottomnav__item:not([aria-selected="true"]) {
+      --mdw-bottomnav__label-opacity: 0;
+      --mdw-bottomnav__label-transform: #{translateY(8px)};
+      --mdw-bottomnav__icon-transform: #{translateY(16px)};
+    }
+  }
+}
+
+.mdw-bottomnav__item {
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow: visible;
+
+  min-inline-size: 80px;
+  flex: 168px;
+  flex-grow: 0;
+  // flex-shrink: 1;
+  // flex-basis: 168px;
+  margin: 0;
+  padding: 0;
+
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  z-index: 0;
+
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.mdw-bottomnav__icon {
+  display: flex;
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 50%;
+
+  margin-inline-start: -12px;
+
+  margin: 0;
+  padding: 0;
+
+  pointer-events: none;
+
+  transition-duration: motion.$shapeChangeDuration, motion.$simpleDuration;
+  transition-property: transform, color;
+  transition-timing-function: motion.$standardEasing;
+
+  transform: var(--mdw-bottomnav__icon-transform);
+
+  &:last-child {
+    // No label
+    transform: translateY(16px);
+  }
+}
+
+.mdw-bottomnav__badge {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 16px auto;
+
+  box-sizing: border-box;
+  min-block-size: 8px;
+  min-inline-size: 8px;
+  padding: 2px;
+
+  visibility: hidden;
+
+  z-index: 1;
+
+  border-radius: 8px;
+
+  font: inherit;
+
+  font-weight: type.$weightRegular;
+  font-size: 10px;
+  line-height: 12px;
+  letter-spacing: normal;
+
+  &[mdw-badge] {
+    visibility: visible;
+
+    &::before {
+      content: attr(mdw-badge);
+    }
+  }
+
+  &[data-mdw-badge] {
+    visibility: visible;
+
+    &::before {
+      content: attr(data-mdw-badge);
+    }
+  }
+}
+
+.mdw-bottomnav__label {
+  @include type.addRules('caption');
+  @include type.textTopToTop(32);
+  @include type.baselineToBottom(8);
+
+  // Overriding 12dp for baseline bottom with 8dp for oversized and textwrapped
+  // Baseline top will ensure type.baselineToBottom is 12dp for standard layouts
+
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  padding: 0 12px;
+
+  pointer-events: none;
+
+  transition-duration: motion.$shapeChangeDuration;
+  transition-property: transform, opacity, color;
+  transition-timing-function: motion.$standardEasing;
+
+  opacity: var(--mdw-bottomnav__label-opacity);
+  transform: var(--mdw-bottomnav__label-transform);
+
+  text-align: center;
+  word-break: break-all;
+  word-break: break-word;
+}

package/components/bottomnav/index.js

@@ -1,137 +1,117 @@
-import { Ripple } from '../ripple/index';
-import { findElementParentByClassName } from '../common/dom';
+// https://www.w3.org/TR/wai-aria-practices/#tabpanel
 
-class BottomnavItem {
-  /**
-   * @param {Element} bottomnavItemElement
-   * @return {void}
-   */
-  static attach(bottomnavItemElement) {
-    Ripple.attach(bottomnavItemElement);
+import * as Keyboard from '../../core/aria/keyboard.js';
+import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
+
+import * as BottomNavItem from './item.js';
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onTabIndexZeroed(event) {
+  event.stopPropagation();
+  const bottomnavElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const currentItem = /** @type {HTMLElement} */ (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();
+  const bottomnavElement = /** @type {HTMLElement} */ (event.currentTarget);
+  RovingTabIndex.selectNext(bottomnavElement.querySelectorAll('[role="tab"]'));
+}
 
-  /**
-   * @param {Element} bottomnavItemElement
-   * @return {void}
-   */
-  static detach(bottomnavItemElement) {
-    Ripple.detach(bottomnavItemElement);
+/**
+ * @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();
+  const bottomnavElement = /** @type {HTMLElement} */ (event.currentTarget);
+  RovingTabIndex.selectPrevious(bottomnavElement.querySelectorAll('[role="tab"]'));
 }
 
-class Bottomnav {
-  /**
-   * @param {Element} bottomnavElement
-   * @return {void}
-   */
-  static attach(bottomnavElement) {
-    const items = bottomnavElement.getElementsByClassName('mdw-bottomnav__item');
-    const inputs = bottomnavElement.getElementsByClassName('mdw-bottomnav__input');
+/**
+ * @param {Element} bottomnavElement
+ * @return {void}
+ */
+export function setupARIA(bottomnavElement) {
+  bottomnavElement.setAttribute('role', 'tablist');
+  bottomnavElement.setAttribute('aria-multiselectable', 'false');
+  bottomnavElement.setAttribute('aria-orientation', 'horizontal');
+}
 
-    for (let i = 0; i < items.length; i += 1) {
-      const item = items.item(i);
-      BottomnavItem.attach(item);
-      item.addEventListener('click', Bottomnav.onItemClicked);
-    }
-    for (let i = 0; i < inputs.length; i += 1) {
-      const input = inputs.item(i);
-      input.addEventListener('change', Bottomnav.onInputChanged);
-    }
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onSelectedChangeEvent(event) {
+  const itemElement = /** @type {HTMLElement} */ (event.target);
+  if (event.detail.value !== 'true') {
+    return;
   }
-
-  static detach(bottomnavElement) {
-    const items = bottomnavElement.getElementsByClassName('mdw-bottomnav__item');
-    const inputs = bottomnavElement.getElementsByClassName('mdw-bottomnav__input');
-    for (let i = 0; i < items.length; i += 1) {
-      const item = items.item(i);
-      BottomnavItem.detach(item);
-      item.removeEventListener('click', Bottomnav.onItemClicked);
-    }
-    for (let i = 0; i < inputs.length; i += 1) {
-      const input = inputs.item(i);
-      input.removeEventListener('change', Bottomnav.onInputChanged);
+  const bottomnavElement = /** @type {HTMLElement} */ (event.currentTarget);
+  for (const item of bottomnavElement.querySelectorAll('[role="tab"]')) {
+    if (item !== itemElement) {
+      BottomNavItem.setSelected(item, false);
     }
   }
+}
 
-  /**
-   * @param {Event} event
-   * @return {void}
-   */
-  static onInputChanged(event) {
-    /** @type {HTMLInputElement} */
-    const inputElement = event.target;
-    let itemElement;
-    if (inputElement.parentElement.classList.contains('mdw-bottomnav__item')) {
-      itemElement = inputElement.parentElement;
-    }
-    if (inputElement.id) {
-      itemElement = document.querySelector(`label.mdw-bottomnav__item[for="${inputElement.id}"]`);
-    }
-    if (itemElement.hasAttribute('mdw-selected') && inputElement.checked) {
-      return;
-    }
-    if (!itemElement.hasAttribute('mdw-selected') && !inputElement.checked) {
-      return;
-    }
-    const bottomnavElement = findElementParentByClassName(inputElement, 'mdw-bottomnav');
-    if (bottomnavElement) {
-      Bottomnav.removeSelection(bottomnavElement);
-    }
-    itemElement.setAttribute('mdw-selected', '');
-  }
+/**
+ * @param {Element} bottomnavElement
+ * @return {void}
+ */
+export function attach(bottomnavElement) {
+  setupARIA(bottomnavElement);
+  /** @type {?Element} */
+  let selectedItem = null;
+  const items = bottomnavElement.getElementsByClassName('mdw-bottomnav__item');
 
-  /**
-   * @param {Element} bottomnavElement
-   * @return {boolean} changed
-   */
-  static removeSelection(bottomnavElement) {
-    const items = bottomnavElement.getElementsByClassName('mdw-bottomnav__item');
-    for (let i = 0; i < items.length; i += 1) {
-      const item = items.item(i);
-      if (item.hasAttribute('mdw-selected')) {
-        item.removeAttribute('mdw-selected');
-        return true;
-      }
+  for (const item of items) {
+    BottomNavItem.attach(item);
+    if (!selectedItem && item.getAttribute('aria-selected') === 'true') {
+      selectedItem = item;
     }
-    return false;
   }
-
-  /**
-   * @param {Event} event
-   * @return {void}
-   */
-  static onItemClicked(event) {
-    /** @type {Element} */
-    const itemElement = findElementParentByClassName(event.target, 'mdw-bottomnav__item');
-    if (itemElement.hasAttribute('mdw-selected')) {
-      return;
-    }
-    if (itemElement.hasAttribute('disabled')) {
-      return;
-    }
-    const bottomnavElement = findElementParentByClassName(itemElement, 'mdw-bottomnav');
-    if (bottomnavElement) {
-      Bottomnav.removeSelection(bottomnavElement);
-    }
-    itemElement.setAttribute('mdw-selected', '');
-    let inputElement;
-    if (itemElement instanceof HTMLLabelElement && itemElement.hasAttribute('for')) {
-      const id = itemElement.getAttribute('for');
-      if (id) {
-        inputElement = document.getElementById(id);
-      }
-    } else {
-      inputElement = itemElement.getElementsByClassName('mdw-bottomnav__input')[0];
-    }
-    if (inputElement instanceof HTMLInputElement) {
-      inputElement.checked = true;
-    } else if (inputElement) {
-      throw new Error('Unexpected inputElement type');
-    }
+  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);
 }
 
-export {
-  Bottomnav,
-  BottomnavItem,
-};
+/**
+ * @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);
+  for (const element of bottomnavElement.getElementsByClassName('mdw-bottomnav__item')) {
+    BottomNavItem.detach(element);
+  }
+}

package/components/bottomnav/index.scss

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