@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/list/index.js

@@ -2,63 +2,87 @@
 // https://www.w3.org/TR/wai-aria-practices/#TreeView
 // https://www.w3.org/TR/wai-aria-practices/examples/landmarks/navigation.html
 
-import { iterateArrayLike } from '../../core/dom';
-import * as RovingTabIndex from '../../core/aria/rovingtabindex';
+import * as Attributes from '../../core/aria/attributes.js';
+import * as Keyboard from '../../core/aria/keyboard.js';
+import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
+import { iterateArrayLike, iterateSomeOfArrayLike } from '../../core/dom.js';
 
-import * as ListExpander from './expander';
-import * as ListItem from './item';
-import * as ListItemGroup from './itemgroup';
+import * as ListContent from './content.js';
+import * as ListItem from './item.js';
 
 /**
- * @param {Element|Document} [root=document]
+ * @param {Event} event
  * @return {void}
  */
-export function attachAll(root = document) {
-  iterateArrayLike(root.getElementsByClassName('mdw-list'), attach);
+function onContentFocusEvent(event) {
+  /** @type {HTMLElement} */
+  const listElement = (event.currentTarget);
+  const onFocusInteraction = listElement.getAttribute('mdw-on-focus');
+  if (!onFocusInteraction) {
+    return;
+  }
+  /** @type {HTMLElement} */
+  const listContentElement = (event.target);
+  if (Attributes.isDisabled(listContentElement)) {
+    return;
+  }
+  onFocusInteraction.split(' ').forEach((interaction) => {
+    switch (interaction) {
+      case 'select':
+        ListContent.setSelected(listContentElement, true);
+        break;
+      default:
+    }
+  });
 }
 
 /**
- * @param {Element} listElement
+ * @param {CustomEvent} event
  * @return {void}
  */
-export function attach(listElement) {
-  listElement.classList.add('mdw-overlay__group');
-  const expanders = listElement.getElementsByClassName('mdw-list__expander');
-  const defaultRole = (expanders.length ? 'tree' : 'listbox');
-
-  const role = listElement.getAttribute('role') || defaultRole;
-
-  iterateArrayLike(listElement.getElementsByClassName('mdw-list__content'), (content) => {
-    if (!content.hasAttribute('role')) {
-      switch (role) {
-        default:
-        case 'tree':
-          content.setAttribute('role', 'treeitem');
-          break;
-        case 'listbox':
-          content.setAttribute('role', 'option');
-          break;
-        case 'list':
-          if (content instanceof HTMLAnchorElement) {
-            content.setAttribute('role', 'link');
-          } else {
-            content.setAttribute('role', 'listitem');
-          }
-          break;
-      }
+function onSelectedChangeEvent(event) {
+  /** @type {HTMLElement} */
+  const listElement = (event.currentTarget);
+  // List is readonly
+  if (listElement.getAttribute('aria-readonly') === 'true') {
+    event.stopPropagation();
+    event.preventDefault();
+    return;
+  }
+  const listElementRole = listElement.getAttribute('role');
+  if (listElementRole !== 'listbox' && listElementRole !== 'tree') {
+    // Bubble up
+    return;
+  }
+  const { detail } = event;
+  if (detail.value === 'false') {
+    // Item is radio-like and cannot be unselected
+    if (listElement.getAttribute('aria-required') === 'true'
+      && listElement.getAttribute('aria-multiselectable') !== 'true') {
+      event.stopPropagation();
+      event.preventDefault();
     }
-  });
-  iterateArrayLike(listElement.getElementsByClassName('mdw-list__item'), ListItem.attach);
-  iterateArrayLike(listElement.getElementsByClassName('mdw-list__item-group'), ListItemGroup.attach);
-  iterateArrayLike(expanders, ListExpander.attach);
-  setupAria(listElement, defaultRole);
-  if (role !== 'listbox' && role !== 'tree') {
     return;
   }
-  RovingTabIndex.setupTabIndexes(listElement, `[role="${role === 'tree' ? 'treeitem' : 'option'}"]`);
-  listElement.addEventListener(RovingTabIndex.FORWARDS_REQUESTED, onForwardsRequested);
-  listElement.addEventListener(RovingTabIndex.BACKWARDS_REQUESTED, onBackwardsRequested);
-  listElement.addEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
+  /** @type {HTMLElement} */
+  const itemElement = (event.target);
+  if (listElement.getAttribute('aria-multiselectable') !== 'true') {
+    // Item is radio-like and must uncheck others
+    setTimeout(() => {
+      // Wait to see if event is cancelled
+      if (event.defaultPrevented) {
+        return;
+      }
+      const role = itemElement.getAttribute('role');
+      iterateArrayLike(listElement.querySelectorAll(`[role="${role}"][aria-selected="true"]`),
+        (item) => {
+          if (item === itemElement) {
+            return;
+          }
+          item.setAttribute('aria-selected', 'false');
+        });
+    });
+  }
 }
 
 /**
@@ -71,40 +95,76 @@ function onTabIndexZeroed(event) {
   const listElement = (event.currentTarget);
   /** @type {HTMLElement} */
   const currentItem = (event.target);
-  RovingTabIndex.removeTabIndex(
-    listElement.querySelectorAll(`[role="${listElement.getAttribute('role') === 'tree' ? 'treeitem' : 'option'}"]`),
-    [currentItem]
-  );
+  switch (listElement.getAttribute('role')) {
+    case 'tree':
+      RovingTabIndex.removeTabIndex(listElement.querySelectorAll('[role="treeitem"]'), [currentItem]);
+      break;
+    case 'listbox':
+      RovingTabIndex.removeTabIndex(listElement.querySelectorAll('[role="option"]'), [currentItem]);
+      break;
+    case 'radiogroup':
+      RovingTabIndex.removeTabIndex(listElement.querySelectorAll('[role="radio"]'), [currentItem]);
+      break;
+    default:
+  }
 }
 /**
- * @param {Event} event
+ * @param {CustomEvent} event
  * @return {void}
  */
-function onForwardsRequested(event) {
+function onDownArrowKey(event) {
+  if (event.detail.ctrlKey || event.detail.altKey
+    || event.detail.shiftKey || event.detail.metaKey) {
+    return;
+  }
+  event.preventDefault();
   event.stopPropagation();
   /** @type {HTMLElement} */
   const listElement = (event.currentTarget);
-  RovingTabIndex.selectNext(
-    listElement.querySelectorAll(`[role="${listElement.getAttribute('role') === 'tree' ? 'treeitem' : 'option'}"]`)
-  );
+  switch (listElement.getAttribute('role')) {
+    case 'tree':
+      RovingTabIndex.selectNext(listElement.querySelectorAll('[role="treeitem"]'));
+      break;
+    case 'listbox':
+      RovingTabIndex.selectNext(listElement.querySelectorAll('[role="option"]'));
+      break;
+    case 'radiogroup':
+      RovingTabIndex.selectNext(listElement.querySelectorAll('[role="radio"]'));
+      break;
+    default:
+  }
 }
 
 /**
- * @param {Event} event
+ * @param {CustomEvent} event
  * @return {void}
  */
-function onBackwardsRequested(event) {
+function onUpArrowKey(event) {
+  if (event.detail.ctrlKey || event.detail.altKey
+    || event.detail.shiftKey || event.detail.metaKey) {
+    return;
+  }
+  event.preventDefault();
   event.stopPropagation();
   /** @type {HTMLElement} */
   const listElement = (event.currentTarget);
-  RovingTabIndex.selectPrevious(
-    listElement.querySelectorAll(`[role="${listElement.getAttribute('role') === 'tree' ? 'treeitem' : 'option'}"]`)
-  );
+  switch (listElement.getAttribute('role')) {
+    case 'tree':
+      RovingTabIndex.selectPrevious(listElement.querySelectorAll('[role="treeitem"]'));
+      break;
+    case 'listbox':
+      RovingTabIndex.selectPrevious(listElement.querySelectorAll('[role="option"]'));
+      break;
+    case 'radiogroup':
+      RovingTabIndex.selectPrevious(listElement.querySelectorAll('[role="radio"]'));
+      break;
+    default:
+  }
 }
 
 /**
  * @param {Element} listElement
- * @param {'listbox'|'tree'|'list'} role
+ * @param {string} role
  * @return {void}
  */
 export function setupAria(listElement, role = 'tree') {
@@ -117,11 +177,84 @@ export function setupAria(listElement, role = 'tree') {
   }
 }
 
+/**
+ * @param {Element} listElement
+ * @return {void}
+ */
+export function attach(listElement) {
+  let role = listElement.getAttribute('role');
+  if (!role) {
+    let newRole = 'listbox';
+    const parentRole = listElement.parentElement && listElement.parentElement.getAttribute('role');
+    if (parentRole === 'treeitem') {
+      newRole = 'group';
+    } else if (iterateSomeOfArrayLike(listElement.children,
+      (child) => child.hasAttribute('aria-expanded') && child.classList.contains('mdw-list__item'))) {
+      newRole = 'tree';
+    }
+    listElement.setAttribute('role', newRole);
+    role = newRole;
+  }
+
+  setupAria(listElement, role);
+  iterateArrayLike(listElement.children, (child) => {
+    if (child.classList.contains('mdw-list__item')) {
+      ListItem.attach(child);
+    }
+  });
+  iterateArrayLike(listElement.getElementsByClassName('mdw-list'), attach);
+  if (listElement.hasAttribute('mdw-list-js')) {
+    return;
+  }
+  if (role !== 'listbox' && role !== 'tree' && role !== 'radiogroup') {
+    return;
+  }
+
+  switch (role) {
+    case 'tree':
+      RovingTabIndex.setupTabIndexes(listElement.querySelectorAll('[role="treeitem"]'));
+      break;
+    case 'listbox':
+      RovingTabIndex.setupTabIndexes(listElement.querySelectorAll('[role="option"]'));
+      break;
+    case 'radiogroup':
+      RovingTabIndex.setupTabIndexes(listElement.querySelectorAll('[role="radio"]'));
+      break;
+    default:
+      return;
+  }
+
+  listElement.addEventListener(Keyboard.DOWN_ARROW_KEY, onDownArrowKey);
+  listElement.addEventListener(Keyboard.UP_ARROW_KEY, onUpArrowKey);
+  listElement.addEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
+  listElement.addEventListener(ListContent.SELECTED_CHANGE_EVENT, onSelectedChangeEvent);
+  listElement.addEventListener(ListContent.FOCUS_EVENT, onContentFocusEvent);
+  listElement.setAttribute('mdw-list-js', '');
+}
+
+/**
+ * @param {Element|Document} [root=document]
+ * @return {void}
+ */
+export function attachAll(root = document) {
+  iterateArrayLike(root.getElementsByClassName('mdw-list'), attach);
+}
+
 /**
  * @param {Element} listElement
  * @return {void}
  */
 export function detach(listElement) {
-  iterateArrayLike(listElement.getElementsByClassName('mdw-list__item'), ListItem.detach);
-  iterateArrayLike(listElement.getElementsByClassName('mdw-list__expander'), ListExpander.detach);
+  iterateArrayLike(listElement.children, (child) => {
+    if (child.classList.contains('mdw-list__item')) {
+      ListItem.detach(child);
+    }
+  });
+  iterateArrayLike(listElement.querySelectorAll(`[role="${listElement.getAttribute('role') === 'tree' ? 'treeitem' : 'option'}"]`),
+    RovingTabIndex.detach);
+  listElement.removeEventListener(ListContent.SELECTED_CHANGE_EVENT, onSelectedChangeEvent);
+  listElement.removeEventListener(Keyboard.DOWN_ARROW_KEY, onDownArrowKey);
+  listElement.removeEventListener(Keyboard.UP_ARROW_KEY, onUpArrowKey);
+  listElement.removeEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
+  listElement.removeAttribute('mdw-list-js');
 }

package/components/list/index.scss

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

package/components/list/item.js

@@ -1,21 +1,44 @@
-import * as ListContent from './content';
-import { iterateArrayLike } from '../../core/dom';
+import * as Keyboard from '../../core/aria/keyboard.js';
+import { getChildElementByClass, iterateArrayLike } from '../../core/dom.js';
+
+import * as ListContent from './content.js';
 
 /**
  * @param {Element} listItemElement
- * @return {void}
+ * @return {boolean}
  */
-export function attach(listItemElement) {
-  iterateArrayLike(listItemElement.getElementsByClassName('mdw-list__content'), ListContent.attach);
-  attachCore(listItemElement);
+export function isExpanded(listItemElement) {
+  return (listItemElement.getAttribute('aria-expanded') === 'true');
 }
 
 /**
  * @param {Element} listItemElement
+ * @param {boolean} value
  * @return {void}
  */
-export function attachCore(listItemElement) {
-  setupAria(listItemElement);
+export function setExpanded(listItemElement, value) {
+  listItemElement.setAttribute('aria-expanded', value ? 'true' : 'false');
+  iterateArrayLike(listItemElement.querySelectorAll('[role="treeitem"]'), (treeitem) => {
+    treeitem.setAttribute('mdw-skip-tab', value ? 'false' : 'true');
+  });
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+export function onChildContentActivate(event) {
+  /** @type {HTMLElement} */
+  const activatedElement = (event.target);
+  /** @type {HTMLElement} */
+  const element = (event.currentTarget);
+  if (!activatedElement || activatedElement.parentElement !== element) {
+    return;
+  }
+  if (element.hasAttribute('aria-expanded')) {
+    event.stopPropagation();
+    setExpanded(element, !isExpanded(element));
+  }
 }
 
 /**
@@ -23,24 +46,125 @@ export function attachCore(listItemElement) {
  * @return {void}
  */
 export function setupAria(listItemElement) {
+  let isTreeItem = null;
+  let roleIsNone = false;
   if (!listItemElement.hasAttribute('role')) {
-    listItemElement.setAttribute('role', 'none');
+    if (listItemElement.hasAttribute('aria-expanded')) {
+      listItemElement.setAttribute('role', 'treeitem');
+      isTreeItem = true;
+      roleIsNone = false;
+    } else {
+      listItemElement.setAttribute('role', 'none');
+      isTreeItem = false;
+      roleIsNone = true;
+    }
+  }
+  if (isTreeItem !== false || listItemElement.getAttribute('role') === 'treeitem') {
+    const activatorContent = getChildElementByClass(listItemElement, 'mdw-list__content');
+    if (activatorContent && !activatorContent.hasAttribute('role')) {
+      activatorContent.setAttribute('role', 'none');
+    }
+  }
+  if (!roleIsNone) {
+    return;
+  }
+  const parentRole = listItemElement.parentElement && listItemElement.parentElement.getAttribute('role');
+  if (!parentRole) {
+    return;
+  }
+  const contentChild = getChildElementByClass(listItemElement, 'mdw-list__content');
+  if (!contentChild) {
+    return;
+  }
+  if (contentChild.hasAttribute('role')) {
+    return;
+  }
+  switch (parentRole) {
+    case 'listbox':
+      contentChild.setAttribute('role', 'option');
+      break;
+    case 'radiogroup':
+      contentChild.setAttribute('role', 'radio');
+      break;
+    case 'group':
+    case 'tree':
+    case 'treeitem':
+      contentChild.setAttribute('role', 'treeitem');
+      break;
+    default:
+    case 'list':
   }
 }
 
 /**
- * @param {Element} listItemElement
+ * @param {KeyboardEvent} event
  * @return {void}
  */
-export function detachCore(listItemElement) {
+function onKeyDown(event) {
+  if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
+    return;
+  }
+  if (event.key !== 'Enter' && event.key !== 'Spacebar' && event.key !== ' ') {
+    return;
+  }
+  if (document.activeElement !== event.currentTarget) {
+    return;
+  }
+  /** @type {HTMLElement} */
+  const element = (event.currentTarget);
+  if (!element) {
+    return;
+  }
+  if (!element.hasAttribute('aria-expanded')) {
+    return;
+  }
+  const activatorContent = getChildElementByClass(element, 'mdw-list__content');
+  if (!activatorContent) {
+    return;
+  }
+  event.stopPropagation();
+  event.preventDefault();
+  const newEvent = document.createEvent('Event');
+  newEvent.initEvent('click', true, true);
+  activatorContent.dispatchEvent(newEvent);
 }
 
+/**
+ * @param {Element} listItemElement
+ * @return {void}
+ */
+export function attachCore(listItemElement) {
+  setupAria(listItemElement);
+}
+/**
+ * @param {Element} listItemElement
+ * @return {void}
+ */
+export function attach(listItemElement) {
+  attachCore(listItemElement);
+  iterateArrayLike(listItemElement.getElementsByClassName('mdw-list__content'), ListContent.attach);
+  if (listItemElement.hasAttribute('aria-expanded')) {
+    if (!listItemElement.hasAttribute('mdw-expander-js')) {
+      listItemElement.setAttribute('mdw-pre-expander-js', '');
+      setTimeout(() => {
+        if (listItemElement.hasAttribute('mdw-pre-expander-js')) {
+          listItemElement.removeAttribute('mdw-pre-expander-js');
+          listItemElement.setAttribute('mdw-expander-js', '');
+        }
+      }, 500);
+    }
+    setExpanded(listItemElement, isExpanded(listItemElement));
+  }
+  listItemElement.addEventListener(ListContent.ACTIVATE_EVENT, onChildContentActivate);
+  listItemElement.addEventListener('keydown', onKeyDown);
+  Keyboard.attach(listItemElement);
+}
 
 /**
  * @param {Element} listItemElement
  * @return {void}
  */
 export function detach(listItemElement) {
-  detachCore(listItemElement);
+  Keyboard.detach(listItemElement);
   iterateArrayLike(listItemElement.getElementsByClassName('mdw-list__content'), ListContent.detach);
 }

package/components/list/secondary.js

@@ -0,0 +1,46 @@
+import { dispatchDomEvent, getPassiveEventListenerOption } from '../../core/dom.js';
+
+export const SECONDARY_ACTION_EVENT = 'mdw:listsecondary-action';
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+export function onInteraction(event) {
+  event.stopPropagation();
+}
+
+/**
+ * @param {MouseEvent|KeyboardEvent|PointerEvent} event
+ * @return {void}
+ */
+export function onClick(event) {
+  event.stopPropagation();
+  /** @type {HTMLElement} */
+  const listSecondaryElement = (event.currentTarget);
+  dispatchDomEvent(listSecondaryElement, SECONDARY_ACTION_EVENT);
+}
+
+/**
+ * @param {Element} listSecondaryElement
+ * @return {void}
+ */
+export function attach(listSecondaryElement) {
+  if (!listSecondaryElement.hasAttribute('mdw-action')) {
+    return;
+  }
+  listSecondaryElement.addEventListener('click', onClick);
+  listSecondaryElement.addEventListener('mousedown', onInteraction, getPassiveEventListenerOption());
+  listSecondaryElement.addEventListener('touchstart', onInteraction, getPassiveEventListenerOption());
+  listSecondaryElement.addEventListener('keydown', onInteraction, getPassiveEventListenerOption());
+}
+/**
+ * @param {Element} listSecondaryElement
+ * @return {void}
+ */
+export function detach(listSecondaryElement) {
+  listSecondaryElement.removeEventListener('click', onClick);
+  listSecondaryElement.removeEventListener('mousedown', onInteraction, getPassiveEventListenerOption());
+  listSecondaryElement.removeEventListener('touchstart', onInteraction, getPassiveEventListenerOption());
+  listSecondaryElement.removeEventListener('keydown', onInteraction, getPassiveEventListenerOption());
+}

package/components/menu/_spec.scss

@@ -1,11 +1,15 @@
 // https://material.io/guidelines/components/menus.html
 
-@import '../../core/_elevation.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-menu__unit-width: dp(56) !default;
+$unit-width: dp(56) !default;
 
+/* @deprecated */
 .mdw-menu__wrapper {
   display: inline-flex;
   position: relative;
@@ -46,9 +50,9 @@ $mdw-menu__unit-width: dp(56) !default;
   -ms-scroll-chaining: none;
   scrollbar-width: none;
 
-  transition-duration: $mdw-motion__fade-out-duration;
+  transition-duration: motion.$fadeOutDuration;
   transition-property: none;
-  transition-timing-function: $mdw-motion__decelerate-easing;
+  transition-timing-function: motion.$decelerateEasing;
 
   pointer-events: none;
   transform-origin: left top;
@@ -84,16 +88,16 @@ $mdw-menu__unit-width: dp(56) !default;
       transition-delay: 0s;
       transition-duration: 0s;
       transition-property: box-shadow, opacity, transform;
-      transition-timing-function: $mdw-motion__accelerate-easing;
+      transition-timing-function: motion.$accelerateEasing;
 
       opacity: 1;
       transform: scale(1);
 
       visibility: visible;
 
-      box-shadow: mdwElevation(8);
-      @include mdw-breakpoint__tablet-device__max {
-        transition-duration: $mdw-motion__expand-duration;
+      box-shadow: elevation.boxShadow(8);
+      @include breakpoint.maxTabletDevice {
+        transition-duration: motion.$expandDuration;
       }
     }
     
@@ -178,7 +182,7 @@ $mdw-menu__unit-width: dp(56) !default;
   @for $i from 3 to 8 {
     &[mdw-width-units="#{$i}"] {
       .mdw-menu__popup {
-        width: calc(#{$mdw-menu__unit-width} * #{$i});
+        width: #{$unit-width * $i};
       }
     }
   }
@@ -214,6 +218,11 @@ $mdw-menu__unit-width: dp(56) !default;
   }
 }
 
+.mdw-menu__item-group {
+  display: flex;
+  flex-direction: column;
+}
+
 .mdw-menu__popup {
   display: inline-flex;
   position: absolute;
@@ -229,8 +238,8 @@ $mdw-menu__unit-width: dp(56) !default;
   -ms-scroll-chaining: none;
 
   max-height: 50vh;
-  min-width: $mdw-menu__unit-width * 2;
-  max-width: $mdw-menu__unit-width * 7;
+  min-width: $unit-width * 2;
+  max-width: $unit-width * 7;
   margin-right: dp(8);
   margin-left: dp(8);
   padding-top: dp(8);
@@ -238,10 +247,10 @@ $mdw-menu__unit-width: dp(56) !default;
 
   outline: none;
 
-  transition-delay: 0s, 0s, $mdw-motion__fade-out-duration, $mdw-motion__fade-out-duration;
-  transition-duration: $mdw-motion__fade-out-duration;
+  transition-delay: 0s, 0s, motion.$fadeOutDuration, motion.$fadeOutDuration;
+  transition-duration: motion.$fadeOutDuration;
   transition-property: box-shadow, opacity, transform, visibility;
-  transition-timing-function: $mdw-motion__accelerate-easing;
+  transition-timing-function: motion.$accelerateEasing;
 
   opacity: 0;
   pointer-events: inherit;
@@ -250,7 +259,7 @@ $mdw-menu__unit-width: dp(56) !default;
   z-index: 8;
 
   border-radius: dp(4);
-  box-shadow: mdwElevation(0);
+  box-shadow: elevation.boxShadow(0);
 }
 
 .mdw-menu__text {
@@ -270,6 +279,10 @@ $mdw-menu__unit-width: dp(56) !default;
 
 .mdw-menu__check,
 .mdw-menu__radio {
+  &[aria-hidden="true"] {
+    display: none;
+  }
+  
   visibility: hidden;
 
   .mdw-menu__item[aria-checked="true"] & {
@@ -284,7 +297,7 @@ $mdw-menu__unit-width: dp(56) !default;
 }
 
 .mdw-menu__item {
-  @include type-rules('body');
+  @include type.addRules('body');
   display: flex;
   position: relative;
   align-items: center;
@@ -322,7 +335,7 @@ $mdw-menu__unit-width: dp(56) !default;
     padding-left: dp(24);
   }
 }
-@include mdw-platform__no-touch-support {
+@include platform.ifNoTouch() {
   .mdw-menu:not([mdw-dense="never"]) {
     .mdw-menu__item {
       min-height: dp(32);