@limetech/lime-elements 40.4.2 → 40.5.1

package/dist/cjs/{limel-breadcrumbs_8.cjs.entry.js → limel-breadcrumbs_6.cjs.entry.js}

@@ -9,11 +9,12 @@ var linkHelper = require('./link-helper-DwlfFJVL.js');
 var config = require('./config-dit--4m5.js');
 var debounce = require('./debounce-DgDnRSlt.js');
 var component = require('./component-CFk7Dfoi.js');
-var ponyfill = require('./ponyfill-BgIFyUG5.js');
 var focusTriggerElement = require('./focus-trigger-element-BfnJmxKO.js');
 var hotkeys = require('./hotkeys-BtR8uxvl.js');
 var isFunction = require('./isFunction-RSHwsz1x.js');
-var component$1 = require('./component-y8swlNNR.js');
+var ponyfill = require('./ponyfill-BgIFyUG5.js');
+var component$1 = require('./component-UyqdiWGc.js');
+var component$2 = require('./component-y8swlNNR.js');
 var dom = require('./dom-BWMDM6En.js');
 require('./isObject-B6Osvvqp.js');
 require('./toNumber-v-1DEwWD.js');
@@ -510,2128 +511,217 @@ const InputField = class {
                     display: 'flex',
                 }, onDismiss: this.handleCloseMenu }, this.renderListResult())));
         };
