@material/list - npm Package Compare versions

Comparing version 0.41.0 to 0.42.0

adapter.js

@@ -93,9 +93,27 @@ /**
   /**
-   * Toggles the checkbox or radio button within a list item.
    * @param {number} index
-   * @return {boolean} true if a radio button or checkbox was present.
+   * @return {boolean} Returns true if radio button is present at given list item index.
    */
-  toggleCheckbox(index) {}
+  hasRadioAtIndex(index) {}
+
+  /**
+   * @param {number} index
+   * @return {boolean} Returns true if checkbox is present at given list item index.
+   */
+  hasCheckboxAtIndex(index) {}
+
+  /**
+   * @param {number} index
+   * @return {boolean} Returns true if checkbox inside a list item is checked.
+   */
+  isCheckboxCheckedAtIndex(index) {}
+
+  /**
+   * Sets the checked status of checkbox or radio at given list item index.
+   * @param {number} index
+   * @param {boolean} isChecked
+   */
+  setCheckedCheckboxOrRadioAtIndex(index, isChecked) {}
 }
 
 export default MDCListAdapter;

constants.js

@@ -37,2 +37,6 @@ /**
   ARIA_SELECTED: 'aria-selected',
+  ARIA_CHECKED: 'aria-checked',
+  ARIA_CHECKED_RADIO_SELECTOR: '[role="radio"][aria-checked="true"]',
+  RADIO_SELECTOR: 'input[type="radio"]:not(:disabled)',
+  CHECKBOX_SELECTOR: 'input[type="checkbox"]:not(:disabled)',
   CHECKBOX_RADIO_SELECTOR: 'input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled)',
@@ -39,0 +43,0 @@ CHILD_ELEMENTS_TO_TOGGLE_TABINDEX: `.${cssClasses.LIST_ITEM_CLASS} button:not(:disabled),

dist/mdc.list.js

@@ -78,3 +78,3 @@ /*!
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 25);
+/******/ 	return __webpack_require__(__webpack_require__.s = 26);
 /******/ })
@@ -573,10 +573,37 @@ /************************************************************************/
     /**
-     * Toggles the checkbox or radio button within a list item.
      * @param {number} index
-     * @return {boolean} true if a radio button or checkbox was present.
+     * @return {boolean} Returns true if radio button is present at given list item index.
      */
 
   }, {
-    key: "toggleCheckbox",
-    value: function toggleCheckbox(index) {}
+    key: "hasRadioAtIndex",
+    value: function hasRadioAtIndex(index) {}
+
+    /**
+     * @param {number} index
+     * @return {boolean} Returns true if checkbox is present at given list item index.
+     */
+
+  }, {
+    key: "hasCheckboxAtIndex",
+    value: function hasCheckboxAtIndex(index) {}
+
+    /**
+     * @param {number} index
+     * @return {boolean} Returns true if checkbox inside a list item is checked.
+     */
+
+  }, {
+    key: "isCheckboxCheckedAtIndex",
+    value: function isCheckboxCheckedAtIndex(index) {}
+
+    /**
+     * Sets the checked status of checkbox or radio at given list item index.
+     * @param {number} index
+     * @param {boolean} isChecked
+     */
+
+  }, {
+    key: "setCheckedCheckboxOrRadioAtIndex",
+    value: function setCheckedCheckboxOrRadioAtIndex(index, isChecked) {}
   }]);
@@ -633,2 +660,6 @@
   ARIA_SELECTED: 'aria-selected',
+  ARIA_CHECKED: 'aria-checked',
+  ARIA_CHECKED_RADIO_SELECTOR: '[role="radio"][aria-checked="true"]',
+  RADIO_SELECTOR: 'input[type="radio"]:not(:disabled)',
+  CHECKBOX_SELECTOR: 'input[type="checkbox"]:not(:disabled)',
   CHECKBOX_RADIO_SELECTOR: 'input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled)',
@@ -644,3 +675,3 @@ CHILD_ELEMENTS_TO_TOGGLE_TABINDEX: '.' + cssClasses.LIST_ITEM_CLASS + ' button:not(:disabled),\n  .' + cssClasses.LIST_ITEM_CLASS + ' a',
 
-/***/ 15:
+/***/ 16:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -729,3 +760,6 @@
           followHref: function followHref() {},
-          toggleCheckbox: function toggleCheckbox() {}
+          hasRadioAtIndex: function hasRadioAtIndex() {},
+          hasCheckboxAtIndex: function hasCheckboxAtIndex() {},
+          isCheckboxCheckedAtIndex: function isCheckboxCheckedAtIndex() {},
+          setCheckedCheckboxOrRadioAtIndex: function setCheckedCheckboxOrRadioAtIndex() {}
         }
@@ -809,27 +843,90 @@ );
     value: function setSelectedIndex(index) {
-      if (index === this.selectedIndex_) {
-        return;
+      if (index < 0 || index >= this.adapter_.getListItemCount()) return;
+
+      if (this.adapter_.hasCheckboxAtIndex(index)) {
+        this.setAriaAttributesForCheckbox_(index);
+      } else if (this.adapter_.hasRadioAtIndex(index)) {
+        this.setAriaAttributesForRadio_(index);
+      } else {
+        this.setAriaAttributesForSingleSelect_(index);
+        this.setClassNamesForSingleSelect_(index);
       }
 
-      var className = this.useActivatedClass_ ? __WEBPACK_IMPORTED_MODULE_2__constants__["a" /* cssClasses */].LIST_ITEM_ACTIVATED_CLASS : __WEBPACK_IMPORTED_MODULE_2__constants__["a" /* cssClasses */].LIST_ITEM_SELECTED_CLASS;
+      if (this.selectedIndex_ >= 0 && this.selectedIndex_ !== index) {
+        this.adapter_.setAttributeForElementIndex(this.selectedIndex_, 'tabindex', -1);
+      } else if (this.selectedIndex_ === -1 && index !== 0) {
+        // If no list item was selected set first list item's tabindex to -1.
+        // Generally, tabindex is set to 0 on first list item of list that has no preselected items.
+        this.adapter_.setAttributeForElementIndex(0, 'tabindex', -1);
+      }
 
+      this.adapter_.setAttributeForElementIndex(index, 'tabindex', 0);
+
+      this.selectedIndex_ = index;
+    }
+
+    /**
+     * @param {number} index
+     * @private
+     */
+
+  }, {
+    key: 'setAriaAttributesForCheckbox_',
+    value: function setAriaAttributesForCheckbox_(index) {
+      var ariaAttributeValue = this.adapter_.isCheckboxCheckedAtIndex(index) ? 'true' : 'false';
+      this.adapter_.setAttributeForElementIndex(index, __WEBPACK_IMPORTED_MODULE_2__constants__["b" /* strings */].ARIA_CHECKED, ariaAttributeValue);
+    }
+
+    /**
+     * @param {number} index
+     * @private
+     */
+
+  }, {
+    key: 'setAriaAttributesForRadio_',
+    value: function setAriaAttributesForRadio_(index) {
       if (this.selectedIndex_ >= 0) {
-        this.adapter_.removeAttributeForElementIndex(this.selectedIndex_, __WEBPACK_IMPORTED_MODULE_2__constants__["b" /* strings */].ARIA_SELECTED);
-        this.adapter_.removeClassForElementIndex(this.selectedIndex_, className);
-        this.adapter_.setAttributeForElementIndex(this.selectedIndex_, 'tabindex', -1);
+        this.adapter_.setAttributeForElementIndex(this.selectedIndex_, __WEBPACK_IMPORTED_MODULE_2__constants__["b" /* strings */].ARIA_CHECKED, 'false');
       }
 
-      if (index >= 0 && this.adapter_.getListItemCount() > index) {
-        this.selectedIndex_ = index;
-        this.adapter_.setAttributeForElementIndex(this.selectedIndex_, __WEBPACK_IMPORTED_MODULE_2__constants__["b" /* strings */].ARIA_SELECTED, true);
-        this.adapter_.addClassForElementIndex(this.selectedIndex_, className);
-        this.adapter_.setAttributeForElementIndex(this.selectedIndex_, 'tabindex', 0);
+      this.adapter_.setAttributeForElementIndex(index, __WEBPACK_IMPORTED_MODULE_2__constants__["b" /* strings */].ARIA_CHECKED, 'true');
+    }
 
-        if (this.selectedIndex_ !== 0) {
-          this.adapter_.setAttributeForElementIndex(0, 'tabindex', -1);
-        }
+    /**
+    * @param {number} index
+    * @private
+    */
+
+  }, {
+    key: 'setAriaAttributesForSingleSelect_',
+    value: function setAriaAttributesForSingleSelect_(index) {
+      if (this.selectedIndex_ >= 0 && this.selectedIndex_ !== index) {
+        this.adapter_.setAttributeForElementIndex(this.selectedIndex_, __WEBPACK_IMPORTED_MODULE_2__constants__["b" /* strings */].ARIA_SELECTED, 'false');
       }
+
+      this.adapter_.setAttributeForElementIndex(index, __WEBPACK_IMPORTED_MODULE_2__constants__["b" /* strings */].ARIA_SELECTED, 'true');
     }
 
     /**
+     * @param {number} index
+     * @private
+     */
+
+  }, {
+    key: 'setClassNamesForSingleSelect_',
+    value: function setClassNamesForSingleSelect_(index) {
+      var selectedClassName = __WEBPACK_IMPORTED_MODULE_2__constants__["a" /* cssClasses */].LIST_ITEM_SELECTED_CLASS;
+
+      if (this.useActivatedClass_) {
+        selectedClassName = __WEBPACK_IMPORTED_MODULE_2__constants__["a" /* cssClasses */].LIST_ITEM_ACTIVATED_CLASS;
+      }
+
+      if (this.selectedIndex_ >= 0) {
+        this.adapter_.removeClassForElementIndex(this.selectedIndex_, selectedClassName);
+      }
+
+      this.adapter_.addClassForElementIndex(index, selectedClassName);
+    }
+
+    /**
      * Focus in handler for the list items.
@@ -907,15 +1004,18 @@ * @param evt
             // Check if the space key was pressed on the list item or a child element.
-            this.setSelectedIndex(currentIndex);
             this.preventDefaultEvent_(evt);
           }
 
+          var hasCheckboxOrRadio = this.hasCheckboxOrRadioAtIndex_(listItemIndex);
+          if (hasCheckboxOrRadio) {
+            this.toggleCheckboxOrRadioAtIndex_(listItemIndex);
+            this.preventDefaultEvent_(evt);
+          }
+
+          if (this.isSingleSelectionList_ || hasCheckboxOrRadio) {
+            this.setSelectedIndex(currentIndex);
+          }
+
           // Explicitly activate links, since we're preventing default on Enter, and Space doesn't activate them.
           this.adapter_.followHref(currentIndex);
         }
-
-        var checkboxFound = this.adapter_.toggleCheckbox(listItemIndex);
-
-        if (checkboxFound) {
-          this.preventDefaultEvent_(evt);
-        }
       }
@@ -936,6 +1036,6 @@ }
       if (toggleCheckbox) {
-        this.adapter_.toggleCheckbox(index);
+        this.toggleCheckboxOrRadioAtIndex_(index);
       }
 
-      if (this.isSingleSelectionList_) {
+      if (this.isSingleSelectionList_ || this.hasCheckboxOrRadioAtIndex_(index)) {
         this.setSelectedIndex(index);
@@ -1016,2 +1116,32 @@ }
     }
+
+    /**
+     * Toggles checkbox or radio at give index. Radio doesn't change the checked state if it is already checked.
+     * @param {number} index
+     * @private
+     */
+
+  }, {
+    key: 'toggleCheckboxOrRadioAtIndex_',
+    value: function toggleCheckboxOrRadioAtIndex_(index) {
+      if (!this.hasCheckboxOrRadioAtIndex_(index)) return;
+
+      var isChecked = true;
+      if (this.adapter_.hasCheckboxAtIndex(index)) {
+        isChecked = !this.adapter_.isCheckboxCheckedAtIndex(index);
+      }
+
+      this.adapter_.setCheckedCheckboxOrRadioAtIndex(index, isChecked);
+    }
+
+    /**
+     * @param {number} index
+     * @return {boolean} Return true if list item contains checkbox or radio input at given index.
+     */
+
+  }, {
+    key: 'hasCheckboxOrRadioAtIndex_',
+    value: function hasCheckboxOrRadioAtIndex_(index) {
+      return this.adapter_.hasCheckboxAtIndex(index) || this.adapter_.hasRadioAtIndex(index);
+    }
   }]);
