@limetech/lime-elements 35.0.0-next.9 → 35.0.1-next.2

package/dist/cjs/{component-f7ef9087.js → component-66df95e7.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const component = require('./component-f532119f.js');
+const component = require('./component-67144c1c.js');
 const ponyfill = require('./ponyfill-98ca4766.js');
 const keyboard = require('./keyboard-9477d3a8.js');
 const util = require('./util-b0f5741e.js');
@@ -56,10 +56,23 @@ var numbers$1 = {
     TRANSITION_OPEN_DURATION: 120,
     /** Total duration of menu-surface close animation. */
     TRANSITION_CLOSE_DURATION: 75,
-    /** Margin left to the edge of the viewport when menu-surface is at maximum possible height. Also used as a viewport margin. */
+    /**
+     * Margin left to the edge of the viewport when menu-surface is at maximum
+     * possible height. Also used as a viewport margin.
+     */
     MARGIN_TO_EDGE: 32,
-    /** Ratio of anchor width to menu-surface width for switching from corner positioning to center positioning. */
+    /**
+     * Ratio of anchor width to menu-surface width for switching from corner
+     * positioning to center positioning.
+     */
     ANCHOR_TO_MENU_SURFACE_WIDTH_RATIO: 0.67,
+    /**
+     * Amount of time to wait before restoring focus when closing the menu
+     * surface. This is important because if a touch event triggered the menu
+     * close, and the subsequent mouse event occurs after focus is restored, then
+     * the restored focus would be lost.
+     */
+    TOUCH_EVENT_WAIT_MS: 30,
 };
 /**
  * Enum for bits in the {@see Corner) bitmap.
@@ -558,16 +571,16 @@ var MDCListFoundation = /** @class */ (function (_super) {
     __extends$1(MDCListFoundation, _super);
     function MDCListFoundation(adapter) {
         var _this = _super.call(this, __assign$1(__assign$1({}, MDCListFoundation.defaultAdapter), adapter)) || this;
-        _this.wrapFocus_ = false;
-        _this.isVertical_ = true;
-        _this.isSingleSelectionList_ = false;
-        _this.selectedIndex_ = numbers.UNSET_INDEX;
+        _this.wrapFocus = false;
+        _this.isVertical = true;
+        _this.isSingleSelectionList = false;
+        _this.selectedIndex = numbers.UNSET_INDEX;
         _this.focusedItemIndex = numbers.UNSET_INDEX;
-        _this.useActivatedClass_ = false;
-        _this.useSelectedAttr_ = false;
-        _this.ariaCurrentAttrValue_ = null;
-        _this.isCheckboxList_ = false;
-        _this.isRadioList_ = false;
+        _this.useActivatedClass = false;
+        _this.useSelectedAttr = false;
+        _this.ariaCurrentAttrValue = null;
+        _this.isCheckboxList = false;
+        _this.isRadioList = false;
         _this.hasTypeahead = false;
         // Transiently holds current typeahead prefix from user.
         _this.typeaheadState = initState();
@@ -626,10 +639,10 @@ var MDCListFoundation = /** @class */ (function (_super) {
         }
         // TODO(b/172274142): consider all items when determining the list's type.
         if (this.adapter.hasCheckboxAtIndex(0)) {
-            this.isCheckboxList_ = true;
+            this.isCheckboxList = true;
         }
         else if (this.adapter.hasRadioAtIndex(0)) {
-            this.isRadioList_ = true;
+            this.isRadioList = true;
         }
         else {
             this.maybeInitializeSingleSelection();
@@ -638,25 +651,27 @@ var MDCListFoundation = /** @class */ (function (_super) {
             this.sortedIndexByFirstChar = this.typeaheadInitSortedIndex();
         }
     };
-    /**
-     * Sets the private wrapFocus_ variable.
-     */
+    /** Returns the index of the item that was last focused. */
+    MDCListFoundation.prototype.getFocusedItemIndex = function () {
+        return this.focusedItemIndex;
+    };
+    /** Toggles focus wrapping with keyboard navigation. */
     MDCListFoundation.prototype.setWrapFocus = function (value) {
-        this.wrapFocus_ = value;
+        this.wrapFocus = value;
     };
     /**
-     * Sets the isVertical_ private variable.
+     * Toggles orientation direction for keyboard navigation (true for vertical,
+     * false for horizontal).
      */
     MDCListFoundation.prototype.setVerticalOrientation = function (value) {
-        this.isVertical_ = value;
+        this.isVertical = value;
     };
-    /**
-     * Sets the isSingleSelectionList_ private variable.
-     */
+    /** Toggles single-selection behavior. */
     MDCListFoundation.prototype.setSingleSelection = function (value) {
-        this.isSingleSelectionList_ = value;
+        this.isSingleSelectionList = value;
         if (value) {
             this.maybeInitializeSingleSelection();
+            this.selectedIndex = this.getSelectedIndexFromDOM();
         }
     };
     /**
@@ -664,6 +679,19 @@ var MDCListFoundation = /** @class */ (function (_super) {
      * initializes the internal state to match the selected item.
      */
     MDCListFoundation.prototype.maybeInitializeSingleSelection = function () {
+        var selectedItemIndex = this.getSelectedIndexFromDOM();
+        if (selectedItemIndex === numbers.UNSET_INDEX)
+            return;
+        var hasActivatedClass = this.adapter.listItemAtIndexHasClass(selectedItemIndex, cssClasses.LIST_ITEM_ACTIVATED_CLASS);
+        if (hasActivatedClass) {
+            this.setUseActivatedClass(true);
+        }
+        this.isSingleSelectionList = true;
+        this.selectedIndex = selectedItemIndex;
+    };
+    /** @return Index of the first selected item based on the DOM state. */
+    MDCListFoundation.prototype.getSelectedIndexFromDOM = function () {
+        var selectedIndex = numbers.UNSET_INDEX;
         var listItemsCount = this.adapter.getListItemCount();
         for (var i = 0; i < listItemsCount; i++) {
             var hasSelectedClass = this.adapter.listItemAtIndexHasClass(i, cssClasses.LIST_ITEM_SELECTED_CLASS);
@@ -671,13 +699,10 @@ var MDCListFoundation = /** @class */ (function (_super) {
             if (!(hasSelectedClass || hasActivatedClass)) {
                 continue;
             }
-            if (hasActivatedClass) {
-                this.setUseActivatedClass(true);
-            }
-            this.isSingleSelectionList_ = true;
-            this.selectedIndex_ = i;
-            return;
+            selectedIndex = i;
+            break;
         }
+        return selectedIndex;
     };
     /**
      * Sets whether typeahead is enabled on the list.
@@ -696,39 +721,39 @@ var MDCListFoundation = /** @class */ (function (_super) {
         return this.hasTypeahead &&
             isTypingInProgress(this.typeaheadState);
     };
-    /**
-     * Sets the useActivatedClass_ private variable.
-     */
+    /** Toggle use of the "activated" CSS class. */
     MDCListFoundation.prototype.setUseActivatedClass = function (useActivated) {
-        this.useActivatedClass_ = useActivated;
+        this.useActivatedClass = useActivated;
     };
     /**
-     * Sets the useSelectedAttr_ private variable.
+     * Toggles use of the selected attribute (true for aria-selected, false for
+     * aria-checked).
      */
     MDCListFoundation.prototype.setUseSelectedAttribute = function (useSelected) {
-        this.useSelectedAttr_ = useSelected;
+        this.useSelectedAttr = useSelected;
     };
     MDCListFoundation.prototype.getSelectedIndex = function () {
-        return this.selectedIndex_;
+        return this.selectedIndex;
     };
-    MDCListFoundation.prototype.setSelectedIndex = function (index) {
-        if (!this.isIndexValid_(index)) {
+    MDCListFoundation.prototype.setSelectedIndex = function (index, _a) {
+        var _b = _a === void 0 ? {} : _a, forceUpdate = _b.forceUpdate;
+        if (!this.isIndexValid(index)) {
             return;
         }
-        if (this.isCheckboxList_) {
-            this.setCheckboxAtIndex_(index);
+        if (this.isCheckboxList) {
+            this.setCheckboxAtIndex(index);
         }
-        else if (this.isRadioList_) {
-            this.setRadioAtIndex_(index);
+        else if (this.isRadioList) {
+            this.setRadioAtIndex(index);
         }
         else {
-            this.setSingleSelectionAtIndex_(index);
+            this.setSingleSelectionAtIndex(index, { forceUpdate: forceUpdate });
         }
     };
     /**
      * Focus in handler for the list items.
      */
-    MDCListFoundation.prototype.handleFocusIn = function (_, listItemIndex) {
+    MDCListFoundation.prototype.handleFocusIn = function (listItemIndex) {
         if (listItemIndex >= 0) {
             this.focusedItemIndex = listItemIndex;
             this.adapter.setAttributeForElementIndex(listItemIndex, 'tabindex', '0');
@@ -738,7 +763,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
     /**
      * Focus out handler for the list items.
      */
-    MDCListFoundation.prototype.handleFocusOut = function (_, listItemIndex) {
+    MDCListFoundation.prototype.handleFocusOut = function (listItemIndex) {
         var _this = this;
         if (listItemIndex >= 0) {
             this.adapter.setAttributeForElementIndex(listItemIndex, 'tabindex', '-1');
@@ -767,7 +792,8 @@ var MDCListFoundation = /** @class */ (function (_super) {
         var isEnd = keyboard.normalizeKey(event) === 'End';
         var isEnter = keyboard.normalizeKey(event) === 'Enter';
         var isSpace = keyboard.normalizeKey(event) === 'Spacebar';
-        // Have to check both upper and lower case, because having caps lock on affects the value.
+        // Have to check both upper and lower case, because having caps lock on
+        // affects the value.
         var isLetterA = event.key === 'A' || event.key === 'a';
         if (this.adapter.isRootFocused()) {
             if (isArrowUp || isEnd) {
@@ -804,12 +830,12 @@ var MDCListFoundation = /** @class */ (function (_super) {
                 return;
             }
         }
-        if ((this.isVertical_ && isArrowDown) ||
-            (!this.isVertical_ && isArrowRight)) {
+        if ((this.isVertical && isArrowDown) ||
+            (!this.isVertical && isArrowRight)) {
             preventDefaultEvent(event);
             this.focusNextElement(currentIndex);
         }
-        else if ((this.isVertical_ && isArrowUp) || (!this.isVertical_ && isArrowLeft)) {
+        else if ((this.isVertical && isArrowUp) || (!this.isVertical && isArrowLeft)) {
             preventDefaultEvent(event);
             this.focusPrevElement(currentIndex);
         }
@@ -821,9 +847,11 @@ var MDCListFoundation = /** @class */ (function (_super) {
             preventDefaultEvent(event);
             this.focusLastElement();
         }
-        else if (isLetterA && event.ctrlKey && this.isCheckboxList_) {
+        else if (isLetterA && event.ctrlKey && this.isCheckboxList) {
             event.preventDefault();
-            this.toggleAll(this.selectedIndex_ === numbers.UNSET_INDEX ? [] : this.selectedIndex_);
+            this.toggleAll(this.selectedIndex === numbers.UNSET_INDEX ?
+                [] :
+                this.selectedIndex);
         }
         else if (isEnter || isSpace) {
             if (isRootListItem) {
@@ -838,8 +866,8 @@ var MDCListFoundation = /** @class */ (function (_super) {
                     return;
                 }
                 if (!this.isTypeaheadInProgress()) {
-                    if (this.isSelectableList_()) {
-                        this.setSelectedIndexOnAction_(currentIndex);
+                    if (this.isSelectableList()) {
+                        this.setSelectedIndexOnAction(currentIndex);
                     }
                     this.adapter.notifyAction(currentIndex);
                 }
@@ -869,8 +897,8 @@ var MDCListFoundation = /** @class */ (function (_super) {
         if (this.adapter.listItemAtIndexHasClass(index, cssClasses.LIST_ITEM_DISABLED_CLASS)) {
             return;
         }
-        if (this.isSelectableList_()) {
-            this.setSelectedIndexOnAction_(index, toggleCheckbox);
+        if (this.isSelectableList()) {
+            this.setSelectedIndexOnAction(index, toggleCheckbox);
         }
         this.adapter.notifyAction(index);
     };
@@ -881,7 +909,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
         var count = this.adapter.getListItemCount();
         var nextIndex = index + 1;
         if (nextIndex >= count) {
-            if (this.wrapFocus_) {
+            if (this.wrapFocus) {
                 nextIndex = 0;
             }
             else {
@@ -898,7 +926,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
     MDCListFoundation.prototype.focusPrevElement = function (index) {
         var prevIndex = index - 1;
         if (prevIndex < 0) {
-            if (this.wrapFocus_) {
+            if (this.wrapFocus) {
                 prevIndex = this.adapter.getListItemCount() - 1;
             }
             else {
@@ -928,7 +956,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
      * @param isEnabled Sets the list item to enabled or disabled.
      */
     MDCListFoundation.prototype.setEnabled = function (itemIndex, isEnabled) {
-        if (!this.isIndexValid_(itemIndex)) {
+        if (!this.isIndexValid(itemIndex)) {
             return;
         }
         if (isEnabled) {
@@ -940,41 +968,42 @@ var MDCListFoundation = /** @class */ (function (_super) {
             this.adapter.setAttributeForElementIndex(itemIndex, strings.ARIA_DISABLED, 'true');
         }
     };
-    MDCListFoundation.prototype.setSingleSelectionAtIndex_ = function (index) {
-        if (this.selectedIndex_ === index) {
+    MDCListFoundation.prototype.setSingleSelectionAtIndex = function (index, _a) {
+        var _b = _a === void 0 ? {} : _a, forceUpdate = _b.forceUpdate;
+        if (this.selectedIndex === index && !forceUpdate) {
             return;
         }
         var selectedClassName = cssClasses.LIST_ITEM_SELECTED_CLASS;
-        if (this.useActivatedClass_) {
+        if (this.useActivatedClass) {
             selectedClassName = cssClasses.LIST_ITEM_ACTIVATED_CLASS;
         }
-        if (this.selectedIndex_ !== numbers.UNSET_INDEX) {
-            this.adapter.removeClassForElementIndex(this.selectedIndex_, selectedClassName);
+        if (this.selectedIndex !== numbers.UNSET_INDEX) {
+            this.adapter.removeClassForElementIndex(this.selectedIndex, selectedClassName);
         }
-        this.setAriaForSingleSelectionAtIndex_(index);
+        this.setAriaForSingleSelectionAtIndex(index);
         this.setTabindexAtIndex(index);
         if (index !== numbers.UNSET_INDEX) {
             this.adapter.addClassForElementIndex(index, selectedClassName);
         }
-        this.selectedIndex_ = index;
+        this.selectedIndex = index;
     };
     /**
      * Sets aria attribute for single selection at given index.
      */
-    MDCListFoundation.prototype.setAriaForSingleSelectionAtIndex_ = function (index) {
+    MDCListFoundation.prototype.setAriaForSingleSelectionAtIndex = function (index) {
         // Detect the presence of aria-current and get the value only during list
         // initialization when it is in unset state.
-        if (this.selectedIndex_ === numbers.UNSET_INDEX) {
-            this.ariaCurrentAttrValue_ =
+        if (this.selectedIndex === numbers.UNSET_INDEX) {
+            this.ariaCurrentAttrValue =
                 this.adapter.getAttributeForElementIndex(index, strings.ARIA_CURRENT);
         }
-        var isAriaCurrent = this.ariaCurrentAttrValue_ !== null;
+        var isAriaCurrent = this.ariaCurrentAttrValue !== null;
         var ariaAttribute = isAriaCurrent ? strings.ARIA_CURRENT : strings.ARIA_SELECTED;
-        if (this.selectedIndex_ !== numbers.UNSET_INDEX) {
-            this.adapter.setAttributeForElementIndex(this.selectedIndex_, ariaAttribute, 'false');
+        if (this.selectedIndex !== numbers.UNSET_INDEX) {
+            this.adapter.setAttributeForElementIndex(this.selectedIndex, ariaAttribute, 'false');
         }
         if (index !== numbers.UNSET_INDEX) {
-            var ariaAttributeValue = isAriaCurrent ? this.ariaCurrentAttrValue_ : 'true';
+            var ariaAttributeValue = isAriaCurrent ? this.ariaCurrentAttrValue : 'true';
             this.adapter.setAttributeForElementIndex(index, ariaAttribute, ariaAttributeValue);
         }
     };
@@ -982,22 +1011,22 @@ var MDCListFoundation = /** @class */ (function (_super) {
      * Returns the attribute to use for indicating selection status.
      */
     MDCListFoundation.prototype.getSelectionAttribute = function () {
-        return this.useSelectedAttr_ ? strings.ARIA_SELECTED : strings.ARIA_CHECKED;
+        return this.useSelectedAttr ? strings.ARIA_SELECTED : strings.ARIA_CHECKED;
     };
     /**
      * Toggles radio at give index. Radio doesn't change the checked state if it
      * is already checked.
      */
-    MDCListFoundation.prototype.setRadioAtIndex_ = function (index) {
+    MDCListFoundation.prototype.setRadioAtIndex = function (index) {
         var selectionAttribute = this.getSelectionAttribute();
         this.adapter.setCheckedCheckboxOrRadioAtIndex(index, true);
-        if (this.selectedIndex_ !== numbers.UNSET_INDEX) {
-            this.adapter.setAttributeForElementIndex(this.selectedIndex_, selectionAttribute, 'false');
+        if (this.selectedIndex !== numbers.UNSET_INDEX) {
+            this.adapter.setAttributeForElementIndex(this.selectedIndex, selectionAttribute, 'false');
         }
         this.adapter.setAttributeForElementIndex(index, selectionAttribute, 'true');
-        this.selectedIndex_ = index;
+        this.selectedIndex = index;
     };
-    MDCListFoundation.prototype.setCheckboxAtIndex_ = function (index) {
+    MDCListFoundation.prototype.setCheckboxAtIndex = function (index) {
         var selectionAttribute = this.getSelectionAttribute();
         for (var i = 0; i < this.adapter.getListItemCount(); i++) {
             var isChecked = false;
@@ -1007,7 +1036,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
             this.adapter.setCheckedCheckboxOrRadioAtIndex(i, isChecked);
             this.adapter.setAttributeForElementIndex(i, selectionAttribute, isChecked ? 'true' : 'false');
         }
-        this.selectedIndex_ = index;
+        this.selectedIndex = index;
     };
     MDCListFoundation.prototype.setTabindexAtIndex = function (index) {
         if (this.focusedItemIndex === numbers.UNSET_INDEX && index !== 0) {
@@ -1022,9 +1051,9 @@ var MDCListFoundation = /** @class */ (function (_super) {
         // Set the previous selection's tabindex to -1. We need this because
         // in selection menus that are not visible, programmatically setting an
         // option will not change focus but will change where tabindex should be 0.
-        if (!(this.selectedIndex_ instanceof Array) &&
-            this.selectedIndex_ !== index) {
-            this.adapter.setAttributeForElementIndex(this.selectedIndex_, 'tabindex', '-1');
+        if (!(this.selectedIndex instanceof Array) &&
+            this.selectedIndex !== index) {
+            this.adapter.setAttributeForElementIndex(this.selectedIndex, 'tabindex', '-1');
         }
         if (index !== numbers.UNSET_INDEX) {
             this.adapter.setAttributeForElementIndex(index, 'tabindex', '0');
@@ -1034,53 +1063,56 @@ var MDCListFoundation = /** @class */ (function (_super) {
      * @return Return true if it is single selectin list, checkbox list or radio
      *     list.
      */
-    MDCListFoundation.prototype.isSelectableList_ = function () {
-        return this.isSingleSelectionList_ || this.isCheckboxList_ ||
-            this.isRadioList_;
+    MDCListFoundation.prototype.isSelectableList = function () {
+        return this.isSingleSelectionList || this.isCheckboxList ||
+            this.isRadioList;
     };
     MDCListFoundation.prototype.setTabindexToFirstSelectedOrFocusedItem = function () {
         var targetIndex = this.getFirstSelectedOrFocusedItemIndex();
         this.setTabindexAtIndex(targetIndex);
     };
     MDCListFoundation.prototype.getFirstSelectedOrFocusedItemIndex = function () {
-        var targetIndex = this.focusedItemIndex >= 0 ? this.focusedItemIndex : 0;
-        if (this.isSelectableList_()) {
-            if (typeof this.selectedIndex_ === 'number' &&
-                this.selectedIndex_ !== numbers.UNSET_INDEX) {
-                targetIndex = this.selectedIndex_;
-            }
-            else if (isNumberArray(this.selectedIndex_) &&
-                this.selectedIndex_.length > 0) {
-                targetIndex = this.selectedIndex_.reduce(function (currentIndex, minIndex) { return Math.min(currentIndex, minIndex); });
-            }
+        // Action lists retain focus on the most recently focused item.
+        if (!this.isSelectableList()) {
+            return Math.max(this.focusedItemIndex, 0);
         }
-        return targetIndex;
+        // Single-selection lists focus the selected item.
+        if (typeof this.selectedIndex === 'number' &&
+            this.selectedIndex !== numbers.UNSET_INDEX) {
+            return this.selectedIndex;
+        }
+        // Multiple-selection lists focus the first selected item.
+        if (isNumberArray(this.selectedIndex) && this.selectedIndex.length > 0) {
+            return this.selectedIndex.reduce(function (minIndex, currentIndex) { return Math.min(minIndex, currentIndex); });
+        }
+        // Selection lists without a selection focus the first item.
+        return 0;
     };
-    MDCListFoundation.prototype.isIndexValid_ = function (index) {
+    MDCListFoundation.prototype.isIndexValid = function (index) {
         var _this = this;
         if (index instanceof Array) {
-            if (!this.isCheckboxList_) {
+            if (!this.isCheckboxList) {
                 throw new Error('MDCListFoundation: Array of index is only supported for checkbox based list');
             }
             if (index.length === 0) {
                 return true;
             }
             else {
-                return index.some(function (i) { return _this.isIndexInRange_(i); });
+                return index.some(function (i) { return _this.isIndexInRange(i); });
             }
         }
         else if (typeof index === 'number') {
-            if (this.isCheckboxList_) {
+            if (this.isCheckboxList) {
                 throw new Error("MDCListFoundation: Expected array of index for checkbox based list but got number: " + index);
             }
-            return this.isIndexInRange_(index) ||
-                this.isSingleSelectionList_ && index === numbers.UNSET_INDEX;
+            return this.isIndexInRange(index) ||
+                this.isSingleSelectionList && index === numbers.UNSET_INDEX;
         }
         else {
             return false;
         }
     };
-    MDCListFoundation.prototype.isIndexInRange_ = function (index) {
+    MDCListFoundation.prototype.isIndexInRange = function (index) {
         var listSize = this.adapter.getListItemCount();
         return index >= 0 && index < listSize;
     };
@@ -1089,16 +1121,16 @@ var MDCListFoundation = /** @class */ (function (_super) {
      * toggleCheckbox value. User interaction should not toggle list item(s) when
      * disabled.
      */
-    MDCListFoundation.prototype.setSelectedIndexOnAction_ = function (index, toggleCheckbox) {
+    MDCListFoundation.prototype.setSelectedIndexOnAction = function (index, toggleCheckbox) {
         if (toggleCheckbox === void 0) { toggleCheckbox = true; }
-        if (this.isCheckboxList_) {
-            this.toggleCheckboxAtIndex_(index, toggleCheckbox);
+        if (this.isCheckboxList) {
+            this.toggleCheckboxAtIndex(index, toggleCheckbox);
         }
         else {
             this.setSelectedIndex(index);
         }
     };
-    MDCListFoundation.prototype.toggleCheckboxAtIndex_ = function (index, toggleCheckbox) {
+    MDCListFoundation.prototype.toggleCheckboxAtIndex = function (index, toggleCheckbox) {
         var selectionAttribute = this.getSelectionAttribute();
         var isChecked = this.adapter.isCheckboxCheckedAtIndex(index);
         if (toggleCheckbox) {
@@ -1108,16 +1140,16 @@ var MDCListFoundation = /** @class */ (function (_super) {
         this.adapter.setAttributeForElementIndex(index, selectionAttribute, isChecked ? 'true' : 'false');
         // If none of the checkbox items are selected and selectedIndex is not
         // initialized then provide a default value.
-        var selectedIndexes = this.selectedIndex_ === numbers.UNSET_INDEX ?
+        var selectedIndexes = this.selectedIndex === numbers.UNSET_INDEX ?
             [] :
-            this.selectedIndex_.slice();
+            this.selectedIndex.slice();
         if (isChecked) {
             selectedIndexes.push(index);
         }
         else {
             selectedIndexes = selectedIndexes.filter(function (i) { return i !== index; });
         }
-        this.selectedIndex_ = selectedIndexes;
+        this.selectedIndex = selectedIndexes;
     };
     MDCListFoundation.prototype.focusItemAtIndex = function (index) {
         this.adapter.focusItemAtIndex(index);
@@ -1127,7 +1159,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
         var count = this.adapter.getListItemCount();
         // If all items are selected, deselect everything.
         if (currentlySelectedIndexes.length === count) {
-            this.setCheckboxAtIndex_([]);
+            this.setCheckboxAtIndex([]);
         }
         else {
             // Otherwise select all enabled options.
@@ -1138,7 +1170,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
                     allIndexes.push(i);
                 }
             }
-            this.setCheckboxAtIndex_(allIndexes);
+            this.setCheckboxAtIndex(allIndexes);
         }
     };
     /**
@@ -1526,7 +1558,7 @@ var MDCList = /** @class */ (function (_super) {
      */
     MDCList.prototype.handleFocusInEvent = function (evt) {
         var index = this.getListItemIndex(evt.target);
-        this.foundation.handleFocusIn(evt, index);
+        this.foundation.handleFocusIn(index);
     };
     /**
      * Used to figure out which element was clicked before sending the event to
@@ -1534,7 +1566,7 @@ var MDCList = /** @class */ (function (_super) {
      */
     MDCList.prototype.handleFocusOutEvent = function (evt) {
         var index = this.getListItemIndex(evt.target);
-        this.foundation.handleFocusOut(evt, index);
+        this.foundation.handleFocusOut(index);
     };
     /**
      * Used to figure out which element was focused when keydown event occurred
@@ -1746,7 +1778,8 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
         cancelAnimationFrame(this.animationRequestId);
     };
     /**
-     * @param corner Default anchor corner alignment of top-left menu surface corner.
+     * @param corner Default anchor corner alignment of top-left menu surface
+     *     corner.
      */
     MDCMenuSurfaceFoundation.prototype.setAnchorCorner = function (corner) {
         this.anchorCorner = corner;
@@ -1770,10 +1803,18 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
     MDCMenuSurfaceFoundation.prototype.setIsHoisted = function (isHoisted) {
         this.isHoistedElement = isHoisted;
     };
-    /** Used to set the menu-surface calculations based on a fixed position menu. */
+    /**
+     * Used to set the menu-surface calculations based on a fixed position menu.
+     */
     MDCMenuSurfaceFoundation.prototype.setFixedPosition = function (isFixedPosition) {
         this.isFixedPosition = isFixedPosition;
     };
+    /**
+     * @return Returns true if menu is in fixed (`position: fixed`) position.
+     */
+    MDCMenuSurfaceFoundation.prototype.isFixed = function () {
+        return this.isFixedPosition;
+    };
     /** Sets the menu-surface position on the page. */
     MDCMenuSurfaceFoundation.prototype.setAbsolutePosition = function (x, y) {
         this.position.x = this.isFinite(x) ? x : 0;
@@ -1816,9 +1857,9 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
         else {
             this.adapter.addClass(MDCMenuSurfaceFoundation.cssClasses.ANIMATING_OPEN);
             this.animationRequestId = requestAnimationFrame(function () {
-                _this.adapter.addClass(MDCMenuSurfaceFoundation.cssClasses.OPEN);
                 _this.dimensions = _this.adapter.getInnerDimensions();
                 _this.autoposition();
+                _this.adapter.addClass(MDCMenuSurfaceFoundation.cssClasses.OPEN);
                 _this.openAnimationEndTimerId = setTimeout(function () {
                     _this.openAnimationEndTimerId = 0;
                     _this.adapter.removeClass(MDCMenuSurfaceFoundation.cssClasses.ANIMATING_OPEN);
@@ -1894,11 +1935,14 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
             _a[horizontalAlignment] = horizontalOffset,
             _a[verticalAlignment] = verticalOffset,
             _a);
-        // Center align when anchor width is comparable or greater than menu surface, otherwise keep corner.
-        if (anchorSize.width / surfaceSize.width > numbers$1.ANCHOR_TO_MENU_SURFACE_WIDTH_RATIO) {
+        // Center align when anchor width is comparable or greater than menu
+        // surface, otherwise keep corner.
+        if (anchorSize.width / surfaceSize.width >
+            numbers$1.ANCHOR_TO_MENU_SURFACE_WIDTH_RATIO) {
             horizontalAlignment = 'center';
         }
-        // If the menu-surface has been hoisted to the body, it's no longer relative to the anchor element
+        // If the menu-surface has been hoisted to the body, it's no longer relative
+        // to the anchor element
         if (this.isHoistedElement || this.isFixedPosition) {
             this.adjustPositionForHoistedElement(position);
         }
@@ -2022,7 +2066,8 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
     };
     /**
      * @param corner Origin corner of the menu surface.
-     * @return Maximum height of the menu surface, based on available space. 0 indicates should not be set.
+     * @return Maximum height of the menu surface, based on available space. 0
+     *     indicates should not be set.
      */
     MDCMenuSurfaceFoundation.prototype.getMenuSurfaceMaxHeight = function (corner) {
         if (this.maxHeight > 0) {
@@ -2051,7 +2096,8 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
     };
     /**
      * @param corner Origin corner of the menu surface.
-     * @return Horizontal offset of menu surface origin corner from corresponding anchor corner.
+     * @return Horizontal offset of menu surface origin corner from corresponding
+     *     anchor corner.
      */
     MDCMenuSurfaceFoundation.prototype.getHorizontalOriginOffset = function (corner) {
         var anchorSize = this.measurements.anchorSize;
@@ -2078,7 +2124,8 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
     };
     /**
      * @param corner Origin corner of the menu surface.
-     * @return Vertical offset of menu surface origin corner from corresponding anchor corner.
+     * @return Vertical offset of menu surface origin corner from corresponding
+     *     anchor corner.
      */
     MDCMenuSurfaceFoundation.prototype.getVerticalOriginOffset = function (corner) {
         var anchorSize = this.measurements.anchorSize;
@@ -2096,7 +2143,10 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
         }
         return y;
     };
-    /** Calculates the offsets for positioning the menu-surface when the menu-surface has been hoisted to the body. */
+    /**
+     * Calculates the offsets for positioning the menu-surface when the
+     * menu-surface has been hoisted to the body.
+     */
     MDCMenuSurfaceFoundation.prototype.adjustPositionForHoistedElement = function (position) {
         var e_1, _a;
         var _b = this.measurements, windowScroll = _b.windowScroll, viewportDistance = _b.viewportDistance, surfaceSize = _b.surfaceSize, viewportSize = _b.viewportSize;
@@ -2110,11 +2160,11 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
                     position[prop] = (viewportSize.width - surfaceSize.width) / 2;
                     continue;
                 }
-                // Hoisted surfaces need to have the anchor elements location on the page added to the
-                // position properties for proper alignment on the body.
+                // Hoisted surfaces need to have the anchor elements location on the page
+                // added to the position properties for proper alignment on the body.
                 value += viewportDistance[prop];
-                // Surfaces that are absolutely positioned need to have additional calculations for scroll
-                // and bottom positioning.
+                // Surfaces that are absolutely positioned need to have additional
+                // calculations for scroll and bottom positioning.
                 if (!this.isFixedPosition) {
                     if (prop === 'top') {
                         value += windowScroll.y;
@@ -2141,15 +2191,23 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
         }
     };
     /**
-     * The last focused element when the menu surface was opened should regain focus, if the user is
-     * focused on or within the menu surface when it is closed.
+     * The last focused element when the menu surface was opened should regain
+     * focus, if the user is focused on or within the menu surface when it is
+     * closed.
      */
     MDCMenuSurfaceFoundation.prototype.maybeRestoreFocus = function () {
+        var _this = this;
         var isRootFocused = this.adapter.isFocused();
         var childHasFocus = document.activeElement &&
             this.adapter.isElementInContainer(document.activeElement);
         if (isRootFocused || childHasFocus) {
-            this.adapter.restoreFocus();
+            // Wait before restoring focus when closing the menu surface. This is
+            // important because if a touch event triggered the menu close, and the
+            // subsequent mouse event occurs after focus is restored, then the
+            // restored focus would be lost.
+            setTimeout(function () {
+                _this.adapter.restoreFocus();
+            }, numbers$1.TOUCH_EVENT_WAIT_MS);
         }
     };
     MDCMenuSurfaceFoundation.prototype.hasBit = function (corner, bit) {