-        this.renderListResult = () => {
-            const filteredCompletions = this.filterCompletions(this.getCurrentValue());
-            if (!filteredCompletions || filteredCompletions.length === 0) {
-                return null;
-            }
-            return (index.h("limel-list", { onChange: this.handleCompletionChange, onKeyDown: this.handleKeyDownInDropdown, type: "selectable", items: filteredCompletions }));
-        };
-        this.handleKeyDownInDropdown = (event) => {
-            const keyFound = [keycodes.TAB, keycodes.ESCAPE, keycodes.ENTER].includes(event.key);
-            if (keyFound) {
-                this.setFocus();
-            }
-        };
-        this.handleCloseMenu = () => {
-            this.showCompletions = false;
-        };
-        this.filterCompletions = (filter) => {
-            if (!filter) {
-                return this.completionsList;
-            }
-            return this.completionsList.filter((completion) => completion.text.toLowerCase().includes(filter.toLowerCase()));
-        };
-        this.handleInput = (event) => {
-            event.stopPropagation();
-            let value = event.target.value;
-            if (this.type === 'number') {
-                if (!value && event.data) {
-                    event.stopPropagation();
-                    return;
-                }
-                if (value) {
-                    value = Number(value);
-                }
-            }
-            this.changeWaiting = true;
-            this.changeEmitter(value);
-        };
-        this.changeEmitter = debounce.debounce((value) => {
-            this.change.emit(value);
-            this.changeWaiting = false;
-        }, CHANGE_EVENT_DEBOUNCE_TIMEOUT);
-        this.handleChange = (event) => {
-            event.stopPropagation();
-            this.changeEmitter.flush();
-        };
-        this.handleIconClick = () => {
-            this.action.emit();
-        };
-        this.handleIconKeyPress = (event) => {
-            const isEnter = event.key === keycodes.ENTER;
-            const isSpace = event.key === keycodes.SPACE;
-            if (isSpace || isEnter) {
-                this.action.emit();
-            }
-        };
-        this.handleWheel = () => {
-            // This empty event handler is here to circumvent a bug.
-            // In some browsers (Chrome for example), hovering the input with
-            // the input focused, and scrolling, will both change the value
-            // AND scroll the page. We would prefer to never change the value
-            // on scroll, instead always scrolling the page, but since we
-            // haven't found a way to do that, this is the next best thing, as
-            // it prevents the page from being scrolled, but only in the
-            // circumstances when the value is changed by the scrolling.
-            // Please test THOROUGHLY if you remove this event handler 😄
-        };
-        this.portalId = randomString.createRandomString();
-        this.helperTextId = randomString.createRandomString();
-        this.labelId = randomString.createRandomString();
-    }
-    connectedCallback() {
-        this.initialize();
-    }
-    componentDidLoad() {
-        this.initialize();
-    }
-    disconnectedCallback() {
-        if (this.mdcTextField) {
-            this.mdcTextField.destroy();
-        }
-        this.restyleCompletionsDropDown.cancel();
-        window.removeEventListener('resize', this.layout);
-        this.limelInputField.removeEventListener('focus', this.setFocus);
-    }
-    componentDidUpdate() {
-        if (this.invalid) {
-            this.mdcTextField.valid = false;
-        }
-        else if (!this.wasInvalid) {
-            // Reset MDC's internal validity once the consumer no longer
-            // considers the field invalid and our own check hasn't
-            // flagged it either.
-            this.mdcTextField.valid = true;
-        }
-        this.mdcTextField.disabled = this.disabled || this.readonly;
-    }
-    /**
-     * Returns the start position of the current text selection.
-     * Returns `null` if the input element is not available or if
-     * the input type does not support selection (e.g., `number`).
-     */
-    async getSelectionStart() {
-        var _a, _b;
-        try {
-            return (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : null;
-        }
-        catch (_c) {
-            // Some input types (e.g., number) throw InvalidStateError
-            return null;
-        }
-    }
-    /**
-     * Returns the end position of the current text selection.
-     * Returns `null` if the input element is not available or if
-     * the input type does not support selection (e.g., `number`).
-     */
-    async getSelectionEnd() {
-        var _a, _b;
-        try {
-            return (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.selectionEnd) !== null && _b !== void 0 ? _b : null;
-        }
-        catch (_c) {
-            // Some input types (e.g., number) throw InvalidStateError
-            return null;
-        }
-    }
-    /**
-     * Returns the direction of the current text selection.
-     * Can be `'forward'`, `'backward'`, or `'none'`.
-     * Returns `null` if the input element is not available or if
-     * the input type does not support selection (e.g., `number`).
-     */
-    async getSelectionDirection() {
-        var _a, _b;
-        try {
-            return (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.selectionDirection) !== null && _b !== void 0 ? _b : null;
-        }
-        catch (_c) {
-            // Some input types (e.g., number) throw InvalidStateError
-            return null;
-        }
-    }
-    render() {
-        const properties = this.getAdditionalProps();
-        properties['aria-labelledby'] = this.labelId;
-        properties.class = 'mdc-text-field__input';
-        properties.ref = this.setInputElement;
-        properties.onInput = this.handleInput;
-        properties.onChange = this.handleChange;
-        properties.onFocus = this.onFocus;
-        properties.onBlur = this.onBlur;
-        properties.required = this.required;
-        properties.readonly = this.readonly;
-        properties.disabled = this.disabled || this.readonly;
-        let ariaControls = '';
-        if (this.hasHelperText()) {
-            ariaControls += this.helperTextId;
-            properties['aria-describedby'] = this.helperTextId;
-        }
-        if (this.renderAutocompleteList()) {
-            if (ariaControls) {
-                ariaControls += ' ';
-            }
-            ariaControls += this.portalId;
-        }
-        if (ariaControls) {
-            properties['aria-controls'] = ariaControls;
-        }
-        return (index.h(index.Host, { key: '9e509e181e05f451deadc92e052dc11075032f9a' }, index.h("limel-notched-outline", { key: '2f2307e2c7d96eec0c5753d27bf1fc76c9ad8eb2', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, index.h("label", { key: 'a21372b10d416423aea6ff9f318bf12ef8d4832a', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
-    }
-    valueWatcher(newValue) {
-        if (!this.mdcTextField) {
-            return;
-        }
-        if (this.changeWaiting) {
-            return;
-        }
-        if (this.type === 'number' &&
-            this.isFocused &&
-            Number(newValue) === Number(this.mdcTextField.value)) {
-            return;
-        }
-        if (newValue !== this.mdcTextField.value) {
-            this.mdcTextField.value = newValue || '';
-        }
-        if (this.wasInvalid) {
-            this.validate();
-        }
-    }
-    completionsWatcher() {
-        this.mapCompletions();
-    }
-    get validationMessage() {
-        var _a;
-        if (this.isInvalid() && !this.invalid) {
-            return ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.validationMessage) || '';
-        }
-        return '';
-    }
-    static get delegatesFocus() { return true; }
-    get limelInputField() { return index.getElement(this); }
-    static get watchers() { return {
-        "value": [{
-                "valueWatcher": 0
-            }],
-        "completions": [{
-                "completionsWatcher": 0
-            }]
-    }; }
-};
-InputField.style = inputFieldCss();
-
-/**
- * @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$2 = {
-    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$2.LIST_ITEM_ACTIVATED_CLASS] = 'mdc-list-item--activated',
-    _a["" + cssClasses$2.LIST_ITEM_CLASS] = 'mdc-list-item',
-    _a["" + cssClasses$2.LIST_ITEM_DISABLED_CLASS] = 'mdc-list-item--disabled',
-    _a["" + cssClasses$2.LIST_ITEM_SELECTED_CLASS] = 'mdc-list-item--selected',
-    _a["" + cssClasses$2.LIST_ITEM_PRIMARY_TEXT_CLASS] = 'mdc-list-item__primary-text',
-    _a["" + cssClasses$2.ROOT] = 'mdc-list',
-    _a);
-var deprecatedClassNameMap = (_b = {},
-    _b["" + cssClasses$2.LIST_ITEM_ACTIVATED_CLASS] = 'mdc-deprecated-list-item--activated',
-    _b["" + cssClasses$2.LIST_ITEM_CLASS] = 'mdc-deprecated-list-item',
-    _b["" + cssClasses$2.LIST_ITEM_DISABLED_CLASS] = 'mdc-deprecated-list-item--disabled',
-    _b["" + cssClasses$2.LIST_ITEM_SELECTED_CLASS] = 'mdc-deprecated-list-item--selected',
-    _b["" + cssClasses$2.LIST_ITEM_TEXT_CLASS] = 'mdc-deprecated-list-item__text',
-    _b["" + cssClasses$2.LIST_ITEM_PRIMARY_TEXT_CLASS] = 'mdc-deprecated-list-item__primary-text',
-    _b["" + cssClasses$2.ROOT] = 'mdc-deprecated-list',
-    _b);
-var strings$2 = {
-    ACTION_EVENT: 'MDCList:action',
-    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$2.LIST_ITEM_CLASS + " button:not(:disabled),\n    ." + cssClasses$2.LIST_ITEM_CLASS + " a,\n    ." + deprecatedClassNameMap[cssClasses$2.LIST_ITEM_CLASS] + " button:not(:disabled),\n    ." + deprecatedClassNameMap[cssClasses$2.LIST_ITEM_CLASS] + " a\n  ",
-    DEPRECATED_SELECTOR: '.mdc-deprecated-list',
-    FOCUSABLE_CHILD_ELEMENTS: "\n    ." + cssClasses$2.LIST_ITEM_CLASS + " button:not(:disabled),\n    ." + cssClasses$2.LIST_ITEM_CLASS + " a,\n    ." + cssClasses$2.LIST_ITEM_CLASS + " input[type=\"radio\"]:not(:disabled),\n    ." + cssClasses$2.LIST_ITEM_CLASS + " input[type=\"checkbox\"]:not(:disabled),\n    ." + deprecatedClassNameMap[cssClasses$2.LIST_ITEM_CLASS] + " button:not(:disabled),\n    ." + deprecatedClassNameMap[cssClasses$2.LIST_ITEM_CLASS] + " a,\n    ." + deprecatedClassNameMap[cssClasses$2.LIST_ITEM_CLASS] + " input[type=\"radio\"]:not(:disabled),\n    ." + deprecatedClassNameMap[cssClasses$2.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';
-
-/**
- * @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$2.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);
-    }
-    return index;
-}
-/**
- * Matches the user's single input character in the buffer to the
- * next option that begins with such character. Wraps around if at
- * end of options. Returns -1 if no match is found.
- */
-function matchFirstChar(sortedIndexByFirstChar, focusedItemIndex, isItemAtIndexDisabled, state) {
-    var firstChar = state.typeaheadBuffer[0];
-    var itemsMatchingFirstChar = sortedIndexByFirstChar.get(firstChar);
-    if (!itemsMatchingFirstChar) {
-        return -1;
-    }
-    // Has the same firstChar been recently matched?
-    // Also, did starting index remain the same between key presses?
-    // If both hold true, simply increment index.
-    if (firstChar === state.currentFirstChar &&
-        itemsMatchingFirstChar[state.sortedIndexCursor].index ===
-            focusedItemIndex) {
-        state.sortedIndexCursor =
-            (state.sortedIndexCursor + 1) % itemsMatchingFirstChar.length;
-        var newIndex = itemsMatchingFirstChar[state.sortedIndexCursor].index;
-        if (!isItemAtIndexDisabled(newIndex)) {
-            return newIndex;
-        }
-    }
-    // If we're here, it means one of the following happened:
-    // - either firstChar or startingIndex has changed, invalidating the
-    // cursor.
-    // - The next item of typeahead is disabled, so we have to look further.
-    state.currentFirstChar = firstChar;
-    var newCursorPosition = -1;
-    var cursorPosition;
-    // Find the first non-disabled item as a fallback.
-    for (cursorPosition = 0; cursorPosition < itemsMatchingFirstChar.length; cursorPosition++) {
-        if (!isItemAtIndexDisabled(itemsMatchingFirstChar[cursorPosition].index)) {
-            newCursorPosition = cursorPosition;
-            break;
-        }
-    }
-    // Advance cursor to first item matching the firstChar that is positioned
-    // after starting item. Cursor is unchanged from fallback if there's no
-    // such item.
-    for (; cursorPosition < itemsMatchingFirstChar.length; cursorPosition++) {
-        if (itemsMatchingFirstChar[cursorPosition].index > focusedItemIndex &&
-            !isItemAtIndexDisabled(itemsMatchingFirstChar[cursorPosition].index)) {
-            newCursorPosition = cursorPosition;
-            break;
-        }
-    }
-    if (newCursorPosition !== -1) {
-        state.sortedIndexCursor = newCursorPosition;
-        return itemsMatchingFirstChar[state.sortedIndexCursor].index;
-    }
-    return -1;
-}
-/**
- * Attempts to find the next item that matches all of the typeahead buffer.
- * Wraps around if at end of options. Returns -1 if no match is found.
- */
-function matchAllChars(sortedIndexByFirstChar, isItemAtIndexDisabled, state) {
-    var firstChar = state.typeaheadBuffer[0];
-    var itemsMatchingFirstChar = sortedIndexByFirstChar.get(firstChar);
-    if (!itemsMatchingFirstChar) {
-        return -1;
-    }
-    // Do nothing if text already matches
-    var startingItem = itemsMatchingFirstChar[state.sortedIndexCursor];
-    if (startingItem.text.lastIndexOf(state.typeaheadBuffer, 0) === 0 &&
-        !isItemAtIndexDisabled(startingItem.index)) {
-        return startingItem.index;
-    }
-    // Find next item that matches completely; if no match, we'll eventually
-    // loop around to same position
-    var cursorPosition = (state.sortedIndexCursor + 1) % itemsMatchingFirstChar.length;
-    var nextCursorPosition = -1;
-    while (cursorPosition !== state.sortedIndexCursor) {
-        var currentItem = itemsMatchingFirstChar[cursorPosition];
-        var matches = currentItem.text.lastIndexOf(state.typeaheadBuffer, 0) === 0;
-        var isEnabled = !isItemAtIndexDisabled(currentItem.index);
-        if (matches && isEnabled) {
-            nextCursorPosition = cursorPosition;
-            break;
-        }
-        cursorPosition = (cursorPosition + 1) % itemsMatchingFirstChar.length;
-    }
-    if (nextCursorPosition !== -1) {
-        state.sortedIndexCursor = nextCursorPosition;
-        return itemsMatchingFirstChar[state.sortedIndexCursor].index;
-    }
-    return -1;
-}
-/**
- * Whether or not the given typeahead instaance state is currently typing.
- *
- * @param state The typeahead state instance. See `initState`.
- */
-function isTypingInProgress(state) {
-    return state.typeaheadBuffer.length > 0;
-}
-/**
- * Clears the typeahaed buffer so that it resets item matching to the first
- * character.
- *
- * @param state The typeahead state instance. See `initState`.
- */
-function clearBuffer(state) {
-    state.typeaheadBuffer = '';
-}
-/**
- * Given a keydown event, it calculates whether or not to automatically focus a
- * list item depending on what was typed mimicing the typeahead functionality of
- * a standard <select> element that is open.
- *
- * @param opts Options and accessors
- *   - event - the KeyboardEvent to handle and parse
- *   - sortedIndexByFirstChar - output of `initSortedIndex(...)`
- *   - focusedItemIndex - the index of the currently focused item
- *   - focusItemAtIndex - function that focuses a list item at given index
- *   - isItemAtFocusedIndexDisabled - whether or not the currently focused item
- *      is disabled
- *   - isTargetListItem - whether or not the event target is a list item
- * @param state The typeahead state instance. See `initState`.
- *
- * @returns index of the item matched by the keydown. -1 if not matched.
- */
-function handleKeydown(opts, state) {
-    var event = opts.event, isTargetListItem = opts.isTargetListItem, focusedItemIndex = opts.focusedItemIndex, focusItemAtIndex = opts.focusItemAtIndex, sortedIndexByFirstChar = opts.sortedIndexByFirstChar, isItemAtIndexDisabled = opts.isItemAtIndexDisabled;
-    var isArrowLeft = normalizeKey(event) === 'ArrowLeft';
-    var isArrowUp = normalizeKey(event) === 'ArrowUp';
-    var isArrowRight = normalizeKey(event) === 'ArrowRight';
-    var isArrowDown = normalizeKey(event) === 'ArrowDown';
-    var isHome = normalizeKey(event) === 'Home';
-    var isEnd = normalizeKey(event) === 'End';
-    var isEnter = normalizeKey(event) === 'Enter';
-    var isSpace = normalizeKey(event) === 'Spacebar';
-    if (event.ctrlKey || event.metaKey || isArrowLeft || isArrowUp ||
-        isArrowRight || isArrowDown || isHome || isEnd || isEnter) {
-        return -1;
-    }
-    var isCharacterKey = !isSpace && event.key.length === 1;
-    if (isCharacterKey) {
-        preventDefaultEvent(event);
-        var matchItemOpts = {
-            focusItemAtIndex: focusItemAtIndex,
-            focusedItemIndex: focusedItemIndex,
-            nextChar: event.key.toLowerCase(),
-            sortedIndexByFirstChar: sortedIndexByFirstChar,
-            skipFocus: false,
-            isItemAtIndexDisabled: isItemAtIndexDisabled,
-        };
-        return matchItem(matchItemOpts, state);
-    }
-    if (!isSpace) {
-        return -1;
-    }
-    if (isTargetListItem) {
-        preventDefaultEvent(event);
-    }
-    var typeaheadOnListItem = isTargetListItem && isTypingInProgress(state);
-    if (typeaheadOnListItem) {
-        var matchItemOpts = {
-            focusItemAtIndex: focusItemAtIndex,
-            focusedItemIndex: focusedItemIndex,
-            nextChar: ' ',
-            sortedIndexByFirstChar: sortedIndexByFirstChar,
-            skipFocus: false,
-            isItemAtIndexDisabled: isItemAtIndexDisabled,
-        };
-        // space participates in typeahead matching if in rapid typing mode
-        return matchItem(matchItemOpts, state);
-    }
-    return -1;
-}
-
-/**
- * @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.
- */
-function isNumberArray(selectedIndex) {
-    return selectedIndex instanceof Array;
-}
-var MDCListFoundation = /** @class */ (function (_super) {
-    ponyfill.__extends(MDCListFoundation, _super);
-    function MDCListFoundation(adapter) {
-        var _this = _super.call(this, ponyfill.__assign(ponyfill.__assign({}, MDCListFoundation.defaultAdapter), adapter)) || this;
-        _this.wrapFocus = false;
-        _this.isVertical = true;
-        _this.isSingleSelectionList = false;
-        _this.selectedIndex = numbers$2.UNSET_INDEX;
-        _this.focusedItemIndex = numbers$2.UNSET_INDEX;
-        _this.useActivatedClass = false;
-        _this.useSelectedAttr = false;
-        _this.ariaCurrentAttrValue = null;
-        _this.isCheckboxList = false;
-        _this.isRadioList = false;
-        _this.hasTypeahead = false;
-        // Transiently holds current typeahead prefix from user.
-        _this.typeaheadState = initState();
-        _this.sortedIndexByFirstChar = new Map();
-        return _this;
-    }
-    Object.defineProperty(MDCListFoundation, "strings", {
-        get: function () {
-            return strings$2;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCListFoundation, "cssClasses", {
-        get: function () {
-            return cssClasses$2;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCListFoundation, "numbers", {
-        get: function () {
-            return numbers$2;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCListFoundation, "defaultAdapter", {
-        get: function () {
-            return {
-                addClassForElementIndex: function () { return undefined; },
-                focusItemAtIndex: function () { return undefined; },
-                getAttributeForElementIndex: function () { return null; },
-                getFocusedElementIndex: function () { return 0; },
-                getListItemCount: function () { return 0; },
-                hasCheckboxAtIndex: function () { return false; },
-                hasRadioAtIndex: function () { return false; },
-                isCheckboxCheckedAtIndex: function () { return false; },
-                isFocusInsideList: function () { return false; },
-                isRootFocused: function () { return false; },
-                listItemAtIndexHasClass: function () { return false; },
-                notifyAction: function () { return undefined; },
-                removeClassForElementIndex: function () { return undefined; },
-                setAttributeForElementIndex: function () { return undefined; },
-                setCheckedCheckboxOrRadioAtIndex: function () { return undefined; },
-                setTabIndexForListItemChildren: function () { return undefined; },
-                getPrimaryTextAtIndex: function () { return ''; },
-            };
-        },
-        enumerable: false,
-        configurable: true
-    });
-    MDCListFoundation.prototype.layout = function () {
-        if (this.adapter.getListItemCount() === 0) {
-            return;
-        }
-        // TODO(b/172274142): consider all items when determining the list's type.
-        if (this.adapter.hasCheckboxAtIndex(0)) {
-            this.isCheckboxList = true;
-        }
-        else if (this.adapter.hasRadioAtIndex(0)) {
-            this.isRadioList = true;
-        }
-        else {
-            this.maybeInitializeSingleSelection();
-        }
-        if (this.hasTypeahead) {
-            this.sortedIndexByFirstChar = this.typeaheadInitSortedIndex();
-        }
-    };
-    /** Returns the index of the item that was last focused. */
-    MDCListFoundation.prototype.getFocusedItemIndex = function () {
-        return this.focusedItemIndex;
-    };
-    /** Toggles focus wrapping with keyboard navigation. */
-    MDCListFoundation.prototype.setWrapFocus = function (value) {
-        this.wrapFocus = value;
-    };
-    /**
-     * Toggles orientation direction for keyboard navigation (true for vertical,
-     * false for horizontal).
-     */
-    MDCListFoundation.prototype.setVerticalOrientation = function (value) {
-        this.isVertical = value;
-    };
-    /** Toggles single-selection behavior. */
-    MDCListFoundation.prototype.setSingleSelection = function (value) {
-        this.isSingleSelectionList = value;
-        if (value) {
-            this.maybeInitializeSingleSelection();
-            this.selectedIndex = this.getSelectedIndexFromDOM();
-        }
-    };
-    /**
-     * Automatically determines whether the list is single selection list. If so,
-     * initializes the internal state to match the selected item.
-     */
-    MDCListFoundation.prototype.maybeInitializeSingleSelection = function () {
-        var selectedItemIndex = this.getSelectedIndexFromDOM();
-        if (selectedItemIndex === numbers$2.UNSET_INDEX)
-            return;
-        var hasActivatedClass = this.adapter.listItemAtIndexHasClass(selectedItemIndex, cssClasses$2.LIST_ITEM_ACTIVATED_CLASS);
-        if (hasActivatedClass) {
-            this.setUseActivatedClass(true);
-        }
-        this.isSingleSelectionList = true;
-        this.selectedIndex = selectedItemIndex;
-    };
-    /** @return Index of the first selected item based on the DOM state. */
-    MDCListFoundation.prototype.getSelectedIndexFromDOM = function () {
-        var selectedIndex = numbers$2.UNSET_INDEX;
-        var listItemsCount = this.adapter.getListItemCount();
-        for (var i = 0; i < listItemsCount; i++) {
-            var hasSelectedClass = this.adapter.listItemAtIndexHasClass(i, cssClasses$2.LIST_ITEM_SELECTED_CLASS);
-            var hasActivatedClass = this.adapter.listItemAtIndexHasClass(i, cssClasses$2.LIST_ITEM_ACTIVATED_CLASS);
-            if (!(hasSelectedClass || hasActivatedClass)) {
-                continue;
-            }
-            selectedIndex = i;
-            break;
-        }
-        return selectedIndex;
-    };
-    /**
-     * Sets whether typeahead is enabled on the list.
-     * @param hasTypeahead Whether typeahead is enabled.
-     */
-    MDCListFoundation.prototype.setHasTypeahead = function (hasTypeahead) {
-        this.hasTypeahead = hasTypeahead;
-        if (hasTypeahead) {
-            this.sortedIndexByFirstChar = this.typeaheadInitSortedIndex();
-        }
-    };
-    /**
-     * @return Whether typeahead is currently matching a user-specified prefix.
-     */
-    MDCListFoundation.prototype.isTypeaheadInProgress = function () {
-        return this.hasTypeahead &&
-            isTypingInProgress(this.typeaheadState);
-    };
-    /** Toggle use of the "activated" CSS class. */
-    MDCListFoundation.prototype.setUseActivatedClass = function (useActivated) {
-        this.useActivatedClass = useActivated;
-    };
-    /**
-     * Toggles use of the selected attribute (true for aria-selected, false for
-     * aria-checked).
-     */
-    MDCListFoundation.prototype.setUseSelectedAttribute = function (useSelected) {
-        this.useSelectedAttr = useSelected;
-    };
-    MDCListFoundation.prototype.getSelectedIndex = function () {
-        return this.selectedIndex;
-    };
-    MDCListFoundation.prototype.setSelectedIndex = function (index, _a) {
-        var _b = _a === void 0 ? {} : _a, forceUpdate = _b.forceUpdate;
-        if (!this.isIndexValid(index)) {
-            return;
-        }
-        if (this.isCheckboxList) {
-            this.setCheckboxAtIndex(index);
-        }
-        else if (this.isRadioList) {
-            this.setRadioAtIndex(index);
-        }
-        else {
-            this.setSingleSelectionAtIndex(index, { forceUpdate: forceUpdate });
-        }
-    };
-    /**
-     * Focus in handler for the list items.
-     */
-    MDCListFoundation.prototype.handleFocusIn = function (listItemIndex) {
-        if (listItemIndex >= 0) {
-            this.focusedItemIndex = listItemIndex;
-            this.adapter.setAttributeForElementIndex(listItemIndex, 'tabindex', '0');
-            this.adapter.setTabIndexForListItemChildren(listItemIndex, '0');
-        }
-    };
-    /**
-     * Focus out handler for the list items.
-     */
-    MDCListFoundation.prototype.handleFocusOut = function (listItemIndex) {
-        var _this = this;
-        if (listItemIndex >= 0) {
-            this.adapter.setAttributeForElementIndex(listItemIndex, 'tabindex', '-1');
-            this.adapter.setTabIndexForListItemChildren(listItemIndex, '-1');
-        }
-        /**
-         * Between Focusout & Focusin some browsers do not have focus on any
-         * element. Setting a delay to wait till the focus is moved to next element.
-         */
-        setTimeout(function () {
-            if (!_this.adapter.isFocusInsideList()) {
-                _this.setTabindexToFirstSelectedOrFocusedItem();
-            }
-        }, 0);
-    };
-    /**
-     * Key handler for the list.
-     */
-    MDCListFoundation.prototype.handleKeydown = function (event, isRootListItem, listItemIndex) {
-        var _this = this;
-        var isArrowLeft = normalizeKey(event) === 'ArrowLeft';
-        var isArrowUp = normalizeKey(event) === 'ArrowUp';
-        var isArrowRight = normalizeKey(event) === 'ArrowRight';
-        var isArrowDown = normalizeKey(event) === 'ArrowDown';
-        var isHome = normalizeKey(event) === 'Home';
-        var isEnd = normalizeKey(event) === 'End';
-        var isEnter = normalizeKey(event) === 'Enter';
-        var isSpace = normalizeKey(event) === 'Spacebar';
-        // Have to check both upper and lower case, because having caps lock on
-        // affects the value.
-        var isLetterA = event.key === 'A' || event.key === 'a';
-        if (this.adapter.isRootFocused()) {
-            if (isArrowUp || isEnd) {
-                event.preventDefault();
-                this.focusLastElement();
-            }
-            else if (isArrowDown || isHome) {
-                event.preventDefault();
-                this.focusFirstElement();
-            }
-            if (this.hasTypeahead) {
-                var handleKeydownOpts = {
-                    event: event,
-                    focusItemAtIndex: function (index) {
-                        _this.focusItemAtIndex(index);
-                    },
-                    focusedItemIndex: -1,
-                    isTargetListItem: isRootListItem,
-                    sortedIndexByFirstChar: this.sortedIndexByFirstChar,
-                    isItemAtIndexDisabled: function (index) {
-                        return _this.adapter.listItemAtIndexHasClass(index, cssClasses$2.LIST_ITEM_DISABLED_CLASS);
-                    },
-                };
-                handleKeydown(handleKeydownOpts, this.typeaheadState);
-            }
-            return;
-        }
-        var currentIndex = this.adapter.getFocusedElementIndex();
-        if (currentIndex === -1) {
-            currentIndex = listItemIndex;
-            if (currentIndex < 0) {
-                // If this event doesn't have a mdc-list-item ancestor from the
-                // current list (not from a sublist), return early.
-                return;
-            }
-        }
-        if ((this.isVertical && isArrowDown) ||
-            (!this.isVertical && isArrowRight)) {
-            preventDefaultEvent(event);
-            this.focusNextElement(currentIndex);
-        }
-        else if ((this.isVertical && isArrowUp) || (!this.isVertical && isArrowLeft)) {
-            preventDefaultEvent(event);
-            this.focusPrevElement(currentIndex);
-        }
-        else if (isHome) {
-            preventDefaultEvent(event);
-            this.focusFirstElement();
-        }
-        else if (isEnd) {
-            preventDefaultEvent(event);
-            this.focusLastElement();
-        }
-        else if (isLetterA && event.ctrlKey && this.isCheckboxList) {
-            event.preventDefault();
-            this.toggleAll(this.selectedIndex === numbers$2.UNSET_INDEX ?
-                [] :
-                this.selectedIndex);
-        }
-        else if (isEnter || isSpace) {
-            if (isRootListItem) {
-                // Return early if enter key is pressed on anchor element which triggers
-                // synthetic MouseEvent event.
-                var target = event.target;
-                if (target && target.tagName === 'A' && isEnter) {
-                    return;
-                }
-                preventDefaultEvent(event);
-                if (this.adapter.listItemAtIndexHasClass(currentIndex, cssClasses$2.LIST_ITEM_DISABLED_CLASS)) {
-                    return;
-                }
-                if (!this.isTypeaheadInProgress()) {
-                    if (this.isSelectableList()) {
-                        this.setSelectedIndexOnAction(currentIndex);
-                    }
-                    this.adapter.notifyAction(currentIndex);
-                }
-            }
-        }
-        if (this.hasTypeahead) {
-            var handleKeydownOpts = {
-                event: event,
-                focusItemAtIndex: function (index) {
-                    _this.focusItemAtIndex(index);
-                },
-                focusedItemIndex: this.focusedItemIndex,
-                isTargetListItem: isRootListItem,
-                sortedIndexByFirstChar: this.sortedIndexByFirstChar,
-                isItemAtIndexDisabled: function (index) { return _this.adapter.listItemAtIndexHasClass(index, cssClasses$2.LIST_ITEM_DISABLED_CLASS); },
-            };
-            handleKeydown(handleKeydownOpts, this.typeaheadState);
-        }
-    };
-    /**
-     * Click handler for the list.
-     */
-    MDCListFoundation.prototype.handleClick = function (index, toggleCheckbox) {
-        if (index === numbers$2.UNSET_INDEX) {
-            return;
-        }
-        if (this.adapter.listItemAtIndexHasClass(index, cssClasses$2.LIST_ITEM_DISABLED_CLASS)) {
-            return;
-        }
-        if (this.isSelectableList()) {
-            this.setSelectedIndexOnAction(index, toggleCheckbox);
-        }
-        this.adapter.notifyAction(index);
-    };
-    /**
-     * Focuses the next element on the list.
-     */
-    MDCListFoundation.prototype.focusNextElement = function (index) {
-        var count = this.adapter.getListItemCount();
-        var nextIndex = index + 1;
-        if (nextIndex >= count) {
-            if (this.wrapFocus) {
-                nextIndex = 0;
-            }
-            else {
-                // Return early because last item is already focused.
-                return index;
-            }
-        }
-        this.focusItemAtIndex(nextIndex);
-        return nextIndex;
-    };
-    /**
-     * Focuses the previous element on the list.
-     */
-    MDCListFoundation.prototype.focusPrevElement = function (index) {
-        var prevIndex = index - 1;
-        if (prevIndex < 0) {
-            if (this.wrapFocus) {
-                prevIndex = this.adapter.getListItemCount() - 1;
-            }
-            else {
-                // Return early because first item is already focused.
-                return index;
-            }
-        }
-        this.focusItemAtIndex(prevIndex);
-        return prevIndex;
-    };
-    MDCListFoundation.prototype.focusFirstElement = function () {
-        this.focusItemAtIndex(0);
-        return 0;
-    };
-    MDCListFoundation.prototype.focusLastElement = function () {
-        var lastIndex = this.adapter.getListItemCount() - 1;
-        this.focusItemAtIndex(lastIndex);
-        return lastIndex;
-    };
-    MDCListFoundation.prototype.focusInitialElement = function () {
-        var initialIndex = this.getFirstSelectedOrFocusedItemIndex();
-        this.focusItemAtIndex(initialIndex);
-        return initialIndex;
-    };
-    /**
-     * @param itemIndex Index of the list item
-     * @param isEnabled Sets the list item to enabled or disabled.
-     */
-    MDCListFoundation.prototype.setEnabled = function (itemIndex, isEnabled) {
-        if (!this.isIndexValid(itemIndex)) {
-            return;
-        }
-        if (isEnabled) {
-            this.adapter.removeClassForElementIndex(itemIndex, cssClasses$2.LIST_ITEM_DISABLED_CLASS);
-            this.adapter.setAttributeForElementIndex(itemIndex, strings$2.ARIA_DISABLED, 'false');
-        }
-        else {
-            this.adapter.addClassForElementIndex(itemIndex, cssClasses$2.LIST_ITEM_DISABLED_CLASS);
-            this.adapter.setAttributeForElementIndex(itemIndex, strings$2.ARIA_DISABLED, 'true');
-        }
-    };
-    MDCListFoundation.prototype.setSingleSelectionAtIndex = function (index, _a) {
-        var _b = _a === void 0 ? {} : _a, forceUpdate = _b.forceUpdate;
-        if (this.selectedIndex === index && !forceUpdate) {
-            return;
-        }
-        var selectedClassName = cssClasses$2.LIST_ITEM_SELECTED_CLASS;
-        if (this.useActivatedClass) {
-            selectedClassName = cssClasses$2.LIST_ITEM_ACTIVATED_CLASS;
-        }
-        if (this.selectedIndex !== numbers$2.UNSET_INDEX) {
-            this.adapter.removeClassForElementIndex(this.selectedIndex, selectedClassName);
-        }
-        this.setAriaForSingleSelectionAtIndex(index);
-        this.setTabindexAtIndex(index);
-        if (index !== numbers$2.UNSET_INDEX) {
-            this.adapter.addClassForElementIndex(index, selectedClassName);
-        }
-        this.selectedIndex = index;
-    };
-    /**
-     * Sets aria attribute for single selection at given index.
-     */
-    MDCListFoundation.prototype.setAriaForSingleSelectionAtIndex = function (index) {
-        // Detect the presence of aria-current and get the value only during list
-        // initialization when it is in unset state.
-        if (this.selectedIndex === numbers$2.UNSET_INDEX) {
-            this.ariaCurrentAttrValue =
-                this.adapter.getAttributeForElementIndex(index, strings$2.ARIA_CURRENT);
-        }
-        var isAriaCurrent = this.ariaCurrentAttrValue !== null;
-        var ariaAttribute = isAriaCurrent ? strings$2.ARIA_CURRENT : strings$2.ARIA_SELECTED;
-        if (this.selectedIndex !== numbers$2.UNSET_INDEX) {
-            this.adapter.setAttributeForElementIndex(this.selectedIndex, ariaAttribute, 'false');
-        }
-        if (index !== numbers$2.UNSET_INDEX) {
-            var ariaAttributeValue = isAriaCurrent ? this.ariaCurrentAttrValue : 'true';
-            this.adapter.setAttributeForElementIndex(index, ariaAttribute, ariaAttributeValue);
-        }
-    };
-    /**
-     * Returns the attribute to use for indicating selection status.
-     */
-    MDCListFoundation.prototype.getSelectionAttribute = function () {
-        return this.useSelectedAttr ? strings$2.ARIA_SELECTED : strings$2.ARIA_CHECKED;
-    };
-    /**
-     * Toggles radio at give index. Radio doesn't change the checked state if it
-     * is already checked.
-     */
-    MDCListFoundation.prototype.setRadioAtIndex = function (index) {
-        var selectionAttribute = this.getSelectionAttribute();
-        this.adapter.setCheckedCheckboxOrRadioAtIndex(index, true);
-        if (this.selectedIndex !== numbers$2.UNSET_INDEX) {
-            this.adapter.setAttributeForElementIndex(this.selectedIndex, selectionAttribute, 'false');
-        }
-        this.adapter.setAttributeForElementIndex(index, selectionAttribute, 'true');
-        this.selectedIndex = index;
-    };
-    MDCListFoundation.prototype.setCheckboxAtIndex = function (index) {
-        var selectionAttribute = this.getSelectionAttribute();
-        for (var i = 0; i < this.adapter.getListItemCount(); i++) {
-            var isChecked = false;
-            if (index.indexOf(i) >= 0) {
-                isChecked = true;
-            }
-            this.adapter.setCheckedCheckboxOrRadioAtIndex(i, isChecked);
-            this.adapter.setAttributeForElementIndex(i, selectionAttribute, isChecked ? 'true' : 'false');
-        }
-        this.selectedIndex = index;
-    };
-    MDCListFoundation.prototype.setTabindexAtIndex = function (index) {
-        if (this.focusedItemIndex === numbers$2.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.
-            this.adapter.setAttributeForElementIndex(0, 'tabindex', '-1');
-        }
-        else if (this.focusedItemIndex >= 0 && this.focusedItemIndex !== index) {
-            this.adapter.setAttributeForElementIndex(this.focusedItemIndex, 'tabindex', '-1');
-        }
-        // Set the previous selection's tabindex to -1. We need this because
-        // in selection menus that are not visible, programmatically setting an
-        // option will not change focus but will change where tabindex should be 0.
-        if (!(this.selectedIndex instanceof Array) &&
-            this.selectedIndex !== index) {
-            this.adapter.setAttributeForElementIndex(this.selectedIndex, 'tabindex', '-1');
-        }
-        if (index !== numbers$2.UNSET_INDEX) {
-            this.adapter.setAttributeForElementIndex(index, 'tabindex', '0');
-        }
-    };
-    /**
-     * @return Return true if it is single selectin list, checkbox list or radio
-     *     list.
-     */
-    MDCListFoundation.prototype.isSelectableList = function () {
-        return this.isSingleSelectionList || this.isCheckboxList ||
-            this.isRadioList;
-    };
-    MDCListFoundation.prototype.setTabindexToFirstSelectedOrFocusedItem = function () {
-        var targetIndex = this.getFirstSelectedOrFocusedItemIndex();
-        this.setTabindexAtIndex(targetIndex);
-    };
-    MDCListFoundation.prototype.getFirstSelectedOrFocusedItemIndex = function () {
-        // Action lists retain focus on the most recently focused item.
-        if (!this.isSelectableList()) {
-            return Math.max(this.focusedItemIndex, 0);
-        }
-        // Single-selection lists focus the selected item.
-        if (typeof this.selectedIndex === 'number' &&
-            this.selectedIndex !== numbers$2.UNSET_INDEX) {
-            return this.selectedIndex;
-        }
-        // Multiple-selection lists focus the first selected item.
-        if (isNumberArray(this.selectedIndex) && this.selectedIndex.length > 0) {
-            return this.selectedIndex.reduce(function (minIndex, currentIndex) { return Math.min(minIndex, currentIndex); });
-        }
-        // Selection lists without a selection focus the first item.
-        return 0;
-    };
-    MDCListFoundation.prototype.isIndexValid = function (index) {
-        var _this = this;
-        if (index instanceof Array) {
-            if (!this.isCheckboxList) {
-                throw new Error('MDCListFoundation: Array of index is only supported for checkbox based list');
-            }
-            if (index.length === 0) {
-                return true;
-            }
-            else {
-                return index.some(function (i) { return _this.isIndexInRange(i); });
-            }
-        }
-        else if (typeof index === 'number') {
-            if (this.isCheckboxList) {
-                throw new Error("MDCListFoundation: Expected array of index for checkbox based list but got number: " + index);
-            }
-            return this.isIndexInRange(index) ||
-                this.isSingleSelectionList && index === numbers$2.UNSET_INDEX;
-        }
-        else {
-            return false;
-        }
-    };
-    MDCListFoundation.prototype.isIndexInRange = function (index) {
-        var listSize = this.adapter.getListItemCount();
-        return index >= 0 && index < listSize;
-    };
-    /**
-     * Sets selected index on user action, toggles checkbox / radio based on
-     * toggleCheckbox value. User interaction should not toggle list item(s) when
-     * disabled.
-     */
-    MDCListFoundation.prototype.setSelectedIndexOnAction = function (index, toggleCheckbox) {
-        if (toggleCheckbox === void 0) { toggleCheckbox = true; }
-        if (this.isCheckboxList) {
-            this.toggleCheckboxAtIndex(index, toggleCheckbox);
-        }
-        else {
-            this.setSelectedIndex(index);
-        }
-    };
-    MDCListFoundation.prototype.toggleCheckboxAtIndex = function (index, toggleCheckbox) {
-        var selectionAttribute = this.getSelectionAttribute();
-        var isChecked = this.adapter.isCheckboxCheckedAtIndex(index);
-        if (toggleCheckbox) {
-            isChecked = !isChecked;
-            this.adapter.setCheckedCheckboxOrRadioAtIndex(index, isChecked);
-        }
-        this.adapter.setAttributeForElementIndex(index, selectionAttribute, isChecked ? 'true' : 'false');
-        // If none of the checkbox items are selected and selectedIndex is not
-        // initialized then provide a default value.
-        var selectedIndexes = this.selectedIndex === numbers$2.UNSET_INDEX ?
-            [] :
-            this.selectedIndex.slice();
-        if (isChecked) {
-            selectedIndexes.push(index);
-        }
-        else {
-            selectedIndexes = selectedIndexes.filter(function (i) { return i !== index; });
-        }
-        this.selectedIndex = selectedIndexes;
-    };
-    MDCListFoundation.prototype.focusItemAtIndex = function (index) {
-        this.adapter.focusItemAtIndex(index);
-        this.focusedItemIndex = index;
-    };
-    MDCListFoundation.prototype.toggleAll = function (currentlySelectedIndexes) {
-        var count = this.adapter.getListItemCount();
-        // If all items are selected, deselect everything.
-        if (currentlySelectedIndexes.length === count) {
-            this.setCheckboxAtIndex([]);
-        }
-        else {
-            // Otherwise select all enabled options.
-            var allIndexes = [];
-            for (var i = 0; i < count; i++) {
-                if (!this.adapter.listItemAtIndexHasClass(i, cssClasses$2.LIST_ITEM_DISABLED_CLASS) ||
-                    currentlySelectedIndexes.indexOf(i) > -1) {
-                    allIndexes.push(i);
-                }
-            }
-            this.setCheckboxAtIndex(allIndexes);
-        }
-    };
-    /**
-     * 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.
-     */
-    MDCListFoundation.prototype.typeaheadMatchItem = function (nextChar, startingIndex, skipFocus) {
-        var _this = this;
-        if (skipFocus === void 0) { skipFocus = false; }
-        var opts = {
-            focusItemAtIndex: function (index) {
-                _this.focusItemAtIndex(index);
-            },
-            focusedItemIndex: startingIndex ? startingIndex : this.focusedItemIndex,
-            nextChar: nextChar,
-            sortedIndexByFirstChar: this.sortedIndexByFirstChar,
-            skipFocus: skipFocus,
-            isItemAtIndexDisabled: function (index) { return _this.adapter.listItemAtIndexHasClass(index, cssClasses$2.LIST_ITEM_DISABLED_CLASS); }
-        };
-        return matchItem(opts, this.typeaheadState);
-    };
-    /**
-     * Initializes the MDCListTextAndIndex data structure by indexing the current
-     * list items by primary text.
-     *
-     * @return The primary texts of all the list items sorted by first character.
-     */
-    MDCListFoundation.prototype.typeaheadInitSortedIndex = function () {
-        return initSortedIndex(this.adapter.getListItemCount(), this.adapter.getPrimaryTextAtIndex);
-    };
-    /**
-     * Clears the typeahead buffer.
-     */
-    MDCListFoundation.prototype.clearTypeaheadBuffer = function () {
-        clearBuffer(this.typeaheadState);
-    };
-    return MDCListFoundation;
-}(ponyfill.MDCFoundation));
-
-/**
- * @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 MDCList = /** @class */ (function (_super) {
-    ponyfill.__extends(MDCList, _super);
-    function MDCList() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Object.defineProperty(MDCList.prototype, "vertical", {
-        set: function (value) {
-            this.foundation.setVerticalOrientation(value);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCList.prototype, "listElements", {
-        get: function () {
-            return Array.from(this.root.querySelectorAll("." + this.classNameMap[cssClasses$2.LIST_ITEM_CLASS]));
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCList.prototype, "wrapFocus", {
-        set: function (value) {
-            this.foundation.setWrapFocus(value);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCList.prototype, "typeaheadInProgress", {
-        /**
-         * @return Whether typeahead is currently matching a user-specified prefix.
-         */
-        get: function () {
-            return this.foundation.isTypeaheadInProgress();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCList.prototype, "hasTypeahead", {
-        /**
-         * Sets whether typeahead functionality is enabled on the list.
-         * @param hasTypeahead Whether typeahead is enabled.
-         */
-        set: function (hasTypeahead) {
-            this.foundation.setHasTypeahead(hasTypeahead);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCList.prototype, "singleSelection", {
-        set: function (isSingleSelectionList) {
-            this.foundation.setSingleSelection(isSingleSelectionList);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCList.prototype, "selectedIndex", {
-        get: function () {
-            return this.foundation.getSelectedIndex();
-        },
-        set: function (index) {
-            this.foundation.setSelectedIndex(index);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    MDCList.attachTo = function (root) {
-        return new MDCList(root);
-    };
-    MDCList.prototype.initialSyncWithDOM = function () {
-        this.isEvolutionEnabled =
-            evolutionAttribute in this.root.dataset;
-        if (this.isEvolutionEnabled) {
-            this.classNameMap = evolutionClassNameMap;
-        }
-        else if (ponyfill.matches(this.root, strings$2.DEPRECATED_SELECTOR)) {
-            this.classNameMap = deprecatedClassNameMap;
-        }
-        else {
-            this.classNameMap =
-                Object.values(cssClasses$2)
-                    .reduce(function (obj, className) {
-                    obj[className] = className;
-                    return obj;
-                }, {});
-        }
-        this.handleClick = this.handleClickEvent.bind(this);
-        this.handleKeydown = this.handleKeydownEvent.bind(this);
-        this.focusInEventListener = this.handleFocusInEvent.bind(this);
-        this.focusOutEventListener = this.handleFocusOutEvent.bind(this);
-        this.listen('keydown', this.handleKeydown);
-        this.listen('click', this.handleClick);
-        this.listen('focusin', this.focusInEventListener);
-        this.listen('focusout', this.focusOutEventListener);
-        this.layout();
-        this.initializeListType();
-        this.ensureFocusable();
-    };
-    MDCList.prototype.destroy = function () {
-        this.unlisten('keydown', this.handleKeydown);
-        this.unlisten('click', this.handleClick);
-        this.unlisten('focusin', this.focusInEventListener);
-        this.unlisten('focusout', this.focusOutEventListener);
-    };
-    MDCList.prototype.layout = function () {
-        var direction = this.root.getAttribute(strings$2.ARIA_ORIENTATION);
-        this.vertical = direction !== strings$2.ARIA_ORIENTATION_HORIZONTAL;
-        var itemSelector = "." + this.classNameMap[cssClasses$2.LIST_ITEM_CLASS] + ":not([tabindex])";
-        var childSelector = strings$2.FOCUSABLE_CHILD_ELEMENTS;
-        // List items need to have at least tabindex=-1 to be focusable.
-        var itemEls = this.root.querySelectorAll(itemSelector);
-        if (itemEls.length) {
-            Array.prototype.forEach.call(itemEls, function (el) {
-                el.setAttribute('tabindex', '-1');
-            });
-        }
-        // Child button/a elements are not tabbable until the list item is focused.
-        var focusableChildEls = this.root.querySelectorAll(childSelector);
-        if (focusableChildEls.length) {
-            Array.prototype.forEach.call(focusableChildEls, function (el) {
-                el.setAttribute('tabindex', '-1');
-            });
-        }
-        if (this.isEvolutionEnabled) {
-            this.foundation.setUseSelectedAttribute(true);
-        }
-        this.foundation.layout();
-    };
-    /**
-     * Extracts the primary text from a list item.
-     * @param item The list item element.
-     * @return The primary text in the element.
-     */
-    MDCList.prototype.getPrimaryText = function (item) {
-        var _a;
-        var primaryText = item.querySelector("." + this.classNameMap[cssClasses$2.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$2.LIST_ITEM_TEXT_CLASS]);
-        return (singleLineText && singleLineText.textContent) || '';
-    };
-    /**
-     * Initialize selectedIndex value based on pre-selected list items.
-     */
-    MDCList.prototype.initializeListType = function () {
-        var _this = this;
-        this.isInteractive =
-            ponyfill.matches(this.root, strings$2.ARIA_INTERACTIVE_ROLES_SELECTOR);
-        if (this.isEvolutionEnabled && this.isInteractive) {
-            var selection = Array.from(this.root.querySelectorAll(strings$2.SELECTED_ITEM_SELECTOR), function (listItem) { return _this.listElements.indexOf(listItem); });
-            if (ponyfill.matches(this.root, strings$2.ARIA_MULTI_SELECTABLE_SELECTOR)) {
-                this.selectedIndex = selection;
-            }
-            else if (selection.length > 0) {
-                this.selectedIndex = selection[0];
-            }
-            return;
-        }
-        var checkboxListItems = this.root.querySelectorAll(strings$2.ARIA_ROLE_CHECKBOX_SELECTOR);
-        var radioSelectedListItem = this.root.querySelector(strings$2.ARIA_CHECKED_RADIO_SELECTOR);
-        if (checkboxListItems.length) {
-            var preselectedItems = this.root.querySelectorAll(strings$2.ARIA_CHECKED_CHECKBOX_SELECTOR);
-            this.selectedIndex = Array.from(preselectedItems, function (listItem) { return _this.listElements.indexOf(listItem); });
-        }
-        else if (radioSelectedListItem) {
-            this.selectedIndex = this.listElements.indexOf(radioSelectedListItem);
-        }
-    };
-    /**
-     * Updates the list item at itemIndex to the desired isEnabled state.
-     * @param itemIndex Index of the list item
-     * @param isEnabled Sets the list item to enabled or disabled.
-     */
-    MDCList.prototype.setEnabled = function (itemIndex, isEnabled) {
-        this.foundation.setEnabled(itemIndex, isEnabled);
-    };
-    /**
-     * 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. Defaults to
-     *     the currently focused index.
-     * @return The index of the matched item.
-     */
-    MDCList.prototype.typeaheadMatchItem = function (nextChar, startingIndex) {
-        return this.foundation.typeaheadMatchItem(nextChar, startingIndex, /** skipFocus */ true);
-    };
-    MDCList.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.
-        var adapter = {
-            addClassForElementIndex: function (index, className) {
-                var element = _this.listElements[index];
-                if (element) {
-                    element.classList.add(_this.classNameMap[className]);
-                }
-            },
-            focusItemAtIndex: function (index) {
-                var element = _this.listElements[index];
-                if (element) {
-                    element.focus();
-                }
-            },
-            getAttributeForElementIndex: function (index, attr) {
-                return _this.listElements[index].getAttribute(attr);
-            },
-            getFocusedElementIndex: function () {
-                return _this.listElements.indexOf(document.activeElement);
-            },
-            getListItemCount: function () { return _this.listElements.length; },
-            getPrimaryTextAtIndex: function (index) {
-                return _this.getPrimaryText(_this.listElements[index]);
-            },
-            hasCheckboxAtIndex: function (index) {
-                var listItem = _this.listElements[index];
-                return !!listItem.querySelector(strings$2.CHECKBOX_SELECTOR);
-            },
-            hasRadioAtIndex: function (index) {
-                var listItem = _this.listElements[index];
-                return !!listItem.querySelector(strings$2.RADIO_SELECTOR);
-            },
-            isCheckboxCheckedAtIndex: function (index) {
-                var listItem = _this.listElements[index];
-                var toggleEl = listItem.querySelector(strings$2.CHECKBOX_SELECTOR);
-                return toggleEl.checked;
-            },
-            isFocusInsideList: function () {
-                return _this.root !== document.activeElement &&
-                    _this.root.contains(document.activeElement);
-            },
-            isRootFocused: function () { return document.activeElement === _this.root; },
-            listItemAtIndexHasClass: function (index, className) {
-                return _this.listElements[index].classList.contains(_this.classNameMap[className]);
-            },
-            notifyAction: function (index) {
-                _this.emit(strings$2.ACTION_EVENT, { index: index }, /** shouldBubble */ true);
-            },
-            removeClassForElementIndex: function (index, className) {
-                var element = _this.listElements[index];
-                if (element) {
-                    element.classList.remove(_this.classNameMap[className]);
-                }
-            },
-            setAttributeForElementIndex: function (index, attr, value) {
-                var element = _this.listElements[index];
-                if (element) {
-                    element.setAttribute(attr, value);
-                }
-            },
-            setCheckedCheckboxOrRadioAtIndex: function (index, isChecked) {
-                var listItem = _this.listElements[index];
-                var toggleEl = listItem.querySelector(strings$2.CHECKBOX_RADIO_SELECTOR);
-                toggleEl.checked = isChecked;
-                var event = document.createEvent('Event');
-                event.initEvent('change', true, true);
-                toggleEl.dispatchEvent(event);
-            },
-            setTabIndexForListItemChildren: function (listItemIndex, tabIndexValue) {
-                var element = _this.listElements[listItemIndex];
-                var selector = strings$2.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX;
-                Array.prototype.forEach.call(element.querySelectorAll(selector), function (el) {
-                    el.setAttribute('tabindex', tabIndexValue);
-                });
-            },
-        };
-        return new MDCListFoundation(adapter);
-    };
-    /**
-     * Ensures that at least one item is focusable if the list is interactive and
-     * doesn't specify a suitable tabindex.
-     */
-    MDCList.prototype.ensureFocusable = function () {
-        if (this.isEvolutionEnabled && this.isInteractive) {
-            if (!this.root.querySelector("." + this.classNameMap[cssClasses$2.LIST_ITEM_CLASS] + "[tabindex=\"0\"]")) {
-                var index = this.initialFocusIndex();
-                if (index !== -1) {
-                    this.listElements[index].tabIndex = 0;
-                }
-            }
-        }
-    };
-    MDCList.prototype.initialFocusIndex = function () {
-        if (this.selectedIndex instanceof Array && this.selectedIndex.length > 0) {
-            return this.selectedIndex[0];
-        }
-        if (typeof this.selectedIndex === 'number' &&
-            this.selectedIndex !== numbers$2.UNSET_INDEX) {
-            return this.selectedIndex;
-        }
-        var el = this.root.querySelector("." + this.classNameMap[cssClasses$2.LIST_ITEM_CLASS] + ":not(." + this.classNameMap[cssClasses$2.LIST_ITEM_DISABLED_CLASS] + ")");
-        if (el === null) {
-            return -1;
-        }
-        return this.getListItemIndex(el);
-    };
-    /**
-     * Used to figure out which list item this event is targetting. Or returns -1
-     * if there is no list item
-     */
-    MDCList.prototype.getListItemIndex = function (el) {
-        var nearestParent = ponyfill.closest(el, "." + this.classNameMap[cssClasses$2.LIST_ITEM_CLASS] + ", ." + this.classNameMap[cssClasses$2.ROOT]);
-        // Get the index of the element if it is a list item.
-        if (nearestParent &&
-            ponyfill.matches(nearestParent, "." + this.classNameMap[cssClasses$2.LIST_ITEM_CLASS])) {
-            return this.listElements.indexOf(nearestParent);
-        }
-        return -1;
-    };
-    /**
-     * Used to figure out which element was clicked before sending the event to
-     * the foundation.
-     */
-    MDCList.prototype.handleFocusInEvent = function (evt) {
-        var index = this.getListItemIndex(evt.target);
-        this.foundation.handleFocusIn(index);
-    };
-    /**
-     * Used to figure out which element was clicked before sending the event to
-     * the foundation.
-     */
-    MDCList.prototype.handleFocusOutEvent = function (evt) {
-        var index = this.getListItemIndex(evt.target);
-        this.foundation.handleFocusOut(index);
-    };
-    /**
-     * Used to figure out which element was focused when keydown event occurred
-     * before sending the event to the foundation.
-     */
-    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$2.LIST_ITEM_CLASS]), index);
-    };
-    /**
-     * Used to figure out which element was clicked before sending the event to
-     * the foundation.
-     */
-    MDCList.prototype.handleClickEvent = function (evt) {
-        var index = this.getListItemIndex(evt.target);
-        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 = !ponyfill.matches(target, strings$2.CHECKBOX_RADIO_SELECTOR);
-        this.foundation.handleClick(index, toggleCheckbox);
-    };
-    return MDCList;
-}(ponyfill.MDCComponent));
-
-class ListRenderer {
-    constructor() {
-        this.defaultConfig = {
-            isOpen: true,
-            badgeIcons: false,
-        };
-        /**
-         * `aria-orientation` is valid for `listbox` and `radiogroup`,
-         * but not for group (used for checkboxes).
-         * @param role
-         */
-        this.getAriaOrientation = (role) => {
-            if (role === 'listbox' || role === 'radiogroup') {
-                return 'vertical';
-            }
-            else {
-                return null;
-            }
-        };
-        /**
-         * Determine which ListItem should have the `tab-index` attribute set,
-         * and return the index at which that ListItem is located in `items`.
-         * Returns `undefined` if no item should have the attribute set.
-         * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
-         *
-         * @param items - the items of the list, including any `ListSeparator`:s
-         * @returns the index as per the description
-         */
-        this.getIndexForWhichToApplyTabIndex = (items) => {
-            let result;
-            for (let i = 0, max = items.length; i < max; i += 1) {
-                if ('separator' in items[i]) ;
-                else {
-                    const item = items[i];
-                    if (item.disabled) {
-                        // Skip disabled items - they should never get tabindex
-                        continue;
-                    }
-                    if (item.selected) {
-                        result = i;
-                        break;
-                    }
-                    if (result === undefined) {
-                        result = i;
-                        // Do NOT break, as any later item with
-                        // `selected=true` should get the tab-index instead!
-                    }
-                }
-            }
-            return result;
-        };
-        /**
-         * Render a single list item
-         *
-         * @param item - the item to render
-         * @param index - the index the item had in the `items` array
-         * @returns the list item
-         */
-        this.renderListItem = (item, index$1) => {
-            var _a;
-            if ('separator' in item) {
-                return (index.h("li", { class: "mdc-deprecated-list-divider", role: "separator", key: `sep-${index$1}` }, this.renderTextForSeparator(item), index.h("div", { class: "limel-list-divider-line" })));
-            }
-            const attributes = {};
-            if (index$1 === this.applyTabIndexToItemAtIndex) {
-                attributes.tabindex = '0';
-            }
-            let itemType;
-            if (this.config.type === 'radio' || this.config.type === 'checkbox') {
-                itemType = this.config.type;
-            }
-            else if (this.config.type === 'selectable') {
-                itemType = 'option';
-            }
-            else {
-                itemType = 'listitem';
-            }
-            const key = (_a = item.id) !== null && _a !== void 0 ? _a : `item-${index$1}`;
-            const classNames = {
-                'mdc-deprecated-list-item': true, // required for keyboard navigation with arrow keys
-                'mdc-deprecated-list-item--disabled': !!item.disabled, // MDC’s foundation checks for the disabled class before toggling selected state
-            };
-            return (index.h("limel-list-item", Object.assign({ key: key, class: classNames }, attributes, { "data-index": index$1, type: itemType, text: item.text, secondaryText: item.secondaryText, icon: item.icon, image: item.image, primaryComponent: item.primaryComponent, badgeIcon: this.config.badgeIcons, iconSize: this.config.iconSize, selected: item.selected, disabled: item.disabled, actions: item.actions })));
-        };
-        this.renderTextForSeparator = (item) => {
-            if ('text' in item) {
-                return index.h("h2", { class: "limel-list-divider-title" }, item.text);
-            }
-        };
-    }
-    render(items, config = {}) {
-        items = items || [];
-        this.config = Object.assign(Object.assign({}, this.defaultConfig), config);
-        let role;
-        switch (this.config.type) {
-            case 'checkbox': {
-                role = 'group';
-                break;
-            }
-            case 'radio': {
-                role = 'radiogroup';
-                break;
-            }
-            default: {
-                role = 'listbox';
-            }
-        }
-        this.applyTabIndexToItemAtIndex =
-            this.getIndexForWhichToApplyTabIndex(items);
-        return (index.h("ul", { class: "mdc-deprecated-list", role: role, "aria-orientation": this.getAriaOrientation(role) }, items.map(this.renderListItem)));
-    }
-}
-
-const listCss = () => `@charset "UTF-8";:host(.has-striped-rows) .mdc-deprecated-list{border:1px solid rgb(var(--contrast-400))}:host(.has-striped-rows) limel-list-item:not([disabled]):not([disabled=true]):not(:hover):nth-child(even),:host(.has-striped-rows.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):not(:hover):nth-child(even){background-color:var(--list-background-color-of-odd-interactive-items, rgb(var(--contrast-200)))}:host(.has-striped-rows) limel-list-item:not([disabled]):not([disabled=true]):not(:hover):nth-child(odd),:host(.has-striped-rows.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):not(:hover):nth-child(odd){background-color:var(--list-background-color-of-even-interactive-items, rgb(var(--contrast-100)))}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):hover,:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):focus,:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):focus-visible{will-change:color, background-color, box-shadow, transform}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):hover,:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):hover{box-shadow:var(--button-shadow-hovered)}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):hover,:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}:host(.has-grid-layout){--gap:var(--list-grid-gap, 0.5rem);padding:var(--gap);}:host(.has-grid-layout) .mdc-deprecated-list{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit, minmax(min(100%, max(var(--list-grid-item-max-width, 10rem) - var(--gap), var(--list-grid-item-min-width, 7.5rem))), 1fr));max-width:var(--list-grid-max-width, 100%)}:host(.has-grid-layout) .mdc-deprecated-list limel-list-item{border-radius:var(--limel-list-border-radius) !important}:host(.has-grid-layout) .mdc-deprecated-list-divider{grid-column:1/-1}:host(.static-actions-list){z-index:1;background-color:var(--limel-theme-surface-background-color)}:host(.has-position-sticky){position:sticky;box-shadow:0 0 0.75rem 0.5rem var(--limel-theme-surface-background-color)}:host(.has-position-sticky.is-on-top){top:0}:host(.has-position-sticky.is-at-bottom){bottom:0}:host(.is-on-top){border-bottom:1px solid rgb(var(--contrast-400));margin-bottom:0.5rem;padding-bottom:0.25rem}:host(.is-at-bottom){border-top:1px solid rgb(var(--contrast-400));margin-top:0.5rem;padding-top:0.25rem}:host(limel-list){--limel-list-border-radius:0.5rem;display:block;isolation:isolate}:host([hidden]){display:none}ul{--mdc-theme-text-icon-on-background:var(       --icon-color,       rgb(var(--contrast-900))   );margin:var(--list-margin, 0.25rem);border-radius:var(--limel-list-border-radius);padding:0;list-style:none}.mdc-deprecated-list-divider{border-bottom-color:transparent;display:flex;align-items:center;gap:0.75rem;height:auto;padding:0 0.25rem;margin-bottom:0.5rem}.mdc-deprecated-list-divider:not(:first-child){margin-top:0.75rem}:host(.has-striped-rows) .mdc-deprecated-list-divider{margin-top:0.5rem}.limel-list-divider-line{background-color:rgb(var(--contrast-400));height:0.125rem;border-radius:1rem;min-width:1rem;flex-grow:1}.limel-list-divider-title{all:unset;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:rgb(var(--contrast-900));font-size:var(--limel-theme-default-small-font-size)}`;
-
-const { ACTION_EVENT } = strings$2;
-const List = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.change = index.createEvent(this, "change", 7);
-        this.select = index.createEvent(this, "select", 7);
-        this.interact = index.createEvent(this, "interact", 7);
-        /**
-         * Size of the icons in the list
-         */
-        this.iconSize = 'small';
-        /**
-         * By default, lists will display 3 lines of text, and then truncate the rest.
-         * Consumers can increase or decrease this number by specifying
-         * `maxLinesSecondaryText`. If consumer enters zero or negative
-         * numbers we default to 1; and if they type decimals we round up.
-         */
-        this.maxLinesSecondaryText = 3;
-        this.listRenderer = new ListRenderer();
-        this.setup = () => {
-            this.setupList();
-            this.setupListeners();
-        };
-        this.setupList = () => {
-            if (this.mdcList) {
-                this.teardown();
-                this.mdcList = null;
-            }
-            const element = this.element.shadowRoot.querySelector('.mdc-deprecated-list');
-            if (!element) {
-                return;
-            }
-            this.listElement = element;
-            this.listElement.removeEventListener('mousedown', this.handleItemMouseDown);
-            this.listElement.addEventListener('mousedown', this.handleItemMouseDown);
-            this.mdcList = new MDCList(element);
-            // NOTE: This has no effect. It is kept as a marker rather than
-            // removed, so that its absence isn't mistaken for an oversight.
-            //
-            // MDC indexes each row for typeahead by looking for
-            // `.mdc-deprecated-list-item__primary-text` inside it, while
-            // `limel-list-item` renders its label as `<span class="label">`. MDC
-            // therefore builds an empty index, and typing does nothing.
-            //
-            // Do not "fix" this by adding MDC's class name to `limel-list-item`.
-            // That revives MDC's typeahead along with three behaviors that cannot
-            // be configured from the outside: a hard coded 300ms buffer, `Enter`
-            // being ignored for as long as that buffer lives (its `notifyAction`
-            // is guarded by `isTypeaheadInProgress`), and the space bar being
-            // excluded from matches. It would also collide with `limel-menu`,
-            // where single characters are used as item hotkeys.
-            //
-            // `limel-select` implements its own typeahead instead, see
-            // `src/util/typeahead.ts`. It intercepts typed characters in the
-            // capture phase on this very element, so they never reach MDC.
-            this.mdcList.hasTypeahead = true;
-        };
-        /**
-         * Focus the pressed list item directly, without scrolling.
-         *
-         * Since the list uses `delegatesFocus`, pressing a non-focusable part of
-         * a list item (e.g. its text) would otherwise delegate focus to the first
-         * focusable row, scrolling it into view. In a scrolled list that moves the
-         * pressed row out from under the pointer before the click completes, so the
-         * click lands on empty space and no item gets selected.
-         *
-         * Bound to `mousedown` only (not `pointerdown`) so a touch-drag to scroll
-         * that starts on a row is not blocked by `preventDefault`.
-         *
-         * @param event - the mousedown event
-         */
-        this.handleItemMouseDown = (event) => {
-            var _a;
-            const target = event.target;
-            const itemElement = (_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '.mdc-deprecated-list-item');
-            if (!itemElement) {
-                return;
-            }
-            // Suppress the default focus delegation (and its scroll) for any row,
-            // but only move focus to interactive (non-disabled) rows.
-            event.preventDefault();
-            if (!itemElement.classList.contains('mdc-deprecated-list-item--disabled')) {
-                itemElement.focus({ preventScroll: true });
-            }
-        };
-        this.setupListeners = () => {
-            if (!this.mdcList) {
-                return;
+        this.renderListResult = () => {
+            const filteredCompletions = this.filterCompletions(this.getCurrentValue());
+            if (!filteredCompletions || filteredCompletions.length === 0) {
+                return null;
             }
-            this.mdcList.unlisten(ACTION_EVENT, this.handleAction);
-            this.selectable = ['selectable', 'radio', 'checkbox'].includes(this.type);
-            this.multiple = this.type === 'checkbox';
-            if (!this.selectable) {
-                return;
+            return (index.h("limel-list", { onChange: this.handleCompletionChange, onKeyDown: this.handleKeyDownInDropdown, type: "selectable", items: filteredCompletions }));
+        };
+        this.handleKeyDownInDropdown = (event) => {
+            const keyFound = [keycodes.TAB, keycodes.ESCAPE, keycodes.ENTER].includes(event.key);
+            if (keyFound) {
+                this.setFocus();
             }
-            this.mdcList.listen(ACTION_EVENT, this.handleAction);
-            this.mdcList.singleSelection = !this.multiple;
         };
-        this.teardown = () => {
-            var _a, _b, _c;
-            (_a = this.listElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousedown', this.handleItemMouseDown);
-            (_b = this.mdcList) === null || _b === void 0 ? void 0 : _b.unlisten(ACTION_EVENT, this.handleAction);
-            (_c = this.mdcList) === null || _c === void 0 ? void 0 : _c.destroy();
+        this.handleCloseMenu = () => {
+            this.showCompletions = false;
         };
-        this.handleAction = (event) => {
-            if (!this.multiple) {
-                this.handleSingleSelect(event.detail.index);
-                return;
+        this.filterCompletions = (filter) => {
+            if (!filter) {
+                return this.completionsList;
             }
-            this.handleMultiSelect(event.detail.index);
+            return this.completionsList.filter((completion) => completion.text.toLowerCase().includes(filter.toLowerCase()));
         };
-        this.handleSingleSelect = (index) => {
-            const listItems = this.items.filter(this.isListItem);
-            if (listItems[index].disabled) {
-                return;
-            }
-            const selectedItem = listItems.find((item) => {
-                return !!item.selected;
-            });
-            let interactedItem;
-            if (selectedItem) {
-                if (this.type !== 'radio') {
-                    this.mdcList.selectedIndex = -1;
+        this.handleInput = (event) => {
+            event.stopPropagation();
+            let value = event.target.value;
+            if (this.type === 'number') {
+                if (!value && event.data) {
+                    event.stopPropagation();
+                    return;
+                }
+                if (value) {
+                    value = Number(value);
                 }
-                interactedItem = Object.assign(Object.assign({}, selectedItem), { selected: false });
-                this.change.emit(interactedItem);
-            }
-            if (listItems[index] !== selectedItem) {
-                interactedItem = Object.assign(Object.assign({}, listItems[index]), { selected: true });
-                this.change.emit(interactedItem);
             }
-            this.interact.emit(interactedItem);
+            this.changeWaiting = true;
+            this.changeEmitter(value);
         };
-        this.handleMultiSelect = (index) => {
-            const listItems = this.items.filter(this.isListItem);
-            if (listItems[index].disabled) {
-                return;
+        this.changeEmitter = debounce.debounce((value) => {
+            this.change.emit(value);
+            this.changeWaiting = false;
+        }, CHANGE_EVENT_DEBOUNCE_TIMEOUT);
+        this.handleChange = (event) => {
+            event.stopPropagation();
+            this.changeEmitter.flush();
+        };
+        this.handleIconClick = () => {
+            this.action.emit();
+        };
+        this.handleIconKeyPress = (event) => {
+            const isEnter = event.key === keycodes.ENTER;
+            const isSpace = event.key === keycodes.SPACE;
+            if (isSpace || isEnter) {
+                this.action.emit();
             }
-            const selectedItems = listItems
-                .filter((item, listIndex) => {
-                if (listIndex === index) {
-                    // This is the item that was selected or deselected,
-                    // so we negate its previous selection status.
-                    return !item.selected;
-                }
-                // This is an item that didn't change, so we keep its selection status.
-                return item.selected;
-            })
-                .map((item) => {
-                return Object.assign(Object.assign({}, item), { selected: true });
-            });
-            this.change.emit(selectedItems);
-            this.interact.emit(Object.assign({}, selectedItems[index]));
         };
-        this.isListItem = (item) => {
-            return !('separator' in item);
+        this.handleWheel = () => {
+            // This empty event handler is here to circumvent a bug.
+            // In some browsers (Chrome for example), hovering the input with
+            // the input focused, and scrolling, will both change the value
+            // AND scroll the page. We would prefer to never change the value
+            // on scroll, instead always scrolling the page, but since we
+            // haven't found a way to do that, this is the next best thing, as
+            // it prevents the page from being scrolled, but only in the
+            // circumstances when the value is changed by the scrolling.
+            // Please test THOROUGHLY if you remove this event handler 😄
         };
+        this.portalId = randomString.createRandomString();
+        this.helperTextId = randomString.createRandomString();
+        this.labelId = randomString.createRandomString();
     }
     connectedCallback() {
-        this.setup();
+        this.initialize();
+    }
+    componentDidLoad() {
+        this.initialize();
     }
     disconnectedCallback() {
-        this.teardown();
+        if (this.mdcTextField) {
+            this.mdcTextField.destroy();
+        }
+        this.restyleCompletionsDropDown.cancel();
+        window.removeEventListener('resize', this.layout);
+        this.limelInputField.removeEventListener('focus', this.setFocus);
     }
-    componentDidLoad() {
-        this.setup();
-        this.triggerIconColorWarning();
+    componentDidUpdate() {
+        if (this.invalid) {
+            this.mdcTextField.valid = false;
+        }
+        else if (!this.wasInvalid) {
+            // Reset MDC's internal validity once the consumer no longer
+            // considers the field invalid and our own check hasn't
+            // flagged it either.
+            this.mdcTextField.valid = true;
+        }
+        this.mdcTextField.disabled = this.disabled || this.readonly;
     }
-    render() {
-        var _a;
-        this.config = {
-            badgeIcons: this.badgeIcons,
-            type: this.type,
-            iconSize: this.iconSize,
-        };
-        let maxLinesSecondaryText = +((_a = this.maxLinesSecondaryText) === null || _a === void 0 ? void 0 : _a.toFixed());
-        if (this.maxLinesSecondaryText < 1) {
-            maxLinesSecondaryText = 1;
+    /**
+     * Returns the start position of the current text selection.
+     * Returns `null` if the input element is not available or if
+     * the input type does not support selection (e.g., `number`).
+     */
+    async getSelectionStart() {
+        var _a, _b;
+        try {
+            return (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : null;
+        }
+        catch (_c) {
+            // Some input types (e.g., number) throw InvalidStateError
+            return null;
+        }
+    }
+    /**
+     * Returns the end position of the current text selection.
+     * Returns `null` if the input element is not available or if
+     * the input type does not support selection (e.g., `number`).
+     */
+    async getSelectionEnd() {
+        var _a, _b;
+        try {
+            return (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.selectionEnd) !== null && _b !== void 0 ? _b : null;
+        }
+        catch (_c) {
+            // Some input types (e.g., number) throw InvalidStateError
+            return null;
         }
-        const html = this.listRenderer.render(this.items, this.config);
-        return (index.h(index.Host, { key: 'f15badb0936caf891cd8bd272ef5d3224645c3c7', style: {
-                '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
-            } }, html));
     }
-    handleType() {
-        this.setupListeners();
+    /**
+     * Returns the direction of the current text selection.
+     * Can be `'forward'`, `'backward'`, or `'none'`.
+     * Returns `null` if the input element is not available or if
+     * the input type does not support selection (e.g., `number`).
+     */
+    async getSelectionDirection() {
+        var _a, _b;
+        try {
+            return (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.selectionDirection) !== null && _b !== void 0 ? _b : null;
+        }
+        catch (_c) {
+            // Some input types (e.g., number) throw InvalidStateError
+            return null;
+        }
     }
-    itemsChanged() {
-        if (!this.mdcList) {
-            return;
+    render() {
+        const properties = this.getAdditionalProps();
+        properties['aria-labelledby'] = this.labelId;
+        properties.class = 'mdc-text-field__input';
+        properties.ref = this.setInputElement;
+        properties.onInput = this.handleInput;
+        properties.onChange = this.handleChange;
+        properties.onFocus = this.onFocus;
+        properties.onBlur = this.onBlur;
+        properties.required = this.required;
+        properties.readonly = this.readonly;
+        properties.disabled = this.disabled || this.readonly;
+        let ariaControls = '';
+        if (this.hasHelperText()) {
+            ariaControls += this.helperTextId;
+            properties['aria-describedby'] = this.helperTextId;
         }
-        setTimeout(() => {
-            this.setup();
-            const listItems = this.items.filter(this.isListItem);
-            if (this.multiple) {
-                this.mdcList.selectedIndex = listItems
-                    .filter((item) => item.selected)
-                    .map((item) => listItems.indexOf(item));
-            }
-            else {
-                const selectedIndex = listItems.findIndex((item) => item.selected);
-                if (selectedIndex === -1) {
-                    this.mdcList.initializeListType();
-                }
-                else {
-                    this.mdcList.selectedIndex = selectedIndex;
-                }
+        if (this.renderAutocompleteList()) {
+            if (ariaControls) {
+                ariaControls += ' ';
             }
-        }, 0);
+            ariaControls += this.portalId;
+        }
+        if (ariaControls) {
+            properties['aria-controls'] = ariaControls;
+        }
+        return (index.h(index.Host, { key: '9e509e181e05f451deadc92e052dc11075032f9a' }, index.h("limel-notched-outline", { key: '2f2307e2c7d96eec0c5753d27bf1fc76c9ad8eb2', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, index.h("label", { key: 'a21372b10d416423aea6ff9f318bf12ef8d4832a', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
     }
-    triggerIconColorWarning() {
+    valueWatcher(newValue) {
+        if (!this.mdcTextField) {
+            return;
+        }
+        if (this.changeWaiting) {
+            return;
+        }
+        if (this.type === 'number' &&
+            this.isFocused &&
+            Number(newValue) === Number(this.mdcTextField.value)) {
+            return;
+        }
+        if (newValue !== this.mdcTextField.value) {
+            this.mdcTextField.value = newValue || '';
+        }
+        if (this.wasInvalid) {
+            this.validate();
+        }
+    }
+    completionsWatcher() {
+        this.mapCompletions();
+    }
+    get validationMessage() {
         var _a;
-        if ((_a = this.items) === null || _a === void 0 ? void 0 : _a.some((item) => 'iconColor' in item)) {
-            console.warn("The `iconColor` prop is deprecated, has no visual effect anymore, and will soon be removed! Use the new `Icon` interface, and instead of `iconColor: 'color-name'` write `icon: { name: 'icon-name', color: 'color-name' }`.");
+        if (this.isInvalid() && !this.invalid) {
+            return ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.validationMessage) || '';
         }
+        return '';
     }
     static get delegatesFocus() { return true; }
-    get element() { return index.getElement(this); }
+    get limelInputField() { return index.getElement(this); }
     static get watchers() { return {
-        "type": [{
-                "handleType": 0
+        "value": [{
+                "valueWatcher": 0
             }],
-        "items": [{
-                "itemsChanged": 0
+        "completions": [{
+                "completionsWatcher": 0
             }]
     }; }
 };
-List.style = listCss();
+InputField.style = inputFieldCss();
 
 const menuCss = () => `:host(limel-menu){isolation:isolate;position:relative;display:inline-block;--badge-background-color:var(       --notification-badge-background-color,       rgb(var(--color-red-default))   );--badge-text-color:var(       --notification-badge-text-color,       rgb(var(--color-white))   )}:host([hidden]){display:none}.menu__trigger{border-color:transparent;border-width:1px;border-style:solid;background:none;color:rgb(var(--contrast-800));height:2.25rem}.menu__trigger-enabled:hover{border-color:rgb(var(--contrast-800));color:rgb(var(--contrast-1100))}.mdc-menu-surface--anchor{position:relative}limel-badge{position:absolute;top:-0.25rem;right:-0.25rem}`;
 
@@ -4530,11 +2620,11 @@ var MDCMenuFoundation = /** @class */ (function (_super) {
     MDCMenuFoundation.prototype.setEnabled = function (index, isEnabled) {
         this.validatedIndex(index);
         if (isEnabled) {
-            this.adapter.removeClassFromElementAtIndex(index, cssClasses$2.LIST_ITEM_DISABLED_CLASS);
+            this.adapter.removeClassFromElementAtIndex(index, component$1.cssClasses.LIST_ITEM_DISABLED_CLASS);
             this.adapter.addAttributeToElementAtIndex(index, strings.ARIA_DISABLED_ATTR, 'false');
         }
         else {
-            this.adapter.addClassToElementAtIndex(index, cssClasses$2.LIST_ITEM_DISABLED_CLASS);
+            this.adapter.addClassToElementAtIndex(index, component$1.cssClasses.LIST_ITEM_DISABLED_CLASS);
             this.adapter.addAttributeToElementAtIndex(index, strings.ARIA_DISABLED_ATTR, 'true');
         }
     };
@@ -4580,7 +2670,7 @@ var MDCMenu = /** @class */ (function (_super) {
     };
     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); }; }
+        if (listFactory === void 0) { listFactory = function (el) { return new component$1.MDCList(el); }; }
         this.menuSurfaceFactory = menuSurfaceFactory;
         this.listFactory = listFactory;
     };
@@ -4606,7 +2696,7 @@ var MDCMenu = /** @class */ (function (_super) {
         };
         this.menuSurface.listen(MDCMenuSurfaceFoundation.strings.OPENED_EVENT, this.handleMenuSurfaceOpened);
         this.listen('keydown', this.handleKeydown);
-        this.listen(MDCListFoundation.strings.ACTION_EVENT, this.handleItemAction);
+        this.listen(component$1.MDCListFoundation.strings.ACTION_EVENT, this.handleItemAction);
     };
     MDCMenu.prototype.destroy = function () {
         if (this.list) {
@@ -4615,7 +2705,7 @@ var MDCMenu = /** @class */ (function (_super) {
         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);
+        this.unlisten(component$1.MDCListFoundation.strings.ACTION_EVENT, this.handleItemAction);
         _super.prototype.destroy.call(this);
     };
     Object.defineProperty(MDCMenu.prototype, "open", {
@@ -4730,7 +2820,7 @@ var MDCMenu = /** @class */ (function (_super) {
          *     radio lists, and an array of numbers for checkbox lists.
          */
         get: function () {
-            return this.list ? this.list.selectedIndex : numbers$2.UNSET_INDEX;
+            return this.list ? this.list.selectedIndex : component$1.numbers.UNSET_INDEX;
         },
         /**
          * Sets the selected index of the list. Only applicable to select menus.
@@ -5012,7 +3102,7 @@ const MenuList = class {
             this.mdcMenu.wrapFocus = true;
             // eslint-disable-next-line sonarjs/constructor-for-side-effects
             for (const item of this.mdcMenu.items)
-                new component$1.MDCRipple(item);
+                new component$2.MDCRipple(item);
         };
         this.setupListeners = () => {
             if (!this.mdcMenu) {
@@ -5200,70 +3290,6 @@ const MenuSurface = class {
 };
 MenuSurface.style = menuSurfaceCss();
 
-const notchedOutlineCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}limel-notched-outline{--limel-notched-outline-border-color:rgba(var(--contrast-700), 0.65);--limel-notched-outline-background-color:rgba(var(--contrast-200), 0.5);display:block;width:100%;height:fit-content}.limel-notched-outline{position:relative;width:100%;height:100%}.limel-notched-outline [slot=content]{background-color:var(--limel-notched-outline-background-color);border-radius:var(--limel-notched-outline-border-radius, 0.25rem)}.limel-notched-outline--outlines{pointer-events:none;position:absolute;inset:0;z-index:var(--limel-notched-outline-z-index, 0);display:flex}.limel-notched-outline--leading-outline,.limel-notched-outline--notch,.limel-notched-outline--trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-notched-outline-border-color)}.limel-notched-outline--leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:var(--limel-notched-outline-border-radius, 0.25rem);border-bottom-left-radius:var(--limel-notched-outline-border-radius, 0.25rem)}.limel-notched-outline--notch{flex-shrink:0;position:relative;z-index:2;border-top-color:var(--limel-notched-outline-notch-border-top-color, var(--limel-notched-outline-border-color));border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.limel-notched-outline--notch label{all:unset;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;transition:color 0.2s ease, font-size 0.2s ease, transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);transform:translate3d(var(--limel-notched-outline-label-transform-x, 0), var(--limel-notched-outline-label-transform-y, 0.62rem), 0);display:block;padding:0 0.25rem;color:var(--limel-notched-outline-label-color, rgba(var(--contrast-1200), 1));font-size:var(--limel-notched-outline-label-font-size, var(--limel-theme-default-font-size));letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);line-height:normal}.limel-notched-outline--notch label:after{position:absolute;right:0;padding:0 0.25rem}.limel-notched-outline--trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:var(--limel-notched-outline-border-radius, 0.25rem);border-bottom-right-radius:var(--limel-notched-outline-border-radius, 0.25rem)}.limel-notched-outline--empty-readonly-value .lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:var(--limel-theme-default-font-size);font-weight:400;font-family:inherit;letter-spacing:0.009375em}.mdc-text-field--disabled .limel-notched-outline--empty-readonly-value .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.limel-notched-outline--empty-readonly-value{position:absolute;top:0.62rem;left:1rem}limel-notched-outline:not([disabled]:not([disabled=false])):hover{--limel-notched-outline-border-color:rgba(var(--contrast-700), 1);--limel-notched-outline-background-color:rgba(var(--contrast-200), 1)}limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-visible),limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-within){--limel-notched-outline-border-color:var(--lime-primary-color, var(--limel-theme-primary-color));--limel-notched-outline-background-color:rgba(var(--contrast-100), 0.8)}limel-notched-outline[disabled]:not([disabled=false]){--limel-notched-outline-label-color:rgba(var(--contrast-1200), 0.5)}limel-notched-outline[required]:not([required=false]) .limel-notched-outline--notch label{padding-right:0.75rem}limel-notched-outline[required]:not([required=false]) .limel-notched-outline--notch label:after{content:"*";scale:1.3}limel-notched-outline[invalid]:not([invalid=false]):not([disabled]:not([disabled=false])){--limel-notched-outline-border-color:var(       --limel-theme-error-text-color   )}limel-notched-outline[invalid]:not([invalid=false]):not([disabled]:not([disabled=false])):hover{--limel-notched-outline-border-color:var(       --limel-theme-error-color   )}limel-notched-outline[invalid]:not([invalid=false]) .limel-notched-outline--notch label:after{color:var(--limel-theme-error-text-color)}limel-notched-outline[readonly]:not([readonly=false]){--limel-notched-outline-border-color:transparent !important;--limel-notched-outline-background-color:transparent !important}limel-notched-outline[readonly]:not([readonly=false]) .limel-notched-outline--notch label{transition-duration:0s}limel-notched-outline[has-leading-icon]:not([has-leading-icon=false]):not([has-floating-label]):not([has-value]){--limel-notched-outline-label-transform-x:1.25rem}limel-notched-outline[has-leading-icon] .limel-notched-outline--empty-readonly-value{left:2.25rem}limel-notched-outline:not([disabled]:not([disabled=false])):hover label,limel-notched-outline:not([disabled]:not([disabled=false])):focus label,limel-notched-outline:not([disabled]:not([disabled=false])):focus-within label{will-change:color, transform, font-size}limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-visible),limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-within){--limel-notched-outline-label-font-size:0.65rem;--limel-notched-outline-label-transform-x:0;--limel-notched-outline-label-transform-y:calc(-50% - 0.09375rem);--limel-notched-outline-notch-border-top-color:transparent}limel-notched-outline[has-floating-label],limel-notched-outline[has-value]:not([has-value=false]),limel-notched-outline[readonly]:not([has-value]:not([has-value=true])){--limel-notched-outline-label-font-size:0.65rem;--limel-notched-outline-label-transform-x:0;--limel-notched-outline-label-transform-y:calc(-50% - 0.09375rem);--limel-notched-outline-notch-border-top-color:transparent}`;
-
-const NotchedOutline = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * Set to `true` when the input element is required.
-         * This applies proper visual styles, such as inclusion of an asterisk
-         * beside the label.
-         */
-        this.required = false;
-        /**
-         * Set to `true` when the input element is readonly.
-         * This applies proper visual styles, such as making the outline transparent.
-         */
-        this.readonly = false;
-        /**
-         * Set to `true` to indicate that the current value of the input element is
-         * invalid. This applies proper visual styles, such as making the outlines red.
-         */
-        this.invalid = false;
-        /**
-         * Set to `true` to indicate that the input element is
-         * disabled. This applies proper visual styles, such as making the outlines
-         * and the label transparent.
-         */
-        this.disabled = false;
-        /**
-         * Set to `true` when the user has entered a value for the input element,
-         * shrinking the label in size, and visually rendering it above the entered value.
-         */
-        this.hasValue = false;
-        /**
-         * Set to `true` when the consumer element displays a leading icon.
-         * This applies proper visual styles, such as rendering the label
-         * correctly placed beside the leading icon.
-         */
-        this.hasLeadingIcon = false;
-        /**
-         * Set to `true` when the consumer element needs to render the
-         * label above the input element, despite existence of a `value`.
-         * For example in the `text-editor` or `limel-select`,
-         * where the default layout requires a floating label.
-         */
-        this.hasFloatingLabel = false;
-    }
-    render() {
-        return (index.h("div", { key: '928b12e7565dd3a827b29e57dfb94cbd668feb91', class: "limel-notched-outline" }, index.h("slot", { key: 'ae0a6205b1e8aeed3edea040a198ba7faebecc85', name: "content" }), index.h("span", { key: '84b1fd4feb65005eea9280717dd2cb6d74fc513c', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, index.h("span", { key: '4ae9c02d23197109c5ea0721a4f1abfab802822e', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), index.h("span", { key: 'd7b70aa632b22b7b639bf208ea57fd39a82884e3', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
-    }
-    renderLabel() {
-        if (!this.label) {
-            return;
-        }
-        return (index.h("span", { class: "limel-notched-outline--notch" }, index.h("label", { htmlFor: this.labelId }, this.label)));
-    }
-    renderEmptyReadonlyValue() {
-        if (!this.readonly || this.hasValue) {
-            return;
-        }
-        return (index.h("span", { class: "limel-notched-outline--empty-readonly-value", "aria-hidden": "true" }, "\u2013"));
-    }
-};
-NotchedOutline.style = notchedOutlineCss();
-
 const spinnerCss = () => `:host(limel-spinner){display:block}@keyframes spin{50%{transform:rotate(180deg)}100%{transform:rotate(720deg)}}@keyframes fade-in-the-spinner{0%{transform:scale(0.7);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes animate-colored-circles{5%{stroke-dashoffset:0}10%,100%{stroke-dashoffset:63}}:host([hidden]){display:none}:host{box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem;transform:translate3d(0, 0, 0);animation:fade-in-the-spinner 0.5s ease forwards}:host([size=x-small]){height:2rem;width:2rem}:host([size=small]){height:2.125rem;width:2.125rem}:host([size=medium]){height:2.75rem;width:2.75rem}:host([size=large]){height:4rem;width:4rem}.spinner{animation:spin 1s linear infinite;transform-origin:center}.color{animation:animate-colored-circles 10s linear infinite;fill:none;stroke-dasharray:63;stroke-dashoffset:63;stroke-linecap:round;stroke-width:4}.color.thick{stroke-width:10}.color:nth-child(1){stroke:var(--spinner-color-1, rgb(var(--lime-brand-color-lime-green)))}.color:nth-child(2){stroke:var(--spinner-color-2, rgb(var(--lime-brand-color-ocean-teal)));animation-delay:1s}.color:nth-child(3){stroke:var(--spinner-color-3, rgb(var(--lime-brand-color-aqua)));animation-delay:2s}.color:nth-child(4){stroke:var(--spinner-color-4, rgb(var(--lime-brand-color-bubble-gum)));animation-delay:3s}.color:nth-child(5){stroke:var(--spinner-color-5, rgb(var(--lime-brand-color-sunny-orange)));animation-delay:4s}.color:nth-child(6){stroke:var(--spinner-color-6, rgb(var(--lime-brand-color-lime-green)));animation-delay:5s}.color:nth-child(7){stroke:var(--spinner-color-7, rgb(var(--lime-brand-color-ocean-teal)));animation-delay:6s}.color:nth-child(8){stroke:var(--spinner-color-8, rgb(var(--lime-brand-color-aqua)));animation-delay:7s}.color:nth-child(9){stroke:var(--spinner-color-9, rgb(var(--lime-brand-color-bubble-gum)));animation-delay:8s}.color:nth-child(10){stroke:var(--spinner-color-10, rgb(var(--contrast-700)));animation-delay:9s}.outline{stroke:rgba(var(--lime-brand-color-light-grey), 0.3);fill:none;stroke-linecap:round;stroke-width:4}.outline.thick{stroke-width:10}`;
 
 const Spinner = class {
@@ -5292,9 +3318,7 @@ Spinner.style = spinnerCss();
 
 exports.limel_breadcrumbs = Breadcrumbs;
 exports.limel_input_field = InputField;
-exports.limel_list = List;
 exports.limel_menu = Menu;
 exports.limel_menu_list = MenuList;
 exports.limel_menu_surface = MenuSurface;
-exports.limel_notched_outline = NotchedOutline;
 exports.limel_spinner = Spinner;