@@ -1026,3 +1156,3 @@
 
-/***/ 25:
+/***/ 26:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -1034,3 +1164,3 @@
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base_component__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation__ = __webpack_require__(15);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation__ = __webpack_require__(16);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__adapter__ = __webpack_require__(12);
@@ -1241,4 +1371,4 @@ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__material_dom_ponyfill__ = __webpack_require__(11);
     value: function initializeListType() {
-      // Automatically set single selection if selected/activated classes are present.
-      var preselectedElement = this.root_.querySelector('.' + __WEBPACK_IMPORTED_MODULE_4__constants__["a" /* cssClasses */].LIST_ITEM_ACTIVATED_CLASS + ', .' + __WEBPACK_IMPORTED_MODULE_4__constants__["a" /* cssClasses */].LIST_ITEM_SELECTED_CLASS);
+      // Pre-selected list item in single selected list or checked list item if list with radio input.
+      var preselectedElement = this.root_.querySelector('.' + __WEBPACK_IMPORTED_MODULE_4__constants__["a" /* cssClasses */].LIST_ITEM_ACTIVATED_CLASS + ',\n        .' + __WEBPACK_IMPORTED_MODULE_4__constants__["a" /* cssClasses */].LIST_ITEM_SELECTED_CLASS + ',\n        ' + __WEBPACK_IMPORTED_MODULE_4__constants__["b" /* strings */].ARIA_CHECKED_RADIO_SELECTOR);
 
@@ -1251,2 +1381,4 @@ if (preselectedElement) {
         this.singleSelection = true;
+
+        // Automatically set selected index if single select list type or list with radio inputs.
         this.selectedIndex = this.listElements.indexOf(preselectedElement);
@@ -1316,17 +1448,23 @@ }
         },
-        toggleCheckbox: function toggleCheckbox(index) {
-          var checkboxOrRadioExists = false;
+        hasCheckboxAtIndex: function hasCheckboxAtIndex(index) {
           var listItem = _this2.listElements[index];
-          var elementsToToggle = [].slice.call(listItem.querySelectorAll(__WEBPACK_IMPORTED_MODULE_4__constants__["b" /* strings */].CHECKBOX_RADIO_SELECTOR));
-          elementsToToggle.forEach(function (element) {
-            var event = document.createEvent('Event');
-            event.initEvent('change', true, true);
+          return !!listItem.querySelector(__WEBPACK_IMPORTED_MODULE_4__constants__["b" /* strings */].CHECKBOX_SELECTOR);
+        },
+        hasRadioAtIndex: function hasRadioAtIndex(index) {
+          var listItem = _this2.listElements[index];
+          return !!listItem.querySelector(__WEBPACK_IMPORTED_MODULE_4__constants__["b" /* strings */].RADIO_SELECTOR);
+        },
+        isCheckboxCheckedAtIndex: function isCheckboxCheckedAtIndex(index) {
+          var listItem = _this2.listElements[index];
+          var toggleEl = listItem.querySelector(__WEBPACK_IMPORTED_MODULE_4__constants__["b" /* strings */].CHECKBOX_SELECTOR);
+          return toggleEl.checked;
+        },
+        setCheckedCheckboxOrRadioAtIndex: function setCheckedCheckboxOrRadioAtIndex(index, isChecked) {
+          var listItem = _this2.listElements[index];
+          var toggleEl = listItem.querySelector(__WEBPACK_IMPORTED_MODULE_4__constants__["b" /* strings */].CHECKBOX_RADIO_SELECTOR);
+          toggleEl.checked = isChecked;
 
-            if (!element.checked || element.type !== 'radio') {
-              element.checked = !element.checked;
-              element.dispatchEvent(event);
-            }
-            checkboxOrRadioExists = true;
-          });
-          return checkboxOrRadioExists;
+          var event = document.createEvent('Event');
+          event.initEvent('change', true, true);
+          toggleEl.dispatchEvent(event);
         }
@@ -1333,0 +1471,0 @@ }));

dist/mdc.list.min.js

