@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/list/_spec.scss

@@ -1,37 +1,35 @@
 // https://material.io/guidelines/components/lists.html
 // https://material.io/guidelines/components/lists-controls.html
 
-@import '../../core/_platform.scss';
-@import '../../core/_type.scss';
+@use '../../core/_breakpoint.scss' as breakpoint;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_platform.scss' as platform;
+@use '../../core/_type.scss' as type;
 
-$mdw-list__divider-height: dp(1) !default;
+$dividerHeight: dp(1) !default;
 
 .mdw-list {
-  padding-top: dp(8);
-  padding-bottom: dp(8);
-}
-
-.mdw-list__item-group {
-  display: flex;
-  flex-direction: column;
-}
-
-ul.mdw-list,
-ul.mdw-list__item-group {
   margin: 0;
-  padding-right: 0;
-  padding-left: 0;
+  padding: 0;
 
   list-style-type: none;
-}
 
+  &[mdw-margin-top] {
+    margin-top: dp(8);
+  }
+
+  &[mdw-margin-bottom] {
+    margin-bottom: dp(8);
+  }
+}
 
 
 li.mdw-list__item {
   position: relative;
 
   margin: 0;
-  
+
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
@@ -41,23 +39,16 @@ li.mdw-list__item {
   text-transform: none;
 }
 
-.mdw-list__item {
-  display: flex;
-  position: relative;
-  align-content: flex-start;
-  flex-direction: row;
-  overflow: hidden;
+a.mdw-list__content {
+  text-decoration: none;
 }
 
-a.mdw-list__content,
-a.mdw-list__expander-content {
-  text-decoration: none;
+.mdw-list__content > .mdw-divider__vertical {
+  height: dp(40);
 }
 
-.mdw-list__expander-content,
+.mdw-list__subheader,
 .mdw-list__content {
-  @include type-rules('subtitle');
-
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -67,10 +58,17 @@ a.mdw-list__expander-content {
   min-height: dp(48);
   flex: 1;
   padding: 0 dp(24);
-  @include mdw-breakpoint__16dp-margin() {
+  @include breakpoint.has16DPMargin() {
     padding: 0 dp(16);
   }
+}
+
+.mdw-list__subheader {
+  @include type.addRules('body-2');
+}
 
+.mdw-list__content {
+  @include type.addRules('subtitle');
   cursor: pointer;
 
   text-align: start;
@@ -82,19 +80,6 @@ a.mdw-list__expander-content {
   }
 }
 
-.mdw-list__subheader {
-  @include type-rules('body-2');
-
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: stretch;
-
-  min-height: dp(48);
-  padding-right: dp(16);
-  padding-left: dp(16);
-}
-
 .mdw-list__avatar,
 .mdw-list__icon {
   display: flex;
@@ -113,25 +98,32 @@ a.mdw-list__expander-content {
   min-height: dp(40);
 }
 
-.mdw-list__expander {
+.mdw-list__item {
   display: flex;
-  position: relative;
   flex-direction: column;
+
   outline: none;
+}
+
+.mdw-list__item[aria-expanded] {
+  position: relative;
 
   &::before,
   &::after {
-    content: '';
-    
     position: absolute;
+
     right: 0;
     left: 0;
-    background-color: transparent;
 
-    transition-property: background-color;
-    transition-duration: $mdw-motion__shape-change-duration;
-    transition-timing-function: $mdw-motion__standard-easing;
     height: dp(1);
+
+    transition-duration: motion.$shapeChangeDuration;
+
+    transition-property: background-color;
+    transition-timing-function: motion.$standardEasing;
+
+    background-color: transparent;
+    content: '';
   }
 
   &::before {
@@ -142,49 +134,59 @@ a.mdw-list__expander-content {
     bottom: 0;
   }
 
-  & > .mdw-list__expander-content .mdw-list__secondary {
+  & > .mdw-list__content .mdw-list__secondary {
     min-height: dp(48);
 
-    transition-duration: $mdw-motion__shape-change-duration;
+    transition-duration: motion.$shapeChangeDuration;
     transition-property: transform;
-    transition-timing-function: $mdw-motion__standard-easing;
+    transition-timing-function: motion.$standardEasing;
 
     pointer-events: none;
     transform: rotate(0deg);
   }
 
-  & > .mdw-list__item-group .mdw-list__item {
-    flex-basis: 0;
-    animation-duration: $mdw-motion__collapse-duration;
-    animation-timing-function: $mdw-motion__accelerate-easing;
-    animation-fill-mode: forwards;
-  }
+  & > .mdw-list {
+    display: flex;
+    flex-direction: column;
 
-  &[aria-expanded="false"] > .mdw-list__item-group .mdw-list__item {
-    animation-name: collapseRow;
-  }
+    & > .mdw-list__item {
+      overflow: hidden;
 
-  &[aria-expanded="true"] > .mdw-list__item .mdw-list__secondary {
-    transform: rotate(180deg);
+      flex-basis: 0;
+
+      animation-duration: motion.$collapseDuration;
+      animation-timing-function: motion.$accelerateEasing;
+      animation-fill-mode: forwards;
+    }
   }
 
-  &[aria-expanded="true"] > .mdw-list__item-group .mdw-list__item {
-    animation-name: expandRow;
-    animation-duration: $mdw-motion__expand-duration;
-    animation-timing-function: $mdw-motion__decelerate-easing;
+  &[aria-expanded="false"] {
+    & > .mdw-list > .mdw-list__item {
+      animation-name: collapseRow;
+    }
   }
 
-  &:not([mdw-expander-js]) > .mdw-list__item-group .mdw-list__item {
-    animation-duration: 0s;
+  &[aria-expanded="true"] {
+    & > .mdw-list__content .mdw-list__secondary {
+      transform: rotate(180deg);
+    }
+
+    & > .mdw-list > .mdw-list__item {
+      animation-name: expandRow;
+      animation-duration: motion.$expandDuration;
+      animation-timing-function: motion.$decelerateEasing;
+    }
+
+    & + .mdw-list__list-item[aria-expanded="true"]::before {
+      display: none;
+    }
   }
 
-  &[aria-expanded="true"] + .mdw-list__expander[aria-expanded="true"]::before {
-    display: none;
+  &:not([mdw-expander-js]) > .mdw-list .mdw-list__item {
+    animation-duration: 0s;
   }
 }
 
-
-
 @keyframes expandRow {
   0% {
     min-height: 0;
@@ -230,32 +232,44 @@ a.mdw-list__expander-content {
 
 .mdw-list__secondary {
   display: flex;
+  position: relative;
   align-items: center;
+  align-self: stretch;
   flex-direction: row;
-  -ms-grid-column: 3;
-  grid-column: 3;
-  -ms-grid-column-span: 1;
-  grid-column-end: span 1;
   justify-content: center;
   order: 1;
-
-  min-height: dp(56);
+  
   min-width: dp(24);
-  margin-right: 0;
-  margin-left: dp(16);
-
-  z-index: 1;
+  margin-right: dp(-24);
+  margin-left: 0;
+  border-width: dp(1);
+  padding: 0 dp(24);
 
   pointer-events: none;
 
-  :root[dir="rtl"] & {
-    margin-right: dp(16);
+  z-index: 1;
+  @include breakpoint.has16DPMargin() {
+    margin-right: dp(-16);
     margin-left: 0;
+    padding: 0 dp(16);
   }
 
+  :root[dir="rtl"] & {
+    margin-right: 0;
+    margin-left: dp(-24);
+    @include breakpoint.has16DPMargin() {
+      margin-right: 0;
+      margin-left: dp(-16);
+    }
+  }
+
+  &[mdw-action] {
+    pointer-events: auto;
+  }
 }
 
-@include mdw-platform__ie() {
+
+@include platform.ifIE() {
   .mdw-list__icon::after,
   .mdw-list__secondary::after {
     // Fix IE min-height flexbug
@@ -279,7 +293,6 @@ a.mdw-list__expander-content {
   text-overflow: ellipsis;
 }
 
-
 .mdw-list[mdw-divider] .mdw-list__item:not(:last-child) {
   .mdw-list__text::after {
     content: '';
@@ -289,14 +302,14 @@ a.mdw-list__expander-content {
     bottom: 0;
     left: 0;
 
-    height: $mdw-list__divider-height;
+    height: $dividerHeight;
     width: 100%;
   }
+}
 
-  .mdw-list__avatar ~ .mdw-list__text::after,
-  .mdw-list[mdw-divider] > .mdw-list__item:not(:last-child) .mdw-list__icon ~ .mdw-list__text::after {
-    margin-left: dp(72);
-  }
+.mdw-list__avatar ~ .mdw-list__text::after,
+.mdw-list[mdw-divider] > .mdw-list__item:not(:last-child) .mdw-list__icon ~ .mdw-list__text::after {
+  margin-left: dp(72);
 }
 
 .mdw-list__text-line {
@@ -310,11 +323,11 @@ a.mdw-list__expander-content {
 .mdw-list__text-line:first-child,
 .mdw-list__text-block:first-child,
 .mdw-list__meta {
-  @include baseline-top(28);
+  @include type.baselineToTop(28);
 }
 
 .mdw-list__meta {
-  @include type-rules('caption');
+  @include type.addRules('caption');
   align-self: flex-start;
 
   margin-right: 0;
@@ -329,27 +342,27 @@ a.mdw-list__expander-content {
 
 // First line is pushed up 20dp
 .mdw-list__text-line:first-child {
-  @include baseline-bottom(20);
+  @include type.baselineToBottom(20);
 }
 
 // Second and third lines are pushed up 20dp and its above element is pushed 20dp
 .mdw-list__text-line:not(:first-child),
 .mdw-list__text-block:not(:first-child) {
-  @include type-rules('body-2');
-  @include baseline-top(20);
+  @include type.addRules('body-2');
+  @include type.baselineToTop(20);
   margin-top: dp(-20);
 }
 
 // Second line is pushed up 16dp from baseline
 .mdw-list__text-line:last-child {
-  @include baseline-bottom(16);
+  @include type.baselineToBottom(16);
 }
 
 
 // When 3-lines, 2nd and 3rd lines are pushed up 20dp
 .mdw-list__text-line:nth-child(3),
 .mdw-list__text-line:not(:first-child):not(:last-child) {
-  @include baseline-bottom(20);
+  @include type.baselineToBottom(20);
 }
 
 
@@ -368,8 +381,8 @@ a.mdw-list__expander-content {
   white-space: normal;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
-  word-break: break-word;
 
+  word-break: break-word;
 
   &:not(:only-child) {
     max-height: sp(20 * 2);
@@ -379,6 +392,6 @@ a.mdw-list__expander-content {
   }
   
   &:only-child {
-    @include baseline-bottom(16);
+    @include type.baselineToBottom(16);
   }
 }

package/components/list/_theme.scss

@@ -1,9 +1,8 @@
-@import '../../core/_platform.scss';
-@import '../../core/theme/index.scss';
+@use '../../core/theme/_mixins.scss' as theme;
 
-$mdw-list__theme-values: (
-  text-color:           $mdw-theme__default-ink,
-  divider-color:        $mdw-theme__divider-ink,
+$themeValues: (
+  divider-color:                 theme.$foreground,
+  divider-opacity:               theme.$divider-opacity,
 
   focus-opacity:                 (0.12, 0.24),
   hover-focus-opacity:           (0.04 + 0.12, 0.08 + 0.24),
@@ -15,15 +14,13 @@ $mdw-list__theme-values: (
 
 ) !default;
 
-@function mdwListThemeValue($key, $type) {
-  @return mdwGetThemeValue('list', $mdw-list__theme-values, $key, $type);
+@function getThemeValue($key, $type) {
+  @return theme.getThemeValue('list', $themeValues, $key, $type);
 }
 
-@mixin mdw-list__theme-rules($type: 'var') {
-
+@mixin addThemeRules($type: 'var') {
   .mdw-list__content {
-    &[mdw-ink][aria-current],
-    &[mdw-ink][aria-selected="true"] {
+    &[mdw-ink][aria-current] {
       .mdw-list__icon,
       .mdw-list__text {
         color: inherit;
@@ -33,20 +30,20 @@ $mdw-list__theme-values: (
 
   .mdw-list[mdw-divider] {
     & > .mdw-list__item:not(:last-child) .mdw-list__text::after {
-      background-color: mdwListThemeValue("divider-color", $type);
+      background-color: RGBA(getThemeValue("divider-color", $type), getThemeValue("divider-opacity", $type));
     }
   }
 
-  .mdw-list__expander:focus {
-    & > .mdw-list__expander-content {
+  .mdw-list__item[aria-expanded]:focus {
+    & > .mdw-list__content {
       &:not([mdw-overlay-touch="true"]) {
         &:not([mdw-overlay-off~="focus"]):not([mdw-overlay-touch="true"])::before {
-          opacity: mdwListThemeValue("focus-opacity", $type);
+          opacity: getThemeValue("focus-opacity", $type);
         }
   
-        &:not([disabled]):not([aria-disabled="true"]):not([mdw-overlay-touch="true"]) {
+        &:not([aria-disabled="true"]):not([mdw-overlay-touch="true"]) {
           &:hover:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-            opacity: mdwListThemeValue("hover-focus-opacity", $type);
+            opacity: getThemeValue("hover-focus-opacity", $type);
           }
         }
       }
@@ -55,12 +52,12 @@ $mdw-list__theme-values: (
       &[aria-selected="true"]:not([mdw-overlay-off~="selected"]) {
         &:not([mdw-overlay-touch="true"]) {
           &:focus:not([mdw-overlay-off~="focus"])::before {
-            opacity: mdwListThemeValue("selected-focus-opacity", $type);
+            opacity: getThemeValue("selected-focus-opacity", $type);
           }
   
-          &:not([disabled]):not([aria-disabled="true"]) {
+          &:not([aria-disabled="true"]) {
             &:hover:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-              opacity: mdwListThemeValue("selected-hover-focus-opacity", $type);
+              opacity: getThemeValue("selected-hover-focus-opacity", $type);
             }
           }
         }
@@ -71,12 +68,12 @@ $mdw-list__theme-values: (
       &[aria-pressed="true"]:not([mdw-overlay-off~="activated"]) {
         &:not([mdw-overlay-touch="true"]) {
           &:not([mdw-overlay-off~="focus"])::before {
-            opacity: mdwListThemeValue("activated-focus-opacity", $type);
+            opacity: getThemeValue("activated-focus-opacity", $type);
           }
   
-          &:not([disabled]):not([aria-disabled="true"]) {
+          &:not([aria-disabled="true"]) {
             &:hover:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-              opacity: mdwListThemeValue("activated-hover-focus-opacity", $type);
+              opacity: getThemeValue("activated-hover-focus-opacity", $type);
             }
           }
         }
@@ -84,16 +81,16 @@ $mdw-list__theme-values: (
     }
   }
 
-  .mdw-list__expander[aria-expanded="true"] {
+  .mdw-list__item[aria-expanded="true"] {
     &::before,
     &::after {
-      background-color: mdwListThemeValue("divider-color", $type);
+      background-color: RGBA(getThemeValue("divider-color", $type), getThemeValue("divider-opacity", $type));
     }
 
     &[mdw-ink][aria-expanded="true"] {
-      & > .mdw-list__expander-content,
-      & > .mdw-list__expander-content::before,
-      & > .mdw-list__expander-content > .mdw-list__text {
+      & > .mdw-list__content,
+      & > .mdw-list__content::before,
+      & > .mdw-list__content > .mdw-list__text {
         color: inherit;
       }
     }
@@ -102,13 +99,13 @@ $mdw-list__theme-values: (
 }
 
 
-@include mdw-theme__add-component-fallback-rules('light') {
-  @include mdw-list__theme-rules('light');
+@include theme.addComponentFallbackRules('light') {
+  @include addThemeRules('light');
 }
-@include mdw-theme__add-component-fallback-rules('dark') {
-  @include mdw-list__theme-rules('dark');
+@include theme.addComponentFallbackRules('dark') {
+  @include addThemeRules('dark');
 }
 
-@include mdw-theme__add-component-variable-rules('list', $mdw-list__theme-values) {
-  @include mdw-list__theme-rules();
+@include theme.addComponentCSSVariableRules('list', $themeValues) {
+  @include addThemeRules();
 }

package/components/list/content.js

@@ -1,58 +1,61 @@
-import { iterateArrayLike, dispatchDomEvent } from '../../core/dom';
-import * as Overlay from '../../core/overlay/index';
-import * as Ripple from '../../core/ripple/index';
+import * as Attributes from '../../core/aria/attributes.js';
+import * as Keyboard from '../../core/aria/keyboard.js';
+import { dispatchDomEvent, iterateArrayLike } from '../../core/dom.js';
+import * as Overlay from '../../core/overlay/index.js';
+import * as Ripple from '../../core/ripple/index.js';
+
+import * as ListSecondary from './secondary.js';
 
 export const ACTIVATE_EVENT = 'mdw:listcontent-activate';
+export const SELECTED_CHANGE_EVENT = 'mdw:listcontent-selectedchange';
+export const FOCUS_EVENT = 'mdw:listcontent-focus';
 
 /**
- * @param {Element} listContentElement
+ * @param {CustomEvent} event
  * @return {void}
  */
-export function attach(listContentElement) {
-  attachCore(listContentElement);
-  if (!listContentElement.hasAttribute('mdw-no-overlay')) {
-    listContentElement.classList.add('mdw-overlay');
-    Overlay.attach(listContentElement);
+function onEnterKey(event) {
+  if (event.detail.ctrlKey || event.detail.shiftKey
+    || event.detail.altKey || event.detail.metaKey) {
+    return;
   }
-  if (!listContentElement.hasAttribute('mdw-no-ripple')) {
-    listContentElement.classList.add('mdw-ripple');
-    Ripple.attach(listContentElement);
+  /** @type {HTMLElement} */
+  const listContentElement = (event.currentTarget);
+  if (!listContentElement) {
+    return;
   }
+  event.stopPropagation();
+  event.preventDefault();
+
+  // Slightly redundant, but performs ripple
+  const newEvent = document.createEvent('Event');
+  newEvent.initEvent('click', true, true);
+  listContentElement.dispatchEvent(newEvent);
 }
 
 /**
- * @param {KeyboardEvent} event
+ * @param {MouseEvent|KeyboardEvent|PointerEvent} event
  * @return {void}
  */
-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;
-  }
+export function onClick(event) {
+  event.preventDefault();
   /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  if (!element) {
+  const listContentElement = (event.currentTarget);
+  if (Attributes.isDisabled(listContentElement)) {
     return;
   }
-  event.stopPropagation();
-  event.preventDefault();
-  const newEvent = document.createEvent('Event');
-  newEvent.initEvent('click', true, true);
-  element.dispatchEvent(newEvent);
+  dispatchDomEvent(listContentElement, ACTIVATE_EVENT);
 }
 
 /**
  * @param {Element} listContentElement
  * @return {void}
  */
-export function attachCore(listContentElement) {
+export function attach(listContentElement) {
   if (!listContentElement.hasAttribute('role')) {
-    listContentElement.setAttribute('role', 'option');
+    if (listContentElement.parentElement.getAttribute('role') === 'none') {
+      listContentElement.setAttribute('role', 'option');
+    }
   }
   iterateArrayLike(listContentElement.getElementsByClassName('mdw-list__icon'), (el) => {
     el.setAttribute('aria-hidden', 'true');
@@ -61,34 +64,47 @@ export function attachCore(listContentElement) {
     el.setAttribute('aria-hidden', 'true');
   });
   listContentElement.addEventListener('click', onClick);
-  listContentElement.addEventListener('keydown', onKeyDown);
-}
 
-/**
- * @param {MouseEvent|KeyboardEvent|PointerEvent} event
- * @return {void}
- */
-export function onClick(event) {
-  /** @type {HTMLElement} */
-  const listContentElement = (event.currentTarget);
-  dispatchDomEvent(listContentElement, ACTIVATE_EVENT);
+  if (!listContentElement.hasAttribute('mdw-no-overlay')) {
+    listContentElement.classList.add('mdw-overlay');
+    Overlay.attach(listContentElement);
+  }
+  if (!listContentElement.hasAttribute('mdw-no-ripple')) {
+    listContentElement.classList.add('mdw-ripple');
+    Ripple.attach(listContentElement);
+  }
+  if (listContentElement.getAttribute('role') === 'radio'
+  && listContentElement.getAttribute('aria-checked') === 'true'
+  && listContentElement.getAttribute('tabindex') !== '0') {
+    listContentElement.setAttribute('tabindex', '0');
+  }
+  const secondaryElement = listContentElement.getElementsByClassName('mdw-list__secondary')[0];
+  if (secondaryElement) {
+    ListSecondary.attach(secondaryElement);
+  }
+  Keyboard.attach(listContentElement);
+  listContentElement.addEventListener(Keyboard.ENTER_KEY, onEnterKey);
 }
-
 /**
  * @param {Element} listContentElement
  * @return {void}
  */
-export function detachCore(listContentElement) {
-  listContentElement.removeEventListener('click', onClick);
-  listContentElement.removeEventListener('keydown', onKeyDown);
+export function detach(listContentElement) {
+  Keyboard.detach(listContentElement);
+  const secondaryElement = listContentElement.getElementsByClassName('mdw-list__secondary')[0];
+  if (secondaryElement) {
+    ListSecondary.detach(secondaryElement);
+  }
+  Ripple.detach(listContentElement);
+  Overlay.detach(listContentElement);
 }
 
 /**
- * @param {Element} listContentElement
- * @return {void}
+ * @param {Element} element
+ * @param {string|boolean} value
+ * @param {boolean} [dispatchEvent=true]
+ * @return {boolean} successful
  */
-export function detach(listContentElement) {
-  detachCore(listContentElement);
-  Ripple.detach(listContentElement);
-  Overlay.detach(listContentElement);
+export function setSelected(element, value, dispatchEvent = true) {
+  return Attributes.setSelected(element, value, dispatchEvent ? SELECTED_CHANGE_EVENT : null);
 }