@ptcwebops/ptcw-design 6.3.21 → 6.3.22-beta

package/dist/cjs/{component-35540bfb.js → component-4dd13907.js}

@@ -1,10 +1,94 @@
 'use strict';
 
-const component = require('./component-1b8ad4d2.js');
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+exports.__assign = function() {
+    exports.__assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return exports.__assign.apply(this, arguments);
+};
+
+function __values(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+}
+
+function __read(o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 /**
  * @license
- * Copyright 2018 Google Inc.
+ * Copyright 2016 Google Inc.
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
@@ -24,86 +108,60 @@ const component = require('./component-1b8ad4d2.js');
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var cssClasses$4 = {
-    ANCHOR: 'mdc-menu-surface--anchor',
-    ANIMATING_CLOSED: 'mdc-menu-surface--animating-closed',
-    ANIMATING_OPEN: 'mdc-menu-surface--animating-open',
-    FIXED: 'mdc-menu-surface--fixed',
-    IS_OPEN_BELOW: 'mdc-menu-surface--is-open-below',
-    OPEN: 'mdc-menu-surface--open',
-    ROOT: 'mdc-menu-surface',
-};
-// tslint:disable:object-literal-sort-keys
-var strings$5 = {
-    CLOSED_EVENT: 'MDCMenuSurface:closed',
-    CLOSING_EVENT: 'MDCMenuSurface:closing',
-    OPENED_EVENT: 'MDCMenuSurface:opened',
-    OPENING_EVENT: 'MDCMenuSurface:opening',
-    FOCUSABLE_ELEMENTS: [
-        'button:not(:disabled)',
-        '[href]:not([aria-disabled="true"])',
-        'input:not(:disabled)',
-        'select:not(:disabled)',
-        'textarea:not(:disabled)',
-        '[tabindex]:not([tabindex="-1"]):not([aria-disabled="true"])',
-    ].join(', '),
-};
-// tslint:enable:object-literal-sort-keys
-var numbers$3 = {
-    /** Total duration of menu-surface open animation. */
-    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_TO_EDGE: 32,
-    /**
-     * 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.
- */
-var CornerBit;
-(function (CornerBit) {
-    CornerBit[CornerBit["BOTTOM"] = 1] = "BOTTOM";
-    CornerBit[CornerBit["CENTER"] = 2] = "CENTER";
-    CornerBit[CornerBit["RIGHT"] = 4] = "RIGHT";
-    CornerBit[CornerBit["FLIP_RTL"] = 8] = "FLIP_RTL";
-})(CornerBit || (CornerBit = {}));
-/**
- * Enum for representing an element corner for positioning the menu-surface.
- *
- * The START constants map to LEFT if element directionality is left
- * to right and RIGHT if the directionality is right to left.
- * Likewise END maps to RIGHT or LEFT depending on the directionality.
- */
-var Corner;
-(function (Corner) {
-    Corner[Corner["TOP_LEFT"] = 0] = "TOP_LEFT";
-    Corner[Corner["TOP_RIGHT"] = 4] = "TOP_RIGHT";
-    Corner[Corner["BOTTOM_LEFT"] = 1] = "BOTTOM_LEFT";
-    Corner[Corner["BOTTOM_RIGHT"] = 5] = "BOTTOM_RIGHT";
-    Corner[Corner["TOP_START"] = 8] = "TOP_START";
-    Corner[Corner["TOP_END"] = 12] = "TOP_END";
-    Corner[Corner["BOTTOM_START"] = 9] = "BOTTOM_START";
-    Corner[Corner["BOTTOM_END"] = 13] = "BOTTOM_END";
-})(Corner || (Corner = {}));
+var MDCFoundation = /** @class */ (function () {
+    function MDCFoundation(adapter) {
+        if (adapter === void 0) { adapter = {}; }
+        this.adapter = adapter;
+    }
+    Object.defineProperty(MDCFoundation, "cssClasses", {
+        get: function () {
+            // Classes extending MDCFoundation should implement this method to return an object which exports every
+            // CSS class the foundation class needs as a property. e.g. {ACTIVE: 'mdc-component--active'}
+            return {};
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MDCFoundation, "strings", {
+        get: function () {
+            // Classes extending MDCFoundation should implement this method to return an object which exports all
+            // semantic strings as constants. e.g. {ARIA_ROLE: 'tablist'}
+            return {};
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MDCFoundation, "numbers", {
+        get: function () {
+            // Classes extending MDCFoundation should implement this method to return an object which exports all
+            // of its semantic numbers as constants. e.g. {ANIMATION_DELAY_MS: 350}
+            return {};
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MDCFoundation, "defaultAdapter", {
+        get: function () {
+            // Classes extending MDCFoundation may choose to implement this getter in order to provide a convenient
+            // way of viewing the necessary methods of an adapter. In the future, this could also be used for adapter
+            // validation.
+            return {};
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MDCFoundation.prototype.init = function () {
+        // Subclasses should override this method to perform initialization routines (registering events, etc.)
+    };
+    MDCFoundation.prototype.destroy = function () {
+        // Subclasses should override this method to perform de-initialization routines (de-registering events, etc.)
+    };
+    return MDCFoundation;
+}());
 
 /**
  * @license
- * Copyright 2018 Google Inc.
+ * Copyright 2016 Google Inc.
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
@@ -123,64 +181,86 @@ var Corner;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var _a, _b;
-var cssClasses$3 = {
-    LIST_ITEM_ACTIVATED_CLASS: 'mdc-list-item--activated',
-    LIST_ITEM_CLASS: 'mdc-list-item',
-    LIST_ITEM_DISABLED_CLASS: 'mdc-list-item--disabled',
-    LIST_ITEM_SELECTED_CLASS: 'mdc-list-item--selected',
-    LIST_ITEM_TEXT_CLASS: 'mdc-list-item__text',
-    LIST_ITEM_PRIMARY_TEXT_CLASS: 'mdc-list-item__primary-text',
-    ROOT: 'mdc-list',
-};
-var evolutionClassNameMap = (_a = {},
-    _a["" + cssClasses$3.LIST_ITEM_ACTIVATED_CLASS] = 'mdc-list-item--activated',
-    _a["" + cssClasses$3.LIST_ITEM_CLASS] = 'mdc-list-item',
-    _a["" + cssClasses$3.LIST_ITEM_DISABLED_CLASS] = 'mdc-list-item--disabled',
-    _a["" + cssClasses$3.LIST_ITEM_SELECTED_CLASS] = 'mdc-list-item--selected',
-    _a["" + cssClasses$3.LIST_ITEM_PRIMARY_TEXT_CLASS] = 'mdc-list-item__primary-text',
-    _a["" + cssClasses$3.ROOT] = 'mdc-list',
-    _a);
-var deprecatedClassNameMap = (_b = {},
-    _b["" + cssClasses$3.LIST_ITEM_ACTIVATED_CLASS] = 'mdc-deprecated-list-item--activated',
-    _b["" + cssClasses$3.LIST_ITEM_CLASS] = 'mdc-deprecated-list-item',
-    _b["" + cssClasses$3.LIST_ITEM_DISABLED_CLASS] = 'mdc-deprecated-list-item--disabled',
-    _b["" + cssClasses$3.LIST_ITEM_SELECTED_CLASS] = 'mdc-deprecated-list-item--selected',
-    _b["" + cssClasses$3.LIST_ITEM_TEXT_CLASS] = 'mdc-deprecated-list-item__text',
-    _b["" + cssClasses$3.LIST_ITEM_PRIMARY_TEXT_CLASS] = 'mdc-deprecated-list-item__primary-text',
-    _b["" + cssClasses$3.ROOT] = 'mdc-deprecated-list',
-    _b);
-var strings$4 = {
-    ACTION_EVENT: 'MDCList:action',
-    SELECTION_CHANGE_EVENT: 'MDCList:selectionChange',
-    ARIA_CHECKED: 'aria-checked',
-    ARIA_CHECKED_CHECKBOX_SELECTOR: '[role="checkbox"][aria-checked="true"]',
-    ARIA_CHECKED_RADIO_SELECTOR: '[role="radio"][aria-checked="true"]',
-    ARIA_CURRENT: 'aria-current',
-    ARIA_DISABLED: 'aria-disabled',
-    ARIA_ORIENTATION: 'aria-orientation',
-    ARIA_ORIENTATION_HORIZONTAL: 'horizontal',
-    ARIA_ROLE_CHECKBOX_SELECTOR: '[role="checkbox"]',
-    ARIA_SELECTED: 'aria-selected',
-    ARIA_INTERACTIVE_ROLES_SELECTOR: '[role="listbox"], [role="menu"]',
-    ARIA_MULTI_SELECTABLE_SELECTOR: '[aria-multiselectable="true"]',
-    CHECKBOX_RADIO_SELECTOR: 'input[type="checkbox"], input[type="radio"]',
-    CHECKBOX_SELECTOR: 'input[type="checkbox"]',
-    CHILD_ELEMENTS_TO_TOGGLE_TABINDEX: "\n    ." + cssClasses$3.LIST_ITEM_CLASS + " button:not(:disabled),\n    ." + cssClasses$3.LIST_ITEM_CLASS + " a,\n    ." + deprecatedClassNameMap[cssClasses$3.LIST_ITEM_CLASS] + " button:not(:disabled),\n    ." + deprecatedClassNameMap[cssClasses$3.LIST_ITEM_CLASS] + " a\n  ",
-    DEPRECATED_SELECTOR: '.mdc-deprecated-list',
-    FOCUSABLE_CHILD_ELEMENTS: "\n    ." + cssClasses$3.LIST_ITEM_CLASS + " button:not(:disabled),\n    ." + cssClasses$3.LIST_ITEM_CLASS + " a,\n    ." + cssClasses$3.LIST_ITEM_CLASS + " input[type=\"radio\"]:not(:disabled),\n    ." + cssClasses$3.LIST_ITEM_CLASS + " input[type=\"checkbox\"]:not(:disabled),\n    ." + deprecatedClassNameMap[cssClasses$3.LIST_ITEM_CLASS] + " button:not(:disabled),\n    ." + deprecatedClassNameMap[cssClasses$3.LIST_ITEM_CLASS] + " a,\n    ." + deprecatedClassNameMap[cssClasses$3.LIST_ITEM_CLASS] + " input[type=\"radio\"]:not(:disabled),\n    ." + deprecatedClassNameMap[cssClasses$3.LIST_ITEM_CLASS] + " input[type=\"checkbox\"]:not(:disabled)\n  ",
-    RADIO_SELECTOR: 'input[type="radio"]',
-    SELECTED_ITEM_SELECTOR: '[aria-selected="true"], [aria-current="true"]',
-};
-var numbers$2 = {
-    UNSET_INDEX: -1,
-    TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS: 300
-};
-var evolutionAttribute = 'evolution';
+var MDCComponent = /** @class */ (function () {
+    function MDCComponent(root, foundation) {
+        var args = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            args[_i - 2] = arguments[_i];
+        }
+        this.root = root;
+        this.initialize.apply(this, __spreadArray([], __read(args)));
+        // Note that we initialize foundation here and not within the constructor's
+        // default param so that this.root is defined and can be used within the
+        // foundation class.
+        this.foundation =
+            foundation === undefined ? this.getDefaultFoundation() : foundation;
+        this.foundation.init();
+        this.initialSyncWithDOM();
+    }
+    MDCComponent.attachTo = function (root) {
+        // Subclasses which extend MDCBase should provide an attachTo() method that takes a root element and
+        // returns an instantiated component with its root set to that element. Also note that in the cases of
+        // subclasses, an explicit foundation class will not have to be passed in; it will simply be initialized
+        // from getDefaultFoundation().
+        return new MDCComponent(root, new MDCFoundation({}));
+    };
+    /* istanbul ignore next: method param only exists for typing purposes; it does not need to be unit tested */
+    MDCComponent.prototype.initialize = function () {
+        var _args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            _args[_i] = arguments[_i];
+        }
+        // Subclasses can override this to do any additional setup work that would be considered part of a
+        // "constructor". Essentially, it is a hook into the parent constructor before the foundation is
+        // initialized. Any additional arguments besides root and foundation will be passed in here.
+    };
+    MDCComponent.prototype.getDefaultFoundation = function () {
+        // Subclasses must override this method to return a properly configured foundation class for the
+        // component.
+        throw new Error('Subclasses must override getDefaultFoundation to return a properly configured ' +
+            'foundation class');
+    };
+    MDCComponent.prototype.initialSyncWithDOM = function () {
+        // Subclasses should override this method if they need to perform work to synchronize with a host DOM
+        // object. An example of this would be a form control wrapper that needs to synchronize its internal state
+        // to some property or attribute of the host DOM. Please note: this is *not* the place to perform DOM
+        // reads/writes that would cause layout / paint, as this is called synchronously from within the constructor.
+    };
+    MDCComponent.prototype.destroy = function () {
+        // Subclasses may implement this method to release any resources / deregister any listeners they have
+        // attached. An example of this might be deregistering a resize event from the window object.
+        this.foundation.destroy();
+    };
+    MDCComponent.prototype.listen = function (evtType, handler, options) {
+        this.root.addEventListener(evtType, handler, options);
+    };
+    MDCComponent.prototype.unlisten = function (evtType, handler, options) {
+        this.root.removeEventListener(evtType, handler, options);
+    };
+    /**
+     * Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.
+     */
+    MDCComponent.prototype.emit = function (evtType, evtData, shouldBubble) {
+        if (shouldBubble === void 0) { shouldBubble = false; }
+        var evt;
+        if (typeof CustomEvent === 'function') {
+            evt = new CustomEvent(evtType, {
+                bubbles: shouldBubble,
+                detail: evtData,
+            });
+        }
+        else {
+            evt = document.createEvent('CustomEvent');
+            evt.initCustomEvent(evtType, shouldBubble, false, evtData);
+        }
+        this.root.dispatchEvent(evt);
+    };
+    return MDCComponent;
+}());
 
 /**
  * @license
- * Copyright 2020 Google Inc.
+ * Copyright 2018 Google Inc.
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
@@ -201,106 +281,57 @@ var evolutionAttribute = 'evolution';
  * THE SOFTWARE.
  */
 /**
- * KEY provides normalized string values for keys.
+ * @fileoverview A "ponyfill" is a polyfill that doesn't modify the global prototype chain.
+ * This makes ponyfills safer than traditional polyfills, especially for libraries like MDC.
  */
-var KEY = {
-    UNKNOWN: 'Unknown',
-    BACKSPACE: 'Backspace',
-    ENTER: 'Enter',
-    SPACEBAR: 'Spacebar',
-    PAGE_UP: 'PageUp',
-    PAGE_DOWN: 'PageDown',
-    END: 'End',
-    HOME: 'Home',
-    ARROW_LEFT: 'ArrowLeft',
-    ARROW_UP: 'ArrowUp',
-    ARROW_RIGHT: 'ArrowRight',
-    ARROW_DOWN: 'ArrowDown',
-    DELETE: 'Delete',
-    ESCAPE: 'Escape',
-    TAB: 'Tab',
-};
-var normalizedKeys = new Set();
-// IE11 has no support for new Map with iterable so we need to initialize this
-// by hand.
-normalizedKeys.add(KEY.BACKSPACE);
-normalizedKeys.add(KEY.ENTER);
-normalizedKeys.add(KEY.SPACEBAR);
-normalizedKeys.add(KEY.PAGE_UP);
-normalizedKeys.add(KEY.PAGE_DOWN);
-normalizedKeys.add(KEY.END);
-normalizedKeys.add(KEY.HOME);
-normalizedKeys.add(KEY.ARROW_LEFT);
-normalizedKeys.add(KEY.ARROW_UP);
-normalizedKeys.add(KEY.ARROW_RIGHT);
-normalizedKeys.add(KEY.ARROW_DOWN);
-normalizedKeys.add(KEY.DELETE);
-normalizedKeys.add(KEY.ESCAPE);
-normalizedKeys.add(KEY.TAB);
-var KEY_CODE = {
-    BACKSPACE: 8,
-    ENTER: 13,
-    SPACEBAR: 32,
-    PAGE_UP: 33,
-    PAGE_DOWN: 34,
-    END: 35,
-    HOME: 36,
-    ARROW_LEFT: 37,
-    ARROW_UP: 38,
-    ARROW_RIGHT: 39,
-    ARROW_DOWN: 40,
-    DELETE: 46,
-    ESCAPE: 27,
-    TAB: 9,
-};
-var mappedKeyCodes = new Map();
-// IE11 has no support for new Map with iterable so we need to initialize this
-// by hand.
-mappedKeyCodes.set(KEY_CODE.BACKSPACE, KEY.BACKSPACE);
-mappedKeyCodes.set(KEY_CODE.ENTER, KEY.ENTER);
-mappedKeyCodes.set(KEY_CODE.SPACEBAR, KEY.SPACEBAR);
-mappedKeyCodes.set(KEY_CODE.PAGE_UP, KEY.PAGE_UP);
-mappedKeyCodes.set(KEY_CODE.PAGE_DOWN, KEY.PAGE_DOWN);
-mappedKeyCodes.set(KEY_CODE.END, KEY.END);
-mappedKeyCodes.set(KEY_CODE.HOME, KEY.HOME);
-mappedKeyCodes.set(KEY_CODE.ARROW_LEFT, KEY.ARROW_LEFT);
-mappedKeyCodes.set(KEY_CODE.ARROW_UP, KEY.ARROW_UP);
-mappedKeyCodes.set(KEY_CODE.ARROW_RIGHT, KEY.ARROW_RIGHT);
-mappedKeyCodes.set(KEY_CODE.ARROW_DOWN, KEY.ARROW_DOWN);
-mappedKeyCodes.set(KEY_CODE.DELETE, KEY.DELETE);
-mappedKeyCodes.set(KEY_CODE.ESCAPE, KEY.ESCAPE);
-mappedKeyCodes.set(KEY_CODE.TAB, KEY.TAB);
-var navigationKeys = new Set();
-// IE11 has no support for new Set with iterable so we need to initialize this
-// by hand.
-navigationKeys.add(KEY.PAGE_UP);
-navigationKeys.add(KEY.PAGE_DOWN);
-navigationKeys.add(KEY.END);
-navigationKeys.add(KEY.HOME);
-navigationKeys.add(KEY.ARROW_LEFT);
-navigationKeys.add(KEY.ARROW_UP);
-navigationKeys.add(KEY.ARROW_RIGHT);
-navigationKeys.add(KEY.ARROW_DOWN);
+function closest(element, selector) {
+    if (element.closest) {
+        return element.closest(selector);
+    }
+    var el = element;
+    while (el) {
+        if (matches(el, selector)) {
+            return el;
+        }
+        el = el.parentElement;
+    }
+    return null;
+}
+function matches(element, selector) {
+    var nativeMatches = element.matches
+        || element.webkitMatchesSelector
+        || element.msMatchesSelector;
+    return nativeMatches.call(element, selector);
+}
 /**
- * normalizeKey returns the normalized string for a navigational action.
+ * Used to compute the estimated scroll width of elements. When an element is
+ * hidden due to display: none; being applied to a parent element, the width is
+ * returned as 0. However, the element will have a true width once no longer
+ * inside a display: none context. This method computes an estimated width when
+ * the element is hidden or returns the true width when the element is visble.
+ * @param {Element} element the element whose width to estimate
  */
-function normalizeKey(evt) {
-    var key = evt.key;
-    // If the event already has a normalized key, return it
-    if (normalizedKeys.has(key)) {
-        return key;
-    }
-    // tslint:disable-next-line:deprecation
-    var mappedKey = mappedKeyCodes.get(evt.keyCode);
-    if (mappedKey) {
-        return mappedKey;
+function estimateScrollWidth(element) {
+    // Check the offsetParent. If the element inherits display: none from any
+    // parent, the offsetParent property will be null (see
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent).
+    // This check ensures we only clone the node when necessary.
+    var htmlEl = element;
+    if (htmlEl.offsetParent !== null) {
+        return htmlEl.scrollWidth;
     }
-    return KEY.UNKNOWN;
+    var clone = htmlEl.cloneNode(true);
+    clone.style.setProperty('position', 'absolute');
+    clone.style.setProperty('transform', 'translate(-9999px, -9999px)');
+    document.documentElement.appendChild(clone);
+    var scrollWidth = clone.scrollWidth;
+    document.documentElement.removeChild(clone);
+    return scrollWidth;
 }
 
 /**
  * @license
- * Copyright 2020 Google Inc.
+ * Copyright 2016 Google Inc.
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
@@ -320,27 +351,131 @@ function normalizeKey(evt) {
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var ELEMENTS_KEY_ALLOWED_IN = ['input', 'button', 'textarea', 'select'];
+var cssClasses$8 = {
+    LABEL_FLOAT_ABOVE: 'mdc-floating-label--float-above',
+    LABEL_REQUIRED: 'mdc-floating-label--required',
+    LABEL_SHAKE: 'mdc-floating-label--shake',
+    ROOT: 'mdc-floating-label',
+};
+
 /**
- * Ensures that preventDefault is only called if the containing element
- * doesn't consume the event, and it will cause an unintended scroll.
+ * @license
+ * Copyright 2016 Google Inc.
  *
- * @param evt keyboard event to be prevented.
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
  */
-var preventDefaultEvent = function (evt) {
-    var target = evt.target;
-    if (!target) {
-        return;
-    }
-    var tagName = ("" + target.tagName).toLowerCase();
-    if (ELEMENTS_KEY_ALLOWED_IN.indexOf(tagName) === -1) {
-        evt.preventDefault();
+var MDCFloatingLabelFoundation = /** @class */ (function (_super) {
+    __extends(MDCFloatingLabelFoundation, _super);
+    function MDCFloatingLabelFoundation(adapter) {
+        var _this = _super.call(this, exports.__assign(exports.__assign({}, MDCFloatingLabelFoundation.defaultAdapter), adapter)) || this;
+        _this.shakeAnimationEndHandler = function () {
+            _this.handleShakeAnimationEnd();
+        };
+        return _this;
     }
-};
+    Object.defineProperty(MDCFloatingLabelFoundation, "cssClasses", {
+        get: function () {
+            return cssClasses$8;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MDCFloatingLabelFoundation, "defaultAdapter", {
+        /**
+         * See {@link MDCFloatingLabelAdapter} for typing information on parameters and return types.
+         */
+        get: function () {
+            // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
+            return {
+                addClass: function () { return undefined; },
+                removeClass: function () { return undefined; },
+                getWidth: function () { return 0; },
+                registerInteractionHandler: function () { return undefined; },
+                deregisterInteractionHandler: function () { return undefined; },
+            };
+            // tslint:enable:object-literal-sort-keys
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MDCFloatingLabelFoundation.prototype.init = function () {
+        this.adapter.registerInteractionHandler('animationend', this.shakeAnimationEndHandler);
+    };
+    MDCFloatingLabelFoundation.prototype.destroy = function () {
+        this.adapter.deregisterInteractionHandler('animationend', this.shakeAnimationEndHandler);
+    };
+    /**
+     * Returns the width of the label element.
+     */
+    MDCFloatingLabelFoundation.prototype.getWidth = function () {
+        return this.adapter.getWidth();
+    };
+    /**
+     * Styles the label to produce a shake animation to indicate an error.
+     * @param shouldShake If true, adds the shake CSS class; otherwise, removes shake class.
+     */
+    MDCFloatingLabelFoundation.prototype.shake = function (shouldShake) {
+        var LABEL_SHAKE = MDCFloatingLabelFoundation.cssClasses.LABEL_SHAKE;
+        if (shouldShake) {
+            this.adapter.addClass(LABEL_SHAKE);
+        }
+        else {
+            this.adapter.removeClass(LABEL_SHAKE);
+        }
+    };
+    /**
+     * Styles the label to float or dock.
+     * @param shouldFloat If true, adds the float CSS class; otherwise, removes float and shake classes to dock the label.
+     */
+    MDCFloatingLabelFoundation.prototype.float = function (shouldFloat) {
+        var _a = MDCFloatingLabelFoundation.cssClasses, LABEL_FLOAT_ABOVE = _a.LABEL_FLOAT_ABOVE, LABEL_SHAKE = _a.LABEL_SHAKE;
+        if (shouldFloat) {
+            this.adapter.addClass(LABEL_FLOAT_ABOVE);
+        }
+        else {
+            this.adapter.removeClass(LABEL_FLOAT_ABOVE);
+            this.adapter.removeClass(LABEL_SHAKE);
+        }
+    };
+    /**
+     * Styles the label as required.
+     * @param isRequired If true, adds an asterisk to the label, indicating that it is required.
+     */
+    MDCFloatingLabelFoundation.prototype.setRequired = function (isRequired) {
+        var LABEL_REQUIRED = MDCFloatingLabelFoundation.cssClasses.LABEL_REQUIRED;
+        if (isRequired) {
+            this.adapter.addClass(LABEL_REQUIRED);
+        }
+        else {
+            this.adapter.removeClass(LABEL_REQUIRED);
+        }
+    };
+    MDCFloatingLabelFoundation.prototype.handleShakeAnimationEnd = function () {
+        var LABEL_SHAKE = MDCFloatingLabelFoundation.cssClasses.LABEL_SHAKE;
+        this.adapter.removeClass(LABEL_SHAKE);
+    };
+    return MDCFloatingLabelFoundation;
+}(MDCFoundation));
 
 /**
  * @license
- * Copyright 2020 Google Inc.
+ * Copyright 2016 Google Inc.
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
@@ -360,86 +495,680 @@ var preventDefaultEvent = function (evt) {
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
+var MDCFloatingLabel = /** @class */ (function (_super) {
+    __extends(MDCFloatingLabel, _super);
+    function MDCFloatingLabel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    MDCFloatingLabel.attachTo = function (root) {
+        return new MDCFloatingLabel(root);
+    };
+    /**
+     * Styles the label to produce the label shake for errors.
+     * @param shouldShake If true, shakes the label by adding a CSS class; otherwise, stops shaking by removing the class.
+     */
+    MDCFloatingLabel.prototype.shake = function (shouldShake) {
+        this.foundation.shake(shouldShake);
+    };
+    /**
+     * Styles the label to float/dock.
+     * @param shouldFloat If true, floats the label by adding a CSS class; otherwise, docks it by removing the class.
+     */
+    MDCFloatingLabel.prototype.float = function (shouldFloat) {
+        this.foundation.float(shouldFloat);
+    };
+    /**
+     * Styles the label as required.
+     * @param isRequired If true, adds an asterisk to the label, indicating that it is required.
+     */
+    MDCFloatingLabel.prototype.setRequired = function (isRequired) {
+        this.foundation.setRequired(isRequired);
+    };
+    MDCFloatingLabel.prototype.getWidth = function () {
+        return this.foundation.getWidth();
+    };
+    MDCFloatingLabel.prototype.getDefaultFoundation = function () {
+        var _this = this;
+        // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+        // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+        // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
+        var adapter = {
+            addClass: function (className) { return _this.root.classList.add(className); },
+            removeClass: function (className) { return _this.root.classList.remove(className); },
+            getWidth: function () { return estimateScrollWidth(_this.root); },
+            registerInteractionHandler: function (evtType, handler) {
+                return _this.listen(evtType, handler);
+            },
+            deregisterInteractionHandler: function (evtType, handler) {
+                return _this.unlisten(evtType, handler);
+            },
+        };
+        // tslint:enable:object-literal-sort-keys
+        return new MDCFloatingLabelFoundation(adapter);
+    };
+    return MDCFloatingLabel;
+}(MDCComponent));
+
 /**
- * Initializes a state object for typeahead. Use the same reference for calls to
- * typeahead functions.
+ * @license
+ * Copyright 2018 Google Inc.
  *
- * @return The current state of the typeahead process. Each state reference
- *     represents a typeahead instance as the reference is typically mutated
- *     in-place.
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
  */
-function initState() {
-    var state = {
-        bufferClearTimeout: 0,
-        currentFirstChar: '',
-        sortedIndexCursor: 0,
-        typeaheadBuffer: '',
-    };
-    return state;
-}
+var cssClasses$7 = {
+    LINE_RIPPLE_ACTIVE: 'mdc-line-ripple--active',
+    LINE_RIPPLE_DEACTIVATING: 'mdc-line-ripple--deactivating',
+};
+
 /**
- * Initializes typeahead state by indexing the current list items by primary
- * text into the sortedIndexByFirstChar data structure.
+ * @license
+ * Copyright 2018 Google Inc.
  *
- * @param listItemCount numer of items in the list
- * @param getPrimaryTextByItemIndex function that returns the primary text at a
- *     given index
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * @return Map that maps the first character of the primary text to the full
- *     list text and it's index
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
  */
-function initSortedIndex(listItemCount, getPrimaryTextByItemIndex) {
-    var sortedIndexByFirstChar = new Map();
-    // Aggregate item text to index mapping
-    for (var i = 0; i < listItemCount; i++) {
-        var primaryText = getPrimaryTextByItemIndex(i).trim();
-        if (!primaryText) {
-            continue;
-        }
-        var firstChar = primaryText[0].toLowerCase();
-        if (!sortedIndexByFirstChar.has(firstChar)) {
-            sortedIndexByFirstChar.set(firstChar, []);
-        }
-        sortedIndexByFirstChar.get(firstChar).push({ text: primaryText.toLowerCase(), index: i });
+var MDCLineRippleFoundation = /** @class */ (function (_super) {
+    __extends(MDCLineRippleFoundation, _super);
+    function MDCLineRippleFoundation(adapter) {
+        var _this = _super.call(this, exports.__assign(exports.__assign({}, MDCLineRippleFoundation.defaultAdapter), adapter)) || this;
+        _this.transitionEndHandler = function (evt) {
+            _this.handleTransitionEnd(evt);
+        };
+        return _this;
     }
-    // Sort the mapping
-    // TODO(b/157162694): Investigate replacing forEach with Map.values()
-    sortedIndexByFirstChar.forEach(function (values) {
-        values.sort(function (first, second) {
-            return first.index - second.index;
-        });
+    Object.defineProperty(MDCLineRippleFoundation, "cssClasses", {
+        get: function () {
+            return cssClasses$7;
+        },
+        enumerable: false,
+        configurable: true
     });
-    return sortedIndexByFirstChar;
-}
+    Object.defineProperty(MDCLineRippleFoundation, "defaultAdapter", {
+        /**
+         * See {@link MDCLineRippleAdapter} for typing information on parameters and return types.
+         */
+        get: function () {
+            // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
+            return {
+                addClass: function () { return undefined; },
+                removeClass: function () { return undefined; },
+                hasClass: function () { return false; },
+                setStyle: function () { return undefined; },
+                registerEventHandler: function () { return undefined; },
+                deregisterEventHandler: function () { return undefined; },
+            };
+            // tslint:enable:object-literal-sort-keys
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MDCLineRippleFoundation.prototype.init = function () {
+        this.adapter.registerEventHandler('transitionend', this.transitionEndHandler);
+    };
+    MDCLineRippleFoundation.prototype.destroy = function () {
+        this.adapter.deregisterEventHandler('transitionend', this.transitionEndHandler);
+    };
+    MDCLineRippleFoundation.prototype.activate = function () {
+        this.adapter.removeClass(cssClasses$7.LINE_RIPPLE_DEACTIVATING);
+        this.adapter.addClass(cssClasses$7.LINE_RIPPLE_ACTIVE);
+    };
+    MDCLineRippleFoundation.prototype.setRippleCenter = function (xCoordinate) {
+        this.adapter.setStyle('transform-origin', xCoordinate + "px center");
+    };
+    MDCLineRippleFoundation.prototype.deactivate = function () {
+        this.adapter.addClass(cssClasses$7.LINE_RIPPLE_DEACTIVATING);
+    };
+    MDCLineRippleFoundation.prototype.handleTransitionEnd = function (evt) {
+        // Wait for the line ripple to be either transparent or opaque
+        // before emitting the animation end event
+        var isDeactivating = this.adapter.hasClass(cssClasses$7.LINE_RIPPLE_DEACTIVATING);
+        if (evt.propertyName === 'opacity') {
+            if (isDeactivating) {
+                this.adapter.removeClass(cssClasses$7.LINE_RIPPLE_ACTIVE);
+                this.adapter.removeClass(cssClasses$7.LINE_RIPPLE_DEACTIVATING);
+            }
+        }
+    };
+    return MDCLineRippleFoundation;
+}(MDCFoundation));
+
 /**
- * Given the next desired character from the user, it attempts to find the next
- * list option matching the buffer. Wraps around if at the end of options.
+ * @license
+ * Copyright 2018 Google Inc.
  *
- * @param opts Options and accessors
- *   - nextChar - the next character to match against items
- *   - sortedIndexByFirstChar - output of `initSortedIndex(...)`
- *   - focusedItemIndex - the index of the currently focused item
- *   - focusItemAtIndex - function that focuses a list item at given index
- *   - skipFocus - whether or not to focus the matched item
- *   - isItemAtIndexDisabled - function that determines whether an item at a
- *        given index is disabled
- * @param state The typeahead state instance. See `initState`.
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * @return The index of the matched item, or -1 if no match.
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
  */
-function matchItem(opts, state) {
-    var nextChar = opts.nextChar, focusItemAtIndex = opts.focusItemAtIndex, sortedIndexByFirstChar = opts.sortedIndexByFirstChar, focusedItemIndex = opts.focusedItemIndex, skipFocus = opts.skipFocus, isItemAtIndexDisabled = opts.isItemAtIndexDisabled;
-    clearTimeout(state.bufferClearTimeout);
-    state.bufferClearTimeout = setTimeout(function () {
-        clearBuffer(state);
-    }, numbers$2.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);
-    state.typeaheadBuffer = state.typeaheadBuffer + nextChar;
-    var index;
-    if (state.typeaheadBuffer.length === 1) {
-        index = matchFirstChar(sortedIndexByFirstChar, focusedItemIndex, isItemAtIndexDisabled, state);
+var MDCLineRipple = /** @class */ (function (_super) {
+    __extends(MDCLineRipple, _super);
+    function MDCLineRipple() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    else {
-        index = matchAllChars(sortedIndexByFirstChar, isItemAtIndexDisabled, state);
+    MDCLineRipple.attachTo = function (root) {
+        return new MDCLineRipple(root);
+    };
+    /**
+     * Activates the line ripple
+     */
+    MDCLineRipple.prototype.activate = function () {
+        this.foundation.activate();
+    };
+    /**
+     * Deactivates the line ripple
+     */
+    MDCLineRipple.prototype.deactivate = function () {
+        this.foundation.deactivate();
+    };
+    /**
+     * Sets the transform origin given a user's click location.
+     * The `rippleCenter` is the x-coordinate of the middle of the ripple.
+     */
+    MDCLineRipple.prototype.setRippleCenter = function (xCoordinate) {
+        this.foundation.setRippleCenter(xCoordinate);
+    };
+    MDCLineRipple.prototype.getDefaultFoundation = function () {
+        var _this = this;
+        // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+        // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+        // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
+        var adapter = {
+            addClass: function (className) { return _this.root.classList.add(className); },
+            removeClass: function (className) { return _this.root.classList.remove(className); },
+            hasClass: function (className) { return _this.root.classList.contains(className); },
+            setStyle: function (propertyName, value) { return _this.root.style.setProperty(propertyName, value); },
+            registerEventHandler: function (evtType, handler) { return _this.listen(evtType, handler); },
+            deregisterEventHandler: function (evtType, handler) { return _this.unlisten(evtType, handler); },
+        };
+        // tslint:enable:object-literal-sort-keys
+        return new MDCLineRippleFoundation(adapter);
+    };
+    return MDCLineRipple;
+}(MDCComponent));
+
+/**
+ * @license
+ * Copyright 2018 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var cssClasses$6 = {
+    ANCHOR: 'mdc-menu-surface--anchor',
+    ANIMATING_CLOSED: 'mdc-menu-surface--animating-closed',
+    ANIMATING_OPEN: 'mdc-menu-surface--animating-open',
+    FIXED: 'mdc-menu-surface--fixed',
+    IS_OPEN_BELOW: 'mdc-menu-surface--is-open-below',
+    OPEN: 'mdc-menu-surface--open',
+    ROOT: 'mdc-menu-surface',
+};
+// tslint:disable:object-literal-sort-keys
+var strings$7 = {
+    CLOSED_EVENT: 'MDCMenuSurface:closed',
+    CLOSING_EVENT: 'MDCMenuSurface:closing',
+    OPENED_EVENT: 'MDCMenuSurface:opened',
+    OPENING_EVENT: 'MDCMenuSurface:opening',
+    FOCUSABLE_ELEMENTS: [
+        'button:not(:disabled)',
+        '[href]:not([aria-disabled="true"])',
+        'input:not(:disabled)',
+        'select:not(:disabled)',
+        'textarea:not(:disabled)',
+        '[tabindex]:not([tabindex="-1"]):not([aria-disabled="true"])',
+    ].join(', '),
+};
+// tslint:enable:object-literal-sort-keys
+var numbers$5 = {
+    /** Total duration of menu-surface open animation. */
+    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_TO_EDGE: 32,
+    /**
+     * 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.
+ */
+var CornerBit;
+(function (CornerBit) {
+    CornerBit[CornerBit["BOTTOM"] = 1] = "BOTTOM";
+    CornerBit[CornerBit["CENTER"] = 2] = "CENTER";
+    CornerBit[CornerBit["RIGHT"] = 4] = "RIGHT";
+    CornerBit[CornerBit["FLIP_RTL"] = 8] = "FLIP_RTL";
+})(CornerBit || (CornerBit = {}));
+/**
+ * Enum for representing an element corner for positioning the menu-surface.
+ *
+ * The START constants map to LEFT if element directionality is left
+ * to right and RIGHT if the directionality is right to left.
+ * Likewise END maps to RIGHT or LEFT depending on the directionality.
+ */
+var Corner;
+(function (Corner) {
+    Corner[Corner["TOP_LEFT"] = 0] = "TOP_LEFT";
+    Corner[Corner["TOP_RIGHT"] = 4] = "TOP_RIGHT";
+    Corner[Corner["BOTTOM_LEFT"] = 1] = "BOTTOM_LEFT";
+    Corner[Corner["BOTTOM_RIGHT"] = 5] = "BOTTOM_RIGHT";
+    Corner[Corner["TOP_START"] = 8] = "TOP_START";
+    Corner[Corner["TOP_END"] = 12] = "TOP_END";
+    Corner[Corner["BOTTOM_START"] = 9] = "BOTTOM_START";
+    Corner[Corner["BOTTOM_END"] = 13] = "BOTTOM_END";
+})(Corner || (Corner = {}));
+
+/**
+ * @license
+ * Copyright 2018 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var _a, _b;
+var cssClasses$5 = {
+    LIST_ITEM_ACTIVATED_CLASS: 'mdc-list-item--activated',
+    LIST_ITEM_CLASS: 'mdc-list-item',
+    LIST_ITEM_DISABLED_CLASS: 'mdc-list-item--disabled',
+    LIST_ITEM_SELECTED_CLASS: 'mdc-list-item--selected',
+    LIST_ITEM_TEXT_CLASS: 'mdc-list-item__text',
+    LIST_ITEM_PRIMARY_TEXT_CLASS: 'mdc-list-item__primary-text',
+    ROOT: 'mdc-list',
+};
+var evolutionClassNameMap = (_a = {},
+    _a["" + cssClasses$5.LIST_ITEM_ACTIVATED_CLASS] = 'mdc-list-item--activated',
+    _a["" + cssClasses$5.LIST_ITEM_CLASS] = 'mdc-list-item',
+    _a["" + cssClasses$5.LIST_ITEM_DISABLED_CLASS] = 'mdc-list-item--disabled',
+    _a["" + cssClasses$5.LIST_ITEM_SELECTED_CLASS] = 'mdc-list-item--selected',
+    _a["" + cssClasses$5.LIST_ITEM_PRIMARY_TEXT_CLASS] = 'mdc-list-item__primary-text',
+    _a["" + cssClasses$5.ROOT] = 'mdc-list',
+    _a);
+var deprecatedClassNameMap = (_b = {},
+    _b["" + cssClasses$5.LIST_ITEM_ACTIVATED_CLASS] = 'mdc-deprecated-list-item--activated',
+    _b["" + cssClasses$5.LIST_ITEM_CLASS] = 'mdc-deprecated-list-item',
+    _b["" + cssClasses$5.LIST_ITEM_DISABLED_CLASS] = 'mdc-deprecated-list-item--disabled',
+    _b["" + cssClasses$5.LIST_ITEM_SELECTED_CLASS] = 'mdc-deprecated-list-item--selected',
+    _b["" + cssClasses$5.LIST_ITEM_TEXT_CLASS] = 'mdc-deprecated-list-item__text',
+    _b["" + cssClasses$5.LIST_ITEM_PRIMARY_TEXT_CLASS] = 'mdc-deprecated-list-item__primary-text',
+    _b["" + cssClasses$5.ROOT] = 'mdc-deprecated-list',
+    _b);
+var strings$6 = {
+    ACTION_EVENT: 'MDCList:action',
+    SELECTION_CHANGE_EVENT: 'MDCList:selectionChange',
+    ARIA_CHECKED: 'aria-checked',
+    ARIA_CHECKED_CHECKBOX_SELECTOR: '[role="checkbox"][aria-checked="true"]',
+    ARIA_CHECKED_RADIO_SELECTOR: '[role="radio"][aria-checked="true"]',
+    ARIA_CURRENT: 'aria-current',
+    ARIA_DISABLED: 'aria-disabled',
+    ARIA_ORIENTATION: 'aria-orientation',
+    ARIA_ORIENTATION_HORIZONTAL: 'horizontal',
+    ARIA_ROLE_CHECKBOX_SELECTOR: '[role="checkbox"]',
+    ARIA_SELECTED: 'aria-selected',
+    ARIA_INTERACTIVE_ROLES_SELECTOR: '[role="listbox"], [role="menu"]',
+    ARIA_MULTI_SELECTABLE_SELECTOR: '[aria-multiselectable="true"]',
+    CHECKBOX_RADIO_SELECTOR: 'input[type="checkbox"], input[type="radio"]',
+    CHECKBOX_SELECTOR: 'input[type="checkbox"]',
+    CHILD_ELEMENTS_TO_TOGGLE_TABINDEX: "\n    ." + cssClasses$5.LIST_ITEM_CLASS + " button:not(:disabled),\n    ." + cssClasses$5.LIST_ITEM_CLASS + " a,\n    ." + deprecatedClassNameMap[cssClasses$5.LIST_ITEM_CLASS] + " button:not(:disabled),\n    ." + deprecatedClassNameMap[cssClasses$5.LIST_ITEM_CLASS] + " a\n  ",
+    DEPRECATED_SELECTOR: '.mdc-deprecated-list',
+    FOCUSABLE_CHILD_ELEMENTS: "\n    ." + cssClasses$5.LIST_ITEM_CLASS + " button:not(:disabled),\n    ." + cssClasses$5.LIST_ITEM_CLASS + " a,\n    ." + cssClasses$5.LIST_ITEM_CLASS + " input[type=\"radio\"]:not(:disabled),\n    ." + cssClasses$5.LIST_ITEM_CLASS + " input[type=\"checkbox\"]:not(:disabled),\n    ." + deprecatedClassNameMap[cssClasses$5.LIST_ITEM_CLASS] + " button:not(:disabled),\n    ." + deprecatedClassNameMap[cssClasses$5.LIST_ITEM_CLASS] + " a,\n    ." + deprecatedClassNameMap[cssClasses$5.LIST_ITEM_CLASS] + " input[type=\"radio\"]:not(:disabled),\n    ." + deprecatedClassNameMap[cssClasses$5.LIST_ITEM_CLASS] + " input[type=\"checkbox\"]:not(:disabled)\n  ",
+    RADIO_SELECTOR: 'input[type="radio"]',
+    SELECTED_ITEM_SELECTOR: '[aria-selected="true"], [aria-current="true"]',
+};
+var numbers$4 = {
+    UNSET_INDEX: -1,
+    TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS: 300
+};
+var evolutionAttribute = 'evolution';
+
+/**
+ * @license
+ * Copyright 2020 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+/**
+ * KEY provides normalized string values for keys.
+ */
+var KEY = {
+    UNKNOWN: 'Unknown',
+    BACKSPACE: 'Backspace',
+    ENTER: 'Enter',
+    SPACEBAR: 'Spacebar',
+    PAGE_UP: 'PageUp',
+    PAGE_DOWN: 'PageDown',
+    END: 'End',
+    HOME: 'Home',
+    ARROW_LEFT: 'ArrowLeft',
+    ARROW_UP: 'ArrowUp',
+    ARROW_RIGHT: 'ArrowRight',
+    ARROW_DOWN: 'ArrowDown',
+    DELETE: 'Delete',
+    ESCAPE: 'Escape',
+    TAB: 'Tab',
+};
+var normalizedKeys = new Set();
+// IE11 has no support for new Map with iterable so we need to initialize this
+// by hand.
+normalizedKeys.add(KEY.BACKSPACE);
+normalizedKeys.add(KEY.ENTER);
+normalizedKeys.add(KEY.SPACEBAR);
+normalizedKeys.add(KEY.PAGE_UP);
+normalizedKeys.add(KEY.PAGE_DOWN);
+normalizedKeys.add(KEY.END);
+normalizedKeys.add(KEY.HOME);
+normalizedKeys.add(KEY.ARROW_LEFT);
+normalizedKeys.add(KEY.ARROW_UP);
+normalizedKeys.add(KEY.ARROW_RIGHT);
+normalizedKeys.add(KEY.ARROW_DOWN);
+normalizedKeys.add(KEY.DELETE);
+normalizedKeys.add(KEY.ESCAPE);
+normalizedKeys.add(KEY.TAB);
+var KEY_CODE = {
+    BACKSPACE: 8,
+    ENTER: 13,
+    SPACEBAR: 32,
+    PAGE_UP: 33,
+    PAGE_DOWN: 34,
+    END: 35,
+    HOME: 36,
+    ARROW_LEFT: 37,
+    ARROW_UP: 38,
+    ARROW_RIGHT: 39,
+    ARROW_DOWN: 40,
+    DELETE: 46,
+    ESCAPE: 27,
+    TAB: 9,
+};
+var mappedKeyCodes = new Map();
+// IE11 has no support for new Map with iterable so we need to initialize this
+// by hand.
+mappedKeyCodes.set(KEY_CODE.BACKSPACE, KEY.BACKSPACE);
+mappedKeyCodes.set(KEY_CODE.ENTER, KEY.ENTER);
+mappedKeyCodes.set(KEY_CODE.SPACEBAR, KEY.SPACEBAR);
+mappedKeyCodes.set(KEY_CODE.PAGE_UP, KEY.PAGE_UP);
+mappedKeyCodes.set(KEY_CODE.PAGE_DOWN, KEY.PAGE_DOWN);
+mappedKeyCodes.set(KEY_CODE.END, KEY.END);
+mappedKeyCodes.set(KEY_CODE.HOME, KEY.HOME);
+mappedKeyCodes.set(KEY_CODE.ARROW_LEFT, KEY.ARROW_LEFT);
+mappedKeyCodes.set(KEY_CODE.ARROW_UP, KEY.ARROW_UP);
+mappedKeyCodes.set(KEY_CODE.ARROW_RIGHT, KEY.ARROW_RIGHT);
+mappedKeyCodes.set(KEY_CODE.ARROW_DOWN, KEY.ARROW_DOWN);
+mappedKeyCodes.set(KEY_CODE.DELETE, KEY.DELETE);
+mappedKeyCodes.set(KEY_CODE.ESCAPE, KEY.ESCAPE);
+mappedKeyCodes.set(KEY_CODE.TAB, KEY.TAB);
+var navigationKeys = new Set();
+// IE11 has no support for new Set with iterable so we need to initialize this
+// by hand.
+navigationKeys.add(KEY.PAGE_UP);
+navigationKeys.add(KEY.PAGE_DOWN);
+navigationKeys.add(KEY.END);
+navigationKeys.add(KEY.HOME);
+navigationKeys.add(KEY.ARROW_LEFT);
+navigationKeys.add(KEY.ARROW_UP);
+navigationKeys.add(KEY.ARROW_RIGHT);
+navigationKeys.add(KEY.ARROW_DOWN);
+/**
+ * normalizeKey returns the normalized string for a navigational action.
+ */
+function normalizeKey(evt) {
+    var key = evt.key;
+    // If the event already has a normalized key, return it
+    if (normalizedKeys.has(key)) {
+        return key;
+    }
+    // tslint:disable-next-line:deprecation
+    var mappedKey = mappedKeyCodes.get(evt.keyCode);
+    if (mappedKey) {
+        return mappedKey;
+    }
+    return KEY.UNKNOWN;
+}
+
+/**
+ * @license
+ * Copyright 2020 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var ELEMENTS_KEY_ALLOWED_IN = ['input', 'button', 'textarea', 'select'];
+/**
+ * Ensures that preventDefault is only called if the containing element
+ * doesn't consume the event, and it will cause an unintended scroll.
+ *
+ * @param evt keyboard event to be prevented.
+ */
+var preventDefaultEvent = function (evt) {
+    var target = evt.target;
+    if (!target) {
+        return;
+    }
+    var tagName = ("" + target.tagName).toLowerCase();
+    if (ELEMENTS_KEY_ALLOWED_IN.indexOf(tagName) === -1) {
+        evt.preventDefault();
+    }
+};
+
+/**
+ * @license
+ * Copyright 2020 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+/**
+ * Initializes a state object for typeahead. Use the same reference for calls to
+ * typeahead functions.
+ *
+ * @return The current state of the typeahead process. Each state reference
+ *     represents a typeahead instance as the reference is typically mutated
+ *     in-place.
+ */
+function initState() {
+    var state = {
+        bufferClearTimeout: 0,
+        currentFirstChar: '',
+        sortedIndexCursor: 0,
+        typeaheadBuffer: '',
+    };
+    return state;
+}
+/**
+ * Initializes typeahead state by indexing the current list items by primary
+ * text into the sortedIndexByFirstChar data structure.
+ *
+ * @param listItemCount numer of items in the list
+ * @param getPrimaryTextByItemIndex function that returns the primary text at a
+ *     given index
+ *
+ * @return Map that maps the first character of the primary text to the full
+ *     list text and it's index
+ */
+function initSortedIndex(listItemCount, getPrimaryTextByItemIndex) {
+    var sortedIndexByFirstChar = new Map();
+    // Aggregate item text to index mapping
+    for (var i = 0; i < listItemCount; i++) {
+        var primaryText = getPrimaryTextByItemIndex(i).trim();
+        if (!primaryText) {
+            continue;
+        }
+        var firstChar = primaryText[0].toLowerCase();
+        if (!sortedIndexByFirstChar.has(firstChar)) {
+            sortedIndexByFirstChar.set(firstChar, []);
+        }
+        sortedIndexByFirstChar.get(firstChar).push({ text: primaryText.toLowerCase(), index: i });
+    }
+    // Sort the mapping
+    // TODO(b/157162694): Investigate replacing forEach with Map.values()
+    sortedIndexByFirstChar.forEach(function (values) {
+        values.sort(function (first, second) {
+            return first.index - second.index;
+        });
+    });
+    return sortedIndexByFirstChar;
+}
+/**
+ * Given the next desired character from the user, it attempts to find the next
+ * list option matching the buffer. Wraps around if at the end of options.
+ *
+ * @param opts Options and accessors
+ *   - nextChar - the next character to match against items
+ *   - sortedIndexByFirstChar - output of `initSortedIndex(...)`
+ *   - focusedItemIndex - the index of the currently focused item
+ *   - focusItemAtIndex - function that focuses a list item at given index
+ *   - skipFocus - whether or not to focus the matched item
+ *   - isItemAtIndexDisabled - function that determines whether an item at a
+ *        given index is disabled
+ * @param state The typeahead state instance. See `initState`.
+ *
+ * @return The index of the matched item, or -1 if no match.
+ */
+function matchItem(opts, state) {
+    var nextChar = opts.nextChar, focusItemAtIndex = opts.focusItemAtIndex, sortedIndexByFirstChar = opts.sortedIndexByFirstChar, focusedItemIndex = opts.focusedItemIndex, skipFocus = opts.skipFocus, isItemAtIndexDisabled = opts.isItemAtIndexDisabled;
+    clearTimeout(state.bufferClearTimeout);
+    state.bufferClearTimeout = setTimeout(function () {
+        clearBuffer(state);
+    }, numbers$4.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);
+    state.typeaheadBuffer = state.typeaheadBuffer + nextChar;
+    var index;
+    if (state.typeaheadBuffer.length === 1) {
+        index = matchFirstChar(sortedIndexByFirstChar, focusedItemIndex, isItemAtIndexDisabled, state);
+    }
+    else {
+        index = matchAllChars(sortedIndexByFirstChar, isItemAtIndexDisabled, state);
     }
     if (index !== -1 && !skipFocus) {
         focusItemAtIndex(index);
@@ -655,15 +1384,15 @@ function createModifierChecker(event) {
     };
 }
 var MDCListFoundation = /** @class */ (function (_super) {
-    component.__extends(MDCListFoundation, _super);
+    __extends(MDCListFoundation, _super);
     function MDCListFoundation(adapter) {
-        var _this = _super.call(this, component.__assign(component.__assign({}, MDCListFoundation.defaultAdapter), adapter)) || this;
+        var _this = _super.call(this, exports.__assign(exports.__assign({}, MDCListFoundation.defaultAdapter), adapter)) || this;
         _this.wrapFocus = false;
         _this.isVertical = true;
         _this.isSingleSelectionList = false;
         _this.areDisabledItemsFocusable = true;
-        _this.selectedIndex = numbers$2.UNSET_INDEX;
-        _this.focusedItemIndex = numbers$2.UNSET_INDEX;
+        _this.selectedIndex = numbers$4.UNSET_INDEX;
+        _this.focusedItemIndex = numbers$4.UNSET_INDEX;
         _this.useActivatedClass = false;
         _this.useSelectedAttr = false;
         _this.ariaCurrentAttrValue = null;
@@ -678,21 +1407,21 @@ var MDCListFoundation = /** @class */ (function (_super) {
     }
     Object.defineProperty(MDCListFoundation, "strings", {
         get: function () {
-            return strings$4;
+            return strings$6;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(MDCListFoundation, "cssClasses", {
         get: function () {
-            return cssClasses$3;
+            return cssClasses$5;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(MDCListFoundation, "numbers", {
         get: function () {
-            return numbers$2;
+            return numbers$4;
         },
         enumerable: false,
         configurable: true
@@ -773,9 +1502,9 @@ var MDCListFoundation = /** @class */ (function (_super) {
      */
     MDCListFoundation.prototype.maybeInitializeSingleSelection = function () {
         var selectedItemIndex = this.getSelectedIndexFromDOM();
-        if (selectedItemIndex === numbers$2.UNSET_INDEX)
+        if (selectedItemIndex === numbers$4.UNSET_INDEX)
             return;
-        var hasActivatedClass = this.adapter.listItemAtIndexHasClass(selectedItemIndex, cssClasses$3.LIST_ITEM_ACTIVATED_CLASS);
+        var hasActivatedClass = this.adapter.listItemAtIndexHasClass(selectedItemIndex, cssClasses$5.LIST_ITEM_ACTIVATED_CLASS);
         if (hasActivatedClass) {
             this.setUseActivatedClass(true);
         }
@@ -784,11 +1513,11 @@ var MDCListFoundation = /** @class */ (function (_super) {
     };
     /** @return Index of the first selected item based on the DOM state. */
     MDCListFoundation.prototype.getSelectedIndexFromDOM = function () {
-        var selectedIndex = numbers$2.UNSET_INDEX;
+        var selectedIndex = numbers$4.UNSET_INDEX;
         var listItemsCount = this.adapter.getListItemCount();
         for (var i = 0; i < listItemsCount; i++) {
-            var hasSelectedClass = this.adapter.listItemAtIndexHasClass(i, cssClasses$3.LIST_ITEM_SELECTED_CLASS);
-            var hasActivatedClass = this.adapter.listItemAtIndexHasClass(i, cssClasses$3.LIST_ITEM_ACTIVATED_CLASS);
+            var hasSelectedClass = this.adapter.listItemAtIndexHasClass(i, cssClasses$5.LIST_ITEM_SELECTED_CLASS);
+            var hasActivatedClass = this.adapter.listItemAtIndexHasClass(i, cssClasses$5.LIST_ITEM_ACTIVATED_CLASS);
             if (!(hasSelectedClass || hasActivatedClass)) {
                 continue;
             }
@@ -873,7 +1602,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
         }, 0);
     };
     MDCListFoundation.prototype.isIndexDisabled = function (index) {
-        return this.adapter.listItemAtIndexHasClass(index, cssClasses$3.LIST_ITEM_DISABLED_CLASS);
+        return this.adapter.listItemAtIndexHasClass(index, cssClasses$5.LIST_ITEM_DISABLED_CLASS);
     };
     /**
      * Key handler for the list.
@@ -993,7 +1722,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
         }
         else if (isLetterA && eventHasModifiers(['Control']) && this.isCheckboxList) {
             event.preventDefault();
-            this.checkboxListToggleAll(this.selectedIndex === numbers$2.UNSET_INDEX ?
+            this.checkboxListToggleAll(this.selectedIndex === numbers$4.UNSET_INDEX ?
                 [] :
                 this.selectedIndex, true);
         }
@@ -1059,7 +1788,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
     MDCListFoundation.prototype.handleClick = function (index, isCheckboxAlreadyUpdatedInAdapter, event) {
         var _a;
         var eventHasModifiers = createModifierChecker(event);
-        if (index === numbers$2.UNSET_INDEX) {
+        if (index === numbers$4.UNSET_INDEX) {
             return;
         }
         if (this.isIndexDisabled(index)) {
@@ -1152,12 +1881,12 @@ var MDCListFoundation = /** @class */ (function (_super) {
             return;
         }
         if (isEnabled) {
-            this.adapter.removeClassForElementIndex(itemIndex, cssClasses$3.LIST_ITEM_DISABLED_CLASS);
-            this.adapter.setAttributeForElementIndex(itemIndex, strings$4.ARIA_DISABLED, 'false');
+            this.adapter.removeClassForElementIndex(itemIndex, cssClasses$5.LIST_ITEM_DISABLED_CLASS);
+            this.adapter.setAttributeForElementIndex(itemIndex, strings$6.ARIA_DISABLED, 'false');
         }
         else {
-            this.adapter.addClassForElementIndex(itemIndex, cssClasses$3.LIST_ITEM_DISABLED_CLASS);
-            this.adapter.setAttributeForElementIndex(itemIndex, strings$4.ARIA_DISABLED, 'true');
+            this.adapter.addClassForElementIndex(itemIndex, cssClasses$5.LIST_ITEM_DISABLED_CLASS);
+            this.adapter.setAttributeForElementIndex(itemIndex, strings$6.ARIA_DISABLED, 'true');
         }
     };
     MDCListFoundation.prototype.setSingleSelectionAtIndex = function (index, options) {
@@ -1165,16 +1894,16 @@ var MDCListFoundation = /** @class */ (function (_super) {
         if (this.selectedIndex === index && !options.forceUpdate) {
             return;
         }
-        var selectedClassName = cssClasses$3.LIST_ITEM_SELECTED_CLASS;
+        var selectedClassName = cssClasses$5.LIST_ITEM_SELECTED_CLASS;
         if (this.useActivatedClass) {
-            selectedClassName = cssClasses$3.LIST_ITEM_ACTIVATED_CLASS;
+            selectedClassName = cssClasses$5.LIST_ITEM_ACTIVATED_CLASS;
         }
-        if (this.selectedIndex !== numbers$2.UNSET_INDEX) {
+        if (this.selectedIndex !== numbers$4.UNSET_INDEX) {
             this.adapter.removeClassForElementIndex(this.selectedIndex, selectedClassName);
         }
         this.setAriaForSingleSelectionAtIndex(index);
         this.setTabindexAtIndex(index);
-        if (index !== numbers$2.UNSET_INDEX) {
+        if (index !== numbers$4.UNSET_INDEX) {
             this.adapter.addClassForElementIndex(index, selectedClassName);
         }
         this.selectedIndex = index;
@@ -1190,16 +1919,16 @@ var MDCListFoundation = /** @class */ (function (_super) {
     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$2.UNSET_INDEX) {
+        if (this.selectedIndex === numbers$4.UNSET_INDEX) {
             this.ariaCurrentAttrValue =
-                this.adapter.getAttributeForElementIndex(index, strings$4.ARIA_CURRENT);
+                this.adapter.getAttributeForElementIndex(index, strings$6.ARIA_CURRENT);
         }
         var isAriaCurrent = this.ariaCurrentAttrValue !== null;
-        var ariaAttribute = isAriaCurrent ? strings$4.ARIA_CURRENT : strings$4.ARIA_SELECTED;
-        if (this.selectedIndex !== numbers$2.UNSET_INDEX) {
+        var ariaAttribute = isAriaCurrent ? strings$6.ARIA_CURRENT : strings$6.ARIA_SELECTED;
+        if (this.selectedIndex !== numbers$4.UNSET_INDEX) {
             this.adapter.setAttributeForElementIndex(this.selectedIndex, ariaAttribute, 'false');
         }
-        if (index !== numbers$2.UNSET_INDEX) {
+        if (index !== numbers$4.UNSET_INDEX) {
             var ariaAttributeValue = isAriaCurrent ? this.ariaCurrentAttrValue : 'true';
             this.adapter.setAttributeForElementIndex(index, ariaAttribute, ariaAttributeValue);
         }
@@ -1208,7 +1937,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
      * Returns the attribute to use for indicating selection status.
      */
     MDCListFoundation.prototype.getSelectionAttribute = function () {
-        return this.useSelectedAttr ? strings$4.ARIA_SELECTED : strings$4.ARIA_CHECKED;
+        return this.useSelectedAttr ? strings$6.ARIA_SELECTED : strings$6.ARIA_CHECKED;
     };
     /**
      * Toggles radio at give index. Radio doesn't change the checked state if it
@@ -1221,7 +1950,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
         if (this.selectedIndex === index && !options.forceUpdate) {
             return;
         }
-        if (this.selectedIndex !== numbers$2.UNSET_INDEX) {
+        if (this.selectedIndex !== numbers$4.UNSET_INDEX) {
             this.adapter.setAttributeForElementIndex(this.selectedIndex, selectionAttribute, 'false');
         }
         this.adapter.setAttributeForElementIndex(index, selectionAttribute, 'true');
@@ -1239,7 +1968,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
         // need to know about the currently selected indices and can avoid
         // constructing the `Set` for performance reasons.
         var currentlySelected = options.isUserInteraction ?
-            new Set(currentIndex === numbers$2.UNSET_INDEX ? [] :
+            new Set(currentIndex === numbers$4.UNSET_INDEX ? [] :
                 currentIndex) :
             null;
         var selectionAttribute = this.getSelectionAttribute();
@@ -1275,11 +2004,11 @@ var MDCListFoundation = /** @class */ (function (_super) {
      */
     MDCListFoundation.prototype.toggleCheckboxRange = function (fromIndex, toIndex, toggleIndex) {
         this.lastSelectedIndex = toggleIndex;
-        var currentlySelected = new Set(this.selectedIndex === numbers$2.UNSET_INDEX ?
+        var currentlySelected = new Set(this.selectedIndex === numbers$4.UNSET_INDEX ?
             [] :
             this.selectedIndex);
         var newIsChecked = !(currentlySelected === null || currentlySelected === void 0 ? void 0 : currentlySelected.has(toggleIndex));
-        var _a = component.__read([fromIndex, toIndex].sort(), 2), startIndex = _a[0], endIndex = _a[1];
+        var _a = __read([fromIndex, toIndex].sort(), 2), startIndex = _a[0], endIndex = _a[1];
         var selectionAttribute = this.getSelectionAttribute();
         var changedIndices = [];
         for (var i = startIndex; i <= endIndex; i++) {
@@ -1304,12 +2033,12 @@ var MDCListFoundation = /** @class */ (function (_super) {
         // If the selected value has changed, update and notify the selection change
         // to the adapter.
         if (changedIndices.length) {
-            this.selectedIndex = component.__spreadArray([], component.__read(currentlySelected));
+            this.selectedIndex = __spreadArray([], __read(currentlySelected));
             this.adapter.notifySelectionChange(changedIndices);
         }
     };
     MDCListFoundation.prototype.setTabindexAtIndex = function (index) {
-        if (this.focusedItemIndex === numbers$2.UNSET_INDEX && index !== 0) {
+        if (this.focusedItemIndex === numbers$4.UNSET_INDEX && index !== 0) {
             // If some 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.
@@ -1325,7 +2054,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
             this.selectedIndex !== index) {
             this.adapter.setAttributeForElementIndex(this.selectedIndex, 'tabindex', '-1');
         }
-        if (index !== numbers$2.UNSET_INDEX) {
+        if (index !== numbers$4.UNSET_INDEX) {
             this.adapter.setAttributeForElementIndex(index, 'tabindex', '0');
         }
     };
@@ -1348,7 +2077,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
         }
         // Single-selection lists focus the selected item.
         if (typeof this.selectedIndex === 'number' &&
-            this.selectedIndex !== numbers$2.UNSET_INDEX) {
+            this.selectedIndex !== numbers$4.UNSET_INDEX) {
             return this.selectedIndex;
         }
         // Multiple-selection lists focus the first selected item.
@@ -1377,7 +2106,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
                 throw new Error("MDCListFoundation: Expected array of index for checkbox based list but got number: " + index);
             }
             return this.isIndexInRange(index) ||
-                this.isSingleSelectionList && index === numbers$2.UNSET_INDEX;
+                this.isSingleSelectionList && index === numbers$4.UNSET_INDEX;
         }
         else {
             return false;
@@ -1425,7 +2154,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
         this.adapter.setAttributeForElementIndex(index, selectionAttribute, newCheckedValue ? '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$2.UNSET_INDEX ?
+        var selectedIndexes = this.selectedIndex === numbers$4.UNSET_INDEX ?
             [] :
             this.selectedIndex.slice();
         if (newCheckedValue) {
@@ -1502,7 +2231,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
         clearBuffer(this.typeaheadState);
     };
     return MDCListFoundation;
-}(component.MDCFoundation));
+}(MDCFoundation));
 
 /**
  * @license
@@ -1527,7 +2256,7 @@ var MDCListFoundation = /** @class */ (function (_super) {
  * THE SOFTWARE.
  */
 var MDCList = /** @class */ (function (_super) {
-    component.__extends(MDCList, _super);
+    __extends(MDCList, _super);
     function MDCList() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1540,7 +2269,7 @@ var MDCList = /** @class */ (function (_super) {
     });
     Object.defineProperty(MDCList.prototype, "listElements", {
         get: function () {
-            return Array.from(this.root.querySelectorAll("." + this.classNameMap[cssClasses$3.LIST_ITEM_CLASS]));
+            return Array.from(this.root.querySelectorAll("." + this.classNameMap[cssClasses$5.LIST_ITEM_CLASS]));
         },
         enumerable: false,
         configurable: true
@@ -1606,12 +2335,12 @@ var MDCList = /** @class */ (function (_super) {
         if (this.isEvolutionEnabled) {
             this.classNameMap = evolutionClassNameMap;
         }
-        else if (component.matches(this.root, strings$4.DEPRECATED_SELECTOR)) {
+        else if (matches(this.root, strings$6.DEPRECATED_SELECTOR)) {
             this.classNameMap = deprecatedClassNameMap;
         }
         else {
             this.classNameMap =
-                Object.values(cssClasses$3)
+                Object.values(cssClasses$5)
                     .reduce(function (obj, className) {
                     obj[className] = className;
                     return obj;
@@ -1636,10 +2365,10 @@ var MDCList = /** @class */ (function (_super) {
         this.unlisten('focusout', this.focusOutEventListener);
     };
     MDCList.prototype.layout = function () {
-        var direction = this.root.getAttribute(strings$4.ARIA_ORIENTATION);
-        this.vertical = direction !== strings$4.ARIA_ORIENTATION_HORIZONTAL;
-        var itemSelector = "." + this.classNameMap[cssClasses$3.LIST_ITEM_CLASS] + ":not([tabindex])";
-        var childSelector = strings$4.FOCUSABLE_CHILD_ELEMENTS;
+        var direction = this.root.getAttribute(strings$6.ARIA_ORIENTATION);
+        this.vertical = direction !== strings$6.ARIA_ORIENTATION_HORIZONTAL;
+        var itemSelector = "." + this.classNameMap[cssClasses$5.LIST_ITEM_CLASS] + ":not([tabindex])";
+        var childSelector = strings$6.FOCUSABLE_CHILD_ELEMENTS;
         // List items need to have at least tabindex=-1 to be focusable.
         var itemEls = this.root.querySelectorAll(itemSelector);
         if (itemEls.length) {
@@ -1666,11 +2395,11 @@ var MDCList = /** @class */ (function (_super) {
      */
     MDCList.prototype.getPrimaryText = function (item) {
         var _a;
-        var primaryText = item.querySelector("." + this.classNameMap[cssClasses$3.LIST_ITEM_PRIMARY_TEXT_CLASS]);
+        var primaryText = item.querySelector("." + this.classNameMap[cssClasses$5.LIST_ITEM_PRIMARY_TEXT_CLASS]);
         if (this.isEvolutionEnabled || primaryText) {
             return (_a = primaryText === null || primaryText === void 0 ? void 0 : primaryText.textContent) !== null && _a !== void 0 ? _a : '';
         }
-        var singleLineText = item.querySelector("." + this.classNameMap[cssClasses$3.LIST_ITEM_TEXT_CLASS]);
+        var singleLineText = item.querySelector("." + this.classNameMap[cssClasses$5.LIST_ITEM_TEXT_CLASS]);
         return (singleLineText && singleLineText.textContent) || '';
     };
     /**
@@ -1679,10 +2408,10 @@ var MDCList = /** @class */ (function (_super) {
     MDCList.prototype.initializeListType = function () {
         var _this = this;
         this.isInteractive =
-            component.matches(this.root, strings$4.ARIA_INTERACTIVE_ROLES_SELECTOR);
+            matches(this.root, strings$6.ARIA_INTERACTIVE_ROLES_SELECTOR);
         if (this.isEvolutionEnabled && this.isInteractive) {
-            var selection = Array.from(this.root.querySelectorAll(strings$4.SELECTED_ITEM_SELECTOR), function (listItem) { return _this.listElements.indexOf(listItem); });
-            if (component.matches(this.root, strings$4.ARIA_MULTI_SELECTABLE_SELECTOR)) {
+            var selection = Array.from(this.root.querySelectorAll(strings$6.SELECTED_ITEM_SELECTOR), function (listItem) { return _this.listElements.indexOf(listItem); });
+            if (matches(this.root, strings$6.ARIA_MULTI_SELECTABLE_SELECTOR)) {
                 this.selectedIndex = selection;
             }
             else if (selection.length > 0) {
@@ -1690,10 +2419,10 @@ var MDCList = /** @class */ (function (_super) {
             }
             return;
         }
-        var checkboxListItems = this.root.querySelectorAll(strings$4.ARIA_ROLE_CHECKBOX_SELECTOR);
-        var radioSelectedListItem = this.root.querySelector(strings$4.ARIA_CHECKED_RADIO_SELECTOR);
+        var checkboxListItems = this.root.querySelectorAll(strings$6.ARIA_ROLE_CHECKBOX_SELECTOR);
+        var radioSelectedListItem = this.root.querySelector(strings$6.ARIA_CHECKED_RADIO_SELECTOR);
         if (checkboxListItems.length) {
-            var preselectedItems = this.root.querySelectorAll(strings$4.ARIA_CHECKED_CHECKBOX_SELECTOR);
+            var preselectedItems = this.root.querySelectorAll(strings$6.ARIA_CHECKED_CHECKBOX_SELECTOR);
             this.selectedIndex = Array.from(preselectedItems, function (listItem) { return _this.listElements.indexOf(listItem); });
         }
         else if (radioSelectedListItem) {
@@ -1751,15 +2480,15 @@ var MDCList = /** @class */ (function (_super) {
             },
             hasCheckboxAtIndex: function (index) {
                 var listItem = _this.listElements[index];
-                return !!listItem.querySelector(strings$4.CHECKBOX_SELECTOR);
+                return !!listItem.querySelector(strings$6.CHECKBOX_SELECTOR);
             },
             hasRadioAtIndex: function (index) {
                 var listItem = _this.listElements[index];
-                return !!listItem.querySelector(strings$4.RADIO_SELECTOR);
+                return !!listItem.querySelector(strings$6.RADIO_SELECTOR);
             },
             isCheckboxCheckedAtIndex: function (index) {
                 var listItem = _this.listElements[index];
-                var toggleEl = listItem.querySelector(strings$4.CHECKBOX_SELECTOR);
+                var toggleEl = listItem.querySelector(strings$6.CHECKBOX_SELECTOR);
                 return toggleEl.checked;
             },
             isFocusInsideList: function () {
@@ -1771,10 +2500,10 @@ var MDCList = /** @class */ (function (_super) {
                 return _this.listElements[index].classList.contains(_this.classNameMap[className]);
             },
             notifyAction: function (index) {
-                _this.emit(strings$4.ACTION_EVENT, { index: index }, /** shouldBubble */ true);
+                _this.emit(strings$6.ACTION_EVENT, { index: index }, /** shouldBubble */ true);
             },
             notifySelectionChange: function (changedIndices) {
-                _this.emit(strings$4.SELECTION_CHANGE_EVENT, { changedIndices: changedIndices }, /** shouldBubble */ true);
+                _this.emit(strings$6.SELECTION_CHANGE_EVENT, { changedIndices: changedIndices }, /** shouldBubble */ true);
             },
             removeClassForElementIndex: function (index, className) {
                 var element = _this.listElements[index];
@@ -1790,7 +2519,7 @@ var MDCList = /** @class */ (function (_super) {
             },
             setCheckedCheckboxOrRadioAtIndex: function (index, isChecked) {
                 var listItem = _this.listElements[index];
-                var toggleEl = listItem.querySelector(strings$4.CHECKBOX_RADIO_SELECTOR);
+                var toggleEl = listItem.querySelector(strings$6.CHECKBOX_RADIO_SELECTOR);
                 toggleEl.checked = isChecked;
                 var event = document.createEvent('Event');
                 event.initEvent('change', true, true);
@@ -1798,7 +2527,7 @@ var MDCList = /** @class */ (function (_super) {
             },
             setTabIndexForListItemChildren: function (listItemIndex, tabIndexValue) {
                 var element = _this.listElements[listItemIndex];
-                var selector = strings$4.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX;
+                var selector = strings$6.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX;
                 Array.prototype.forEach.call(element.querySelectorAll(selector), function (el) {
                     el.setAttribute('tabindex', tabIndexValue);
                 });
@@ -1812,7 +2541,7 @@ var MDCList = /** @class */ (function (_super) {
      */
     MDCList.prototype.ensureFocusable = function () {
         if (this.isEvolutionEnabled && this.isInteractive) {
-            if (!this.root.querySelector("." + this.classNameMap[cssClasses$3.LIST_ITEM_CLASS] + "[tabindex=\"0\"]")) {
+            if (!this.root.querySelector("." + this.classNameMap[cssClasses$5.LIST_ITEM_CLASS] + "[tabindex=\"0\"]")) {
                 var index = this.initialFocusIndex();
                 if (index !== -1) {
                     this.listElements[index].tabIndex = 0;
@@ -1825,10 +2554,10 @@ var MDCList = /** @class */ (function (_super) {
             return this.selectedIndex[0];
         }
         if (typeof this.selectedIndex === 'number' &&
-            this.selectedIndex !== numbers$2.UNSET_INDEX) {
+            this.selectedIndex !== numbers$4.UNSET_INDEX) {
             return this.selectedIndex;
         }
-        var el = this.root.querySelector("." + this.classNameMap[cssClasses$3.LIST_ITEM_CLASS] + ":not(." + this.classNameMap[cssClasses$3.LIST_ITEM_DISABLED_CLASS] + ")");
+        var el = this.root.querySelector("." + this.classNameMap[cssClasses$5.LIST_ITEM_CLASS] + ":not(." + this.classNameMap[cssClasses$5.LIST_ITEM_DISABLED_CLASS] + ")");
         if (el === null) {
             return -1;
         }
@@ -1839,10 +2568,10 @@ var MDCList = /** @class */ (function (_super) {
      * if there is no list item
      */
     MDCList.prototype.getListItemIndex = function (el) {
-        var nearestParent = component.closest(el, "." + this.classNameMap[cssClasses$3.LIST_ITEM_CLASS] + ", ." + this.classNameMap[cssClasses$3.ROOT]);
+        var nearestParent = closest(el, "." + this.classNameMap[cssClasses$5.LIST_ITEM_CLASS] + ", ." + this.classNameMap[cssClasses$5.ROOT]);
         // Get the index of the element if it is a list item.
         if (nearestParent &&
-            component.matches(nearestParent, "." + this.classNameMap[cssClasses$3.LIST_ITEM_CLASS])) {
+            matches(nearestParent, "." + this.classNameMap[cssClasses$5.LIST_ITEM_CLASS])) {
             return this.listElements.indexOf(nearestParent);
         }
         return -1;
@@ -1870,7 +2599,7 @@ var MDCList = /** @class */ (function (_super) {
     MDCList.prototype.handleKeydownEvent = function (evt) {
         var index = this.getListItemIndex(evt.target);
         var target = evt.target;
-        this.foundation.handleKeydown(evt, target.classList.contains(this.classNameMap[cssClasses$3.LIST_ITEM_CLASS]), index);
+        this.foundation.handleKeydown(evt, target.classList.contains(this.classNameMap[cssClasses$5.LIST_ITEM_CLASS]), index);
     };
     /**
      * Used to figure out which element was clicked before sending the event to
@@ -1881,11 +2610,11 @@ var MDCList = /** @class */ (function (_super) {
         var target = evt.target;
         // Toggle the checkbox only if it's not the target of the event, or the
         // checkbox will have 2 change events.
-        var toggleCheckbox = !component.matches(target, strings$4.CHECKBOX_RADIO_SELECTOR);
+        var toggleCheckbox = !matches(target, strings$6.CHECKBOX_RADIO_SELECTOR);
         this.foundation.handleClick(index, toggleCheckbox, evt);
     };
     return MDCList;
-}(component.MDCComponent));
+}(MDCComponent));
 
 /**
  * @license
@@ -1910,9 +2639,9 @@ var MDCList = /** @class */ (function (_super) {
  * THE SOFTWARE.
  */
 var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
-    component.__extends(MDCMenuSurfaceFoundation, _super);
+    __extends(MDCMenuSurfaceFoundation, _super);
     function MDCMenuSurfaceFoundation(adapter) {
-        var _this = _super.call(this, component.__assign(component.__assign({}, MDCMenuSurfaceFoundation.defaultAdapter), adapter)) || this;
+        var _this = _super.call(this, exports.__assign(exports.__assign({}, MDCMenuSurfaceFoundation.defaultAdapter), adapter)) || this;
         _this.isSurfaceOpen = false;
         _this.isQuickOpen = false;
         _this.isHoistedElement = false;
@@ -1945,21 +2674,21 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
     }
     Object.defineProperty(MDCMenuSurfaceFoundation, "cssClasses", {
         get: function () {
-            return cssClasses$4;
+            return cssClasses$6;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(MDCMenuSurfaceFoundation, "strings", {
         get: function () {
-            return strings$5;
+            return strings$7;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(MDCMenuSurfaceFoundation, "numbers", {
         get: function () {
-            return numbers$3;
+            return numbers$5;
         },
         enumerable: false,
         configurable: true
@@ -2117,7 +2846,7 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
                     _this.openAnimationEndTimerId = 0;
                     _this.adapter.removeClass(MDCMenuSurfaceFoundation.cssClasses.ANIMATING_OPEN);
                     _this.adapter.notifyOpen();
-                }, numbers$3.TRANSITION_OPEN_DURATION);
+                }, numbers$5.TRANSITION_OPEN_DURATION);
             });
             this.isSurfaceOpen = true;
         }
@@ -2150,7 +2879,7 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
                 _this.closeAnimationEndTimerId = 0;
                 _this.adapter.removeClass(MDCMenuSurfaceFoundation.cssClasses.ANIMATING_CLOSED);
                 _this.adapter.notifyClose();
-            }, numbers$3.TRANSITION_CLOSE_DURATION);
+            }, numbers$5.TRANSITION_CLOSE_DURATION);
         });
         this.isSurfaceOpen = false;
         if (!skipRestoreFocus) {
@@ -2191,7 +2920,7 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
         // Center align when anchor width is comparable or greater than menu
         // surface, otherwise keep corner.
         if (anchorSize.width / surfaceSize.width >
-            numbers$3.ANCHOR_TO_MENU_SURFACE_WIDTH_RATIO) {
+            numbers$5.ANCHOR_TO_MENU_SURFACE_WIDTH_RATIO) {
             horizontalAlignment = 'center';
         }
         // If the menu-surface has been hoisted to the body, it's no longer relative
@@ -2406,7 +3135,7 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
         var _b = this.measurements, windowScroll = _b.windowScroll, viewportDistance = _b.viewportDistance, surfaceSize = _b.surfaceSize, viewportSize = _b.viewportSize;
         var props = Object.keys(position);
         try {
-            for (var props_1 = component.__values(props), props_1_1 = props_1.next(); !props_1_1.done; props_1_1 = props_1.next()) {
+            for (var props_1 = __values(props), props_1_1 = props_1.next(); !props_1_1.done; props_1_1 = props_1.next()) {
                 var prop = props_1_1.value;
                 var value = position[prop] || 0;
                 if (this.isHorizontallyCenteredOnViewport &&
@@ -2464,7 +3193,7 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
             // restored focus would be lost.
             setTimeout(function () {
                 _this.adapter.restoreFocus();
-            }, numbers$3.TOUCH_EVENT_WAIT_MS);
+            }, numbers$5.TOUCH_EVENT_WAIT_MS);
         }
     };
     MDCMenuSurfaceFoundation.prototype.hasBit = function (corner, bit) {
@@ -2484,7 +3213,87 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
         return typeof num === 'number' && isFinite(num);
     };
     return MDCMenuSurfaceFoundation;
-}(component.MDCFoundation));
+}(MDCFoundation));
+
+/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var cssPropertyNameMap = {
+    animation: {
+        prefixed: '-webkit-animation',
+        standard: 'animation',
+    },
+    transform: {
+        prefixed: '-webkit-transform',
+        standard: 'transform',
+    },
+    transition: {
+        prefixed: '-webkit-transition',
+        standard: 'transition',
+    },
+};
+var jsEventTypeMap = {
+    animationend: {
+        cssProperty: 'animation',
+        prefixed: 'webkitAnimationEnd',
+        standard: 'animationend',
+    },
+    animationiteration: {
+        cssProperty: 'animation',
+        prefixed: 'webkitAnimationIteration',
+        standard: 'animationiteration',
+    },
+    animationstart: {
+        cssProperty: 'animation',
+        prefixed: 'webkitAnimationStart',
+        standard: 'animationstart',
+    },
+    transitionend: {
+        cssProperty: 'transition',
+        prefixed: 'webkitTransitionEnd',
+        standard: 'transitionend',
+    },
+};
+function isWindow(windowObj) {
+    return Boolean(windowObj.document) && typeof windowObj.document.createElement === 'function';
+}
+function getCorrectPropertyName(windowObj, cssProperty) {
+    if (isWindow(windowObj) && cssProperty in cssPropertyNameMap) {
+        var el = windowObj.document.createElement('div');
+        var _a = cssPropertyNameMap[cssProperty], standard = _a.standard, prefixed = _a.prefixed;
+        var isStandard = standard in el.style;
+        return isStandard ? standard : prefixed;
+    }
+    return cssProperty;
+}
+function getCorrectEventName(windowObj, eventType) {
+    if (isWindow(windowObj) && eventType in jsEventTypeMap) {
+        var el = windowObj.document.createElement('div');
+        var _a = jsEventTypeMap[eventType], standard = _a.standard, prefixed = _a.prefixed, cssProperty = _a.cssProperty;
+        var isStandard = cssProperty in el.style;
+        return isStandard ? standard : prefixed;
+    }
+    return eventType;
+}
 
 /**
  * @license
@@ -2509,7 +3318,7 @@ var MDCMenuSurfaceFoundation = /** @class */ (function (_super) {
  * THE SOFTWARE.
  */
 var MDCMenuSurface = /** @class */ (function (_super) {
-    component.__extends(MDCMenuSurface, _super);
+    __extends(MDCMenuSurface, _super);
     function MDCMenuSurface() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -2519,8 +3328,8 @@ var MDCMenuSurface = /** @class */ (function (_super) {
     MDCMenuSurface.prototype.initialSyncWithDOM = function () {
         var _this = this;
         var parentEl = this.root.parentElement;
-        this.anchorElement = parentEl && parentEl.classList.contains(cssClasses$4.ANCHOR) ? parentEl : null;
-        if (this.root.classList.contains(cssClasses$4.FIXED)) {
+        this.anchorElement = parentEl && parentEl.classList.contains(cssClasses$6.ANCHOR) ? parentEl : null;
+        if (this.root.classList.contains(cssClasses$6.FIXED)) {
             this.setFixedPosition(true);
         }
         this.handleKeydown = function (event) {
@@ -2538,13 +3347,13 @@ var MDCMenuSurface = /** @class */ (function (_super) {
             document.body.removeEventListener('click', _this.handleBodyClick, { capture: true });
         };
         this.listen('keydown', this.handleKeydown);
-        this.listen(strings$5.OPENED_EVENT, this.registerBodyClickListener);
-        this.listen(strings$5.CLOSED_EVENT, this.deregisterBodyClickListener);
+        this.listen(strings$7.OPENED_EVENT, this.registerBodyClickListener);
+        this.listen(strings$7.CLOSED_EVENT, this.deregisterBodyClickListener);
     };
     MDCMenuSurface.prototype.destroy = function () {
         this.unlisten('keydown', this.handleKeydown);
-        this.unlisten(strings$5.OPENED_EVENT, this.registerBodyClickListener);
-        this.unlisten(strings$5.CLOSED_EVENT, this.deregisterBodyClickListener);
+        this.unlisten(strings$7.OPENED_EVENT, this.registerBodyClickListener);
+        this.unlisten(strings$7.CLOSED_EVENT, this.deregisterBodyClickListener);
         _super.prototype.destroy.call(this);
     };
     MDCMenuSurface.prototype.isOpen = function () {
@@ -2575,10 +3384,10 @@ var MDCMenuSurface = /** @class */ (function (_super) {
     /** Sets the menu-surface to position: fixed. */
     MDCMenuSurface.prototype.setFixedPosition = function (isFixed) {
         if (isFixed) {
-            this.root.classList.add(cssClasses$4.FIXED);
+            this.root.classList.add(cssClasses$6.FIXED);
         }
         else {
-            this.root.classList.remove(cssClasses$4.FIXED);
+            this.root.classList.remove(cssClasses$6.FIXED);
         }
         this.foundation.setFixedPosition(isFixed);
     };
@@ -2623,7 +3432,7 @@ var MDCMenuSurface = /** @class */ (function (_super) {
                 return getComputedStyle(_this.root).getPropertyValue('direction') === 'rtl';
             },
             setTransformOrigin: function (origin) {
-                var propertyName = component.getCorrectPropertyName(window, 'transform') + "-origin";
+                var propertyName = getCorrectPropertyName(window, 'transform') + "-origin";
                 _this.root.style.setProperty(propertyName, origin);
             },
             isFocused: function () { return document.activeElement === _this.root; },
@@ -2671,54 +3480,237 @@ var MDCMenuSurface = /** @class */ (function (_super) {
         // tslint:enable:object-literal-sort-keys
         return new MDCMenuSurfaceFoundation(adapter);
     };
-    return MDCMenuSurface;
-}(component.MDCComponent));
-
-/**
- * @license
- * Copyright 2018 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-var cssClasses$2 = {
-    MENU_SELECTED_LIST_ITEM: 'mdc-menu-item--selected',
-    MENU_SELECTION_GROUP: 'mdc-menu__selection-group',
-    ROOT: 'mdc-menu',
-};
-var strings$3 = {
-    ARIA_CHECKED_ATTR: 'aria-checked',
-    ARIA_DISABLED_ATTR: 'aria-disabled',
-    CHECKBOX_SELECTOR: 'input[type="checkbox"]',
-    LIST_SELECTOR: '.mdc-list,.mdc-deprecated-list',
-    SELECTED_EVENT: 'MDCMenu:selected',
-    SKIP_RESTORE_FOCUS: 'data-menu-item-skip-restore-focus',
-};
-var numbers$1 = {
-    FOCUS_ROOT_INDEX: -1,
-};
-var DefaultFocusState;
-(function (DefaultFocusState) {
-    DefaultFocusState[DefaultFocusState["NONE"] = 0] = "NONE";
-    DefaultFocusState[DefaultFocusState["LIST_ROOT"] = 1] = "LIST_ROOT";
-    DefaultFocusState[DefaultFocusState["FIRST_ITEM"] = 2] = "FIRST_ITEM";
-    DefaultFocusState[DefaultFocusState["LAST_ITEM"] = 3] = "LAST_ITEM";
-})(DefaultFocusState || (DefaultFocusState = {}));
+    return MDCMenuSurface;
+}(MDCComponent));
+
+/**
+ * @license
+ * Copyright 2018 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var cssClasses$4 = {
+    MENU_SELECTED_LIST_ITEM: 'mdc-menu-item--selected',
+    MENU_SELECTION_GROUP: 'mdc-menu__selection-group',
+    ROOT: 'mdc-menu',
+};
+var strings$5 = {
+    ARIA_CHECKED_ATTR: 'aria-checked',
+    ARIA_DISABLED_ATTR: 'aria-disabled',
+    CHECKBOX_SELECTOR: 'input[type="checkbox"]',
+    LIST_SELECTOR: '.mdc-list,.mdc-deprecated-list',
+    SELECTED_EVENT: 'MDCMenu:selected',
+    SKIP_RESTORE_FOCUS: 'data-menu-item-skip-restore-focus',
+};
+var numbers$3 = {
+    FOCUS_ROOT_INDEX: -1,
+};
+var DefaultFocusState;
+(function (DefaultFocusState) {
+    DefaultFocusState[DefaultFocusState["NONE"] = 0] = "NONE";
+    DefaultFocusState[DefaultFocusState["LIST_ROOT"] = 1] = "LIST_ROOT";
+    DefaultFocusState[DefaultFocusState["FIRST_ITEM"] = 2] = "FIRST_ITEM";
+    DefaultFocusState[DefaultFocusState["LAST_ITEM"] = 3] = "LAST_ITEM";
+})(DefaultFocusState || (DefaultFocusState = {}));
+
+/**
+ * @license
+ * Copyright 2018 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var MDCMenuFoundation = /** @class */ (function (_super) {
+    __extends(MDCMenuFoundation, _super);
+    function MDCMenuFoundation(adapter) {
+        var _this = _super.call(this, exports.__assign(exports.__assign({}, MDCMenuFoundation.defaultAdapter), adapter)) || this;
+        _this.closeAnimationEndTimerId = 0;
+        _this.defaultFocusState = DefaultFocusState.LIST_ROOT;
+        _this.selectedIndex = -1;
+        return _this;
+    }
+    Object.defineProperty(MDCMenuFoundation, "cssClasses", {
+        get: function () {
+            return cssClasses$4;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MDCMenuFoundation, "strings", {
+        get: function () {
+            return strings$5;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MDCMenuFoundation, "numbers", {
+        get: function () {
+            return numbers$3;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MDCMenuFoundation, "defaultAdapter", {
+        /**
+         * @see {@link MDCMenuAdapter} for typing information on parameters and return types.
+         */
+        get: function () {
+            // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
+            return {
+                addClassToElementAtIndex: function () { return undefined; },
+                removeClassFromElementAtIndex: function () { return undefined; },
+                addAttributeToElementAtIndex: function () { return undefined; },
+                removeAttributeFromElementAtIndex: function () { return undefined; },
+                getAttributeFromElementAtIndex: function () { return null; },
+                elementContainsClass: function () { return false; },
+                closeSurface: function () { return undefined; },
+                getElementIndex: function () { return -1; },
+                notifySelected: function () { return undefined; },
+                getMenuItemCount: function () { return 0; },
+                focusItemAtIndex: function () { return undefined; },
+                focusListRoot: function () { return undefined; },
+                getSelectedSiblingOfItemAtIndex: function () { return -1; },
+                isSelectableItemAtIndex: function () { return false; },
+            };
+            // tslint:enable:object-literal-sort-keys
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MDCMenuFoundation.prototype.destroy = function () {
+        if (this.closeAnimationEndTimerId) {
+            clearTimeout(this.closeAnimationEndTimerId);
+        }
+        this.adapter.closeSurface();
+    };
+    MDCMenuFoundation.prototype.handleKeydown = function (evt) {
+        var key = evt.key, keyCode = evt.keyCode;
+        var isTab = key === 'Tab' || keyCode === 9;
+        if (isTab) {
+            this.adapter.closeSurface(/** skipRestoreFocus */ true);
+        }
+    };
+    MDCMenuFoundation.prototype.handleItemAction = function (listItem) {
+        var _this = this;
+        var index = this.adapter.getElementIndex(listItem);
+        if (index < 0) {
+            return;
+        }
+        this.adapter.notifySelected({ index: index });
+        var skipRestoreFocus = this.adapter.getAttributeFromElementAtIndex(index, strings$5.SKIP_RESTORE_FOCUS) === 'true';
+        this.adapter.closeSurface(skipRestoreFocus);
+        // Wait for the menu to close before adding/removing classes that affect styles.
+        this.closeAnimationEndTimerId = setTimeout(function () {
+            // Recompute the index in case the menu contents have changed.
+            var recomputedIndex = _this.adapter.getElementIndex(listItem);
+            if (recomputedIndex >= 0 &&
+                _this.adapter.isSelectableItemAtIndex(recomputedIndex)) {
+                _this.setSelectedIndex(recomputedIndex);
+            }
+        }, MDCMenuSurfaceFoundation.numbers.TRANSITION_CLOSE_DURATION);
+    };
+    MDCMenuFoundation.prototype.handleMenuSurfaceOpened = function () {
+        switch (this.defaultFocusState) {
+            case DefaultFocusState.FIRST_ITEM:
+                this.adapter.focusItemAtIndex(0);
+                break;
+            case DefaultFocusState.LAST_ITEM:
+                this.adapter.focusItemAtIndex(this.adapter.getMenuItemCount() - 1);
+                break;
+            case DefaultFocusState.NONE:
+                // Do nothing.
+                break;
+            default:
+                this.adapter.focusListRoot();
+                break;
+        }
+    };
+    /**
+     * Sets default focus state where the menu should focus every time when menu
+     * is opened. Focuses the list root (`DefaultFocusState.LIST_ROOT`) element by
+     * default.
+     */
+    MDCMenuFoundation.prototype.setDefaultFocusState = function (focusState) {
+        this.defaultFocusState = focusState;
+    };
+    /** @return Index of the currently selected list item within the menu. */
+    MDCMenuFoundation.prototype.getSelectedIndex = function () {
+        return this.selectedIndex;
+    };
+    /**
+     * Selects the list item at `index` within the menu.
+     * @param index Index of list item within the menu.
+     */
+    MDCMenuFoundation.prototype.setSelectedIndex = function (index) {
+        this.validatedIndex(index);
+        if (!this.adapter.isSelectableItemAtIndex(index)) {
+            throw new Error('MDCMenuFoundation: No selection group at specified index.');
+        }
+        var prevSelectedIndex = this.adapter.getSelectedSiblingOfItemAtIndex(index);
+        if (prevSelectedIndex >= 0) {
+            this.adapter.removeAttributeFromElementAtIndex(prevSelectedIndex, strings$5.ARIA_CHECKED_ATTR);
+            this.adapter.removeClassFromElementAtIndex(prevSelectedIndex, cssClasses$4.MENU_SELECTED_LIST_ITEM);
+        }
+        this.adapter.addClassToElementAtIndex(index, cssClasses$4.MENU_SELECTED_LIST_ITEM);
+        this.adapter.addAttributeToElementAtIndex(index, strings$5.ARIA_CHECKED_ATTR, 'true');
+        this.selectedIndex = index;
+    };
+    /**
+     * Sets the enabled state to isEnabled for the menu item at the given index.
+     * @param index Index of the menu item
+     * @param isEnabled The desired enabled state of the menu item.
+     */
+    MDCMenuFoundation.prototype.setEnabled = function (index, isEnabled) {
+        this.validatedIndex(index);
+        if (isEnabled) {
+            this.adapter.removeClassFromElementAtIndex(index, cssClasses$5.LIST_ITEM_DISABLED_CLASS);
+            this.adapter.addAttributeToElementAtIndex(index, strings$5.ARIA_DISABLED_ATTR, 'false');
+        }
+        else {
+            this.adapter.addClassToElementAtIndex(index, cssClasses$5.LIST_ITEM_DISABLED_CLASS);
+            this.adapter.addAttributeToElementAtIndex(index, strings$5.ARIA_DISABLED_ATTR, 'true');
+        }
+    };
+    MDCMenuFoundation.prototype.validatedIndex = function (index) {
+        var menuSize = this.adapter.getMenuItemCount();
+        var isIndexInRange = index >= 0 && index < menuSize;
+        if (!isIndexInRange) {
+            throw new Error('MDCMenuFoundation: No list item at specified index.');
+        }
+    };
+    return MDCMenuFoundation;
+}(MDCFoundation));
 
 /**
  * @license
@@ -2742,166 +3734,319 @@ var DefaultFocusState;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var MDCMenuFoundation = /** @class */ (function (_super) {
-    component.__extends(MDCMenuFoundation, _super);
-    function MDCMenuFoundation(adapter) {
-        var _this = _super.call(this, component.__assign(component.__assign({}, MDCMenuFoundation.defaultAdapter), adapter)) || this;
-        _this.closeAnimationEndTimerId = 0;
-        _this.defaultFocusState = DefaultFocusState.LIST_ROOT;
-        _this.selectedIndex = -1;
-        return _this;
+var MDCMenu = /** @class */ (function (_super) {
+    __extends(MDCMenu, _super);
+    function MDCMenu() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    Object.defineProperty(MDCMenuFoundation, "cssClasses", {
+    MDCMenu.attachTo = function (root) {
+        return new MDCMenu(root);
+    };
+    MDCMenu.prototype.initialize = function (menuSurfaceFactory, listFactory) {
+        if (menuSurfaceFactory === void 0) { menuSurfaceFactory = function (el) { return new MDCMenuSurface(el); }; }
+        if (listFactory === void 0) { listFactory = function (el) { return new MDCList(el); }; }
+        this.menuSurfaceFactory = menuSurfaceFactory;
+        this.listFactory = listFactory;
+    };
+    MDCMenu.prototype.initialSyncWithDOM = function () {
+        var _this = this;
+        this.menuSurface = this.menuSurfaceFactory(this.root);
+        var list = this.root.querySelector(strings$5.LIST_SELECTOR);
+        if (list) {
+            this.list = this.listFactory(list);
+            this.list.wrapFocus = true;
+        }
+        else {
+            this.list = null;
+        }
+        this.handleKeydown = function (evt) {
+            _this.foundation.handleKeydown(evt);
+        };
+        this.handleItemAction = function (evt) {
+            _this.foundation.handleItemAction(_this.items[evt.detail.index]);
+        };
+        this.handleMenuSurfaceOpened = function () {
+            _this.foundation.handleMenuSurfaceOpened();
+        };
+        this.menuSurface.listen(MDCMenuSurfaceFoundation.strings.OPENED_EVENT, this.handleMenuSurfaceOpened);
+        this.listen('keydown', this.handleKeydown);
+        this.listen(MDCListFoundation.strings.ACTION_EVENT, this.handleItemAction);
+    };
+    MDCMenu.prototype.destroy = function () {
+        if (this.list) {
+            this.list.destroy();
+        }
+        this.menuSurface.destroy();
+        this.menuSurface.unlisten(MDCMenuSurfaceFoundation.strings.OPENED_EVENT, this.handleMenuSurfaceOpened);
+        this.unlisten('keydown', this.handleKeydown);
+        this.unlisten(MDCListFoundation.strings.ACTION_EVENT, this.handleItemAction);
+        _super.prototype.destroy.call(this);
+    };
+    Object.defineProperty(MDCMenu.prototype, "open", {
         get: function () {
-            return cssClasses$2;
+            return this.menuSurface.isOpen();
+        },
+        set: function (value) {
+            if (value) {
+                this.menuSurface.open();
+            }
+            else {
+                this.menuSurface.close();
+            }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(MDCMenuFoundation, "strings", {
+    Object.defineProperty(MDCMenu.prototype, "wrapFocus", {
         get: function () {
-            return strings$3;
+            return this.list ? this.list.wrapFocus : false;
+        },
+        set: function (value) {
+            if (this.list) {
+                this.list.wrapFocus = value;
+            }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(MDCMenuFoundation, "numbers", {
+    Object.defineProperty(MDCMenu.prototype, "hasTypeahead", {
+        /**
+         * Sets whether the menu has typeahead functionality.
+         * @param value Whether typeahead is enabled.
+         */
+        set: function (value) {
+            if (this.list) {
+                this.list.hasTypeahead = value;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MDCMenu.prototype, "typeaheadInProgress", {
+        /**
+         * @return Whether typeahead logic is currently matching some user prefix.
+         */
         get: function () {
-            return numbers$1;
+            return this.list ? this.list.typeaheadInProgress : false;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(MDCMenuFoundation, "defaultAdapter", {
+    /**
+     * Given the next desired character from the user, adds it to the typeahead
+     * buffer. Then, attempts to find the next option matching the buffer. Wraps
+     * around if at the end of options.
+     *
+     * @param nextChar The next character to add to the prefix buffer.
+     * @param startingIndex The index from which to start matching. Only relevant
+     *     when starting a new match sequence. To start a new match sequence,
+     *     clear the buffer using `clearTypeaheadBuffer`, or wait for the buffer
+     *     to clear after a set interval defined in list foundation. Defaults to
+     *     the currently focused index.
+     * @return The index of the matched item, or -1 if no match.
+     */
+    MDCMenu.prototype.typeaheadMatchItem = function (nextChar, startingIndex) {
+        if (this.list) {
+            return this.list.typeaheadMatchItem(nextChar, startingIndex);
+        }
+        return -1;
+    };
+    /**
+     * Layout the underlying list element in the case of any dynamic updates
+     * to its structure.
+     */
+    MDCMenu.prototype.layout = function () {
+        if (this.list) {
+            this.list.layout();
+        }
+    };
+    Object.defineProperty(MDCMenu.prototype, "items", {
         /**
-         * @see {@link MDCMenuAdapter} for typing information on parameters and return types.
+         * Return the items within the menu. Note that this only contains the set of elements within
+         * the items container that are proper list items, and not supplemental / presentational DOM
+         * elements.
          */
         get: function () {
-            // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
-            return {
-                addClassToElementAtIndex: function () { return undefined; },
-                removeClassFromElementAtIndex: function () { return undefined; },
-                addAttributeToElementAtIndex: function () { return undefined; },
-                removeAttributeFromElementAtIndex: function () { return undefined; },
-                getAttributeFromElementAtIndex: function () { return null; },
-                elementContainsClass: function () { return false; },
-                closeSurface: function () { return undefined; },
-                getElementIndex: function () { return -1; },
-                notifySelected: function () { return undefined; },
-                getMenuItemCount: function () { return 0; },
-                focusItemAtIndex: function () { return undefined; },
-                focusListRoot: function () { return undefined; },
-                getSelectedSiblingOfItemAtIndex: function () { return -1; },
-                isSelectableItemAtIndex: function () { return false; },
-            };
-            // tslint:enable:object-literal-sort-keys
+            return this.list ? this.list.listElements : [];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MDCMenu.prototype, "singleSelection", {
+        /**
+         * Turns on/off the underlying list's single selection mode. Used mainly
+         * by select menu.
+         *
+         * @param singleSelection Whether to enable single selection mode.
+         */
+        set: function (singleSelection) {
+            if (this.list) {
+                this.list.singleSelection = singleSelection;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MDCMenu.prototype, "selectedIndex", {
+        /**
+         * Retrieves the selected index. Only applicable to select menus.
+         * @return The selected index, which is a number for single selection and
+         *     radio lists, and an array of numbers for checkbox lists.
+         */
+        get: function () {
+            return this.list ? this.list.selectedIndex : numbers$4.UNSET_INDEX;
+        },
+        /**
+         * Sets the selected index of the list. Only applicable to select menus.
+         * @param index The selected index, which is a number for single selection and
+         *     radio lists, and an array of numbers for checkbox lists.
+         */
+        set: function (index) {
+            if (this.list) {
+                this.list.selectedIndex = index;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MDCMenu.prototype, "quickOpen", {
+        set: function (quickOpen) {
+            this.menuSurface.quickOpen = quickOpen;
         },
         enumerable: false,
         configurable: true
     });
-    MDCMenuFoundation.prototype.destroy = function () {
-        if (this.closeAnimationEndTimerId) {
-            clearTimeout(this.closeAnimationEndTimerId);
-        }
-        this.adapter.closeSurface();
-    };
-    MDCMenuFoundation.prototype.handleKeydown = function (evt) {
-        var key = evt.key, keyCode = evt.keyCode;
-        var isTab = key === 'Tab' || keyCode === 9;
-        if (isTab) {
-            this.adapter.closeSurface(/** skipRestoreFocus */ true);
-        }
-    };
-    MDCMenuFoundation.prototype.handleItemAction = function (listItem) {
-        var _this = this;
-        var index = this.adapter.getElementIndex(listItem);
-        if (index < 0) {
-            return;
-        }
-        this.adapter.notifySelected({ index: index });
-        var skipRestoreFocus = this.adapter.getAttributeFromElementAtIndex(index, strings$3.SKIP_RESTORE_FOCUS) === 'true';
-        this.adapter.closeSurface(skipRestoreFocus);
-        // Wait for the menu to close before adding/removing classes that affect styles.
-        this.closeAnimationEndTimerId = setTimeout(function () {
-            // Recompute the index in case the menu contents have changed.
-            var recomputedIndex = _this.adapter.getElementIndex(listItem);
-            if (recomputedIndex >= 0 &&
-                _this.adapter.isSelectableItemAtIndex(recomputedIndex)) {
-                _this.setSelectedIndex(recomputedIndex);
-            }
-        }, MDCMenuSurfaceFoundation.numbers.TRANSITION_CLOSE_DURATION);
-    };
-    MDCMenuFoundation.prototype.handleMenuSurfaceOpened = function () {
-        switch (this.defaultFocusState) {
-            case DefaultFocusState.FIRST_ITEM:
-                this.adapter.focusItemAtIndex(0);
-                break;
-            case DefaultFocusState.LAST_ITEM:
-                this.adapter.focusItemAtIndex(this.adapter.getMenuItemCount() - 1);
-                break;
-            case DefaultFocusState.NONE:
-                // Do nothing.
-                break;
-            default:
-                this.adapter.focusListRoot();
-                break;
-        }
-    };
     /**
      * Sets default focus state where the menu should focus every time when menu
      * is opened. Focuses the list root (`DefaultFocusState.LIST_ROOT`) element by
      * default.
+     * @param focusState Default focus state.
      */
-    MDCMenuFoundation.prototype.setDefaultFocusState = function (focusState) {
-        this.defaultFocusState = focusState;
+    MDCMenu.prototype.setDefaultFocusState = function (focusState) {
+        this.foundation.setDefaultFocusState(focusState);
     };
-    /** @return Index of the currently selected list item within the menu. */
-    MDCMenuFoundation.prototype.getSelectedIndex = function () {
-        return this.selectedIndex;
+    /**
+     * @param corner Default anchor corner alignment of top-left menu corner.
+     */
+    MDCMenu.prototype.setAnchorCorner = function (corner) {
+        this.menuSurface.setAnchorCorner(corner);
+    };
+    MDCMenu.prototype.setAnchorMargin = function (margin) {
+        this.menuSurface.setAnchorMargin(margin);
     };
     /**
-     * Selects the list item at `index` within the menu.
-     * @param index Index of list item within the menu.
+     * Sets the list item as the selected row at the specified index.
+     * @param index Index of list item within menu.
      */
-    MDCMenuFoundation.prototype.setSelectedIndex = function (index) {
-        this.validatedIndex(index);
-        if (!this.adapter.isSelectableItemAtIndex(index)) {
-            throw new Error('MDCMenuFoundation: No selection group at specified index.');
-        }
-        var prevSelectedIndex = this.adapter.getSelectedSiblingOfItemAtIndex(index);
-        if (prevSelectedIndex >= 0) {
-            this.adapter.removeAttributeFromElementAtIndex(prevSelectedIndex, strings$3.ARIA_CHECKED_ATTR);
-            this.adapter.removeClassFromElementAtIndex(prevSelectedIndex, cssClasses$2.MENU_SELECTED_LIST_ITEM);
-        }
-        this.adapter.addClassToElementAtIndex(index, cssClasses$2.MENU_SELECTED_LIST_ITEM);
-        this.adapter.addAttributeToElementAtIndex(index, strings$3.ARIA_CHECKED_ATTR, 'true');
-        this.selectedIndex = index;
+    MDCMenu.prototype.setSelectedIndex = function (index) {
+        this.foundation.setSelectedIndex(index);
     };
     /**
      * Sets the enabled state to isEnabled for the menu item at the given index.
      * @param index Index of the menu item
      * @param isEnabled The desired enabled state of the menu item.
      */
-    MDCMenuFoundation.prototype.setEnabled = function (index, isEnabled) {
-        this.validatedIndex(index);
-        if (isEnabled) {
-            this.adapter.removeClassFromElementAtIndex(index, cssClasses$3.LIST_ITEM_DISABLED_CLASS);
-            this.adapter.addAttributeToElementAtIndex(index, strings$3.ARIA_DISABLED_ATTR, 'false');
+    MDCMenu.prototype.setEnabled = function (index, isEnabled) {
+        this.foundation.setEnabled(index, isEnabled);
+    };
+    /**
+     * @return The item within the menu at the index specified.
+     */
+    MDCMenu.prototype.getOptionByIndex = function (index) {
+        var items = this.items;
+        if (index < items.length) {
+            return this.items[index];
         }
         else {
-            this.adapter.addClassToElementAtIndex(index, cssClasses$3.LIST_ITEM_DISABLED_CLASS);
-            this.adapter.addAttributeToElementAtIndex(index, strings$3.ARIA_DISABLED_ATTR, 'true');
+            return null;
         }
     };
-    MDCMenuFoundation.prototype.validatedIndex = function (index) {
-        var menuSize = this.adapter.getMenuItemCount();
-        var isIndexInRange = index >= 0 && index < menuSize;
-        if (!isIndexInRange) {
-            throw new Error('MDCMenuFoundation: No list item at specified index.');
+    /**
+     * @param index A menu item's index.
+     * @return The primary text within the menu at the index specified.
+     */
+    MDCMenu.prototype.getPrimaryTextAtIndex = function (index) {
+        var item = this.getOptionByIndex(index);
+        if (item && this.list) {
+            return this.list.getPrimaryText(item) || '';
         }
+        return '';
     };
-    return MDCMenuFoundation;
-}(component.MDCFoundation));
+    MDCMenu.prototype.setFixedPosition = function (isFixed) {
+        this.menuSurface.setFixedPosition(isFixed);
+    };
+    MDCMenu.prototype.setIsHoisted = function (isHoisted) {
+        this.menuSurface.setIsHoisted(isHoisted);
+    };
+    MDCMenu.prototype.setAbsolutePosition = function (x, y) {
+        this.menuSurface.setAbsolutePosition(x, y);
+    };
+    /**
+     * Sets the element that the menu-surface is anchored to.
+     */
+    MDCMenu.prototype.setAnchorElement = function (element) {
+        this.menuSurface.anchorElement = element;
+    };
+    MDCMenu.prototype.getDefaultFoundation = function () {
+        var _this = this;
+        // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+        // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+        // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
+        var adapter = {
+            addClassToElementAtIndex: function (index, className) {
+                var list = _this.items;
+                list[index].classList.add(className);
+            },
+            removeClassFromElementAtIndex: function (index, className) {
+                var list = _this.items;
+                list[index].classList.remove(className);
+            },
+            addAttributeToElementAtIndex: function (index, attr, value) {
+                var list = _this.items;
+                list[index].setAttribute(attr, value);
+            },
+            removeAttributeFromElementAtIndex: function (index, attr) {
+                var list = _this.items;
+                list[index].removeAttribute(attr);
+            },
+            getAttributeFromElementAtIndex: function (index, attr) {
+                var list = _this.items;
+                return list[index].getAttribute(attr);
+            },
+            elementContainsClass: function (element, className) {
+                return element.classList.contains(className);
+            },
+            closeSurface: function (skipRestoreFocus) {
+                _this.menuSurface.close(skipRestoreFocus);
+            },
+            getElementIndex: function (element) { return _this.items.indexOf(element); },
+            notifySelected: function (evtData) {
+                _this.emit(strings$5.SELECTED_EVENT, {
+                    index: evtData.index,
+                    item: _this.items[evtData.index],
+                });
+            },
+            getMenuItemCount: function () { return _this.items.length; },
+            focusItemAtIndex: function (index) {
+                _this.items[index].focus();
+            },
+            focusListRoot: function () {
+                _this.root.querySelector(strings$5.LIST_SELECTOR).focus();
+            },
+            isSelectableItemAtIndex: function (index) {
+                return !!closest(_this.items[index], "." + cssClasses$4.MENU_SELECTION_GROUP);
+            },
+            getSelectedSiblingOfItemAtIndex: function (index) {
+                var selectionGroupEl = closest(_this.items[index], "." + cssClasses$4.MENU_SELECTION_GROUP);
+                var selectedItemEl = selectionGroupEl.querySelector("." + cssClasses$4.MENU_SELECTED_LIST_ITEM);
+                return selectedItemEl ? _this.items.indexOf(selectedItemEl) : -1;
+            },
+        };
+        // tslint:enable:object-literal-sort-keys
+        return new MDCMenuFoundation(adapter);
+    };
+    return MDCMenu;
+}(MDCComponent));
 
 /**
  * @license
@@ -2925,319 +4070,973 @@ var MDCMenuFoundation = /** @class */ (function (_super) {
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var MDCMenu = /** @class */ (function (_super) {
-    component.__extends(MDCMenu, _super);
-    function MDCMenu() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    MDCMenu.attachTo = function (root) {
-        return new MDCMenu(root);
-    };
-    MDCMenu.prototype.initialize = function (menuSurfaceFactory, listFactory) {
-        if (menuSurfaceFactory === void 0) { menuSurfaceFactory = function (el) { return new MDCMenuSurface(el); }; }
-        if (listFactory === void 0) { listFactory = function (el) { return new MDCList(el); }; }
-        this.menuSurfaceFactory = menuSurfaceFactory;
-        this.listFactory = listFactory;
-    };
-    MDCMenu.prototype.initialSyncWithDOM = function () {
-        var _this = this;
-        this.menuSurface = this.menuSurfaceFactory(this.root);
-        var list = this.root.querySelector(strings$3.LIST_SELECTOR);
-        if (list) {
-            this.list = this.listFactory(list);
-            this.list.wrapFocus = true;
-        }
-        else {
-            this.list = null;
-        }
-        this.handleKeydown = function (evt) {
-            _this.foundation.handleKeydown(evt);
-        };
-        this.handleItemAction = function (evt) {
-            _this.foundation.handleItemAction(_this.items[evt.detail.index]);
-        };
-        this.handleMenuSurfaceOpened = function () {
-            _this.foundation.handleMenuSurfaceOpened();
-        };
-        this.menuSurface.listen(MDCMenuSurfaceFoundation.strings.OPENED_EVENT, this.handleMenuSurfaceOpened);
-        this.listen('keydown', this.handleKeydown);
-        this.listen(MDCListFoundation.strings.ACTION_EVENT, this.handleItemAction);
-    };
-    MDCMenu.prototype.destroy = function () {
-        if (this.list) {
-            this.list.destroy();
-        }
-        this.menuSurface.destroy();
-        this.menuSurface.unlisten(MDCMenuSurfaceFoundation.strings.OPENED_EVENT, this.handleMenuSurfaceOpened);
-        this.unlisten('keydown', this.handleKeydown);
-        this.unlisten(MDCListFoundation.strings.ACTION_EVENT, this.handleItemAction);
-        _super.prototype.destroy.call(this);
-    };
-    Object.defineProperty(MDCMenu.prototype, "open", {
+var strings$4 = {
+    NOTCH_ELEMENT_SELECTOR: '.mdc-notched-outline__notch',
+};
+var numbers$2 = {
+    // This should stay in sync with $mdc-notched-outline-padding * 2.
+    NOTCH_ELEMENT_PADDING: 8,
+};
+var cssClasses$3 = {
+    NO_LABEL: 'mdc-notched-outline--no-label',
+    OUTLINE_NOTCHED: 'mdc-notched-outline--notched',
+    OUTLINE_UPGRADED: 'mdc-notched-outline--upgraded',
+};
+
+/**
+ * @license
+ * Copyright 2017 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var MDCNotchedOutlineFoundation = /** @class */ (function (_super) {
+    __extends(MDCNotchedOutlineFoundation, _super);
+    function MDCNotchedOutlineFoundation(adapter) {
+        return _super.call(this, exports.__assign(exports.__assign({}, MDCNotchedOutlineFoundation.defaultAdapter), adapter)) || this;
+    }
+    Object.defineProperty(MDCNotchedOutlineFoundation, "strings", {
         get: function () {
-            return this.menuSurface.isOpen();
-        },
-        set: function (value) {
-            if (value) {
-                this.menuSurface.open();
-            }
-            else {
-                this.menuSurface.close();
-            }
+            return strings$4;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(MDCMenu.prototype, "wrapFocus", {
+    Object.defineProperty(MDCNotchedOutlineFoundation, "cssClasses", {
         get: function () {
-            return this.list ? this.list.wrapFocus : false;
-        },
-        set: function (value) {
-            if (this.list) {
-                this.list.wrapFocus = value;
-            }
+            return cssClasses$3;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(MDCMenu.prototype, "hasTypeahead", {
-        /**
-         * Sets whether the menu has typeahead functionality.
-         * @param value Whether typeahead is enabled.
-         */
-        set: function (value) {
-            if (this.list) {
-                this.list.hasTypeahead = value;
-            }
+    Object.defineProperty(MDCNotchedOutlineFoundation, "numbers", {
+        get: function () {
+            return numbers$2;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(MDCMenu.prototype, "typeaheadInProgress", {
+    Object.defineProperty(MDCNotchedOutlineFoundation, "defaultAdapter", {
         /**
-         * @return Whether typeahead logic is currently matching some user prefix.
+         * See {@link MDCNotchedOutlineAdapter} for typing information on parameters and return types.
          */
         get: function () {
-            return this.list ? this.list.typeaheadInProgress : false;
+            // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
+            return {
+                addClass: function () { return undefined; },
+                removeClass: function () { return undefined; },
+                setNotchWidthProperty: function () { return undefined; },
+                removeNotchWidthProperty: function () { return undefined; },
+            };
+            // tslint:enable:object-literal-sort-keys
         },
         enumerable: false,
         configurable: true
     });
     /**
-     * Given the next desired character from the user, adds it to the typeahead
-     * buffer. Then, attempts to find the next option matching the buffer. Wraps
-     * around if at the end of options.
-     *
-     * @param nextChar The next character to add to the prefix buffer.
-     * @param startingIndex The index from which to start matching. Only relevant
-     *     when starting a new match sequence. To start a new match sequence,
-     *     clear the buffer using `clearTypeaheadBuffer`, or wait for the buffer
-     *     to clear after a set interval defined in list foundation. Defaults to
-     *     the currently focused index.
-     * @return The index of the matched item, or -1 if no match.
+     * Adds the outline notched selector and updates the notch width calculated based off of notchWidth.
      */
-    MDCMenu.prototype.typeaheadMatchItem = function (nextChar, startingIndex) {
-        if (this.list) {
-            return this.list.typeaheadMatchItem(nextChar, startingIndex);
+    MDCNotchedOutlineFoundation.prototype.notch = function (notchWidth) {
+        var OUTLINE_NOTCHED = MDCNotchedOutlineFoundation.cssClasses.OUTLINE_NOTCHED;
+        if (notchWidth > 0) {
+            notchWidth += numbers$2.NOTCH_ELEMENT_PADDING; // Add padding from left/right.
         }
-        return -1;
+        this.adapter.setNotchWidthProperty(notchWidth);
+        this.adapter.addClass(OUTLINE_NOTCHED);
     };
     /**
-     * Layout the underlying list element in the case of any dynamic updates
-     * to its structure.
+     * Removes notched outline selector to close the notch in the outline.
      */
-    MDCMenu.prototype.layout = function () {
-        if (this.list) {
-            this.list.layout();
+    MDCNotchedOutlineFoundation.prototype.closeNotch = function () {
+        var OUTLINE_NOTCHED = MDCNotchedOutlineFoundation.cssClasses.OUTLINE_NOTCHED;
+        this.adapter.removeClass(OUTLINE_NOTCHED);
+        this.adapter.removeNotchWidthProperty();
+    };
+    return MDCNotchedOutlineFoundation;
+}(MDCFoundation));
+
+/**
+ * @license
+ * Copyright 2017 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var MDCNotchedOutline = /** @class */ (function (_super) {
+    __extends(MDCNotchedOutline, _super);
+    function MDCNotchedOutline() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    MDCNotchedOutline.attachTo = function (root) {
+        return new MDCNotchedOutline(root);
+    };
+    MDCNotchedOutline.prototype.initialSyncWithDOM = function () {
+        this.notchElement =
+            this.root.querySelector(strings$4.NOTCH_ELEMENT_SELECTOR);
+        var label = this.root.querySelector('.' + MDCFloatingLabelFoundation.cssClasses.ROOT);
+        if (label) {
+            label.style.transitionDuration = '0s';
+            this.root.classList.add(cssClasses$3.OUTLINE_UPGRADED);
+            requestAnimationFrame(function () {
+                label.style.transitionDuration = '';
+            });
+        }
+        else {
+            this.root.classList.add(cssClasses$3.NO_LABEL);
         }
     };
-    Object.defineProperty(MDCMenu.prototype, "items", {
-        /**
-         * Return the items within the menu. Note that this only contains the set of elements within
-         * the items container that are proper list items, and not supplemental / presentational DOM
-         * elements.
-         */
-        get: function () {
-            return this.list ? this.list.listElements : [];
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCMenu.prototype, "singleSelection", {
-        /**
-         * Turns on/off the underlying list's single selection mode. Used mainly
-         * by select menu.
-         *
-         * @param singleSelection Whether to enable single selection mode.
-         */
-        set: function (singleSelection) {
-            if (this.list) {
-                this.list.singleSelection = singleSelection;
+    /**
+     * Updates classes and styles to open the notch to the specified width.
+     * @param notchWidth The notch width in the outline.
+     */
+    MDCNotchedOutline.prototype.notch = function (notchWidth) {
+        this.foundation.notch(notchWidth);
+    };
+    /**
+     * Updates classes and styles to close the notch.
+     */
+    MDCNotchedOutline.prototype.closeNotch = function () {
+        this.foundation.closeNotch();
+    };
+    MDCNotchedOutline.prototype.getDefaultFoundation = function () {
+        var _this = this;
+        // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+        // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+        // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
+        var adapter = {
+            addClass: function (className) { return _this.root.classList.add(className); },
+            removeClass: function (className) { return _this.root.classList.remove(className); },
+            setNotchWidthProperty: function (width) {
+                _this.notchElement.style.setProperty('width', width + 'px');
+            },
+            removeNotchWidthProperty: function () {
+                _this.notchElement.style.removeProperty('width');
+            },
+        };
+        // tslint:enable:object-literal-sort-keys
+        return new MDCNotchedOutlineFoundation(adapter);
+    };
+    return MDCNotchedOutline;
+}(MDCComponent));
+
+/**
+ * @license
+ * Copyright 2019 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+/**
+ * Determine whether the current browser supports passive event listeners, and
+ * if so, use them.
+ */
+function applyPassive(globalObj) {
+    if (globalObj === void 0) { globalObj = window; }
+    return supportsPassiveOption(globalObj) ?
+        { passive: true } :
+        false;
+}
+function supportsPassiveOption(globalObj) {
+    if (globalObj === void 0) { globalObj = window; }
+    // See
+    // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+    var passiveSupported = false;
+    try {
+        var options = {
+            // This function will be called when the browser
+            // attempts to access the passive property.
+            get passive() {
+                passiveSupported = true;
+                return false;
             }
+        };
+        var handler = function () { };
+        globalObj.document.addEventListener('test', handler, options);
+        globalObj.document.removeEventListener('test', handler, options);
+    }
+    catch (err) {
+        passiveSupported = false;
+    }
+    return passiveSupported;
+}
+
+/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var cssClasses$2 = {
+    // Ripple is a special case where the "root" component is really a "mixin" of sorts,
+    // given that it's an 'upgrade' to an existing component. That being said it is the root
+    // CSS class that all other CSS classes derive from.
+    BG_FOCUSED: 'mdc-ripple-upgraded--background-focused',
+    FG_ACTIVATION: 'mdc-ripple-upgraded--foreground-activation',
+    FG_DEACTIVATION: 'mdc-ripple-upgraded--foreground-deactivation',
+    ROOT: 'mdc-ripple-upgraded',
+    UNBOUNDED: 'mdc-ripple-upgraded--unbounded',
+};
+var strings$3 = {
+    VAR_FG_SCALE: '--mdc-ripple-fg-scale',
+    VAR_FG_SIZE: '--mdc-ripple-fg-size',
+    VAR_FG_TRANSLATE_END: '--mdc-ripple-fg-translate-end',
+    VAR_FG_TRANSLATE_START: '--mdc-ripple-fg-translate-start',
+    VAR_LEFT: '--mdc-ripple-left',
+    VAR_TOP: '--mdc-ripple-top',
+};
+var numbers$1 = {
+    DEACTIVATION_TIMEOUT_MS: 225,
+    FG_DEACTIVATION_MS: 150,
+    INITIAL_ORIGIN_SCALE: 0.6,
+    PADDING: 10,
+    TAP_DELAY_MS: 300, // Delay between touch and simulated mouse events on touch devices
+};
+
+/**
+ * Stores result from supportsCssVariables to avoid redundant processing to
+ * detect CSS custom variable support.
+ */
+var supportsCssVariables_;
+function supportsCssVariables(windowObj, forceRefresh) {
+    if (forceRefresh === void 0) { forceRefresh = false; }
+    var CSS = windowObj.CSS;
+    var supportsCssVars = supportsCssVariables_;
+    if (typeof supportsCssVariables_ === 'boolean' && !forceRefresh) {
+        return supportsCssVariables_;
+    }
+    var supportsFunctionPresent = CSS && typeof CSS.supports === 'function';
+    if (!supportsFunctionPresent) {
+        return false;
+    }
+    var explicitlySupportsCssVars = CSS.supports('--css-vars', 'yes');
+    // See: https://bugs.webkit.org/show_bug.cgi?id=154669
+    // See: README section on Safari
+    var weAreFeatureDetectingSafari10plus = (CSS.supports('(--css-vars: yes)') &&
+        CSS.supports('color', '#00000000'));
+    supportsCssVars =
+        explicitlySupportsCssVars || weAreFeatureDetectingSafari10plus;
+    if (!forceRefresh) {
+        supportsCssVariables_ = supportsCssVars;
+    }
+    return supportsCssVars;
+}
+function getNormalizedEventCoords(evt, pageOffset, clientRect) {
+    if (!evt) {
+        return { x: 0, y: 0 };
+    }
+    var x = pageOffset.x, y = pageOffset.y;
+    var documentX = x + clientRect.left;
+    var documentY = y + clientRect.top;
+    var normalizedX;
+    var normalizedY;
+    // Determine touch point relative to the ripple container.
+    if (evt.type === 'touchstart') {
+        var touchEvent = evt;
+        normalizedX = touchEvent.changedTouches[0].pageX - documentX;
+        normalizedY = touchEvent.changedTouches[0].pageY - documentY;
+    }
+    else {
+        var mouseEvent = evt;
+        normalizedX = mouseEvent.pageX - documentX;
+        normalizedY = mouseEvent.pageY - documentY;
+    }
+    return { x: normalizedX, y: normalizedY };
+}
+
+/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+// Activation events registered on the root element of each instance for activation
+var ACTIVATION_EVENT_TYPES = [
+    'touchstart', 'pointerdown', 'mousedown', 'keydown',
+];
+// Deactivation events registered on documentElement when a pointer-related down event occurs
+var POINTER_DEACTIVATION_EVENT_TYPES = [
+    'touchend', 'pointerup', 'mouseup', 'contextmenu',
+];
+// simultaneous nested activations
+var activatedTargets = [];
+var MDCRippleFoundation = /** @class */ (function (_super) {
+    __extends(MDCRippleFoundation, _super);
+    function MDCRippleFoundation(adapter) {
+        var _this = _super.call(this, exports.__assign(exports.__assign({}, MDCRippleFoundation.defaultAdapter), adapter)) || this;
+        _this.activationAnimationHasEnded = false;
+        _this.activationTimer = 0;
+        _this.fgDeactivationRemovalTimer = 0;
+        _this.fgScale = '0';
+        _this.frame = { width: 0, height: 0 };
+        _this.initialSize = 0;
+        _this.layoutFrame = 0;
+        _this.maxRadius = 0;
+        _this.unboundedCoords = { left: 0, top: 0 };
+        _this.activationState = _this.defaultActivationState();
+        _this.activationTimerCallback = function () {
+            _this.activationAnimationHasEnded = true;
+            _this.runDeactivationUXLogicIfReady();
+        };
+        _this.activateHandler = function (e) {
+            _this.activateImpl(e);
+        };
+        _this.deactivateHandler = function () {
+            _this.deactivateImpl();
+        };
+        _this.focusHandler = function () {
+            _this.handleFocus();
+        };
+        _this.blurHandler = function () {
+            _this.handleBlur();
+        };
+        _this.resizeHandler = function () {
+            _this.layout();
+        };
+        return _this;
+    }
+    Object.defineProperty(MDCRippleFoundation, "cssClasses", {
+        get: function () {
+            return cssClasses$2;
         },
         enumerable: false,
         configurable: true
-    });
-    Object.defineProperty(MDCMenu.prototype, "selectedIndex", {
-        /**
-         * Retrieves the selected index. Only applicable to select menus.
-         * @return The selected index, which is a number for single selection and
-         *     radio lists, and an array of numbers for checkbox lists.
-         */
-        get: function () {
-            return this.list ? this.list.selectedIndex : numbers$2.UNSET_INDEX;
-        },
-        /**
-         * Sets the selected index of the list. Only applicable to select menus.
-         * @param index The selected index, which is a number for single selection and
-         *     radio lists, and an array of numbers for checkbox lists.
-         */
-        set: function (index) {
-            if (this.list) {
-                this.list.selectedIndex = index;
-            }
+    });
+    Object.defineProperty(MDCRippleFoundation, "strings", {
+        get: function () {
+            return strings$3;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(MDCMenu.prototype, "quickOpen", {
-        set: function (quickOpen) {
-            this.menuSurface.quickOpen = quickOpen;
+    Object.defineProperty(MDCRippleFoundation, "numbers", {
+        get: function () {
+            return numbers$1;
         },
         enumerable: false,
         configurable: true
     });
-    /**
-     * Sets default focus state where the menu should focus every time when menu
-     * is opened. Focuses the list root (`DefaultFocusState.LIST_ROOT`) element by
-     * default.
-     * @param focusState Default focus state.
-     */
-    MDCMenu.prototype.setDefaultFocusState = function (focusState) {
-        this.foundation.setDefaultFocusState(focusState);
+    Object.defineProperty(MDCRippleFoundation, "defaultAdapter", {
+        get: function () {
+            return {
+                addClass: function () { return undefined; },
+                browserSupportsCssVars: function () { return true; },
+                computeBoundingRect: function () {
+                    return ({ top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 });
+                },
+                containsEventTarget: function () { return true; },
+                deregisterDocumentInteractionHandler: function () { return undefined; },
+                deregisterInteractionHandler: function () { return undefined; },
+                deregisterResizeHandler: function () { return undefined; },
+                getWindowPageOffset: function () { return ({ x: 0, y: 0 }); },
+                isSurfaceActive: function () { return true; },
+                isSurfaceDisabled: function () { return true; },
+                isUnbounded: function () { return true; },
+                registerDocumentInteractionHandler: function () { return undefined; },
+                registerInteractionHandler: function () { return undefined; },
+                registerResizeHandler: function () { return undefined; },
+                removeClass: function () { return undefined; },
+                updateCssVariable: function () { return undefined; },
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MDCRippleFoundation.prototype.init = function () {
+        var _this = this;
+        var supportsPressRipple = this.supportsPressRipple();
+        this.registerRootHandlers(supportsPressRipple);
+        if (supportsPressRipple) {
+            var _a = MDCRippleFoundation.cssClasses, ROOT_1 = _a.ROOT, UNBOUNDED_1 = _a.UNBOUNDED;
+            requestAnimationFrame(function () {
+                _this.adapter.addClass(ROOT_1);
+                if (_this.adapter.isUnbounded()) {
+                    _this.adapter.addClass(UNBOUNDED_1);
+                    // Unbounded ripples need layout logic applied immediately to set coordinates for both shade and ripple
+                    _this.layoutInternal();
+                }
+            });
+        }
+    };
+    MDCRippleFoundation.prototype.destroy = function () {
+        var _this = this;
+        if (this.supportsPressRipple()) {
+            if (this.activationTimer) {
+                clearTimeout(this.activationTimer);
+                this.activationTimer = 0;
+                this.adapter.removeClass(MDCRippleFoundation.cssClasses.FG_ACTIVATION);
+            }
+            if (this.fgDeactivationRemovalTimer) {
+                clearTimeout(this.fgDeactivationRemovalTimer);
+                this.fgDeactivationRemovalTimer = 0;
+                this.adapter.removeClass(MDCRippleFoundation.cssClasses.FG_DEACTIVATION);
+            }
+            var _a = MDCRippleFoundation.cssClasses, ROOT_2 = _a.ROOT, UNBOUNDED_2 = _a.UNBOUNDED;
+            requestAnimationFrame(function () {
+                _this.adapter.removeClass(ROOT_2);
+                _this.adapter.removeClass(UNBOUNDED_2);
+                _this.removeCssVars();
+            });
+        }
+        this.deregisterRootHandlers();
+        this.deregisterDeactivationHandlers();
     };
     /**
-     * @param corner Default anchor corner alignment of top-left menu corner.
+     * @param evt Optional event containing position information.
      */
-    MDCMenu.prototype.setAnchorCorner = function (corner) {
-        this.menuSurface.setAnchorCorner(corner);
+    MDCRippleFoundation.prototype.activate = function (evt) {
+        this.activateImpl(evt);
     };
-    MDCMenu.prototype.setAnchorMargin = function (margin) {
-        this.menuSurface.setAnchorMargin(margin);
+    MDCRippleFoundation.prototype.deactivate = function () {
+        this.deactivateImpl();
     };
-    /**
-     * Sets the list item as the selected row at the specified index.
-     * @param index Index of list item within menu.
-     */
-    MDCMenu.prototype.setSelectedIndex = function (index) {
-        this.foundation.setSelectedIndex(index);
+    MDCRippleFoundation.prototype.layout = function () {
+        var _this = this;
+        if (this.layoutFrame) {
+            cancelAnimationFrame(this.layoutFrame);
+        }
+        this.layoutFrame = requestAnimationFrame(function () {
+            _this.layoutInternal();
+            _this.layoutFrame = 0;
+        });
+    };
+    MDCRippleFoundation.prototype.setUnbounded = function (unbounded) {
+        var UNBOUNDED = MDCRippleFoundation.cssClasses.UNBOUNDED;
+        if (unbounded) {
+            this.adapter.addClass(UNBOUNDED);
+        }
+        else {
+            this.adapter.removeClass(UNBOUNDED);
+        }
+    };
+    MDCRippleFoundation.prototype.handleFocus = function () {
+        var _this = this;
+        requestAnimationFrame(function () { return _this.adapter.addClass(MDCRippleFoundation.cssClasses.BG_FOCUSED); });
+    };
+    MDCRippleFoundation.prototype.handleBlur = function () {
+        var _this = this;
+        requestAnimationFrame(function () { return _this.adapter.removeClass(MDCRippleFoundation.cssClasses.BG_FOCUSED); });
     };
     /**
-     * Sets the enabled state to isEnabled for the menu item at the given index.
-     * @param index Index of the menu item
-     * @param isEnabled The desired enabled state of the menu item.
+     * We compute this property so that we are not querying information about the client
+     * until the point in time where the foundation requests it. This prevents scenarios where
+     * client-side feature-detection may happen too early, such as when components are rendered on the server
+     * and then initialized at mount time on the client.
      */
-    MDCMenu.prototype.setEnabled = function (index, isEnabled) {
-        this.foundation.setEnabled(index, isEnabled);
+    MDCRippleFoundation.prototype.supportsPressRipple = function () {
+        return this.adapter.browserSupportsCssVars();
+    };
+    MDCRippleFoundation.prototype.defaultActivationState = function () {
+        return {
+            activationEvent: undefined,
+            hasDeactivationUXRun: false,
+            isActivated: false,
+            isProgrammatic: false,
+            wasActivatedByPointer: false,
+            wasElementMadeActive: false,
+        };
     };
     /**
-     * @return The item within the menu at the index specified.
+     * supportsPressRipple Passed from init to save a redundant function call
      */
-    MDCMenu.prototype.getOptionByIndex = function (index) {
-        var items = this.items;
-        if (index < items.length) {
-            return this.items[index];
+    MDCRippleFoundation.prototype.registerRootHandlers = function (supportsPressRipple) {
+        var e_1, _a;
+        if (supportsPressRipple) {
+            try {
+                for (var ACTIVATION_EVENT_TYPES_1 = __values(ACTIVATION_EVENT_TYPES), ACTIVATION_EVENT_TYPES_1_1 = ACTIVATION_EVENT_TYPES_1.next(); !ACTIVATION_EVENT_TYPES_1_1.done; ACTIVATION_EVENT_TYPES_1_1 = ACTIVATION_EVENT_TYPES_1.next()) {
+                    var evtType = ACTIVATION_EVENT_TYPES_1_1.value;
+                    this.adapter.registerInteractionHandler(evtType, this.activateHandler);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (ACTIVATION_EVENT_TYPES_1_1 && !ACTIVATION_EVENT_TYPES_1_1.done && (_a = ACTIVATION_EVENT_TYPES_1.return)) _a.call(ACTIVATION_EVENT_TYPES_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            if (this.adapter.isUnbounded()) {
+                this.adapter.registerResizeHandler(this.resizeHandler);
+            }
+        }
+        this.adapter.registerInteractionHandler('focus', this.focusHandler);
+        this.adapter.registerInteractionHandler('blur', this.blurHandler);
+    };
+    MDCRippleFoundation.prototype.registerDeactivationHandlers = function (evt) {
+        var e_2, _a;
+        if (evt.type === 'keydown') {
+            this.adapter.registerInteractionHandler('keyup', this.deactivateHandler);
         }
         else {
-            return null;
+            try {
+                for (var POINTER_DEACTIVATION_EVENT_TYPES_1 = __values(POINTER_DEACTIVATION_EVENT_TYPES), POINTER_DEACTIVATION_EVENT_TYPES_1_1 = POINTER_DEACTIVATION_EVENT_TYPES_1.next(); !POINTER_DEACTIVATION_EVENT_TYPES_1_1.done; POINTER_DEACTIVATION_EVENT_TYPES_1_1 = POINTER_DEACTIVATION_EVENT_TYPES_1.next()) {
+                    var evtType = POINTER_DEACTIVATION_EVENT_TYPES_1_1.value;
+                    this.adapter.registerDocumentInteractionHandler(evtType, this.deactivateHandler);
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (POINTER_DEACTIVATION_EVENT_TYPES_1_1 && !POINTER_DEACTIVATION_EVENT_TYPES_1_1.done && (_a = POINTER_DEACTIVATION_EVENT_TYPES_1.return)) _a.call(POINTER_DEACTIVATION_EVENT_TYPES_1);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
         }
     };
-    /**
-     * @param index A menu item's index.
-     * @return The primary text within the menu at the index specified.
-     */
-    MDCMenu.prototype.getPrimaryTextAtIndex = function (index) {
-        var item = this.getOptionByIndex(index);
-        if (item && this.list) {
-            return this.list.getPrimaryText(item) || '';
+    MDCRippleFoundation.prototype.deregisterRootHandlers = function () {
+        var e_3, _a;
+        try {
+            for (var ACTIVATION_EVENT_TYPES_2 = __values(ACTIVATION_EVENT_TYPES), ACTIVATION_EVENT_TYPES_2_1 = ACTIVATION_EVENT_TYPES_2.next(); !ACTIVATION_EVENT_TYPES_2_1.done; ACTIVATION_EVENT_TYPES_2_1 = ACTIVATION_EVENT_TYPES_2.next()) {
+                var evtType = ACTIVATION_EVENT_TYPES_2_1.value;
+                this.adapter.deregisterInteractionHandler(evtType, this.activateHandler);
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (ACTIVATION_EVENT_TYPES_2_1 && !ACTIVATION_EVENT_TYPES_2_1.done && (_a = ACTIVATION_EVENT_TYPES_2.return)) _a.call(ACTIVATION_EVENT_TYPES_2);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+        this.adapter.deregisterInteractionHandler('focus', this.focusHandler);
+        this.adapter.deregisterInteractionHandler('blur', this.blurHandler);
+        if (this.adapter.isUnbounded()) {
+            this.adapter.deregisterResizeHandler(this.resizeHandler);
         }
-        return '';
     };
-    MDCMenu.prototype.setFixedPosition = function (isFixed) {
-        this.menuSurface.setFixedPosition(isFixed);
+    MDCRippleFoundation.prototype.deregisterDeactivationHandlers = function () {
+        var e_4, _a;
+        this.adapter.deregisterInteractionHandler('keyup', this.deactivateHandler);
+        try {
+            for (var POINTER_DEACTIVATION_EVENT_TYPES_2 = __values(POINTER_DEACTIVATION_EVENT_TYPES), POINTER_DEACTIVATION_EVENT_TYPES_2_1 = POINTER_DEACTIVATION_EVENT_TYPES_2.next(); !POINTER_DEACTIVATION_EVENT_TYPES_2_1.done; POINTER_DEACTIVATION_EVENT_TYPES_2_1 = POINTER_DEACTIVATION_EVENT_TYPES_2.next()) {
+                var evtType = POINTER_DEACTIVATION_EVENT_TYPES_2_1.value;
+                this.adapter.deregisterDocumentInteractionHandler(evtType, this.deactivateHandler);
+            }
+        }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        finally {
+            try {
+                if (POINTER_DEACTIVATION_EVENT_TYPES_2_1 && !POINTER_DEACTIVATION_EVENT_TYPES_2_1.done && (_a = POINTER_DEACTIVATION_EVENT_TYPES_2.return)) _a.call(POINTER_DEACTIVATION_EVENT_TYPES_2);
+            }
+            finally { if (e_4) throw e_4.error; }
+        }
     };
-    MDCMenu.prototype.setIsHoisted = function (isHoisted) {
-        this.menuSurface.setIsHoisted(isHoisted);
+    MDCRippleFoundation.prototype.removeCssVars = function () {
+        var _this = this;
+        var rippleStrings = MDCRippleFoundation.strings;
+        var keys = Object.keys(rippleStrings);
+        keys.forEach(function (key) {
+            if (key.indexOf('VAR_') === 0) {
+                _this.adapter.updateCssVariable(rippleStrings[key], null);
+            }
+        });
     };
-    MDCMenu.prototype.setAbsolutePosition = function (x, y) {
-        this.menuSurface.setAbsolutePosition(x, y);
+    MDCRippleFoundation.prototype.activateImpl = function (evt) {
+        var _this = this;
+        if (this.adapter.isSurfaceDisabled()) {
+            return;
+        }
+        var activationState = this.activationState;
+        if (activationState.isActivated) {
+            return;
+        }
+        // Avoid reacting to follow-on events fired by touch device after an already-processed user interaction
+        var previousActivationEvent = this.previousActivationEvent;
+        var isSameInteraction = previousActivationEvent && evt !== undefined && previousActivationEvent.type !== evt.type;
+        if (isSameInteraction) {
+            return;
+        }
+        activationState.isActivated = true;
+        activationState.isProgrammatic = evt === undefined;
+        activationState.activationEvent = evt;
+        activationState.wasActivatedByPointer = activationState.isProgrammatic ? false : evt !== undefined && (evt.type === 'mousedown' || evt.type === 'touchstart' || evt.type === 'pointerdown');
+        var hasActivatedChild = evt !== undefined &&
+            activatedTargets.length > 0 &&
+            activatedTargets.some(function (target) { return _this.adapter.containsEventTarget(target); });
+        if (hasActivatedChild) {
+            // Immediately reset activation state, while preserving logic that prevents touch follow-on events
+            this.resetActivationState();
+            return;
+        }
+        if (evt !== undefined) {
+            activatedTargets.push(evt.target);
+            this.registerDeactivationHandlers(evt);
+        }
+        activationState.wasElementMadeActive = this.checkElementMadeActive(evt);
+        if (activationState.wasElementMadeActive) {
+            this.animateActivation();
+        }
+        requestAnimationFrame(function () {
+            // Reset array on next frame after the current event has had a chance to bubble to prevent ancestor ripples
+            activatedTargets = [];
+            if (!activationState.wasElementMadeActive
+                && evt !== undefined
+                && (evt.key === ' ' || evt.keyCode === 32)) {
+                // If space was pressed, try again within an rAF call to detect :active, because different UAs report
+                // active states inconsistently when they're called within event handling code:
+                // - https://bugs.chromium.org/p/chromium/issues/detail?id=635971
+                // - https://bugzilla.mozilla.org/show_bug.cgi?id=1293741
+                // We try first outside rAF to support Edge, which does not exhibit this problem, but will crash if a CSS
+                // variable is set within a rAF callback for a submit button interaction (#2241).
+                activationState.wasElementMadeActive = _this.checkElementMadeActive(evt);
+                if (activationState.wasElementMadeActive) {
+                    _this.animateActivation();
+                }
+            }
+            if (!activationState.wasElementMadeActive) {
+                // Reset activation state immediately if element was not made active.
+                _this.activationState = _this.defaultActivationState();
+            }
+        });
     };
-    /**
-     * Sets the element that the menu-surface is anchored to.
-     */
-    MDCMenu.prototype.setAnchorElement = function (element) {
-        this.menuSurface.anchorElement = element;
+    MDCRippleFoundation.prototype.checkElementMadeActive = function (evt) {
+        return (evt !== undefined && evt.type === 'keydown') ?
+            this.adapter.isSurfaceActive() :
+            true;
     };
-    MDCMenu.prototype.getDefaultFoundation = function () {
+    MDCRippleFoundation.prototype.animateActivation = function () {
         var _this = this;
-        // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
-        // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
-        // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
-        var adapter = {
-            addClassToElementAtIndex: function (index, className) {
-                var list = _this.items;
-                list[index].classList.add(className);
-            },
-            removeClassFromElementAtIndex: function (index, className) {
-                var list = _this.items;
-                list[index].classList.remove(className);
-            },
-            addAttributeToElementAtIndex: function (index, attr, value) {
-                var list = _this.items;
-                list[index].setAttribute(attr, value);
-            },
-            removeAttributeFromElementAtIndex: function (index, attr) {
-                var list = _this.items;
-                list[index].removeAttribute(attr);
-            },
-            getAttributeFromElementAtIndex: function (index, attr) {
-                var list = _this.items;
-                return list[index].getAttribute(attr);
+        var _a = MDCRippleFoundation.strings, VAR_FG_TRANSLATE_START = _a.VAR_FG_TRANSLATE_START, VAR_FG_TRANSLATE_END = _a.VAR_FG_TRANSLATE_END;
+        var _b = MDCRippleFoundation.cssClasses, FG_DEACTIVATION = _b.FG_DEACTIVATION, FG_ACTIVATION = _b.FG_ACTIVATION;
+        var DEACTIVATION_TIMEOUT_MS = MDCRippleFoundation.numbers.DEACTIVATION_TIMEOUT_MS;
+        this.layoutInternal();
+        var translateStart = '';
+        var translateEnd = '';
+        if (!this.adapter.isUnbounded()) {
+            var _c = this.getFgTranslationCoordinates(), startPoint = _c.startPoint, endPoint = _c.endPoint;
+            translateStart = startPoint.x + "px, " + startPoint.y + "px";
+            translateEnd = endPoint.x + "px, " + endPoint.y + "px";
+        }
+        this.adapter.updateCssVariable(VAR_FG_TRANSLATE_START, translateStart);
+        this.adapter.updateCssVariable(VAR_FG_TRANSLATE_END, translateEnd);
+        // Cancel any ongoing activation/deactivation animations
+        clearTimeout(this.activationTimer);
+        clearTimeout(this.fgDeactivationRemovalTimer);
+        this.rmBoundedActivationClasses();
+        this.adapter.removeClass(FG_DEACTIVATION);
+        // Force layout in order to re-trigger the animation.
+        this.adapter.computeBoundingRect();
+        this.adapter.addClass(FG_ACTIVATION);
+        this.activationTimer = setTimeout(function () {
+            _this.activationTimerCallback();
+        }, DEACTIVATION_TIMEOUT_MS);
+    };
+    MDCRippleFoundation.prototype.getFgTranslationCoordinates = function () {
+        var _a = this.activationState, activationEvent = _a.activationEvent, wasActivatedByPointer = _a.wasActivatedByPointer;
+        var startPoint;
+        if (wasActivatedByPointer) {
+            startPoint = getNormalizedEventCoords(activationEvent, this.adapter.getWindowPageOffset(), this.adapter.computeBoundingRect());
+        }
+        else {
+            startPoint = {
+                x: this.frame.width / 2,
+                y: this.frame.height / 2,
+            };
+        }
+        // Center the element around the start point.
+        startPoint = {
+            x: startPoint.x - (this.initialSize / 2),
+            y: startPoint.y - (this.initialSize / 2),
+        };
+        var endPoint = {
+            x: (this.frame.width / 2) - (this.initialSize / 2),
+            y: (this.frame.height / 2) - (this.initialSize / 2),
+        };
+        return { startPoint: startPoint, endPoint: endPoint };
+    };
+    MDCRippleFoundation.prototype.runDeactivationUXLogicIfReady = function () {
+        var _this = this;
+        // This method is called both when a pointing device is released, and when the activation animation ends.
+        // The deactivation animation should only run after both of those occur.
+        var FG_DEACTIVATION = MDCRippleFoundation.cssClasses.FG_DEACTIVATION;
+        var _a = this.activationState, hasDeactivationUXRun = _a.hasDeactivationUXRun, isActivated = _a.isActivated;
+        var activationHasEnded = hasDeactivationUXRun || !isActivated;
+        if (activationHasEnded && this.activationAnimationHasEnded) {
+            this.rmBoundedActivationClasses();
+            this.adapter.addClass(FG_DEACTIVATION);
+            this.fgDeactivationRemovalTimer = setTimeout(function () {
+                _this.adapter.removeClass(FG_DEACTIVATION);
+            }, numbers$1.FG_DEACTIVATION_MS);
+        }
+    };
+    MDCRippleFoundation.prototype.rmBoundedActivationClasses = function () {
+        var FG_ACTIVATION = MDCRippleFoundation.cssClasses.FG_ACTIVATION;
+        this.adapter.removeClass(FG_ACTIVATION);
+        this.activationAnimationHasEnded = false;
+        this.adapter.computeBoundingRect();
+    };
+    MDCRippleFoundation.prototype.resetActivationState = function () {
+        var _this = this;
+        this.previousActivationEvent = this.activationState.activationEvent;
+        this.activationState = this.defaultActivationState();
+        // Touch devices may fire additional events for the same interaction within a short time.
+        // Store the previous event until it's safe to assume that subsequent events are for new interactions.
+        setTimeout(function () { return _this.previousActivationEvent = undefined; }, MDCRippleFoundation.numbers.TAP_DELAY_MS);
+    };
+    MDCRippleFoundation.prototype.deactivateImpl = function () {
+        var _this = this;
+        var activationState = this.activationState;
+        // This can happen in scenarios such as when you have a keyup event that blurs the element.
+        if (!activationState.isActivated) {
+            return;
+        }
+        var state = exports.__assign({}, activationState);
+        if (activationState.isProgrammatic) {
+            requestAnimationFrame(function () {
+                _this.animateDeactivation(state);
+            });
+            this.resetActivationState();
+        }
+        else {
+            this.deregisterDeactivationHandlers();
+            requestAnimationFrame(function () {
+                _this.activationState.hasDeactivationUXRun = true;
+                _this.animateDeactivation(state);
+                _this.resetActivationState();
+            });
+        }
+    };
+    MDCRippleFoundation.prototype.animateDeactivation = function (_a) {
+        var wasActivatedByPointer = _a.wasActivatedByPointer, wasElementMadeActive = _a.wasElementMadeActive;
+        if (wasActivatedByPointer || wasElementMadeActive) {
+            this.runDeactivationUXLogicIfReady();
+        }
+    };
+    MDCRippleFoundation.prototype.layoutInternal = function () {
+        var _this = this;
+        this.frame = this.adapter.computeBoundingRect();
+        var maxDim = Math.max(this.frame.height, this.frame.width);
+        // Surface diameter is treated differently for unbounded vs. bounded ripples.
+        // Unbounded ripple diameter is calculated smaller since the surface is expected to already be padded appropriately
+        // to extend the hitbox, and the ripple is expected to meet the edges of the padded hitbox (which is typically
+        // square). Bounded ripples, on the other hand, are fully expected to expand beyond the surface's longest diameter
+        // (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via
+        // `overflow: hidden`.
+        var getBoundedRadius = function () {
+            var hypotenuse = Math.sqrt(Math.pow(_this.frame.width, 2) + Math.pow(_this.frame.height, 2));
+            return hypotenuse + MDCRippleFoundation.numbers.PADDING;
+        };
+        this.maxRadius = this.adapter.isUnbounded() ? maxDim : getBoundedRadius();
+        // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
+        var initialSize = Math.floor(maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE);
+        // Unbounded ripple size should always be even number to equally center align.
+        if (this.adapter.isUnbounded() && initialSize % 2 !== 0) {
+            this.initialSize = initialSize - 1;
+        }
+        else {
+            this.initialSize = initialSize;
+        }
+        this.fgScale = "" + this.maxRadius / this.initialSize;
+        this.updateLayoutCssVars();
+    };
+    MDCRippleFoundation.prototype.updateLayoutCssVars = function () {
+        var _a = MDCRippleFoundation.strings, VAR_FG_SIZE = _a.VAR_FG_SIZE, VAR_LEFT = _a.VAR_LEFT, VAR_TOP = _a.VAR_TOP, VAR_FG_SCALE = _a.VAR_FG_SCALE;
+        this.adapter.updateCssVariable(VAR_FG_SIZE, this.initialSize + "px");
+        this.adapter.updateCssVariable(VAR_FG_SCALE, this.fgScale);
+        if (this.adapter.isUnbounded()) {
+            this.unboundedCoords = {
+                left: Math.round((this.frame.width / 2) - (this.initialSize / 2)),
+                top: Math.round((this.frame.height / 2) - (this.initialSize / 2)),
+            };
+            this.adapter.updateCssVariable(VAR_LEFT, this.unboundedCoords.left + "px");
+            this.adapter.updateCssVariable(VAR_TOP, this.unboundedCoords.top + "px");
+        }
+    };
+    return MDCRippleFoundation;
+}(MDCFoundation));
+
+/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var MDCRipple = /** @class */ (function (_super) {
+    __extends(MDCRipple, _super);
+    function MDCRipple() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.disabled = false;
+        return _this;
+    }
+    MDCRipple.attachTo = function (root, opts) {
+        if (opts === void 0) { opts = {
+            isUnbounded: undefined
+        }; }
+        var ripple = new MDCRipple(root);
+        // Only override unbounded behavior if option is explicitly specified
+        if (opts.isUnbounded !== undefined) {
+            ripple.unbounded = opts.isUnbounded;
+        }
+        return ripple;
+    };
+    MDCRipple.createAdapter = function (instance) {
+        return {
+            addClass: function (className) { return instance.root.classList.add(className); },
+            browserSupportsCssVars: function () { return supportsCssVariables(window); },
+            computeBoundingRect: function () { return instance.root.getBoundingClientRect(); },
+            containsEventTarget: function (target) { return instance.root.contains(target); },
+            deregisterDocumentInteractionHandler: function (evtType, handler) {
+                return document.documentElement.removeEventListener(evtType, handler, applyPassive());
             },
-            elementContainsClass: function (element, className) {
-                return element.classList.contains(className);
+            deregisterInteractionHandler: function (evtType, handler) {
+                return instance.root
+                    .removeEventListener(evtType, handler, applyPassive());
             },
-            closeSurface: function (skipRestoreFocus) {
-                _this.menuSurface.close(skipRestoreFocus);
+            deregisterResizeHandler: function (handler) {
+                return window.removeEventListener('resize', handler);
             },
-            getElementIndex: function (element) { return _this.items.indexOf(element); },
-            notifySelected: function (evtData) {
-                _this.emit(strings$3.SELECTED_EVENT, {
-                    index: evtData.index,
-                    item: _this.items[evtData.index],
-                });
+            getWindowPageOffset: function () {
+                return ({ x: window.pageXOffset, y: window.pageYOffset });
             },
-            getMenuItemCount: function () { return _this.items.length; },
-            focusItemAtIndex: function (index) {
-                _this.items[index].focus();
+            isSurfaceActive: function () { return matches(instance.root, ':active'); },
+            isSurfaceDisabled: function () { return Boolean(instance.disabled); },
+            isUnbounded: function () { return Boolean(instance.unbounded); },
+            registerDocumentInteractionHandler: function (evtType, handler) {
+                return document.documentElement.addEventListener(evtType, handler, applyPassive());
             },
-            focusListRoot: function () {
-                _this.root.querySelector(strings$3.LIST_SELECTOR).focus();
+            registerInteractionHandler: function (evtType, handler) {
+                return instance.root
+                    .addEventListener(evtType, handler, applyPassive());
             },
-            isSelectableItemAtIndex: function (index) {
-                return !!component.closest(_this.items[index], "." + cssClasses$2.MENU_SELECTION_GROUP);
+            registerResizeHandler: function (handler) {
+                return window.addEventListener('resize', handler);
             },
-            getSelectedSiblingOfItemAtIndex: function (index) {
-                var selectionGroupEl = component.closest(_this.items[index], "." + cssClasses$2.MENU_SELECTION_GROUP);
-                var selectedItemEl = selectionGroupEl.querySelector("." + cssClasses$2.MENU_SELECTED_LIST_ITEM);
-                return selectedItemEl ? _this.items.indexOf(selectedItemEl) : -1;
+            removeClass: function (className) { return instance.root.classList.remove(className); },
+            updateCssVariable: function (varName, value) {
+                return instance.root.style.setProperty(varName, value);
             },
         };
-        // tslint:enable:object-literal-sort-keys
-        return new MDCMenuFoundation(adapter);
     };
-    return MDCMenu;
-}(component.MDCComponent));
+    Object.defineProperty(MDCRipple.prototype, "unbounded", {
+        get: function () {
+            return Boolean(this.isUnbounded);
+        },
+        set: function (unbounded) {
+            this.isUnbounded = Boolean(unbounded);
+            this.setUnbounded();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MDCRipple.prototype.activate = function () {
+        this.foundation.activate();
+    };
+    MDCRipple.prototype.deactivate = function () {
+        this.foundation.deactivate();
+    };
+    MDCRipple.prototype.layout = function () {
+        this.foundation.layout();
+    };
+    MDCRipple.prototype.getDefaultFoundation = function () {
+        return new MDCRippleFoundation(MDCRipple.createAdapter(this));
+    };
+    MDCRipple.prototype.initialSyncWithDOM = function () {
+        var root = this.root;
+        this.isUnbounded = 'mdcRippleIsUnbounded' in root.dataset;
+    };
+    /**
+     * Closure Compiler throws an access control error when directly accessing a
+     * protected or private property inside a getter/setter, like unbounded above.
+     * By accessing the protected property inside a method, we solve that problem.
+     * That's why this function exists.
+     */
+    MDCRipple.prototype.setUnbounded = function () {
+        this.foundation.setUnbounded(Boolean(this.isUnbounded));
+    };
+    return MDCRipple;
+}(MDCComponent));
 
 /**
  * @license
@@ -3316,7 +5115,7 @@ var numbers = {
  * THE SOFTWARE.
  */
 var MDCSelectFoundation = /** @class */ (function (_super) {
-    component.__extends(MDCSelectFoundation, _super);
+    __extends(MDCSelectFoundation, _super);
     /* istanbul ignore next: optional argument is not a branch statement */
     /**
      * @param adapter
@@ -3324,7 +5123,7 @@ var MDCSelectFoundation = /** @class */ (function (_super) {
      */
     function MDCSelectFoundation(adapter, foundationMap) {
         if (foundationMap === void 0) { foundationMap = {}; }
-        var _this = _super.call(this, component.__assign(component.__assign({}, MDCSelectFoundation.defaultAdapter), adapter)) || this;
+        var _this = _super.call(this, exports.__assign(exports.__assign({}, MDCSelectFoundation.defaultAdapter), adapter)) || this;
         // Disabled state
         _this.disabled = false;
         // isMenuOpen is used to track the state of the menu by listening to the
@@ -3731,7 +5530,7 @@ var MDCSelectFoundation = /** @class */ (function (_super) {
         this.recentlyClicked = true;
     };
     return MDCSelectFoundation;
-}(component.MDCFoundation));
+}(MDCFoundation));
 
 /**
  * @license
@@ -3787,9 +5586,9 @@ var cssClasses = {
  * THE SOFTWARE.
  */
 var MDCSelectHelperTextFoundation = /** @class */ (function (_super) {
-    component.__extends(MDCSelectHelperTextFoundation, _super);
+    __extends(MDCSelectHelperTextFoundation, _super);
     function MDCSelectHelperTextFoundation(adapter) {
-        return _super.call(this, component.__assign(component.__assign({}, MDCSelectHelperTextFoundation.defaultAdapter), adapter)) || this;
+        return _super.call(this, exports.__assign(exports.__assign({}, MDCSelectHelperTextFoundation.defaultAdapter), adapter)) || this;
     }
     Object.defineProperty(MDCSelectHelperTextFoundation, "cssClasses", {
         get: function () {
@@ -3931,7 +5730,7 @@ var MDCSelectHelperTextFoundation = /** @class */ (function (_super) {
         this.adapter.setAttr(strings$1.ARIA_HIDDEN, 'true');
     };
     return MDCSelectHelperTextFoundation;
-}(component.MDCFoundation));
+}(MDCFoundation));
 
 /**
  * @license
@@ -3956,7 +5755,7 @@ var MDCSelectHelperTextFoundation = /** @class */ (function (_super) {
  * THE SOFTWARE.
  */
 var MDCSelectHelperText = /** @class */ (function (_super) {
-    component.__extends(MDCSelectHelperText, _super);
+    __extends(MDCSelectHelperText, _super);
     function MDCSelectHelperText() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -3991,7 +5790,7 @@ var MDCSelectHelperText = /** @class */ (function (_super) {
         return new MDCSelectHelperTextFoundation(adapter);
     };
     return MDCSelectHelperText;
-}(component.MDCComponent));
+}(MDCComponent));
 
 /**
  * @license
@@ -4044,9 +5843,9 @@ var strings = {
  */
 var INTERACTION_EVENTS = ['click', 'keydown'];
 var MDCSelectIconFoundation = /** @class */ (function (_super) {
-    component.__extends(MDCSelectIconFoundation, _super);
+    __extends(MDCSelectIconFoundation, _super);
     function MDCSelectIconFoundation(adapter) {
-        var _this = _super.call(this, component.__assign(component.__assign({}, MDCSelectIconFoundation.defaultAdapter), adapter)) || this;
+        var _this = _super.call(this, exports.__assign(exports.__assign({}, MDCSelectIconFoundation.defaultAdapter), adapter)) || this;
         _this.savedTabIndex = null;
         _this.interactionHandler = function (evt) {
             _this.handleInteraction(evt);
@@ -4084,7 +5883,7 @@ var MDCSelectIconFoundation = /** @class */ (function (_super) {
         var e_1, _a;
         this.savedTabIndex = this.adapter.getAttr('tabindex');
         try {
-            for (var INTERACTION_EVENTS_1 = component.__values(INTERACTION_EVENTS), INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next(); !INTERACTION_EVENTS_1_1.done; INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next()) {
+            for (var INTERACTION_EVENTS_1 = __values(INTERACTION_EVENTS), INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next(); !INTERACTION_EVENTS_1_1.done; INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next()) {
                 var evtType = INTERACTION_EVENTS_1_1.value;
                 this.adapter.registerInteractionHandler(evtType, this.interactionHandler);
             }
@@ -4100,7 +5899,7 @@ var MDCSelectIconFoundation = /** @class */ (function (_super) {
     MDCSelectIconFoundation.prototype.destroy = function () {
         var e_2, _a;
         try {
-            for (var INTERACTION_EVENTS_2 = component.__values(INTERACTION_EVENTS), INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next(); !INTERACTION_EVENTS_2_1.done; INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next()) {
+            for (var INTERACTION_EVENTS_2 = __values(INTERACTION_EVENTS), INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next(); !INTERACTION_EVENTS_2_1.done; INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next()) {
                 var evtType = INTERACTION_EVENTS_2_1.value;
                 this.adapter.deregisterInteractionHandler(evtType, this.interactionHandler);
             }
@@ -4139,7 +5938,7 @@ var MDCSelectIconFoundation = /** @class */ (function (_super) {
         }
     };
     return MDCSelectIconFoundation;
-}(component.MDCFoundation));
+}(MDCFoundation));
 
 /**
  * @license
@@ -4164,7 +5963,7 @@ var MDCSelectIconFoundation = /** @class */ (function (_super) {
  * THE SOFTWARE.
  */
 var MDCSelectIcon = /** @class */ (function (_super) {
-    component.__extends(MDCSelectIcon, _super);
+    __extends(MDCSelectIcon, _super);
     function MDCSelectIcon() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -4203,7 +6002,7 @@ var MDCSelectIcon = /** @class */ (function (_super) {
         return new MDCSelectIconFoundation(adapter);
     };
     return MDCSelectIcon;
-}(component.MDCComponent));
+}(MDCComponent));
 
 /**
  * @license
@@ -4228,7 +6027,7 @@ var MDCSelectIcon = /** @class */ (function (_super) {
  * THE SOFTWARE.
  */
 var MDCSelect = /** @class */ (function (_super) {
-    component.__extends(MDCSelect, _super);
+    __extends(MDCSelect, _super);
     function MDCSelect() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -4236,9 +6035,9 @@ var MDCSelect = /** @class */ (function (_super) {
         return new MDCSelect(root);
     };
     MDCSelect.prototype.initialize = function (labelFactory, lineRippleFactory, outlineFactory, menuFactory, iconFactory, helperTextFactory) {
-        if (labelFactory === void 0) { labelFactory = function (el) { return new component.MDCFloatingLabel(el); }; }
-        if (lineRippleFactory === void 0) { lineRippleFactory = function (el) { return new component.MDCLineRipple(el); }; }
-        if (outlineFactory === void 0) { outlineFactory = function (el) { return new component.MDCNotchedOutline(el); }; }
+        if (labelFactory === void 0) { labelFactory = function (el) { return new MDCFloatingLabel(el); }; }
+        if (lineRippleFactory === void 0) { lineRippleFactory = function (el) { return new MDCLineRipple(el); }; }
+        if (outlineFactory === void 0) { outlineFactory = function (el) { return new MDCNotchedOutline(el); }; }
         if (menuFactory === void 0) { menuFactory = function (el) { return new MDCMenu(el); }; }
         if (iconFactory === void 0) { iconFactory = function (el) { return new MDCSelectIcon(el); }; }
         if (helperTextFactory === void 0) { helperTextFactory = function (el) { return new MDCSelectHelperText(el); }; }
@@ -4308,10 +6107,10 @@ var MDCSelect = /** @class */ (function (_super) {
         this.selectAnchor.addEventListener('blur', this.handleBlur);
         this.selectAnchor.addEventListener('click', this.handleClick);
         this.selectAnchor.addEventListener('keydown', this.handleKeydown);
-        this.menu.listen(strings$5.CLOSED_EVENT, this.handleMenuClosed);
-        this.menu.listen(strings$5.CLOSING_EVENT, this.handleMenuClosing);
-        this.menu.listen(strings$5.OPENED_EVENT, this.handleMenuOpened);
-        this.menu.listen(strings$3.SELECTED_EVENT, this.handleMenuItemAction);
+        this.menu.listen(strings$7.CLOSED_EVENT, this.handleMenuClosed);
+        this.menu.listen(strings$7.CLOSING_EVENT, this.handleMenuClosing);
+        this.menu.listen(strings$7.OPENED_EVENT, this.handleMenuOpened);
+        this.menu.listen(strings$5.SELECTED_EVENT, this.handleMenuItemAction);
         if (this.hiddenInput) {
             if (this.hiddenInput.value) {
                 // If the hidden input already has a value, use it to restore the
@@ -4329,9 +6128,9 @@ var MDCSelect = /** @class */ (function (_super) {
         this.selectAnchor.removeEventListener('blur', this.handleBlur);
         this.selectAnchor.removeEventListener('keydown', this.handleKeydown);
         this.selectAnchor.removeEventListener('click', this.handleClick);
-        this.menu.unlisten(strings$5.CLOSED_EVENT, this.handleMenuClosed);
-        this.menu.unlisten(strings$5.OPENED_EVENT, this.handleMenuOpened);
-        this.menu.unlisten(strings$3.SELECTED_EVENT, this.handleMenuItemAction);
+        this.menu.unlisten(strings$7.CLOSED_EVENT, this.handleMenuClosed);
+        this.menu.unlisten(strings$7.OPENED_EVENT, this.handleMenuOpened);
+        this.menu.unlisten(strings$5.SELECTED_EVENT, this.handleMenuItemAction);
         this.menu.destroy();
         if (this.ripple) {
             this.ripple.destroy();
@@ -4484,7 +6283,7 @@ var MDCSelect = /** @class */ (function (_super) {
     MDCSelect.prototype.getDefaultFoundation = function () {
         // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
         // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
-        var adapter = component.__assign(component.__assign(component.__assign(component.__assign({}, this.getSelectAdapterMethods()), this.getCommonAdapterMethods()), this.getOutlineAdapterMethods()), this.getLabelAdapterMethods());
+        var adapter = exports.__assign(exports.__assign(exports.__assign(exports.__assign({}, this.getSelectAdapterMethods()), this.getCommonAdapterMethods()), this.getOutlineAdapterMethods()), this.getLabelAdapterMethods());
         return new MDCSelectFoundation(adapter, this.getFoundationMap());
     };
     /**
@@ -4503,13 +6302,13 @@ var MDCSelect = /** @class */ (function (_super) {
         // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
         // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
         // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
-        var adapter = component.__assign(component.__assign({}, component.MDCRipple.createAdapter({ root: this.selectAnchor })), { registerInteractionHandler: function (evtType, handler) {
+        var adapter = exports.__assign(exports.__assign({}, MDCRipple.createAdapter({ root: this.selectAnchor })), { registerInteractionHandler: function (evtType, handler) {
                 _this.selectAnchor.addEventListener(evtType, handler);
             }, deregisterInteractionHandler: function (evtType, handler) {
                 _this.selectAnchor.removeEventListener(evtType, handler);
             } });
         // tslint:enable:object-literal-sort-keys
-        return new component.MDCRipple(this.selectAnchor, new component.MDCRippleFoundation(adapter));
+        return new MDCRipple(this.selectAnchor, new MDCRippleFoundation(adapter));
     };
     MDCSelect.prototype.getSelectAdapterMethods = function () {
         var _this = this;
@@ -4660,6 +6459,18 @@ var MDCSelect = /** @class */ (function (_super) {
         };
     };
     return MDCSelect;
-}(component.MDCComponent));
+}(MDCComponent));
 
+exports.MDCComponent = MDCComponent;
+exports.MDCFloatingLabel = MDCFloatingLabel;
+exports.MDCFoundation = MDCFoundation;
+exports.MDCLineRipple = MDCLineRipple;
+exports.MDCNotchedOutline = MDCNotchedOutline;
+exports.MDCRipple = MDCRipple;
+exports.MDCRippleFoundation = MDCRippleFoundation;
 exports.MDCSelect = MDCSelect;
+exports.__extends = __extends;
+exports.__values = __values;
+exports.applyPassive = applyPassive;
+exports.getCorrectEventName = getCorrectEventName;
+exports.matches = matches;