@@ -6,3 +6,3 @@ /*!
 */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.list=t():(e.mdc=e.mdc||{},e.mdc.list=t())}(this,function(){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=25)}({0:function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),r=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,e),this.adapter_=t}return o(e,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),o(e,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),e}();t.a=r},1:function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=n(0),r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),s=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;i(this,e),this.root_=t;for(var o=arguments.length,r=Array(o>2?o-2:0),s=2;s<o;s++)r[s-2]=arguments[s];this.initialize.apply(this,r),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return r(e,null,[{key:"attachTo",value:function(t){return new e(t,new o.a)}}]),r(e,[{key:"initialize",value:function(){}},{key:"getDefaultFoundation",value:function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")}},{key:"initialSyncWithDOM",value:function(){}},{key:"destroy",value:function(){this.foundation_.destroy()}},{key:"listen",value:function(e,t){this.root_.addEventListener(e,t)}},{key:"unlisten",value:function(e,t){this.root_.removeEventListener(e,t)}},{key:"emit",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=void 0;"function"==typeof CustomEvent?i=new CustomEvent(e,{detail:t,bubbles:n}):(i=document.createEvent("CustomEvent"),i.initCustomEvent(e,n,!1,t)),this.root_.dispatchEvent(i)}}]),e}();t.a=s},11:function(e,t,n){"use strict";/**
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.list=t():(e.mdc=e.mdc||{},e.mdc.list=t())}(this,function(){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=26)}({0:function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),r=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,e),this.adapter_=t}return o(e,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),o(e,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),e}();t.a=r},1:function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=n(0),r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),s=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;i(this,e),this.root_=t;for(var o=arguments.length,r=Array(o>2?o-2:0),s=2;s<o;s++)r[s-2]=arguments[s];this.initialize.apply(this,r),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return r(e,null,[{key:"attachTo",value:function(t){return new e(t,new o.a)}}]),r(e,[{key:"initialize",value:function(){}},{key:"getDefaultFoundation",value:function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")}},{key:"initialSyncWithDOM",value:function(){}},{key:"destroy",value:function(){this.foundation_.destroy()}},{key:"listen",value:function(e,t){this.root_.addEventListener(e,t)}},{key:"unlisten",value:function(e,t){this.root_.removeEventListener(e,t)}},{key:"emit",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=void 0;"function"==typeof CustomEvent?i=new CustomEvent(e,{detail:t,bubbles:n}):(i=document.createEvent("CustomEvent"),i.initCustomEvent(e,n,!1,t)),this.root_.dispatchEvent(i)}}]),e}();t.a=s},11:function(e,t,n){"use strict";/**
  * @license
@@ -29,3 +29,3 @@ * Copyright 2018 Google Inc.
  */
-function i(e,t){if(e.closest)return e.closest(t);for(var n=e;n;){if(o(n,t))return n;n=n.parentElement}return null}function o(e,t){return(e.matches||e.webkitMatchesSelector||e.msMatchesSelector).call(e,t)}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"closest",function(){return i}),n.d(t,"matches",function(){return o})},12:function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();!function(){function e(){i(this,e)}o(e,[{key:"getListItemCount",value:function(){}},{key:"getFocusedElementIndex",value:function(){}},{key:"setAttributeForElementIndex",value:function(e,t,n){}},{key:"removeAttributeForElementIndex",value:function(e,t){}},{key:"addClassForElementIndex",value:function(e,t){}},{key:"removeClassForElementIndex",value:function(e,t){}},{key:"focusItemAtIndex",value:function(e){}},{key:"setTabIndexForListItemChildren",value:function(e,t){}},{key:"followHref",value:function(e){}},{key:"toggleCheckbox",value:function(e){}}])}()},13:function(e,t,n){"use strict";n.d(t,"b",function(){return o}),n.d(t,"a",function(){return i});/**
+function i(e,t){if(e.closest)return e.closest(t);for(var n=e;n;){if(o(n,t))return n;n=n.parentElement}return null}function o(e,t){return(e.matches||e.webkitMatchesSelector||e.msMatchesSelector).call(e,t)}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"closest",function(){return i}),n.d(t,"matches",function(){return o})},12:function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();!function(){function e(){i(this,e)}o(e,[{key:"getListItemCount",value:function(){}},{key:"getFocusedElementIndex",value:function(){}},{key:"setAttributeForElementIndex",value:function(e,t,n){}},{key:"removeAttributeForElementIndex",value:function(e,t){}},{key:"addClassForElementIndex",value:function(e,t){}},{key:"removeClassForElementIndex",value:function(e,t){}},{key:"focusItemAtIndex",value:function(e){}},{key:"setTabIndexForListItemChildren",value:function(e,t){}},{key:"followHref",value:function(e){}},{key:"hasRadioAtIndex",value:function(e){}},{key:"hasCheckboxAtIndex",value:function(e){}},{key:"isCheckboxCheckedAtIndex",value:function(e){}},{key:"setCheckedCheckboxOrRadioAtIndex",value:function(e,t){}}])}()},13:function(e,t,n){"use strict";n.d(t,"b",function(){return o}),n.d(t,"a",function(){return i});/**
  * @license
@@ -52,3 +52,3 @@ * Copyright 2018 Google Inc.
  */
-var i={ROOT:"mdc-list",LIST_ITEM_CLASS:"mdc-list-item",LIST_ITEM_SELECTED_CLASS:"mdc-list-item--selected",LIST_ITEM_ACTIVATED_CLASS:"mdc-list-item--activated"},o={ARIA_ORIENTATION:"aria-orientation",ARIA_ORIENTATION_HORIZONTAL:"horizontal",ARIA_SELECTED:"aria-selected",CHECKBOX_RADIO_SELECTOR:'input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled)',CHILD_ELEMENTS_TO_TOGGLE_TABINDEX:"."+i.LIST_ITEM_CLASS+" button:not(:disabled),\n  ."+i.LIST_ITEM_CLASS+" a",FOCUSABLE_CHILD_ELEMENTS:"."+i.LIST_ITEM_CLASS+" button:not(:disabled), ."+i.LIST_ITEM_CLASS+" a,\n  ."+i.LIST_ITEM_CLASS+' input[type="radio"]:not(:disabled),\n  .'+i.LIST_ITEM_CLASS+' input[type="checkbox"]:not(:disabled)',ENABLED_ITEMS_SELECTOR:".mdc-list-item:not(.mdc-list-item--disabled)"}},15:function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var s=n(0),a=(n(12),n(13)),u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},l=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),c=["input","button","textarea","select"],f=function(e){function t(e){i(this,t);var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,u(t.defaultAdapter,e)));return n.wrapFocus_=!1,n.isVertical_=!0,n.isSingleSelectionList_=!1,n.selectedIndex_=-1,n.useActivatedClass_=!1,n}return r(t,e),l(t,null,[{key:"strings",get:function(){return a.b}},{key:"cssClasses",get:function(){return a.a}},{key:"defaultAdapter",get:function(){return{getListItemCount:function(){},getFocusedElementIndex:function(){},setAttributeForElementIndex:function(){},removeAttributeForElementIndex:function(){},addClassForElementIndex:function(){},removeClassForElementIndex:function(){},focusItemAtIndex:function(){},setTabIndexForListItemChildren:function(){},followHref:function(){},toggleCheckbox:function(){}}}}]),l(t,[{key:"setWrapFocus",value:function(e){this.wrapFocus_=e}},{key:"setVerticalOrientation",value:function(e){this.isVertical_=e}},{key:"setSingleSelection",value:function(e){this.isSingleSelectionList_=e}},{key:"setUseActivatedClass",value:function(e){this.useActivatedClass_=e}},{key:"setSelectedIndex",value:function(e){if(e!==this.selectedIndex_){var t=this.useActivatedClass_?a.a.LIST_ITEM_ACTIVATED_CLASS:a.a.LIST_ITEM_SELECTED_CLASS;this.selectedIndex_>=0&&(this.adapter_.removeAttributeForElementIndex(this.selectedIndex_,a.b.ARIA_SELECTED),this.adapter_.removeClassForElementIndex(this.selectedIndex_,t),this.adapter_.setAttributeForElementIndex(this.selectedIndex_,"tabindex",-1)),e>=0&&this.adapter_.getListItemCount()>e&&(this.selectedIndex_=e,this.adapter_.setAttributeForElementIndex(this.selectedIndex_,a.b.ARIA_SELECTED,!0),this.adapter_.addClassForElementIndex(this.selectedIndex_,t),this.adapter_.setAttributeForElementIndex(this.selectedIndex_,"tabindex",0),0!==this.selectedIndex_&&this.adapter_.setAttributeForElementIndex(0,"tabindex",-1))}}},{key:"handleFocusIn",value:function(e,t){t>=0&&this.adapter_.setTabIndexForListItemChildren(t,0)}},{key:"handleFocusOut",value:function(e,t){t>=0&&this.adapter_.setTabIndexForListItemChildren(t,-1)}},{key:"handleKeydown",value:function(e,t,n){var i="ArrowLeft"===e.key||37===e.keyCode,o="ArrowUp"===e.key||38===e.keyCode,r="ArrowRight"===e.key||39===e.keyCode,s="ArrowDown"===e.key||40===e.keyCode,a="Home"===e.key||36===e.keyCode,u="End"===e.key||35===e.keyCode,l="Enter"===e.key||13===e.keyCode,c="Space"===e.key||32===e.keyCode,f=this.adapter_.getFocusedElementIndex();if(!(-1===f&&(f=n)<0))if(this.isVertical_&&s||!this.isVertical_&&r)this.preventDefaultEvent_(e),this.focusNextElement(f);else if(this.isVertical_&&o||!this.isVertical_&&i)this.preventDefaultEvent_(e),this.focusPrevElement(f);else if(a)this.preventDefaultEvent_(e),this.focusFirstElement();else if(u)this.preventDefaultEvent_(e),this.focusLastElement();else if(l||c){t&&(this.isSingleSelectionList_&&(this.setSelectedIndex(f),this.preventDefaultEvent_(e)),this.adapter_.followHref(f));var d=this.adapter_.toggleCheckbox(n);d&&this.preventDefaultEvent_(e)}}},{key:"handleClick",value:function(e,t){-1!==e&&(t&&this.adapter_.toggleCheckbox(e),this.isSingleSelectionList_&&this.setSelectedIndex(e))}},{key:"preventDefaultEvent_",value:function(e){var t=(""+e.target.tagName).toLowerCase();-1===c.indexOf(t)&&e.preventDefault()}},{key:"focusNextElement",value:function(e){var t=this.adapter_.getListItemCount(),n=e+1;if(n>=t){if(!this.wrapFocus_)return;n=0}this.adapter_.focusItemAtIndex(n)}},{key:"focusPrevElement",value:function(e){var t=e-1;if(t<0){if(!this.wrapFocus_)return;t=this.adapter_.getListItemCount()-1}this.adapter_.focusItemAtIndex(t)}},{key:"focusFirstElement",value:function(){this.adapter_.getListItemCount()>0&&this.adapter_.focusItemAtIndex(0)}},{key:"focusLastElement",value:function(){var e=this.adapter_.getListItemCount()-1;e>=0&&this.adapter_.focusItemAtIndex(e)}}]),t}(s.a);t.a=f},25:function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"MDCList",function(){return d});var s=n(1),a=n(15),u=(n(12),n(11)),l=n(13);n.d(t,"MDCListFoundation",function(){return a.a});var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},f=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),d=function(e){function t(){var e;i(this,t);for(var n=arguments.length,r=Array(n),s=0;s<n;s++)r[s]=arguments[s];var a=o(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(r)));return a.handleKeydown_,a.handleClick_,a.focusInEventListener_,a.focusOutEventListener_,a}return r(t,e),f(t,[{key:"destroy",value:function(){this.root_.removeEventListener("keydown",this.handleKeydown_),this.root_.removeEventListener("click",this.handleClick_),this.root_.removeEventListener("focusin",this.focusInEventListener_),this.root_.removeEventListener("focusout",this.focusOutEventListener_)}},{key:"initialSyncWithDOM",value:function(){this.handleClick_=this.handleClickEvent_.bind(this),this.handleKeydown_=this.handleKeydownEvent_.bind(this),this.focusInEventListener_=this.handleFocusInEvent_.bind(this),this.focusOutEventListener_=this.handleFocusOutEvent_.bind(this),this.root_.addEventListener("keydown",this.handleKeydown_),this.root_.addEventListener("focusin",this.focusInEventListener_),this.root_.addEventListener("focusout",this.focusOutEventListener_),this.root_.addEventListener("click",this.handleClick_),this.layout(),this.initializeListType()}},{key:"layout",value:function(){var e=this.root_.getAttribute(l.b.ARIA_ORIENTATION);this.vertical=e!==l.b.ARIA_ORIENTATION_HORIZONTAL,[].slice.call(this.root_.querySelectorAll(".mdc-list-item:not([tabindex])")).forEach(function(e){e.setAttribute("tabindex",-1)}),[].slice.call(this.root_.querySelectorAll(l.b.FOCUSABLE_CHILD_ELEMENTS)).forEach(function(e){return e.setAttribute("tabindex",-1)})}},{key:"getListItemIndex_",value:function(e){for(var t=e.target,n=-1;!t.classList.contains(l.a.LIST_ITEM_CLASS)&&!t.classList.contains(l.a.ROOT);)t=t.parentElement;return t.classList.contains(l.a.LIST_ITEM_CLASS)&&(n=this.listElements.indexOf(t)),n}},{key:"handleFocusInEvent_",value:function(e){var t=this.getListItemIndex_(e);this.foundation_.handleFocusIn(e,t)}},{key:"handleFocusOutEvent_",value:function(e){var t=this.getListItemIndex_(e);this.foundation_.handleFocusOut(e,t)}},{key:"handleKeydownEvent_",value:function(e){var t=this.getListItemIndex_(e);t>=0&&this.foundation_.handleKeydown(e,e.target.classList.contains(l.a.LIST_ITEM_CLASS),t)}},{key:"handleClickEvent_",value:function(e){var t=this.getListItemIndex_(e),n=!Object(u.matches)(e.target,l.b.CHECKBOX_RADIO_SELECTOR);this.foundation_.handleClick(t,n)}},{key:"initializeListType",value:function(){var e=this.root_.querySelector("."+l.a.LIST_ITEM_ACTIVATED_CLASS+", ."+l.a.LIST_ITEM_SELECTED_CLASS);e&&(e.classList.contains(l.a.LIST_ITEM_ACTIVATED_CLASS)&&this.foundation_.setUseActivatedClass(!0),this.singleSelection=!0,this.selectedIndex=this.listElements.indexOf(e))}},{key:"getDefaultFoundation",value:function(){var e=this;return new a.a(c({getListItemCount:function(){return e.listElements.length},getFocusedElementIndex:function(){return e.listElements.indexOf(document.activeElement)},setAttributeForElementIndex:function(t,n,i){var o=e.listElements[t];o&&o.setAttribute(n,i)},removeAttributeForElementIndex:function(t,n){var i=e.listElements[t];i&&i.removeAttribute(n)},addClassForElementIndex:function(t,n){var i=e.listElements[t];i&&i.classList.add(n)},removeClassForElementIndex:function(t,n){var i=e.listElements[t];i&&i.classList.remove(n)},focusItemAtIndex:function(t){var n=e.listElements[t];n&&n.focus()},setTabIndexForListItemChildren:function(t,n){var i=e.listElements[t];[].slice.call(i.querySelectorAll(l.b.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX)).forEach(function(e){return e.setAttribute("tabindex",n)})},followHref:function(t){var n=e.listElements[t];n&&n.href&&n.click()},toggleCheckbox:function(t){var n=!1,i=e.listElements[t];return[].slice.call(i.querySelectorAll(l.b.CHECKBOX_RADIO_SELECTOR)).forEach(function(e){var t=document.createEvent("Event");t.initEvent("change",!0,!0),e.checked&&"radio"===e.type||(e.checked=!e.checked,e.dispatchEvent(t)),n=!0}),n}}))}},{key:"vertical",set:function(e){this.foundation_.setVerticalOrientation(e)}},{key:"listElements",get:function(){return[].slice.call(this.root_.querySelectorAll(l.b.ENABLED_ITEMS_SELECTOR))}},{key:"wrapFocus",set:function(e){this.foundation_.setWrapFocus(e)}},{key:"singleSelection",set:function(e){this.foundation_.setSingleSelection(e)}},{key:"selectedIndex",set:function(e){this.foundation_.setSelectedIndex(e)}}],[{key:"attachTo",value:function(e){return new t(e)}}]),t}(s.a)}})});
+var i={ROOT:"mdc-list",LIST_ITEM_CLASS:"mdc-list-item",LIST_ITEM_SELECTED_CLASS:"mdc-list-item--selected",LIST_ITEM_ACTIVATED_CLASS:"mdc-list-item--activated"},o={ARIA_ORIENTATION:"aria-orientation",ARIA_ORIENTATION_HORIZONTAL:"horizontal",ARIA_SELECTED:"aria-selected",ARIA_CHECKED:"aria-checked",ARIA_CHECKED_RADIO_SELECTOR:'[role="radio"][aria-checked="true"]',RADIO_SELECTOR:'input[type="radio"]:not(:disabled)',CHECKBOX_SELECTOR:'input[type="checkbox"]:not(:disabled)',CHECKBOX_RADIO_SELECTOR:'input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled)',CHILD_ELEMENTS_TO_TOGGLE_TABINDEX:"."+i.LIST_ITEM_CLASS+" button:not(:disabled),\n  ."+i.LIST_ITEM_CLASS+" a",FOCUSABLE_CHILD_ELEMENTS:"."+i.LIST_ITEM_CLASS+" button:not(:disabled), ."+i.LIST_ITEM_CLASS+" a,\n  ."+i.LIST_ITEM_CLASS+' input[type="radio"]:not(:disabled),\n  .'+i.LIST_ITEM_CLASS+' input[type="checkbox"]:not(:disabled)',ENABLED_ITEMS_SELECTOR:".mdc-list-item:not(.mdc-list-item--disabled)"}},16:function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var s=n(0),a=(n(12),n(13)),u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),l=["input","button","textarea","select"],d=function(e){function t(e){i(this,t);var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,u(t.defaultAdapter,e)));return n.wrapFocus_=!1,n.isVertical_=!0,n.isSingleSelectionList_=!1,n.selectedIndex_=-1,n.useActivatedClass_=!1,n}return r(t,e),c(t,null,[{key:"strings",get:function(){return a.b}},{key:"cssClasses",get:function(){return a.a}},{key:"defaultAdapter",get:function(){return{getListItemCount:function(){},getFocusedElementIndex:function(){},setAttributeForElementIndex:function(){},removeAttributeForElementIndex:function(){},addClassForElementIndex:function(){},removeClassForElementIndex:function(){},focusItemAtIndex:function(){},setTabIndexForListItemChildren:function(){},followHref:function(){},hasRadioAtIndex:function(){},hasCheckboxAtIndex:function(){},isCheckboxCheckedAtIndex:function(){},setCheckedCheckboxOrRadioAtIndex:function(){}}}}]),c(t,[{key:"setWrapFocus",value:function(e){this.wrapFocus_=e}},{key:"setVerticalOrientation",value:function(e){this.isVertical_=e}},{key:"setSingleSelection",value:function(e){this.isSingleSelectionList_=e}},{key:"setUseActivatedClass",value:function(e){this.useActivatedClass_=e}},{key:"setSelectedIndex",value:function(e){e<0||e>=this.adapter_.getListItemCount()||(this.adapter_.hasCheckboxAtIndex(e)?this.setAriaAttributesForCheckbox_(e):this.adapter_.hasRadioAtIndex(e)?this.setAriaAttributesForRadio_(e):(this.setAriaAttributesForSingleSelect_(e),this.setClassNamesForSingleSelect_(e)),this.selectedIndex_>=0&&this.selectedIndex_!==e?this.adapter_.setAttributeForElementIndex(this.selectedIndex_,"tabindex",-1):-1===this.selectedIndex_&&0!==e&&this.adapter_.setAttributeForElementIndex(0,"tabindex",-1),this.adapter_.setAttributeForElementIndex(e,"tabindex",0),this.selectedIndex_=e)}},{key:"setAriaAttributesForCheckbox_",value:function(e){var t=this.adapter_.isCheckboxCheckedAtIndex(e)?"true":"false";this.adapter_.setAttributeForElementIndex(e,a.b.ARIA_CHECKED,t)}},{key:"setAriaAttributesForRadio_",value:function(e){this.selectedIndex_>=0&&this.adapter_.setAttributeForElementIndex(this.selectedIndex_,a.b.ARIA_CHECKED,"false"),this.adapter_.setAttributeForElementIndex(e,a.b.ARIA_CHECKED,"true")}},{key:"setAriaAttributesForSingleSelect_",value:function(e){this.selectedIndex_>=0&&this.selectedIndex_!==e&&this.adapter_.setAttributeForElementIndex(this.selectedIndex_,a.b.ARIA_SELECTED,"false"),this.adapter_.setAttributeForElementIndex(e,a.b.ARIA_SELECTED,"true")}},{key:"setClassNamesForSingleSelect_",value:function(e){var t=a.a.LIST_ITEM_SELECTED_CLASS;this.useActivatedClass_&&(t=a.a.LIST_ITEM_ACTIVATED_CLASS),this.selectedIndex_>=0&&this.adapter_.removeClassForElementIndex(this.selectedIndex_,t),this.adapter_.addClassForElementIndex(e,t)}},{key:"handleFocusIn",value:function(e,t){t>=0&&this.adapter_.setTabIndexForListItemChildren(t,0)}},{key:"handleFocusOut",value:function(e,t){t>=0&&this.adapter_.setTabIndexForListItemChildren(t,-1)}},{key:"handleKeydown",value:function(e,t,n){var i="ArrowLeft"===e.key||37===e.keyCode,o="ArrowUp"===e.key||38===e.keyCode,r="ArrowRight"===e.key||39===e.keyCode,s="ArrowDown"===e.key||40===e.keyCode,a="Home"===e.key||36===e.keyCode,u="End"===e.key||35===e.keyCode,c="Enter"===e.key||13===e.keyCode,l="Space"===e.key||32===e.keyCode,d=this.adapter_.getFocusedElementIndex();if(!(-1===d&&(d=n)<0))if(this.isVertical_&&s||!this.isVertical_&&r)this.preventDefaultEvent_(e),this.focusNextElement(d);else if(this.isVertical_&&o||!this.isVertical_&&i)this.preventDefaultEvent_(e),this.focusPrevElement(d);else if(a)this.preventDefaultEvent_(e),this.focusFirstElement();else if(u)this.preventDefaultEvent_(e),this.focusLastElement();else if((c||l)&&t){this.isSingleSelectionList_&&this.preventDefaultEvent_(e);var f=this.hasCheckboxOrRadioAtIndex_(n);f&&(this.toggleCheckboxOrRadioAtIndex_(n),this.preventDefaultEvent_(e)),(this.isSingleSelectionList_||f)&&this.setSelectedIndex(d),this.adapter_.followHref(d)}}},{key:"handleClick",value:function(e,t){-1!==e&&(t&&this.toggleCheckboxOrRadioAtIndex_(e),(this.isSingleSelectionList_||this.hasCheckboxOrRadioAtIndex_(e))&&this.setSelectedIndex(e))}},{key:"preventDefaultEvent_",value:function(e){var t=(""+e.target.tagName).toLowerCase();-1===l.indexOf(t)&&e.preventDefault()}},{key:"focusNextElement",value:function(e){var t=this.adapter_.getListItemCount(),n=e+1;if(n>=t){if(!this.wrapFocus_)return;n=0}this.adapter_.focusItemAtIndex(n)}},{key:"focusPrevElement",value:function(e){var t=e-1;if(t<0){if(!this.wrapFocus_)return;t=this.adapter_.getListItemCount()-1}this.adapter_.focusItemAtIndex(t)}},{key:"focusFirstElement",value:function(){this.adapter_.getListItemCount()>0&&this.adapter_.focusItemAtIndex(0)}},{key:"focusLastElement",value:function(){var e=this.adapter_.getListItemCount()-1;e>=0&&this.adapter_.focusItemAtIndex(e)}},{key:"toggleCheckboxOrRadioAtIndex_",value:function(e){if(this.hasCheckboxOrRadioAtIndex_(e)){var t=!0;this.adapter_.hasCheckboxAtIndex(e)&&(t=!this.adapter_.isCheckboxCheckedAtIndex(e)),this.adapter_.setCheckedCheckboxOrRadioAtIndex(e,t)}}},{key:"hasCheckboxOrRadioAtIndex_",value:function(e){return this.adapter_.hasCheckboxAtIndex(e)||this.adapter_.hasRadioAtIndex(e)}}]),t}(s.a);t.a=d},26:function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"MDCList",function(){return f});var s=n(1),a=n(16),u=(n(12),n(11)),c=n(13);n.d(t,"MDCListFoundation",function(){return a.a});var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},d=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),f=function(e){function t(){var e;i(this,t);for(var n=arguments.length,r=Array(n),s=0;s<n;s++)r[s]=arguments[s];var a=o(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(r)));return a.handleKeydown_,a.handleClick_,a.focusInEventListener_,a.focusOutEventListener_,a}return r(t,e),d(t,[{key:"destroy",value:function(){this.root_.removeEventListener("keydown",this.handleKeydown_),this.root_.removeEventListener("click",this.handleClick_),this.root_.removeEventListener("focusin",this.focusInEventListener_),this.root_.removeEventListener("focusout",this.focusOutEventListener_)}},{key:"initialSyncWithDOM",value:function(){this.handleClick_=this.handleClickEvent_.bind(this),this.handleKeydown_=this.handleKeydownEvent_.bind(this),this.focusInEventListener_=this.handleFocusInEvent_.bind(this),this.focusOutEventListener_=this.handleFocusOutEvent_.bind(this),this.root_.addEventListener("keydown",this.handleKeydown_),this.root_.addEventListener("focusin",this.focusInEventListener_),this.root_.addEventListener("focusout",this.focusOutEventListener_),this.root_.addEventListener("click",this.handleClick_),this.layout(),this.initializeListType()}},{key:"layout",value:function(){var e=this.root_.getAttribute(c.b.ARIA_ORIENTATION);this.vertical=e!==c.b.ARIA_ORIENTATION_HORIZONTAL,[].slice.call(this.root_.querySelectorAll(".mdc-list-item:not([tabindex])")).forEach(function(e){e.setAttribute("tabindex",-1)}),[].slice.call(this.root_.querySelectorAll(c.b.FOCUSABLE_CHILD_ELEMENTS)).forEach(function(e){return e.setAttribute("tabindex",-1)})}},{key:"getListItemIndex_",value:function(e){for(var t=e.target,n=-1;!t.classList.contains(c.a.LIST_ITEM_CLASS)&&!t.classList.contains(c.a.ROOT);)t=t.parentElement;return t.classList.contains(c.a.LIST_ITEM_CLASS)&&(n=this.listElements.indexOf(t)),n}},{key:"handleFocusInEvent_",value:function(e){var t=this.getListItemIndex_(e);this.foundation_.handleFocusIn(e,t)}},{key:"handleFocusOutEvent_",value:function(e){var t=this.getListItemIndex_(e);this.foundation_.handleFocusOut(e,t)}},{key:"handleKeydownEvent_",value:function(e){var t=this.getListItemIndex_(e);t>=0&&this.foundation_.handleKeydown(e,e.target.classList.contains(c.a.LIST_ITEM_CLASS),t)}},{key:"handleClickEvent_",value:function(e){var t=this.getListItemIndex_(e),n=!Object(u.matches)(e.target,c.b.CHECKBOX_RADIO_SELECTOR);this.foundation_.handleClick(t,n)}},{key:"initializeListType",value:function(){var e=this.root_.querySelector("."+c.a.LIST_ITEM_ACTIVATED_CLASS+",\n        ."+c.a.LIST_ITEM_SELECTED_CLASS+",\n        "+c.b.ARIA_CHECKED_RADIO_SELECTOR);e&&(e.classList.contains(c.a.LIST_ITEM_ACTIVATED_CLASS)&&this.foundation_.setUseActivatedClass(!0),this.singleSelection=!0,this.selectedIndex=this.listElements.indexOf(e))}},{key:"getDefaultFoundation",value:function(){var e=this;return new a.a(l({getListItemCount:function(){return e.listElements.length},getFocusedElementIndex:function(){return e.listElements.indexOf(document.activeElement)},setAttributeForElementIndex:function(t,n,i){var o=e.listElements[t];o&&o.setAttribute(n,i)},removeAttributeForElementIndex:function(t,n){var i=e.listElements[t];i&&i.removeAttribute(n)},addClassForElementIndex:function(t,n){var i=e.listElements[t];i&&i.classList.add(n)},removeClassForElementIndex:function(t,n){var i=e.listElements[t];i&&i.classList.remove(n)},focusItemAtIndex:function(t){var n=e.listElements[t];n&&n.focus()},setTabIndexForListItemChildren:function(t,n){var i=e.listElements[t];[].slice.call(i.querySelectorAll(c.b.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX)).forEach(function(e){return e.setAttribute("tabindex",n)})},followHref:function(t){var n=e.listElements[t];n&&n.href&&n.click()},hasCheckboxAtIndex:function(t){return!!e.listElements[t].querySelector(c.b.CHECKBOX_SELECTOR)},hasRadioAtIndex:function(t){return!!e.listElements[t].querySelector(c.b.RADIO_SELECTOR)},isCheckboxCheckedAtIndex:function(t){return e.listElements[t].querySelector(c.b.CHECKBOX_SELECTOR).checked},setCheckedCheckboxOrRadioAtIndex:function(t,n){var i=e.listElements[t],o=i.querySelector(c.b.CHECKBOX_RADIO_SELECTOR);o.checked=n;var r=document.createEvent("Event");r.initEvent("change",!0,!0),o.dispatchEvent(r)}}))}},{key:"vertical",set:function(e){this.foundation_.setVerticalOrientation(e)}},{key:"listElements",get:function(){return[].slice.call(this.root_.querySelectorAll(c.b.ENABLED_ITEMS_SELECTOR))}},{key:"wrapFocus",set:function(e){this.foundation_.setWrapFocus(e)}},{key:"singleSelection",set:function(e){this.foundation_.setSingleSelection(e)}},{key:"selectedIndex",set:function(e){this.foundation_.setSelectedIndex(e)}}],[{key:"attachTo",value:function(e){return new t(e)}}]),t}(s.a)}})});
 //# sourceMappingURL=mdc.list.min.js.map

foundation.js

@@ -57,3 +57,6 @@ /**
       followHref: () => {},
-      toggleCheckbox: () => {},
+      hasRadioAtIndex: () => {},
+      hasCheckboxAtIndex: () => {},
+      isCheckboxCheckedAtIndex: () => {},
+      setCheckedCheckboxOrRadioAtIndex: () => {},
     });
@@ -113,28 +116,78 @@ }
   setSelectedIndex(index) {
-    if (index === this.selectedIndex_) {
-      return;
+    if (index < 0 || index >= this.adapter_.getListItemCount()) return;
+
+    if (this.adapter_.hasCheckboxAtIndex(index)) {
+      this.setAriaAttributesForCheckbox_(index);
+    } else if (this.adapter_.hasRadioAtIndex(index)) {
+      this.setAriaAttributesForRadio_(index);
+    } else {
+      this.setAriaAttributesForSingleSelect_(index);
+      this.setClassNamesForSingleSelect_(index);
     }
 
-    const className = this.useActivatedClass_
-      ? cssClasses.LIST_ITEM_ACTIVATED_CLASS : cssClasses.LIST_ITEM_SELECTED_CLASS;
+    if (this.selectedIndex_ >= 0 && this.selectedIndex_ !== index) {
+      this.adapter_.setAttributeForElementIndex(this.selectedIndex_, 'tabindex', -1);
+    } else if (this.selectedIndex_ === -1 && index !== 0) {
+      // If no list item was selected set first list item's tabindex to -1.
+      // Generally, tabindex is set to 0 on first list item of list that has no preselected items.
+      this.adapter_.setAttributeForElementIndex(0, 'tabindex', -1);
+    }
 
+    this.adapter_.setAttributeForElementIndex(index, 'tabindex', 0);
+
+    this.selectedIndex_ = index;
+  }
+
+  /**
+   * @param {number} index
+   * @private
+   */
+  setAriaAttributesForCheckbox_(index) {
+    const ariaAttributeValue = this.adapter_.isCheckboxCheckedAtIndex(index) ? 'true' : 'false';
+    this.adapter_.setAttributeForElementIndex(index, strings.ARIA_CHECKED, ariaAttributeValue);
+  }
+
+  /**
+   * @param {number} index
+   * @private
+   */
+  setAriaAttributesForRadio_(index) {
     if (this.selectedIndex_ >= 0) {
-      this.adapter_.removeAttributeForElementIndex(this.selectedIndex_, strings.ARIA_SELECTED);
-      this.adapter_.removeClassForElementIndex(this.selectedIndex_, className);
-      this.adapter_.setAttributeForElementIndex(this.selectedIndex_, 'tabindex', -1);
+      this.adapter_.setAttributeForElementIndex(this.selectedIndex_, strings.ARIA_CHECKED, 'false');
     }
 
-    if (index >= 0 && this.adapter_.getListItemCount() > index) {
-      this.selectedIndex_ = index;
-      this.adapter_.setAttributeForElementIndex(this.selectedIndex_, strings.ARIA_SELECTED, true);
-      this.adapter_.addClassForElementIndex(this.selectedIndex_, className);
-      this.adapter_.setAttributeForElementIndex(this.selectedIndex_, 'tabindex', 0);
+    this.adapter_.setAttributeForElementIndex(index, strings.ARIA_CHECKED, 'true');
+  }
 
-      if (this.selectedIndex_ !== 0) {
-        this.adapter_.setAttributeForElementIndex(0, 'tabindex', -1);
-      }
+  /**
+  * @param {number} index
+  * @private
+  */
+  setAriaAttributesForSingleSelect_(index) {
+    if (this.selectedIndex_ >= 0 && this.selectedIndex_ !== index) {
+      this.adapter_.setAttributeForElementIndex(this.selectedIndex_, strings.ARIA_SELECTED, 'false');
     }
+
+    this.adapter_.setAttributeForElementIndex(index, strings.ARIA_SELECTED, 'true');
   }
 
   /**
+   * @param {number} index
+   * @private
+   */
+  setClassNamesForSingleSelect_(index) {
+    let selectedClassName = cssClasses.LIST_ITEM_SELECTED_CLASS;
+
+    if (this.useActivatedClass_) {
+      selectedClassName = cssClasses.LIST_ITEM_ACTIVATED_CLASS;
+    }
+
+    if (this.selectedIndex_ >= 0) {
+      this.adapter_.removeClassForElementIndex(this.selectedIndex_, selectedClassName);
+    }
+
+    this.adapter_.addClassForElementIndex(index, selectedClassName);
+  }
+
+  /**
    * Focus in handler for the list items.
@@ -203,15 +256,18 @@ * @param evt
           // Check if the space key was pressed on the list item or a child element.
-          this.setSelectedIndex(currentIndex);
           this.preventDefaultEvent_(evt);
         }
 
+        const hasCheckboxOrRadio = this.hasCheckboxOrRadioAtIndex_(listItemIndex);
+        if (hasCheckboxOrRadio) {
+          this.toggleCheckboxOrRadioAtIndex_(listItemIndex);
+          this.preventDefaultEvent_(evt);
+        }
+
+        if (this.isSingleSelectionList_ || hasCheckboxOrRadio) {
+          this.setSelectedIndex(currentIndex);
+        }
+
         // Explicitly activate links, since we're preventing default on Enter, and Space doesn't activate them.
         this.adapter_.followHref(currentIndex);
       }
-
-      const checkboxFound = this.adapter_.toggleCheckbox(listItemIndex);
-
-      if (checkboxFound) {
-        this.preventDefaultEvent_(evt);
-      }
     }
@@ -229,6 +285,6 @@ }
     if (toggleCheckbox) {
-      this.adapter_.toggleCheckbox(index);
+      this.toggleCheckboxOrRadioAtIndex_(index);
     }
 
-    if (this.isSingleSelectionList_) {
+    if (this.isSingleSelectionList_ || this.hasCheckboxOrRadioAtIndex_(index)) {
       this.setSelectedIndex(index);
@@ -298,4 +354,28 @@ }
   }
+
+  /**
+   * Toggles checkbox or radio at give index. Radio doesn't change the checked state if it is already checked.
+   * @param {number} index
+   * @private
+   */
+  toggleCheckboxOrRadioAtIndex_(index) {
+    if (!this.hasCheckboxOrRadioAtIndex_(index)) return;
+
+    let isChecked = true;
+    if (this.adapter_.hasCheckboxAtIndex(index)) {
+      isChecked = !this.adapter_.isCheckboxCheckedAtIndex(index);
+    }
+
+    this.adapter_.setCheckedCheckboxOrRadioAtIndex(index, isChecked);
+  }
+
+  /**
+   * @param {number} index
+   * @return {boolean} Return true if list item contains checkbox or radio input at given index.
+   */
+  hasCheckboxOrRadioAtIndex_(index) {
+    return this.adapter_.hasCheckboxAtIndex(index) || this.adapter_.hasRadioAtIndex(index);
+  }
 }
 
 export default MDCListFoundation;

index.js

@@ -162,5 +162,6 @@ /**
   initializeListType() {
-    // Automatically set single selection if selected/activated classes are present.
-    const preselectedElement =
-      this.root_.querySelector(`.${cssClasses.LIST_ITEM_ACTIVATED_CLASS}, .${cssClasses.LIST_ITEM_SELECTED_CLASS}`);
+    // Pre-selected list item in single selected list or checked list item if list with radio input.
+    const preselectedElement = this.root_.querySelector(`.${cssClasses.LIST_ITEM_ACTIVATED_CLASS},
+        .${cssClasses.LIST_ITEM_SELECTED_CLASS},
+        ${strings.ARIA_CHECKED_RADIO_SELECTOR}`);
 
@@ -173,2 +174,4 @@ if (preselectedElement) {
       this.singleSelection = true;
+
+      // Automatically set selected index if single select list type or list with radio inputs.
       this.selectedIndex = this.listElements.indexOf(preselectedElement);
@@ -249,18 +252,23 @@ }
       },
-      toggleCheckbox: (index) => {
-        let checkboxOrRadioExists = false;
+      hasCheckboxAtIndex: (index) => {
         const listItem = this.listElements[index];
-        const elementsToToggle =
-          [].slice.call(listItem.querySelectorAll(strings.CHECKBOX_RADIO_SELECTOR));
-        elementsToToggle.forEach((element) => {
-          const event = document.createEvent('Event');
-          event.initEvent('change', true, true);
+        return !!listItem.querySelector(strings.CHECKBOX_SELECTOR);
+      },
+      hasRadioAtIndex: (index) => {
+        const listItem = this.listElements[index];
+        return !!listItem.querySelector(strings.RADIO_SELECTOR);
+      },
+      isCheckboxCheckedAtIndex: (index) => {
+        const listItem = this.listElements[index];
+        const toggleEl = listItem.querySelector(strings.CHECKBOX_SELECTOR);
+        return toggleEl.checked;
+      },
+      setCheckedCheckboxOrRadioAtIndex: (index, isChecked) => {
+        const listItem = this.listElements[index];
+        const toggleEl = listItem.querySelector(strings.CHECKBOX_RADIO_SELECTOR);
+        toggleEl.checked = isChecked;
 
-          if (!element.checked || element.type !== 'radio') {
-            element.checked = !element.checked;
-            element.dispatchEvent(event);
-          }
-          checkboxOrRadioExists = true;
-        });
-        return checkboxOrRadioExists;
+        const event = document.createEvent('Event');
+        event.initEvent('change', true, true);
+        toggleEl.dispatchEvent(event);
       },
@@ -267,0 +275,0 @@ })));

package.json

 {
   "name": "@material/list",
   "description": "The Material Components for the web list component",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "license": "MIT",
@@ -19,8 +19,8 @@ "main": "dist/mdc.list.js",
     "@material/dom": "^0.41.0",
-    "@material/ripple": "^0.41.0",
-    "@material/rtl": "^0.40.1",
-    "@material/shape": "^0.41.0",
+    "@material/ripple": "^0.42.0",
+    "@material/rtl": "^0.42.0",
+    "@material/shape": "^0.42.0",
     "@material/theme": "^0.41.0",
-    "@material/typography": "^0.41.0"
+    "@material/typography": "^0.42.0"
   }
 }

README.md

@@ -42,4 +42,4 @@ <!--docs:
 ```html
-<ul class="mdc-list" aria-orientation="vertical">
-  <li class="mdc-list-item">
+<ul class="mdc-list">
+  <li class="mdc-list-item" tabindex="0">
     <span class="mdc-list-item__text">Single-line item</span>
@@ -56,2 +56,23 @@ </li>
 
+### JavaScript
+
+MDC List includes an optional JavaScript component which can be used for keyboard interaction and accessibility.
+
+```js
+import {MDCList} from '@material/list';
+
+const list = new MDCList(document.querySelector('.mdc-list'));
+```
+
+> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.
+
+Note that the JS component does _not_ automatically instantiate ripples on list items. If you wish to include the
+fully-upgraded ripple effect on list items, you must instantiate `MDCRipple` on each item:
+
+```js
+import {MDCRipple} from '@material/ripple';
+
+const listItemRipples = list.listElements.map((listItemEl) => new MDCRipple(listItemEl));
+```
+
 ## Variants
@@ -66,4 +87,4 @@
 ```html
-<ul class="mdc-list mdc-list--two-line" aria-orientation="vertical">
-  <li class="mdc-list-item">
+<ul class="mdc-list mdc-list--two-line">
+  <li class="mdc-list-item" tabindex="0">
     <span class="mdc-list-item__text">
@@ -98,4 +119,4 @@ <span class="mdc-list-item__primary-text">First-line text</span>
   <h3 class="mdc-list-group__subheader">List 1</h3>
-  <ul class="mdc-list" aria-orientation="vertical">
-    <li class="mdc-list-item">
+  <ul class="mdc-list">
+    <li class="mdc-list-item" tabindex="0">
       <span class="mdc-list-item__text">line item</span>
@@ -111,3 +132,3 @@ </li>
   <h3 class="mdc-list-group__subheader">List 2</h3>
-  <ul class="mdc-list" aria-orientation="vertical">
+  <ul class="mdc-list">
     <li class="mdc-list-item">
@@ -131,4 +152,4 @@ <span class="mdc-list-item__text">line item</span>
 ```html
-<ul class="mdc-list" aria-orientation="vertical">
-  <li class="mdc-list-item">
+<ul class="mdc-list">
+  <li class="mdc-list-item" tabindex="0">
     <span class="mdc-list-item__text">Item 1 - Division 1</span>
@@ -154,4 +175,4 @@ </li>
 ```html
-<ul class="mdc-list" aria-orientation="vertical">
-  <li class="mdc-list-item">
+<ul class="mdc-list">
+  <li class="mdc-list-item" tabindex="0">
     <span class="mdc-list-item__text">Item 1 - List 1</span>
@@ -164,3 +185,3 @@ </li>
 <hr class="mdc-list-divider">
-<ul class="mdc-list" aria-orientation="vertical">
+<ul class="mdc-list">
   <li class="mdc-list-item">
@@ -181,10 +202,10 @@ <span class="mdc-list-item__text">Item 1 - List 2</span>
 ```html
-<ul id="my-list" class="mdc-list" aria-orientation="vertical">
-  <li class="mdc-list-item" tabindex="0">
+<ul id="my-list" class="mdc-list" role="listbox">
+  <li class="mdc-list-item" role="option" tabindex="0">
     <span class="mdc-list-item__text">Single-line item</span>
   </li>
-  <li class="mdc-list-item">
+  <li class="mdc-list-item" role="option">
     <span class="mdc-list-item__text">Single-line item</span>
   </li>
-  <li class="mdc-list-item">
+  <li class="mdc-list-item" role="option">
     <span class="mdc-list-item__text">Single-line item</span>
@@ -196,4 +217,3 @@ </li>
 ```js
-var listEle = document.getElementById('my-list');
-var list = new mdc.list.MDCList(listEle);
+const list = new MDCList(document.getElementById('my-list'));
 list.singleSelection = true;
@@ -209,10 +229,10 @@ ```
 ```html
-<ul id="my-list" class="mdc-list" aria-orientation="vertical">
-  <li class="mdc-list-item">
+<ul id="my-list" class="mdc-list" role="listbox">
+  <li class="mdc-list-item" role="option" aria-selected="false">
     <span class="mdc-list-item__text">Single-line item</span>
   </li>
-  <li class="mdc-list-item mdc-list-item--selected" aria-selected="true" tabindex="0">
+  <li class="mdc-list-item mdc-list-item--selected" role="option" aria-selected="true" tabindex="0">
     <span class="mdc-list-item__text">Single-line item</span>
   </li>
-  <li class="mdc-list-item">
+  <li class="mdc-list-item" role="option" aria-selected="false">
     <span class="mdc-list-item__text">Single-line item</span>
@@ -224,7 +244,131 @@ </li>
 ```js
-var listEle = document.getElementById('my-list');
-var list = new mdc.list.MDCList(listEle);
+const list = new MDCList(document.getElementById('my-list'));
 list.singleSelection = true;
 ```
 
+### List with radio group
+
+When rendering list radio group with pre-selected radio button the selected list item should contain `aria-checked` set to `true` and the native radio input element contains `checked` attribute, all other list items should have `aria-checked` set to `false`. The list root contains `role="radiogroup"` whereas each list item within radio group contains `role="radio"`.
+
+```html
+<ul class="mdc-list" role="radiogroup">
+  <li class="mdc-list-item" role="radio" aria-checked="false">
+    <span class="mdc-list-item__graphic">
+      <div class="mdc-radio">
+        <input class="mdc-radio__native-control"
+              type="radio"
+              id="demo-list-radio-item-1"
+              name="demo-list-radio-item-group"
+              value="1">
+        <div class="mdc-radio__background">
+          <div class="mdc-radio__outer-circle"></div>
+          <div class="mdc-radio__inner-circle"></div>
+        </div>
+      </div>
+    </span>
+    <label class="mdc-list-item__text" for="demo-list-radio-item-1">Option 1</label>
+  </li>
+  <li class="mdc-list-item" role="radio" aria-checked="true" tabindex="0">
+    <span class="mdc-list-item__graphic">
+      <div class="mdc-radio">
+        <input class="mdc-radio__native-control"
+              type="radio"
+              id="demo-list-radio-item-2"
+              name="demo-list-radio-item-group"
+              value="2"
+              checked>
+        <div class="mdc-radio__background">
+          <div class="mdc-radio__outer-circle"></div>
+          <div class="mdc-radio__inner-circle"></div>
+        </div>
+      </div>
+    </span>
+    <label class="mdc-list-item__text" for="demo-list-radio-item-2">Option 2</label>
+  </li>
+  <li class="mdc-list-item" role="radio" aria-checked="false">
+    <span class="mdc-list-item__graphic">
+      <div class="mdc-radio">
+        <input class="mdc-radio__native-control"
+              type="radio"
+              id="demo-list-radio-item-3"
+              name="demo-list-radio-item-group"
+              value="3">
+        <div class="mdc-radio__background">
+          <div class="mdc-radio__outer-circle"></div>
+          <div class="mdc-radio__inner-circle"></div>
+        </div>
+      </div>
+    </span>
+    <label class="mdc-list-item__text" for="demo-list-radio-item-3">Option 3</label>
+  </li>
+</ul>
+```
+
+### List with checkbox items
+
+When rendering list with checkbox items all pre-selected list items should contain `aria-checked` set to `true` and the native checkbox input element should contain `checked` attribute, all other list items should have `aria-checked` set to `false`. Each list item in checkbox list contains `role="checkbox"` attribute and the list root should contain `role="group"` and `aria-label` attributes.
+
+```html
+<ul class="mdc-list" role="group" aria-label="List with checkbox items">
+  <li class="mdc-list-item" role="checkbox" aria-checked="false">
+    <span class="mdc-list-item__graphic">
+      <div class="mdc-checkbox">
+        <input type="checkbox"
+                class="mdc-checkbox__native-control"
+                id="demo-list-checkbox-item-1"  />
+        <div class="mdc-checkbox__background">
+          <svg class="mdc-checkbox__checkmark"
+                viewBox="0 0 24 24">
+            <path class="mdc-checkbox__checkmark-path"
+                  fill="none"
+                  d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+          </svg>
+          <div class="mdc-checkbox__mixedmark"></div>
+        </div>
+      </div>
+    </span>
+    <label class="mdc-list-item__text" for="demo-list-checkbox-item-1">Option 1</label>
+  </li>
+  <li class="mdc-list-item" role="checkbox" aria-checked="true" tabindex="0">
+    <span class="mdc-list-item__graphic">
+        <div class="mdc-checkbox">
+            <input type="checkbox"
+                    class="mdc-checkbox__native-control"
+                    id="demo-list-checkbox-item-2"
+                    checked />
+            <div class="mdc-checkbox__background">
+              <svg class="mdc-checkbox__checkmark"
+                    viewBox="0 0 24 24">
+                <path class="mdc-checkbox__checkmark-path"
+                      fill="none"
+                      d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+              </svg>
+              <div class="mdc-checkbox__mixedmark"></div>
+            </div>
+          </div>
+    </span>
+    <label class="mdc-list-item__text" for="demo-list-checkbox-item-2">Option 2</label>
+  </li>
+  <li class="mdc-list-item" role="checkbox" aria-checked="false">
+    <span class="mdc-list-item__graphic">
+        <div class="mdc-checkbox">
+            <input type="checkbox"
+                    class="mdc-checkbox__native-control"
+                    id="demo-list-checkbox-item-3" />
+            <div class="mdc-checkbox__background">
+              <svg class="mdc-checkbox__checkmark"
+                    viewBox="0 0 24 24">
+                <path class="mdc-checkbox__checkmark-path"
+                      fill="none"
+                      d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+              </svg>
+              <div class="mdc-checkbox__mixedmark"></div>
+            </div>
+          </div>
+    </span>
+    <label class="mdc-list-item__text" for="demo-list-checkbox-item-3">Option 3</label>
+  </li>
+</ul>
+```
+
 ## Style Customization
@@ -245,4 +389,5 @@
 `mdc-list-item__secondary-text` | Optional, secondary text for the list item. Displayed below the primary text. Should be the child of `mdc-list-item__text`.
-`mdc-list-item--selected` | Optional, styles the row in an selected* state.
-`mdc-list-item--activated` | Optional, styles the row in an activated* state.
+`mdc-list-item--disabled` | Optional, styles the row in the disabled state.
+`mdc-list-item--selected` | Optional, styles the row in the selected* state.
+`mdc-list-item--activated` | Optional, styles the row in the activated* state.
 `mdc-list-item__graphic` | Optional, the first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image.
@@ -256,11 +401,8 @@ `mdc-list-item__meta`	| Optional, the last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image.
 
-> NOTE: `mdc-list-divider` class can be used between list items (example 1) *OR* between two lists (example 2).
+> NOTE: The `mdc-list-divider` class can be used between list items *OR* between two lists (see respective examples under [List Dividers](#list-dividers)).
 
-> NOTE: the difference between selected and activated states:
+> NOTE: In Material Design, the selected and activated states apply in different, mutually-exclusive situations:
+> * *Selected* state should be applied on the `.mdc-list-item` when it is likely to frequently change due to user choice. E.g., selecting one or more photos to share in Google Photos.
+> * *Activated* state is more permanent than selected state, and will **NOT** change soon relative to the lifetime of the page. Common examples are navigation components such as the list within a navigation drawer.
 
-* *Selected* state should be implemented on the `.mdc-list-item` when it is likely to change soon. Eg., selecting one or more photos to share in Google Photos.
-* Multiple items can be selected at the same time when using the *selected* state.
-* *Activated* state is similar to selected state, however should only be implemented once within a specific list.
-* *Activated* state is more permanent than selected state, and will **NOT** change soon relative to the lifetime of the page.
-
 ### Sass Mixins
@@ -283,12 +425,20 @@
 [Listbox](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox). This includes overriding the default tab behavior
-within the list component. You should not add `tabindex` to any of the `li` elements in a list.
+within the list component.
 
+The `tabindex` should be set to `0` for first list item element or selected list item element, remaining list item elements should not have `tabindex` set.
+
+Use `role="listbox"` only for single selection list, without this role the `ul` element is implicitely `role="list"`.
+Do not use `aria-orientation` attribute for standard list (i.e., `role="list"`), use component's `vertical` property to set the orientation
+to vertical.
+
 As the user navigates through the list, any `button` and `a` elements within the list will receive `tabindex="-1"` when
 the list item is not focused. When the list item receives focus, the aforementioned elements will receive
 `tabIndex="0"`. This allows for the user to tab through list item elements and then tab to the first element after the
-list. The `Arrow`, `Home`, and `End` keys should be used for navigating internal list elements. If 
+list. The `Arrow`, `Home`, and `End` keys should be used for navigating internal list elements. If
 `singleSelection=true`, the list will allow the user to use the `Space` or `Enter` keys to select or deselect a list
 item. The MDCList will perform the following actions for each key press. Since list interaction will toggle a radio
-button or checkbox within the list item, the list will not toggle `tabindex` for those elements. 
+button or checkbox within the list item, the list will not toggle `tabindex` for those elements.
 
+Any disabled list items (with the `mdc-list-item--disabled` class applied) will be excluded from keyboard navigation.
+
 Key | Action
@@ -323,3 +473,3 @@ --- | ---
 ```html
-<ul id="my-list" class="mdc-list" aria-orientation="vertical">
+<ul id="my-list" class="mdc-list">
   <li class="mdc-list-item" tabindex="0">
@@ -347,3 +497,3 @@ <span class="mdc-list-item__text">Single-line item</span>
 ```html
-<ul id="my-list" class="mdc-list" aria-orientation="vertical">
+<ul id="my-list" class="mdc-list">
   <li class="mdc-list-item" tabindex="-1">
@@ -375,3 +525,6 @@ <span class="mdc-list-item__text">Single-line item</span>
 `followHref(element: Element) => void` | If the given element has an href, follows the link.
-`toggleCheckbox(index: number) => boolean` | Toggles a checkbox and radio button in the list item and returns true/false if one was found.
+`hasRadioAtIndex(index: number) => boolean` | Returns true if radio button is present at given list item index.
+`hasCheckboxAtIndex(index: number) => boolean` | Returns true if checkbox is present at given list item index.
+`isCheckboxCheckedAtIndex(index: number) => boolean` | Returns true if checkbox inside a list item is checked.
+`setCheckedCheckboxOrRadioAtIndex(index: number, isChecked: boolean) => void` | Sets the checked status of checkbox or radio at given list item index.
 
@@ -378,0 +531,0 @@ ### `MDCListFoundation`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

171656

increased by11.26%

Lines of code

2703

increased by12.95%

Number of lines in readme file

530

increased by40.58%

Dependency changes

• + Added@material/ripple@0.42.0(transitive)

• + Added@material/rtl@0.42.0(transitive)

• + Added@material/shape@0.42.0(transitive)

• + Added@material/typography@0.42.0(transitive)

• - Removed@material/ripple@0.41.0(transitive)

• - Removed@material/rtl@0.40.1(transitive)

• - Removed@material/shape@0.41.0(transitive)

• - Removed@material/typography@0.41.0(transitive)

• Updated@material/ripple@^0.42.0

• Updated@material/rtl@^0.42.0

• Updated@material/shape@^0.42.0

• Updated@material/typography@^0.42.0