@limetech/lime-elements 40.6.1 → 40.6.2

package/dist/esm/limel-tab-bar.entry.js

@@ -1,21 +1,22 @@
 import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BU9IJqli.js';
 import { g as getIconName, b as getIconColor } from './get-icon-props-CgNJbSP4.js';
+import { A as ARROW_UP, b as ARROW_DOWN, H as HOME, c as END, d as ARROW_LEFT, e as ARROW_RIGHT } from './keycodes-DQ5DmW_Y.js';
 import { i as isEqual } from './isEqual-CE83yS8T.js';
-import { _ as __extends, a as __assign, f as __read, M as MDCFoundation, c as MDCComponent, m as matches, b as __values } from './ponyfill-ChRGk668.js';
-import { a as applyPassive, b as MDCRippleFoundation, M as MDCRipple } from './component-7QB0OUSF.js';
-import { a as arrayIncludes, b as baseRest, i as isArrayLikeObject, c as baseFlatten, n as noop } from './isArrayLikeObject-tmUOLOWr.js';
+import { M as MDCRipple } from './component-CrjPGt1I.js';
 import { S as SetCache, c as cacheHas } from './_baseIsEqual-CyF4P8uM.js';
-import './identity-CK4jS9_E.js';
-import './_defineProperty-C69Btzid.js';
-import './_getNative-COawFdVX.js';
-import './isFunction-9zQTeQI8.js';
-import './isObject-BJQylLSL.js';
+import { a as arrayIncludes, b as baseRest, i as isArrayLikeObject, c as baseFlatten } from './isArrayLikeObject-CJB8HbtH.js';
+import './ponyfill-6YuZiAPi.js';
+import './eq-CZ30nDJE.js';
 import './_getTag-BiAaLWvH.js';
+import './isObject-BJQylLSL.js';
 import './isObjectLike-oiMYqRQ0.js';
 import './isArrayLike-CyVGB489.js';
+import './isFunction-9zQTeQI8.js';
+import './_getNative-COawFdVX.js';
 import './isArray-B8VKuhvH.js';
-import './eq-CZ30nDJE.js';
 import './_isIndex-B--C3qwe.js';
+import './identity-CK4jS9_E.js';
+import './_defineProperty-C69Btzid.js';
 
 /** Used as the size to enable large array optimizations. */
 var LARGE_ARRAY_SIZE = 200;
@@ -97,1963 +98,172 @@ var difference = baseRest(function(array, values) {
 });
 
 /**
- * @license
- * Copyright 2018 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-var cssClasses$2 = {
-    ANIMATING: 'mdc-tab-scroller--animating',
-    SCROLL_AREA_SCROLL: 'mdc-tab-scroller__scroll-area--scroll',
-    SCROLL_TEST: 'mdc-tab-scroller__test',
-};
-var strings$4 = {
-    AREA_SELECTOR: '.mdc-tab-scroller__scroll-area',
-    CONTENT_SELECTOR: '.mdc-tab-scroller__scroll-content',
-};
-
-/**
- * @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 MDCTabScrollerRTL = /** @class */ (function () {
-    function MDCTabScrollerRTL(adapter) {
-        this.adapter = adapter;
-    }
-    return MDCTabScrollerRTL;
-}());
-
-/**
- * @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 MDCTabScrollerRTLDefault = /** @class */ (function (_super) {
-    __extends(MDCTabScrollerRTLDefault, _super);
-    function MDCTabScrollerRTLDefault() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    MDCTabScrollerRTLDefault.prototype.getScrollPositionRTL = function () {
-        var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
-        var right = this.calculateScrollEdges().right;
-        // Scroll values on most browsers are ints instead of floats so we round
-        return Math.round(right - currentScrollLeft);
-    };
-    MDCTabScrollerRTLDefault.prototype.scrollToRTL = function (scrollX) {
-        var edges = this.calculateScrollEdges();
-        var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
-        var clampedScrollLeft = this.clampScrollValue(edges.right - scrollX);
-        return {
-            finalScrollPosition: clampedScrollLeft,
-            scrollDelta: clampedScrollLeft - currentScrollLeft,
-        };
-    };
-    MDCTabScrollerRTLDefault.prototype.incrementScrollRTL = function (scrollX) {
-        var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
-        var clampedScrollLeft = this.clampScrollValue(currentScrollLeft - scrollX);
-        return {
-            finalScrollPosition: clampedScrollLeft,
-            scrollDelta: clampedScrollLeft - currentScrollLeft,
-        };
-    };
-    MDCTabScrollerRTLDefault.prototype.getAnimatingScrollPosition = function (scrollX) {
-        return scrollX;
-    };
-    MDCTabScrollerRTLDefault.prototype.calculateScrollEdges = function () {
-        var contentWidth = this.adapter.getScrollContentOffsetWidth();
-        var rootWidth = this.adapter.getScrollAreaOffsetWidth();
-        return {
-            left: 0,
-            right: contentWidth - rootWidth,
-        };
-    };
-    MDCTabScrollerRTLDefault.prototype.clampScrollValue = function (scrollX) {
-        var edges = this.calculateScrollEdges();
-        return Math.min(Math.max(edges.left, scrollX), edges.right);
-    };
-    return MDCTabScrollerRTLDefault;
-}(MDCTabScrollerRTL));
-
-/**
- * @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 MDCTabScrollerRTLNegative = /** @class */ (function (_super) {
-    __extends(MDCTabScrollerRTLNegative, _super);
-    function MDCTabScrollerRTLNegative() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    MDCTabScrollerRTLNegative.prototype.getScrollPositionRTL = function (translateX) {
-        var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
-        return Math.round(translateX - currentScrollLeft);
-    };
-    MDCTabScrollerRTLNegative.prototype.scrollToRTL = function (scrollX) {
-        var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
-        var clampedScrollLeft = this.clampScrollValue(-scrollX);
-        return {
-            finalScrollPosition: clampedScrollLeft,
-            scrollDelta: clampedScrollLeft - currentScrollLeft,
-        };
-    };
-    MDCTabScrollerRTLNegative.prototype.incrementScrollRTL = function (scrollX) {
-        var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
-        var clampedScrollLeft = this.clampScrollValue(currentScrollLeft - scrollX);
-        return {
-            finalScrollPosition: clampedScrollLeft,
-            scrollDelta: clampedScrollLeft - currentScrollLeft,
-        };
-    };
-    MDCTabScrollerRTLNegative.prototype.getAnimatingScrollPosition = function (scrollX, translateX) {
-        return scrollX - translateX;
-    };
-    MDCTabScrollerRTLNegative.prototype.calculateScrollEdges = function () {
-        var contentWidth = this.adapter.getScrollContentOffsetWidth();
-        var rootWidth = this.adapter.getScrollAreaOffsetWidth();
-        return {
-            left: rootWidth - contentWidth,
-            right: 0,
-        };
-    };
-    MDCTabScrollerRTLNegative.prototype.clampScrollValue = function (scrollX) {
-        var edges = this.calculateScrollEdges();
-        return Math.max(Math.min(edges.right, scrollX), edges.left);
-    };
-    return MDCTabScrollerRTLNegative;
-}(MDCTabScrollerRTL));
-
-/**
- * @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 MDCTabScrollerRTLReverse = /** @class */ (function (_super) {
-    __extends(MDCTabScrollerRTLReverse, _super);
-    function MDCTabScrollerRTLReverse() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    MDCTabScrollerRTLReverse.prototype.getScrollPositionRTL = function (translateX) {
-        var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
-        // Scroll values on most browsers are ints instead of floats so we round
-        return Math.round(currentScrollLeft - translateX);
-    };
-    MDCTabScrollerRTLReverse.prototype.scrollToRTL = function (scrollX) {
-        var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
-        var clampedScrollLeft = this.clampScrollValue(scrollX);
-        return {
-            finalScrollPosition: clampedScrollLeft,
-            scrollDelta: currentScrollLeft - clampedScrollLeft,
-        };
-    };
-    MDCTabScrollerRTLReverse.prototype.incrementScrollRTL = function (scrollX) {
-        var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
-        var clampedScrollLeft = this.clampScrollValue(currentScrollLeft + scrollX);
-        return {
-            finalScrollPosition: clampedScrollLeft,
-            scrollDelta: currentScrollLeft - clampedScrollLeft,
-        };
-    };
-    MDCTabScrollerRTLReverse.prototype.getAnimatingScrollPosition = function (scrollX, translateX) {
-        return scrollX + translateX;
-    };
-    MDCTabScrollerRTLReverse.prototype.calculateScrollEdges = function () {
-        var contentWidth = this.adapter.getScrollContentOffsetWidth();
-        var rootWidth = this.adapter.getScrollAreaOffsetWidth();
-        return {
-            left: contentWidth - rootWidth,
-            right: 0,
-        };
-    };
-    MDCTabScrollerRTLReverse.prototype.clampScrollValue = function (scrollX) {
-        var edges = this.calculateScrollEdges();
-        return Math.min(Math.max(edges.right, scrollX), edges.left);
-    };
-    return MDCTabScrollerRTLReverse;
-}(MDCTabScrollerRTL));
-
-/**
- * @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 MDCTabScrollerFoundation = /** @class */ (function (_super) {
-    __extends(MDCTabScrollerFoundation, _super);
-    function MDCTabScrollerFoundation(adapter) {
-        var _this = _super.call(this, __assign(__assign({}, MDCTabScrollerFoundation.defaultAdapter), adapter)) || this;
-        /**
-         * Controls whether we should handle the transitionend and interaction events during the animation.
-         */
-        _this.isAnimating = false;
-        return _this;
-    }
-    Object.defineProperty(MDCTabScrollerFoundation, "cssClasses", {
-        get: function () {
-            return cssClasses$2;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCTabScrollerFoundation, "strings", {
-        get: function () {
-            return strings$4;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCTabScrollerFoundation, "defaultAdapter", {
-        get: function () {
-            // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
-            return {
-                eventTargetMatchesSelector: function () { return false; },
-                addClass: function () { return undefined; },
-                removeClass: function () { return undefined; },
-                addScrollAreaClass: function () { return undefined; },
-                setScrollAreaStyleProperty: function () { return undefined; },
-                setScrollContentStyleProperty: function () { return undefined; },
-                getScrollContentStyleValue: function () { return ''; },
-                setScrollAreaScrollLeft: function () { return undefined; },
-                getScrollAreaScrollLeft: function () { return 0; },
-                getScrollContentOffsetWidth: function () { return 0; },
-                getScrollAreaOffsetWidth: function () { return 0; },
-                computeScrollAreaClientRect: function () {
-                    return ({ top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 });
-                },
-                computeScrollContentClientRect: function () {
-                    return ({ top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 });
-                },
-                computeHorizontalScrollbarHeight: function () { return 0; },
-            };
-            // tslint:enable:object-literal-sort-keys
-        },
-        enumerable: false,
-        configurable: true
-    });
-    MDCTabScrollerFoundation.prototype.init = function () {
-        // Compute horizontal scrollbar height on scroller with overflow initially hidden, then update overflow to scroll
-        // and immediately adjust bottom margin to avoid the scrollbar initially appearing before JS runs.
-        var horizontalScrollbarHeight = this.adapter.computeHorizontalScrollbarHeight();
-        this.adapter.setScrollAreaStyleProperty('margin-bottom', -horizontalScrollbarHeight + 'px');
-        this.adapter.addScrollAreaClass(MDCTabScrollerFoundation.cssClasses.SCROLL_AREA_SCROLL);
-    };
-    /**
-     * Computes the current visual scroll position
-     */
-    MDCTabScrollerFoundation.prototype.getScrollPosition = function () {
-        if (this.isRTL()) {
-            return this.computeCurrentScrollPositionRTL();
-        }
-        var currentTranslateX = this.calculateCurrentTranslateX();
-        var scrollLeft = this.adapter.getScrollAreaScrollLeft();
-        return scrollLeft - currentTranslateX;
-    };
-    /**
-     * Handles interaction events that occur during transition
-     */
-    MDCTabScrollerFoundation.prototype.handleInteraction = function () {
-        // Early exit if we aren't animating
-        if (!this.isAnimating) {
-            return;
-        }
-        // Prevent other event listeners from handling this event
-        this.stopScrollAnimation();
-    };
-    /**
-     * Handles the transitionend event
-     */
-    MDCTabScrollerFoundation.prototype.handleTransitionEnd = function (evt) {
-        // Early exit if we aren't animating or the event was triggered by a different element.
-        var evtTarget = evt.target;
-        if (!this.isAnimating ||
-            !this.adapter.eventTargetMatchesSelector(evtTarget, MDCTabScrollerFoundation.strings.CONTENT_SELECTOR)) {
-            return;
-        }
-        this.isAnimating = false;
-        this.adapter.removeClass(MDCTabScrollerFoundation.cssClasses.ANIMATING);
-    };
-    /**
-     * Increment the scroll value by the scrollXIncrement using animation.
-     * @param scrollXIncrement The value by which to increment the scroll position
-     */
-    MDCTabScrollerFoundation.prototype.incrementScroll = function (scrollXIncrement) {
-        // Early exit for non-operational increment values
-        if (scrollXIncrement === 0) {
-            return;
-        }
-        this.animate(this.getIncrementScrollOperation(scrollXIncrement));
-    };
-    /**
-     * Increment the scroll value by the scrollXIncrement without animation.
-     * @param scrollXIncrement The value by which to increment the scroll position
-     */
-    MDCTabScrollerFoundation.prototype.incrementScrollImmediate = function (scrollXIncrement) {
-        // Early exit for non-operational increment values
-        if (scrollXIncrement === 0) {
-            return;
-        }
-        var operation = this.getIncrementScrollOperation(scrollXIncrement);
-        if (operation.scrollDelta === 0) {
-            return;
-        }
-        this.stopScrollAnimation();
-        this.adapter.setScrollAreaScrollLeft(operation.finalScrollPosition);
-    };
-    /**
-     * Scrolls to the given scrollX value
-     */
-    MDCTabScrollerFoundation.prototype.scrollTo = function (scrollX) {
-        if (this.isRTL()) {
-            this.scrollToImplRTL(scrollX);
-            return;
-        }
-        this.scrollToImpl(scrollX);
-    };
-    /**
-     * @return Browser-specific {@link MDCTabScrollerRTL} instance.
-     */
-    MDCTabScrollerFoundation.prototype.getRTLScroller = function () {
-        if (!this.rtlScrollerInstance) {
-            this.rtlScrollerInstance = this.rtlScrollerFactory();
-        }
-        return this.rtlScrollerInstance;
-    };
-    /**
-     * @return translateX value from a CSS matrix transform function string.
-     */
-    MDCTabScrollerFoundation.prototype.calculateCurrentTranslateX = function () {
-        var transformValue = this.adapter.getScrollContentStyleValue('transform');
-        // Early exit if no transform is present
-        if (transformValue === 'none') {
-            return 0;
-        }
-        // The transform value comes back as a matrix transformation in the form
-        // of `matrix(a, b, c, d, tx, ty)`. We only care about tx (translateX) so
-        // we're going to grab all the parenthesized values, strip out tx, and
-        // parse it.
-        var match = /\((.+?)\)/.exec(transformValue);
-        if (!match) {
-            return 0;
-        }
-        var matrixParams = match[1];
-        // tslint:disable-next-line:ban-ts-ignore "Unused vars" should be a linter warning, not a compiler error.
-        // @ts-ignore These unused variables should retain their semantic names for clarity.
-        var _a = __read(matrixParams.split(','), 6), tx = _a[4];
-        return parseFloat(tx); // tslint:disable-line:ban
-    };
-    /**
-     * Calculates a safe scroll value that is > 0 and < the max scroll value
-     * @param scrollX The distance to scroll
-     */
-    MDCTabScrollerFoundation.prototype.clampScrollValue = function (scrollX) {
-        var edges = this.calculateScrollEdges();
-        return Math.min(Math.max(edges.left, scrollX), edges.right);
-    };
-    MDCTabScrollerFoundation.prototype.computeCurrentScrollPositionRTL = function () {
-        var translateX = this.calculateCurrentTranslateX();
-        return this.getRTLScroller().getScrollPositionRTL(translateX);
-    };
-    MDCTabScrollerFoundation.prototype.calculateScrollEdges = function () {
-        var contentWidth = this.adapter.getScrollContentOffsetWidth();
-        var rootWidth = this.adapter.getScrollAreaOffsetWidth();
-        return {
-            left: 0,
-            right: contentWidth - rootWidth,
-        };
-    };
-    /**
-     * Internal scroll method
-     * @param scrollX The new scroll position
-     */
-    MDCTabScrollerFoundation.prototype.scrollToImpl = function (scrollX) {
-        var currentScrollX = this.getScrollPosition();
-        var safeScrollX = this.clampScrollValue(scrollX);
-        var scrollDelta = safeScrollX - currentScrollX;
-        this.animate({
-            finalScrollPosition: safeScrollX,
-            scrollDelta: scrollDelta,
-        });
-    };
-    /**
-     * Internal RTL scroll method
-     * @param scrollX The new scroll position
-     */
-    MDCTabScrollerFoundation.prototype.scrollToImplRTL = function (scrollX) {
-        var animation = this.getRTLScroller().scrollToRTL(scrollX);
-        this.animate(animation);
-    };
-    /**
-     * Internal method to compute the increment scroll operation values.
-     * @param scrollX The desired scroll position increment
-     * @return MDCTabScrollerAnimation with the sanitized values for performing the scroll operation.
-     */
-    MDCTabScrollerFoundation.prototype.getIncrementScrollOperation = function (scrollX) {
-        if (this.isRTL()) {
-            return this.getRTLScroller().incrementScrollRTL(scrollX);
-        }
-        var currentScrollX = this.getScrollPosition();
-        var targetScrollX = scrollX + currentScrollX;
-        var safeScrollX = this.clampScrollValue(targetScrollX);
-        var scrollDelta = safeScrollX - currentScrollX;
-        return {
-            finalScrollPosition: safeScrollX,
-            scrollDelta: scrollDelta,
-        };
-    };
-    /**
-     * Animates the tab scrolling
-     * @param animation The animation to apply
-     */
-    MDCTabScrollerFoundation.prototype.animate = function (animation) {
-        var _this = this;
-        // Early exit if translateX is 0, which means there's no animation to perform
-        if (animation.scrollDelta === 0) {
-            return;
-        }
-        this.stopScrollAnimation();
-        // This animation uses the FLIP approach.
-        // Read more here: https://aerotwist.com/blog/flip-your-animations/
-        this.adapter.setScrollAreaScrollLeft(animation.finalScrollPosition);
-        this.adapter.setScrollContentStyleProperty('transform', "translateX(" + animation.scrollDelta + "px)");
-        // Force repaint
-        this.adapter.computeScrollAreaClientRect();
-        requestAnimationFrame(function () {
-            _this.adapter.addClass(MDCTabScrollerFoundation.cssClasses.ANIMATING);
-            _this.adapter.setScrollContentStyleProperty('transform', 'none');
-        });
-        this.isAnimating = true;
-    };
-    /**
-     * Stops scroll animation
-     */
-    MDCTabScrollerFoundation.prototype.stopScrollAnimation = function () {
-        this.isAnimating = false;
-        var currentScrollPosition = this.getAnimatingScrollPosition();
-        this.adapter.removeClass(MDCTabScrollerFoundation.cssClasses.ANIMATING);
-        this.adapter.setScrollContentStyleProperty('transform', 'translateX(0px)');
-        this.adapter.setScrollAreaScrollLeft(currentScrollPosition);
-    };
-    /**
-     * Gets the current scroll position during animation
-     */
-    MDCTabScrollerFoundation.prototype.getAnimatingScrollPosition = function () {
-        var currentTranslateX = this.calculateCurrentTranslateX();
-        var scrollLeft = this.adapter.getScrollAreaScrollLeft();
-        if (this.isRTL()) {
-            return this.getRTLScroller().getAnimatingScrollPosition(scrollLeft, currentTranslateX);
-        }
-        return scrollLeft - currentTranslateX;
-    };
-    /**
-     * Determines the RTL Scroller to use
-     */
-    MDCTabScrollerFoundation.prototype.rtlScrollerFactory = function () {
-        // Browsers have three different implementations of scrollLeft in RTL mode,
-        // dependent on the browser. The behavior is based off the max LTR
-        // scrollLeft value and 0.
-        //
-        // * Default scrolling in RTL *
-        //    - Left-most value: 0
-        //    - Right-most value: Max LTR scrollLeft value
-        //
-        // * Negative scrolling in RTL *
-        //    - Left-most value: Negated max LTR scrollLeft value
-        //    - Right-most value: 0
-        //
-        // * Reverse scrolling in RTL *
-        //    - Left-most value: Max LTR scrollLeft value
-        //    - Right-most value: 0
-        //
-        // We use those principles below to determine which RTL scrollLeft
-        // behavior is implemented in the current browser.
-        var initialScrollLeft = this.adapter.getScrollAreaScrollLeft();
-        this.adapter.setScrollAreaScrollLeft(initialScrollLeft - 1);
-        var newScrollLeft = this.adapter.getScrollAreaScrollLeft();
-        // If the newScrollLeft value is negative,then we know that the browser has
-        // implemented negative RTL scrolling, since all other implementations have
-        // only positive values.
-        if (newScrollLeft < 0) {
-            // Undo the scrollLeft test check
-            this.adapter.setScrollAreaScrollLeft(initialScrollLeft);
-            return new MDCTabScrollerRTLNegative(this.adapter);
-        }
-        var rootClientRect = this.adapter.computeScrollAreaClientRect();
-        var contentClientRect = this.adapter.computeScrollContentClientRect();
-        var rightEdgeDelta = Math.round(contentClientRect.right - rootClientRect.right);
-        // Undo the scrollLeft test check
-        this.adapter.setScrollAreaScrollLeft(initialScrollLeft);
-        // By calculating the clientRect of the root element and the clientRect of
-        // the content element, we can determine how much the scroll value changed
-        // when we performed the scrollLeft subtraction above.
-        if (rightEdgeDelta === newScrollLeft) {
-            return new MDCTabScrollerRTLReverse(this.adapter);
-        }
-        return new MDCTabScrollerRTLDefault(this.adapter);
-    };
-    MDCTabScrollerFoundation.prototype.isRTL = function () {
-        return this.adapter.getScrollContentStyleValue('direction') === 'rtl';
-    };
-    return MDCTabScrollerFoundation;
-}(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.
+ * Set a tabs `active` state to true in a list of tabs. The previous tab with
+ * `active` set to true will have it set to `false` instead.
  *
- * 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.
- */
-/**
- * Stores result from computeHorizontalScrollbarHeight to avoid redundant processing.
- */
-var horizontalScrollbarHeight_;
-/**
- * Computes the height of browser-rendered horizontal scrollbars using a self-created test element.
- * May return 0 (e.g. on OS X browsers under default configuration).
+ * @param tabs - list of tabs
+ * @param index - the index of the tab to set to active
+ * @returns a copy of the list of tabs with the changed tabs replaced
  */
-function computeHorizontalScrollbarHeight(documentObj, shouldCacheResult) {
-    if (shouldCacheResult === void 0) { shouldCacheResult = true; }
-    if (shouldCacheResult && typeof horizontalScrollbarHeight_ !== 'undefined') {
-        return horizontalScrollbarHeight_;
-    }
-    var el = documentObj.createElement('div');
-    el.classList.add(cssClasses$2.SCROLL_TEST);
-    documentObj.body.appendChild(el);
-    var horizontalScrollbarHeight = el.offsetHeight - el.clientHeight;
-    documentObj.body.removeChild(el);
-    if (shouldCacheResult) {
-        horizontalScrollbarHeight_ = horizontalScrollbarHeight;
+function setActiveTab(tabs, index) {
+    const oldSelectedTabIndex = tabs.findIndex((t) => t.active === true);
+    const result = [...tabs];
+    if (oldSelectedTabIndex !== -1) {
+        result[oldSelectedTabIndex] = Object.assign(Object.assign({}, tabs[oldSelectedTabIndex]), { active: false });
     }
-    return horizontalScrollbarHeight;
+    result[index] = Object.assign(Object.assign({}, tabs[index]), { active: true });
+    return result;
 }
 
 /**
- * @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 MDCTabScroller = /** @class */ (function (_super) {
-    __extends(MDCTabScroller, _super);
-    function MDCTabScroller() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    MDCTabScroller.attachTo = function (root) {
-        return new MDCTabScroller(root);
-    };
-    // initialSyncWithDOM()
-    MDCTabScroller.prototype.initialize = function () {
-        this.area = this.root.querySelector(MDCTabScrollerFoundation.strings.AREA_SELECTOR);
-        this.content = this.root.querySelector(MDCTabScrollerFoundation.strings.CONTENT_SELECTOR);
-    };
-    MDCTabScroller.prototype.initialSyncWithDOM = function () {
-        var _this = this;
-        this.handleInteraction = function () {
-            _this.foundation.handleInteraction();
-        };
-        this.handleTransitionEnd = function (evt) {
-            _this.foundation.handleTransitionEnd(evt);
-        };
-        this.area.addEventListener('wheel', this.handleInteraction, applyPassive());
-        this.area.addEventListener('touchstart', this.handleInteraction, applyPassive());
-        this.area.addEventListener('pointerdown', this.handleInteraction, applyPassive());
-        this.area.addEventListener('mousedown', this.handleInteraction, applyPassive());
-        this.area.addEventListener('keydown', this.handleInteraction, applyPassive());
-        this.content.addEventListener('transitionend', this.handleTransitionEnd);
-    };
-    MDCTabScroller.prototype.destroy = function () {
-        _super.prototype.destroy.call(this);
-        this.area.removeEventListener('wheel', this.handleInteraction, applyPassive());
-        this.area.removeEventListener('touchstart', this.handleInteraction, applyPassive());
-        this.area.removeEventListener('pointerdown', this.handleInteraction, applyPassive());
-        this.area.removeEventListener('mousedown', this.handleInteraction, applyPassive());
-        this.area.removeEventListener('keydown', this.handleInteraction, applyPassive());
-        this.content.removeEventListener('transitionend', this.handleTransitionEnd);
-    };
-    MDCTabScroller.prototype.getDefaultFoundation = function () {
-        var _this = this;
-        // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
-        // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
-        // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
-        var adapter = {
-            eventTargetMatchesSelector: function (evtTarget, selector) {
-                return matches(evtTarget, selector);
-            },
-            addClass: function (className) {
-                _this.root.classList.add(className);
-            },
-            removeClass: function (className) {
-                _this.root.classList.remove(className);
-            },
-            addScrollAreaClass: function (className) {
-                _this.area.classList.add(className);
-            },
-            setScrollAreaStyleProperty: function (prop, value) {
-                _this.area.style.setProperty(prop, value);
-            },
-            setScrollContentStyleProperty: function (prop, value) {
-                _this.content.style.setProperty(prop, value);
-            },
-            getScrollContentStyleValue: function (propName) {
-                return window.getComputedStyle(_this.content).getPropertyValue(propName);
-            },
-            setScrollAreaScrollLeft: function (scrollX) { return _this.area.scrollLeft = scrollX; },
-            getScrollAreaScrollLeft: function () { return _this.area.scrollLeft; },
-            getScrollContentOffsetWidth: function () { return _this.content.offsetWidth; },
-            getScrollAreaOffsetWidth: function () { return _this.area.offsetWidth; },
-            computeScrollAreaClientRect: function () { return _this.area.getBoundingClientRect(); },
-            computeScrollContentClientRect: function () {
-                return _this.content.getBoundingClientRect();
-            },
-            computeHorizontalScrollbarHeight: function () {
-                return computeHorizontalScrollbarHeight(document);
-            },
-        };
-        // tslint:enable:object-literal-sort-keys
-        return new MDCTabScrollerFoundation(adapter);
-    };
-    /**
-     * Returns the current visual scroll position
-     */
-    MDCTabScroller.prototype.getScrollPosition = function () {
-        return this.foundation.getScrollPosition();
-    };
-    /**
-     * Returns the width of the scroll content
-     */
-    MDCTabScroller.prototype.getScrollContentWidth = function () {
-        return this.content.offsetWidth;
-    };
-    /**
-     * Increments the scroll value by the given amount
-     * @param scrollXIncrement The pixel value by which to increment the scroll value
-     */
-    MDCTabScroller.prototype.incrementScroll = function (scrollXIncrement) {
-        this.foundation.incrementScroll(scrollXIncrement);
-    };
-    /**
-     * Scrolls to the given pixel position
-     * @param scrollX The pixel value to scroll to
-     */
-    MDCTabScroller.prototype.scrollTo = function (scrollX) {
-        this.foundation.scrollTo(scrollX);
-    };
-    return MDCTabScroller;
-}(MDCComponent));
-
-/**
- * @license
- * Copyright 2018 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
+ * Returned when there is no item to move to.
  */
-var cssClasses$1 = {
-    ACTIVE: 'mdc-tab-indicator--active',
-    FADE: 'mdc-tab-indicator--fade',
-    NO_TRANSITION: 'mdc-tab-indicator--no-transition',
-};
-var strings$3 = {
-    CONTENT_SELECTOR: '.mdc-tab-indicator__content',
+const NO_NAVIGATION_TARGET = -1;
+const MOVES = {
+    horizontal: new Map([
+        [ARROW_LEFT, 'previous'],
+        [ARROW_RIGHT, 'next'],
+        [HOME, 'first'],
+        [END, 'last'],
+    ]),
+    vertical: new Map([
+        [ARROW_UP, 'previous'],
+        [ARROW_DOWN, 'next'],
+        [HOME, 'first'],
+        [END, 'last'],
+    ]),
 };
-
-/**
- * @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 MDCTabIndicatorFoundation = /** @class */ (function (_super) {
-    __extends(MDCTabIndicatorFoundation, _super);
-    function MDCTabIndicatorFoundation(adapter) {
-        return _super.call(this, __assign(__assign({}, MDCTabIndicatorFoundation.defaultAdapter), adapter)) || this;
-    }
-    Object.defineProperty(MDCTabIndicatorFoundation, "cssClasses", {
-        get: function () {
-            return cssClasses$1;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCTabIndicatorFoundation, "strings", {
-        get: function () {
-            return strings$3;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCTabIndicatorFoundation, "defaultAdapter", {
-        get: function () {
-            // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
-            return {
-                addClass: function () { return undefined; },
-                removeClass: function () { return undefined; },
-                computeContentClientRect: function () {
-                    return ({ top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 });
-                },
-                setContentStyleProperty: function () { return undefined; },
-            };
-            // tslint:enable:object-literal-sort-keys
-        },
-        enumerable: false,
-        configurable: true
-    });
-    MDCTabIndicatorFoundation.prototype.computeContentClientRect = function () {
-        return this.adapter.computeContentClientRect();
-    };
-    return MDCTabIndicatorFoundation;
-}(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.
- */
-/* istanbul ignore next: subclass is not a branch statement */
-var MDCFadingTabIndicatorFoundation = /** @class */ (function (_super) {
-    __extends(MDCFadingTabIndicatorFoundation, _super);
-    function MDCFadingTabIndicatorFoundation() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    MDCFadingTabIndicatorFoundation.prototype.activate = function () {
-        this.adapter.addClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);
-    };
-    MDCFadingTabIndicatorFoundation.prototype.deactivate = function () {
-        this.adapter.removeClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);
-    };
-    return MDCFadingTabIndicatorFoundation;
-}(MDCTabIndicatorFoundation));
-
-/**
- * @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.
- */
-/* istanbul ignore next: subclass is not a branch statement */
-var MDCSlidingTabIndicatorFoundation = /** @class */ (function (_super) {
-    __extends(MDCSlidingTabIndicatorFoundation, _super);
-    function MDCSlidingTabIndicatorFoundation() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    MDCSlidingTabIndicatorFoundation.prototype.activate = function (previousIndicatorClientRect) {
-        // Early exit if no indicator is present to handle cases where an indicator
-        // may be activated without a prior indicator state
-        if (!previousIndicatorClientRect) {
-            this.adapter.addClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);
-            return;
-        }
-        // This animation uses the FLIP approach. You can read more about it at the link below:
-        // https://aerotwist.com/blog/flip-your-animations/
-        // Calculate the dimensions based on the dimensions of the previous indicator
-        var currentClientRect = this.computeContentClientRect();
-        var widthDelta = previousIndicatorClientRect.width / currentClientRect.width;
-        var xPosition = previousIndicatorClientRect.left - currentClientRect.left;
-        this.adapter.addClass(MDCTabIndicatorFoundation.cssClasses.NO_TRANSITION);
-        this.adapter.setContentStyleProperty('transform', "translateX(" + xPosition + "px) scaleX(" + widthDelta + ")");
-        // Force repaint before updating classes and transform to ensure the transform properly takes effect
-        this.computeContentClientRect();
-        this.adapter.removeClass(MDCTabIndicatorFoundation.cssClasses.NO_TRANSITION);
-        this.adapter.addClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);
-        this.adapter.setContentStyleProperty('transform', '');
-    };
-    MDCSlidingTabIndicatorFoundation.prototype.deactivate = function () {
-        this.adapter.removeClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);
-    };
-    return MDCSlidingTabIndicatorFoundation;
-}(MDCTabIndicatorFoundation));
-
 /**
- * @license
- * Copyright 2018 Google Inc.
+ * Whether a keyboard event is one that moves between the items: an arrow key
+ * that goes along the orientation, or Home or End.
  *
- * 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:
+ * A key that is pressed with Alt, Ctrl or Cmd is not, since the browser puts
+ * those to its own use, such as going back with Alt and the left arrow. Shift
+ * is allowed.
  *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+ * When this returns `true`, the component should prevent the default action
+ * of the event, so that the page does not scroll. Also when there turns out to
+ * be nowhere to move to.
  *
- * 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.
+ * @param event - the keyboard event to inspect
+ * @param options - the same options that are used to move between the items.
+ * Only the orientation matters here.
+ * @returns `true` when the event is for moving between the items
  */
-var MDCTabIndicator = /** @class */ (function (_super) {
-    __extends(MDCTabIndicator, _super);
-    function MDCTabIndicator() {
-        return _super !== null && _super.apply(this, arguments) || this;
+function isNavigationKey(event, options) {
+    if (event.altKey || event.ctrlKey || event.metaKey) {
+        return false;
     }
-    MDCTabIndicator.attachTo = function (root) {
-        return new MDCTabIndicator(root);
-    };
-    MDCTabIndicator.prototype.initialize = function () {
-        this.content = this.root.querySelector(MDCTabIndicatorFoundation.strings.CONTENT_SELECTOR);
-    };
-    MDCTabIndicator.prototype.computeContentClientRect = function () {
-        return this.foundation.computeContentClientRect();
-    };
-    MDCTabIndicator.prototype.getDefaultFoundation = function () {
-        var _this = this;
-        // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
-        // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
-        // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
-        var adapter = {
-            addClass: function (className) { return _this.root.classList.add(className); },
-            removeClass: function (className) { return _this.root.classList.remove(className); },
-            computeContentClientRect: function () { return _this.content.getBoundingClientRect(); },
-            setContentStyleProperty: function (prop, value) {
-                _this.content.style.setProperty(prop, value);
-            },
-        };
-        // tslint:enable:object-literal-sort-keys
-        if (this.root.classList.contains(MDCTabIndicatorFoundation.cssClasses.FADE)) {
-            return new MDCFadingTabIndicatorFoundation(adapter);
-        }
-        // Default to the sliding indicator
-        return new MDCSlidingTabIndicatorFoundation(adapter);
-    };
-    MDCTabIndicator.prototype.activate = function (previousIndicatorClientRect) {
-        this.foundation.activate(previousIndicatorClientRect);
-    };
-    MDCTabIndicator.prototype.deactivate = function () {
-        this.foundation.deactivate();
-    };
-    return MDCTabIndicator;
-}(MDCComponent));
-
-/**
- * @license
- * Copyright 2018 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-var cssClasses = {
-    ACTIVE: 'mdc-tab--active',
-};
-var strings$2 = {
-    ARIA_SELECTED: 'aria-selected',
-    CONTENT_SELECTOR: '.mdc-tab__content',
-    INTERACTED_EVENT: 'MDCTab:interacted',
-    RIPPLE_SELECTOR: '.mdc-tab__ripple',
-    TABINDEX: 'tabIndex',
-    TAB_INDICATOR_SELECTOR: '.mdc-tab-indicator',
-};
-
-/**
- * @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 MDCTabFoundation = /** @class */ (function (_super) {
-    __extends(MDCTabFoundation, _super);
-    function MDCTabFoundation(adapter) {
-        var _this = _super.call(this, __assign(__assign({}, MDCTabFoundation.defaultAdapter), adapter)) || this;
-        _this.focusOnActivate = true;
-        return _this;
-    }
-    Object.defineProperty(MDCTabFoundation, "cssClasses", {
-        get: function () {
-            return cssClasses;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCTabFoundation, "strings", {
-        get: function () {
-            return strings$2;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCTabFoundation, "defaultAdapter", {
-        get: function () {
-            // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
-            return {
-                addClass: function () { return undefined; },
-                removeClass: function () { return undefined; },
-                hasClass: function () { return false; },
-                setAttr: function () { return undefined; },
-                activateIndicator: function () { return undefined; },
-                deactivateIndicator: function () { return undefined; },
-                notifyInteracted: function () { return undefined; },
-                getOffsetLeft: function () { return 0; },
-                getOffsetWidth: function () { return 0; },
-                getContentOffsetLeft: function () { return 0; },
-                getContentOffsetWidth: function () { return 0; },
-                focus: function () { return undefined; },
-            };
-            // tslint:enable:object-literal-sort-keys
-        },
-        enumerable: false,
-        configurable: true
-    });
-    MDCTabFoundation.prototype.handleClick = function () {
-        // It's up to the parent component to keep track of the active Tab and
-        // ensure we don't activate a Tab that's already active.
-        this.adapter.notifyInteracted();
-    };
-    MDCTabFoundation.prototype.isActive = function () {
-        return this.adapter.hasClass(cssClasses.ACTIVE);
-    };
-    /**
-     * Sets whether the tab should focus itself when activated
-     */
-    MDCTabFoundation.prototype.setFocusOnActivate = function (focusOnActivate) {
-        this.focusOnActivate = focusOnActivate;
-    };
-    /**
-     * Activates the Tab
-     */
-    MDCTabFoundation.prototype.activate = function (previousIndicatorClientRect) {
-        this.adapter.addClass(cssClasses.ACTIVE);
-        this.adapter.setAttr(strings$2.ARIA_SELECTED, 'true');
-        this.adapter.setAttr(strings$2.TABINDEX, '0');
-        this.adapter.activateIndicator(previousIndicatorClientRect);
-        if (this.focusOnActivate) {
-            this.adapter.focus();
-        }
-    };
-    /**
-     * Deactivates the Tab
-     */
-    MDCTabFoundation.prototype.deactivate = function () {
-        // Early exit
-        if (!this.isActive()) {
-            return;
-        }
-        this.adapter.removeClass(cssClasses.ACTIVE);
-        this.adapter.setAttr(strings$2.ARIA_SELECTED, 'false');
-        this.adapter.setAttr(strings$2.TABINDEX, '-1');
-        this.adapter.deactivateIndicator();
-    };
-    /**
-     * Returns the dimensions of the Tab
-     */
-    MDCTabFoundation.prototype.computeDimensions = function () {
-        var rootWidth = this.adapter.getOffsetWidth();
-        var rootLeft = this.adapter.getOffsetLeft();
-        var contentWidth = this.adapter.getContentOffsetWidth();
-        var contentLeft = this.adapter.getContentOffsetLeft();
-        return {
-            contentLeft: rootLeft + contentLeft,
-            contentRight: rootLeft + contentLeft + contentWidth,
-            rootLeft: rootLeft,
-            rootRight: rootLeft + rootWidth,
-        };
-    };
-    return MDCTabFoundation;
-}(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 MDCTab = /** @class */ (function (_super) {
-    __extends(MDCTab, _super);
-    function MDCTab() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    MDCTab.attachTo = function (root) {
-        return new MDCTab(root);
-    };
-    MDCTab.prototype.initialize = function (rippleFactory, tabIndicatorFactory) {
-        if (rippleFactory === void 0) { rippleFactory = function (el, foundation) { return new MDCRipple(el, foundation); }; }
-        if (tabIndicatorFactory === void 0) { tabIndicatorFactory = function (el) { return new MDCTabIndicator(el); }; }
-        this.id = this.root.id;
-        var rippleFoundation = new MDCRippleFoundation(MDCRipple.createAdapter(this));
-        this.ripple = rippleFactory(this.root, rippleFoundation);
-        var tabIndicatorElement = this.root.querySelector(MDCTabFoundation.strings.TAB_INDICATOR_SELECTOR);
-        this.tabIndicator = tabIndicatorFactory(tabIndicatorElement);
-        this.content = this.root.querySelector(MDCTabFoundation.strings.CONTENT_SELECTOR);
-    };
-    MDCTab.prototype.initialSyncWithDOM = function () {
-        var _this = this;
-        this.handleClick = function () {
-            _this.foundation.handleClick();
-        };
-        this.listen('click', this.handleClick);
-    };
-    MDCTab.prototype.destroy = function () {
-        this.unlisten('click', this.handleClick);
-        this.ripple.destroy();
-        _super.prototype.destroy.call(this);
-    };
-    MDCTab.prototype.getDefaultFoundation = function () {
-        var _this = this;
-        // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
-        // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
-        // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
-        var adapter = {
-            setAttr: function (attr, value) { return _this.root.setAttribute(attr, value); },
-            addClass: function (className) { return _this.root.classList.add(className); },
-            removeClass: function (className) { return _this.root.classList.remove(className); },
-            hasClass: function (className) { return _this.root.classList.contains(className); },
-            activateIndicator: function (previousIndicatorClientRect) {
-                _this.tabIndicator.activate(previousIndicatorClientRect);
-            },
-            deactivateIndicator: function () {
-                _this.tabIndicator.deactivate();
-            },
-            notifyInteracted: function () { return _this.emit(MDCTabFoundation.strings.INTERACTED_EVENT, { tabId: _this.id }, true /* bubble */); },
-            getOffsetLeft: function () { return _this.root.offsetLeft; },
-            getOffsetWidth: function () { return _this.root.offsetWidth; },
-            getContentOffsetLeft: function () { return _this.content.offsetLeft; },
-            getContentOffsetWidth: function () { return _this.content.offsetWidth; },
-            focus: function () { return _this.root.focus(); },
-        };
-        // tslint:enable:object-literal-sort-keys
-        return new MDCTabFoundation(adapter);
-    };
-    Object.defineProperty(MDCTab.prototype, "active", {
-        /**
-         * Getter for the active state of the tab
-         */
-        get: function () {
-            return this.foundation.isActive();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCTab.prototype, "focusOnActivate", {
-        set: function (focusOnActivate) {
-            this.foundation.setFocusOnActivate(focusOnActivate);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Activates the tab
-     */
-    MDCTab.prototype.activate = function (computeIndicatorClientRect) {
-        this.foundation.activate(computeIndicatorClientRect);
-    };
-    /**
-     * Deactivates the tab
-     */
-    MDCTab.prototype.deactivate = function () {
-        this.foundation.deactivate();
-    };
-    /**
-     * Returns the indicator's client rect
-     */
-    MDCTab.prototype.computeIndicatorClientRect = function () {
-        return this.tabIndicator.computeContentClientRect();
-    };
-    MDCTab.prototype.computeDimensions = function () {
-        return this.foundation.computeDimensions();
-    };
-    /**
-     * Focuses the tab
-     */
-    MDCTab.prototype.focus = function () {
-        this.root.focus();
-    };
-    return MDCTab;
-}(MDCComponent));
-
+    return MOVES[options.orientation].has(event.key);
+}
 /**
- * @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.
+ * Find the item that a key press moves to.
+ *
+ * - The arrow keys that go along the orientation move to the next and the
+ *   previous item. At the ends they stop, or continue at the other end when
+ *   `options.wrap` is set.
+ * - Home and End move to the first and the last item.
+ * - Items that cannot be moved to are skipped.
+ * - Without a current item, moving forward starts at the first item, and
+ *   moving back at the last one.
+ *
+ * @param items - the items, in the order that they are laid out in. Only their
+ * number matters, unless `options.isDisabled` is given.
+ * @param key - the `key` of the keyboard event
+ * @param currentIndex - the index of the item to move from, usually the one
+ * that has focus. Anything outside `items` is treated as "no current item".
+ * @param options - which keys move, and how
+ * @returns the index of the item to move to. That is `currentIndex` itself
+ * when there is nowhere to go from there, since the end is reached and it does
+ * not wrap, or since it is the only item that can be moved to. It is
+ * `NO_NAVIGATION_TARGET` when the key does not move in this orientation, and
+ * when none of the items can be moved to.
  */
-var strings$1 = {
-    ARROW_LEFT_KEY: 'ArrowLeft',
-    ARROW_RIGHT_KEY: 'ArrowRight',
-    END_KEY: 'End',
-    ENTER_KEY: 'Enter',
-    HOME_KEY: 'Home',
-    SPACE_KEY: 'Space',
-    TAB_ACTIVATED_EVENT: 'MDCTabBar:activated',
-    TAB_SCROLLER_SELECTOR: '.mdc-tab-scroller',
-    TAB_SELECTOR: '.mdc-tab',
-};
-var numbers = {
-    ARROW_LEFT_KEYCODE: 37,
-    ARROW_RIGHT_KEYCODE: 39,
-    END_KEYCODE: 35,
-    ENTER_KEYCODE: 13,
-    EXTRA_SCROLL_AMOUNT: 20,
-    HOME_KEYCODE: 36,
-    SPACE_KEYCODE: 32,
-};
-
+function findNavigationTarget(items, key, currentIndex, options) {
+    const move = MOVES[options.orientation].get(key);
+    const count = items.length;
+    const canMoveTo = createReachableTest(items, options);
+    const first = findReachable(count, 0, 1, false, canMoveTo);
+    if (!move || first === NO_NAVIGATION_TARGET) {
+        return NO_NAVIGATION_TARGET;
+    }
+    if (move === 'first') {
+        return first;
+    }
+    const last = findReachable(count, count - 1, -1, false, canMoveTo);
+    if (move === 'last') {
+        return last;
+    }
+    if (!isWithin(currentIndex, count)) {
+        return move === 'next' ? first : last;
+    }
+    const step = move === 'next' ? 1 : -1;
+    const target = findReachable(count, currentIndex + step, step, Boolean(options.wrap), canMoveTo);
+    return target === NO_NAVIGATION_TARGET ? currentIndex : target;
+}
 /**
- * @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.
+ * Find the item that should be in the tab order, which is the one that Tab
+ * lands on when it enters the group. The rest of the items are left out of the
+ * tab order, and are reached with the arrow keys.
+ *
+ * That is the preferred item, if it can be moved to. Otherwise the first item
+ * that can.
+ *
+ * @param items - the items, in the order that they are laid out in. Only their
+ * number matters, unless `options.isDisabled` is given.
+ * @param preferredIndex - the index of the item that should be in the tab
+ * order if possible. For a group with a selection that is the selected item,
+ * and otherwise the item that last had focus, which the component has to keep
+ * track of. Anything outside `items` means that there is no preference.
+ * @param options - the same options that are used to move between the items
+ * @returns the index of the item to put in the tab order, or
+ * `NO_NAVIGATION_TARGET` when none of the items can be moved to
  */
-var ACCEPTABLE_KEYS = new Set();
-// IE11 has no support for new Set with iterable so we need to initialize this by hand
-ACCEPTABLE_KEYS.add(strings$1.ARROW_LEFT_KEY);
-ACCEPTABLE_KEYS.add(strings$1.ARROW_RIGHT_KEY);
-ACCEPTABLE_KEYS.add(strings$1.END_KEY);
-ACCEPTABLE_KEYS.add(strings$1.HOME_KEY);
-ACCEPTABLE_KEYS.add(strings$1.ENTER_KEY);
-ACCEPTABLE_KEYS.add(strings$1.SPACE_KEY);
-var KEYCODE_MAP = new Map();
-// IE11 has no support for new Map with iterable so we need to initialize this by hand
-KEYCODE_MAP.set(numbers.ARROW_LEFT_KEYCODE, strings$1.ARROW_LEFT_KEY);
-KEYCODE_MAP.set(numbers.ARROW_RIGHT_KEYCODE, strings$1.ARROW_RIGHT_KEY);
-KEYCODE_MAP.set(numbers.END_KEYCODE, strings$1.END_KEY);
-KEYCODE_MAP.set(numbers.HOME_KEYCODE, strings$1.HOME_KEY);
-KEYCODE_MAP.set(numbers.ENTER_KEYCODE, strings$1.ENTER_KEY);
-KEYCODE_MAP.set(numbers.SPACE_KEYCODE, strings$1.SPACE_KEY);
-var MDCTabBarFoundation = /** @class */ (function (_super) {
-    __extends(MDCTabBarFoundation, _super);
-    function MDCTabBarFoundation(adapter) {
-        var _this = _super.call(this, __assign(__assign({}, MDCTabBarFoundation.defaultAdapter), adapter)) || this;
-        _this.useAutomaticActivation = false;
-        return _this;
+function findTabStop(items, preferredIndex, options) {
+    const count = items.length;
+    const canMoveTo = createReachableTest(items, options);
+    if (isWithin(preferredIndex, count) && canMoveTo(preferredIndex)) {
+        return preferredIndex;
     }
-    Object.defineProperty(MDCTabBarFoundation, "strings", {
-        get: function () {
-            return strings$1;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCTabBarFoundation, "numbers", {
-        get: function () {
-            return numbers;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCTabBarFoundation, "defaultAdapter", {
-        get: function () {
-            // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
-            return {
-                scrollTo: function () { return undefined; },
-                incrementScroll: function () { return undefined; },
-                getScrollPosition: function () { return 0; },
-                getScrollContentWidth: function () { return 0; },
-                getOffsetWidth: function () { return 0; },
-                isRTL: function () { return false; },
-                setActiveTab: function () { return undefined; },
-                activateTabAtIndex: function () { return undefined; },
-                deactivateTabAtIndex: function () { return undefined; },
-                focusTabAtIndex: function () { return undefined; },
-                getTabIndicatorClientRectAtIndex: function () {
-                    return ({ top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 });
-                },
-                getTabDimensionsAtIndex: function () {
-                    return ({ rootLeft: 0, rootRight: 0, contentLeft: 0, contentRight: 0 });
-                },
-                getPreviousActiveTabIndex: function () { return -1; },
-                getFocusedTabIndex: function () { return -1; },
-                getIndexOfTabById: function () { return -1; },
-                getTabListLength: function () { return 0; },
-                notifyTabActivated: function () { return undefined; },
-            };
-            // tslint:enable:object-literal-sort-keys
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Switches between automatic and manual activation modes.
-     * See https://www.w3.org/TR/wai-aria-practices/#tabpanel for examples.
-     */
-    MDCTabBarFoundation.prototype.setUseAutomaticActivation = function (useAutomaticActivation) {
-        this.useAutomaticActivation = useAutomaticActivation;
-    };
-    MDCTabBarFoundation.prototype.activateTab = function (index) {
-        var previousActiveIndex = this.adapter.getPreviousActiveTabIndex();
-        if (!this.indexIsInRange(index) || index === previousActiveIndex) {
-            return;
-        }
-        var previousClientRect;
-        if (previousActiveIndex !== -1) {
-            this.adapter.deactivateTabAtIndex(previousActiveIndex);
-            previousClientRect =
-                this.adapter.getTabIndicatorClientRectAtIndex(previousActiveIndex);
-        }
-        this.adapter.activateTabAtIndex(index, previousClientRect);
-        this.scrollIntoView(index);
-        this.adapter.notifyTabActivated(index);
-    };
-    MDCTabBarFoundation.prototype.handleKeyDown = function (evt) {
-        // Get the key from the event
-        var key = this.getKeyFromEvent(evt);
-        // Early exit if the event key isn't one of the keyboard navigation keys
-        if (key === undefined) {
-            return;
-        }
-        // Prevent default behavior for movement keys, but not for activation keys, since :active is used to apply ripple
-        if (!this.isActivationKey(key)) {
-            evt.preventDefault();
-        }
-        if (this.useAutomaticActivation) {
-            if (this.isActivationKey(key)) {
-                return;
-            }
-            var index = this.determineTargetFromKey(this.adapter.getPreviousActiveTabIndex(), key);
-            this.adapter.setActiveTab(index);
-            this.scrollIntoView(index);
-        }
-        else {
-            var focusedTabIndex = this.adapter.getFocusedTabIndex();
-            if (this.isActivationKey(key)) {
-                this.adapter.setActiveTab(focusedTabIndex);
-            }
-            else {
-                var index = this.determineTargetFromKey(focusedTabIndex, key);
-                this.adapter.focusTabAtIndex(index);
-                this.scrollIntoView(index);
-            }
-        }
-    };
-    /**
-     * Handles the MDCTab:interacted event
-     */
-    MDCTabBarFoundation.prototype.handleTabInteraction = function (evt) {
-        this.adapter.setActiveTab(this.adapter.getIndexOfTabById(evt.detail.tabId));
-    };
-    /**
-     * Scrolls the tab at the given index into view
-     * @param index The tab index to make visible
-     */
-    MDCTabBarFoundation.prototype.scrollIntoView = function (index) {
-        // Early exit if the index is out of range
-        if (!this.indexIsInRange(index)) {
-            return;
-        }
-        // Always scroll to 0 if scrolling to the 0th index
-        if (index === 0) {
-            this.adapter.scrollTo(0);
-            return;
-        }
-        // Always scroll to the max value if scrolling to the Nth index
-        // MDCTabScroller.scrollTo() will never scroll past the max possible value
-        if (index === this.adapter.getTabListLength() - 1) {
-            this.adapter.scrollTo(this.adapter.getScrollContentWidth());
-            return;
-        }
-        if (this.isRTL()) {
-            this.scrollIntoViewImplRTL(index);
-            return;
-        }
-        this.scrollIntoViewImpl(index);
-    };
-    /**
-     * Private method for determining the index of the destination tab based on what key was pressed
-     * @param origin The original index from which to determine the destination
-     * @param key The name of the key
-     */
-    MDCTabBarFoundation.prototype.determineTargetFromKey = function (origin, key) {
-        var isRTL = this.isRTL();
-        var maxIndex = this.adapter.getTabListLength() - 1;
-        var shouldGoToEnd = key === strings$1.END_KEY;
-        var shouldDecrement = key === strings$1.ARROW_LEFT_KEY && !isRTL || key === strings$1.ARROW_RIGHT_KEY && isRTL;
-        var shouldIncrement = key === strings$1.ARROW_RIGHT_KEY && !isRTL || key === strings$1.ARROW_LEFT_KEY && isRTL;
-        var index = origin;
-        if (shouldGoToEnd) {
-            index = maxIndex;
-        }
-        else if (shouldDecrement) {
-            index -= 1;
-        }
-        else if (shouldIncrement) {
-            index += 1;
-        }
-        else {
-            index = 0;
-        }
-        if (index < 0) {
-            index = maxIndex;
-        }
-        else if (index > maxIndex) {
-            index = 0;
-        }
-        return index;
-    };
-    /**
-     * Calculates the scroll increment that will make the tab at the given index visible
-     * @param index The index of the tab
-     * @param nextIndex The index of the next tab
-     * @param scrollPosition The current scroll position
-     * @param barWidth The width of the Tab Bar
-     */
-    MDCTabBarFoundation.prototype.calculateScrollIncrement = function (index, nextIndex, scrollPosition, barWidth) {
-        var nextTabDimensions = this.adapter.getTabDimensionsAtIndex(nextIndex);
-        var relativeContentLeft = nextTabDimensions.contentLeft - scrollPosition - barWidth;
-        var relativeContentRight = nextTabDimensions.contentRight - scrollPosition;
-        var leftIncrement = relativeContentRight - numbers.EXTRA_SCROLL_AMOUNT;
-        var rightIncrement = relativeContentLeft + numbers.EXTRA_SCROLL_AMOUNT;
-        if (nextIndex < index) {
-            return Math.min(leftIncrement, 0);
-        }
-        return Math.max(rightIncrement, 0);
-    };
-    /**
-     * Calculates the scroll increment that will make the tab at the given index visible in RTL
-     * @param index The index of the tab
-     * @param nextIndex The index of the next tab
-     * @param scrollPosition The current scroll position
-     * @param barWidth The width of the Tab Bar
-     * @param scrollContentWidth The width of the scroll content
-     */
-    MDCTabBarFoundation.prototype.calculateScrollIncrementRTL = function (index, nextIndex, scrollPosition, barWidth, scrollContentWidth) {
-        var nextTabDimensions = this.adapter.getTabDimensionsAtIndex(nextIndex);
-        var relativeContentLeft = scrollContentWidth - nextTabDimensions.contentLeft - scrollPosition;
-        var relativeContentRight = scrollContentWidth - nextTabDimensions.contentRight - scrollPosition - barWidth;
-        var leftIncrement = relativeContentRight + numbers.EXTRA_SCROLL_AMOUNT;
-        var rightIncrement = relativeContentLeft - numbers.EXTRA_SCROLL_AMOUNT;
-        if (nextIndex > index) {
-            return Math.max(leftIncrement, 0);
-        }
-        return Math.min(rightIncrement, 0);
-    };
-    /**
-     * Determines the index of the adjacent tab closest to either edge of the Tab Bar
-     * @param index The index of the tab
-     * @param tabDimensions The dimensions of the tab
-     * @param scrollPosition The current scroll position
-     * @param barWidth The width of the tab bar
-     */
-    MDCTabBarFoundation.prototype.findAdjacentTabIndexClosestToEdge = function (index, tabDimensions, scrollPosition, barWidth) {
-        /**
-         * Tabs are laid out in the Tab Scroller like this:
-         *
-         *    Scroll Position
-         *    +---+
-         *    |   |   Bar Width
-         *    |   +-----------------------------------+
-         *    |   |                                   |
-         *    |   V                                   V
-         *    |   +-----------------------------------+
-         *    V   |             Tab Scroller          |
-         *    +------------+--------------+-------------------+
-         *    |    Tab     |      Tab     |        Tab        |
-         *    +------------+--------------+-------------------+
-         *        |                                   |
-         *        +-----------------------------------+
-         *
-         * To determine the next adjacent index, we look at the Tab root left and
-         * Tab root right, both relative to the scroll position. If the Tab root
-         * left is less than 0, then we know it's out of view to the left. If the
-         * Tab root right minus the bar width is greater than 0, we know the Tab is
-         * out of view to the right. From there, we either increment or decrement
-         * the index.
-         */
-        var relativeRootLeft = tabDimensions.rootLeft - scrollPosition;
-        var relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;
-        var relativeRootDelta = relativeRootLeft + relativeRootRight;
-        var leftEdgeIsCloser = relativeRootLeft < 0 || relativeRootDelta < 0;
-        var rightEdgeIsCloser = relativeRootRight > 0 || relativeRootDelta > 0;
-        if (leftEdgeIsCloser) {
-            return index - 1;
-        }
-        if (rightEdgeIsCloser) {
-            return index + 1;
-        }
-        return -1;
-    };
-    /**
-     * Determines the index of the adjacent tab closest to either edge of the Tab Bar in RTL
-     * @param index The index of the tab
-     * @param tabDimensions The dimensions of the tab
-     * @param scrollPosition The current scroll position
-     * @param barWidth The width of the tab bar
-     * @param scrollContentWidth The width of the scroller content
-     */
-    MDCTabBarFoundation.prototype.findAdjacentTabIndexClosestToEdgeRTL = function (index, tabDimensions, scrollPosition, barWidth, scrollContentWidth) {
-        var rootLeft = scrollContentWidth - tabDimensions.rootLeft - barWidth - scrollPosition;
-        var rootRight = scrollContentWidth - tabDimensions.rootRight - scrollPosition;
-        var rootDelta = rootLeft + rootRight;
-        var leftEdgeIsCloser = rootLeft > 0 || rootDelta > 0;
-        var rightEdgeIsCloser = rootRight < 0 || rootDelta < 0;
-        if (leftEdgeIsCloser) {
-            return index + 1;
-        }
-        if (rightEdgeIsCloser) {
-            return index - 1;
-        }
-        return -1;
-    };
-    /**
-     * Returns the key associated with a keydown event
-     * @param evt The keydown event
-     */
-    MDCTabBarFoundation.prototype.getKeyFromEvent = function (evt) {
-        if (ACCEPTABLE_KEYS.has(evt.key)) {
-            return evt.key;
-        }
-        return KEYCODE_MAP.get(evt.keyCode);
-    };
-    MDCTabBarFoundation.prototype.isActivationKey = function (key) {
-        return key === strings$1.SPACE_KEY || key === strings$1.ENTER_KEY;
-    };
-    /**
-     * Returns whether a given index is inclusively between the ends
-     * @param index The index to test
-     */
-    MDCTabBarFoundation.prototype.indexIsInRange = function (index) {
-        return index >= 0 && index < this.adapter.getTabListLength();
-    };
-    /**
-     * Returns the view's RTL property
-     */
-    MDCTabBarFoundation.prototype.isRTL = function () {
-        return this.adapter.isRTL();
-    };
-    /**
-     * Scrolls the tab at the given index into view for left-to-right user agents.
-     * @param index The index of the tab to scroll into view
-     */
-    MDCTabBarFoundation.prototype.scrollIntoViewImpl = function (index) {
-        var scrollPosition = this.adapter.getScrollPosition();
-        var barWidth = this.adapter.getOffsetWidth();
-        var tabDimensions = this.adapter.getTabDimensionsAtIndex(index);
-        var nextIndex = this.findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth);
-        if (!this.indexIsInRange(nextIndex)) {
-            return;
-        }
-        var scrollIncrement = this.calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth);
-        this.adapter.incrementScroll(scrollIncrement);
-    };
-    /**
-     * Scrolls the tab at the given index into view in RTL
-     * @param index The tab index to make visible
-     */
-    MDCTabBarFoundation.prototype.scrollIntoViewImplRTL = function (index) {
-        var scrollPosition = this.adapter.getScrollPosition();
-        var barWidth = this.adapter.getOffsetWidth();
-        var tabDimensions = this.adapter.getTabDimensionsAtIndex(index);
-        var scrollWidth = this.adapter.getScrollContentWidth();
-        var nextIndex = this.findAdjacentTabIndexClosestToEdgeRTL(index, tabDimensions, scrollPosition, barWidth, scrollWidth);
-        if (!this.indexIsInRange(nextIndex)) {
-            return;
-        }
-        var scrollIncrement = this.calculateScrollIncrementRTL(index, nextIndex, scrollPosition, barWidth, scrollWidth);
-        this.adapter.incrementScroll(scrollIncrement);
-    };
-    return MDCTabBarFoundation;
-}(MDCFoundation));
-
+    return findReachable(count, 0, 1, false, canMoveTo);
+}
+function isWithin(index, count) {
+    return index >= 0 && index < count;
+}
+function createReachableTest(items, options) {
+    return (index) => { var _a; return !((_a = options === null || options === void 0 ? void 0 : options.isDisabled) === null || _a === void 0 ? void 0 : _a.call(options, items[index])); };
+}
 /**
- * @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.
+ * Look for an item that can be moved to, one item at a time.
+ *
+ * @param count - the number of items
+ * @param start - the index to start looking at
+ * @param step - the direction to look in, `1` for forward and `-1` for back
+ * @param wrap - whether to continue at the other end, instead of giving up at
+ * the end of the items. Every item is looked at once at most.
+ * @param canMoveTo - tells whether the item at an index can be moved to
+ * @returns the index of the first item that can be moved to, or
+ * `NO_NAVIGATION_TARGET` when there is none
  */
-var strings = MDCTabBarFoundation.strings;
-var tabIdCounter = 0;
-var MDCTabBar = /** @class */ (function (_super) {
-    __extends(MDCTabBar, _super);
-    function MDCTabBar() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    MDCTabBar.attachTo = function (root) {
-        return new MDCTabBar(root);
-    };
-    Object.defineProperty(MDCTabBar.prototype, "focusOnActivate", {
-        set: function (focusOnActivate) {
-            var e_1, _a;
-            try {
-                for (var _b = __values(this.tabList), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var tab = _c.value;
-                    tab.focusOnActivate = focusOnActivate;
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MDCTabBar.prototype, "useAutomaticActivation", {
-        set: function (useAutomaticActivation) {
-            this.foundation.setUseAutomaticActivation(useAutomaticActivation);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    MDCTabBar.prototype.initialize = function (tabFactory, tabScrollerFactory) {
-        if (tabFactory === void 0) { tabFactory = function (el) { return new MDCTab(el); }; }
-        if (tabScrollerFactory === void 0) { tabScrollerFactory = function (el) { return new MDCTabScroller(el); }; }
-        this.tabList = this.instantiateTabs(tabFactory);
-        this.tabScroller = this.instantiatetabScroller(tabScrollerFactory);
-    };
-    MDCTabBar.prototype.initialSyncWithDOM = function () {
-        var _this = this;
-        this.handleTabInteraction = function (evt) {
-            _this.foundation.handleTabInteraction(evt);
-        };
-        this.handleKeyDown = function (evt) {
-            _this.foundation.handleKeyDown(evt);
-        };
-        this.listen(MDCTabFoundation.strings.INTERACTED_EVENT, this.handleTabInteraction);
-        this.listen('keydown', this.handleKeyDown);
-        for (var i = 0; i < this.tabList.length; i++) {
-            if (this.tabList[i].active) {
-                this.scrollIntoView(i);
-                break;
-            }
-        }
-    };
-    MDCTabBar.prototype.destroy = function () {
-        var e_2, _a;
-        _super.prototype.destroy.call(this);
-        this.unlisten(MDCTabFoundation.strings.INTERACTED_EVENT, this.handleTabInteraction);
-        this.unlisten('keydown', this.handleKeyDown);
-        try {
-            for (var _b = __values(this.tabList), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var tab = _c.value;
-                tab.destroy();
-            }
-        }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_2) throw e_2.error; }
-        }
-        if (this.tabScroller) {
-            this.tabScroller.destroy();
+function findReachable(count, start, step, wrap, canMoveTo) {
+    for (let distance = 0; distance < count; distance += 1) {
+        const position = start + step * distance;
+        if (!wrap && !isWithin(position, count)) {
+            break;
         }
-    };
-    MDCTabBar.prototype.getDefaultFoundation = function () {
-        var _this = this;
-        // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
-        // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
-        // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
-        var adapter = {
-            scrollTo: function (scrollX) {
-                _this.tabScroller.scrollTo(scrollX);
-            },
-            incrementScroll: function (scrollXIncrement) {
-                _this.tabScroller.incrementScroll(scrollXIncrement);
-            },
-            getScrollPosition: function () { return _this.tabScroller.getScrollPosition(); },
-            getScrollContentWidth: function () { return _this.tabScroller.getScrollContentWidth(); },
-            getOffsetWidth: function () { return _this.root.offsetWidth; },
-            isRTL: function () { return window.getComputedStyle(_this.root).getPropertyValue('direction') === 'rtl'; },
-            setActiveTab: function (index) {
-                _this.foundation.activateTab(index);
-            },
-            activateTabAtIndex: function (index, clientRect) {
-                _this.tabList[index].activate(clientRect);
-            },
-            deactivateTabAtIndex: function (index) {
-                _this.tabList[index].deactivate();
-            },
-            focusTabAtIndex: function (index) {
-                _this.tabList[index].focus();
-            },
-            getTabIndicatorClientRectAtIndex: function (index) {
-                return _this.tabList[index].computeIndicatorClientRect();
-            },
-            getTabDimensionsAtIndex: function (index) {
-                return _this.tabList[index].computeDimensions();
-            },
-            getPreviousActiveTabIndex: function () {
-                for (var i = 0; i < _this.tabList.length; i++) {
-                    if (_this.tabList[i].active) {
-                        return i;
-                    }
-                }
-                return -1;
-            },
-            getFocusedTabIndex: function () {
-                var tabElements = _this.getTabElements();
-                var activeElement = document.activeElement;
-                return tabElements.indexOf(activeElement);
-            },
-            getIndexOfTabById: function (id) {
-                for (var i = 0; i < _this.tabList.length; i++) {
-                    if (_this.tabList[i].id === id) {
-                        return i;
-                    }
-                }
-                return -1;
-            },
-            getTabListLength: function () { return _this.tabList.length; },
-            notifyTabActivated: function (index) { return _this.emit(strings.TAB_ACTIVATED_EVENT, { index: index }, true); },
-        };
-        // tslint:enable:object-literal-sort-keys
-        return new MDCTabBarFoundation(adapter);
-    };
-    /**
-     * Activates the tab at the given index
-     * @param index The index of the tab
-     */
-    MDCTabBar.prototype.activateTab = function (index) {
-        this.foundation.activateTab(index);
-    };
-    /**
-     * Scrolls the tab at the given index into view
-     * @param index THe index of the tab
-     */
-    MDCTabBar.prototype.scrollIntoView = function (index) {
-        this.foundation.scrollIntoView(index);
-    };
-    /**
-     * Returns all the tab elements in a nice clean array
-     */
-    MDCTabBar.prototype.getTabElements = function () {
-        return [].slice.call(this.root.querySelectorAll(strings.TAB_SELECTOR));
-    };
-    /**
-     * Instantiates tab components on all child tab elements
-     */
-    MDCTabBar.prototype.instantiateTabs = function (tabFactory) {
-        return this.getTabElements().map(function (el) {
-            el.id = el.id || "mdc-tab-" + ++tabIdCounter;
-            return tabFactory(el);
-        });
-    };
-    /**
-     * Instantiates tab scroller component on the child tab scroller element
-     */
-    MDCTabBar.prototype.instantiatetabScroller = function (tabScrollerFactory) {
-        var tabScrollerElement = this.root.querySelector(strings.TAB_SCROLLER_SELECTOR);
-        if (tabScrollerElement) {
-            return tabScrollerFactory(tabScrollerElement);
+        const index = ((position % count) + count) % count;
+        if (canMoveTo(index)) {
+            return index;
         }
-        return null;
-    };
-    return MDCTabBar;
-}(MDCComponent));
-
-/**
- * Set a tabs `active` state to true in a list of tabs. The previous tab with
- * `active` set to true will have it set to `false` instead.
- *
- * @param tabs - list of tabs
- * @param index - the index of the tab to set to active
- * @returns a copy of the list of tabs with the changed tabs replaced
- */
-function setActiveTab(tabs, index) {
-    const oldSelectedTabIndex = tabs.findIndex((t) => t.active === true);
-    const result = [...tabs];
-    if (oldSelectedTabIndex !== -1) {
-        result[oldSelectedTabIndex] = Object.assign(Object.assign({}, tabs[oldSelectedTabIndex]), { active: false });
     }
-    result[index] = Object.assign(Object.assign({}, tabs[index]), { active: true });
-    return result;
+    return NO_NAVIGATION_TARGET;
 }
 
 const tabBarCss = () => `.mdc-tab-bar{width:100%}.mdc-tab{height:48px}.mdc-tab--stacked{height:72px}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-color:#6200ee;border-color:var(--mdc-theme-primary, #6200ee)}.mdc-tab-indicator .mdc-tab-indicator__content--icon{color:#018786;color:var(--mdc-theme-secondary, #018786)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:2px}.mdc-tab-indicator .mdc-tab-indicator__content--icon{height:34px;font-size:34px}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition:150ms opacity linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition-delay:100ms}.mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-button-font-size, 0.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:0.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, 0.0892857143em);text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform, uppercase)}.mdc-tab .mdc-tab__text-label{color:rgba(0, 0, 0, 0.6)}.mdc-tab .mdc-tab__icon{color:rgba(0, 0, 0, 0.54);fill:currentColor}.mdc-tab{position:relative}.mdc-tab__content{position:relative}.mdc-tab__icon{width:24px;height:24px;font-size:24px}.mdc-tab--active .mdc-tab__text-label{color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}.mdc-tab--active .mdc-tab__icon{color:#6200ee;color:var(--mdc-theme-primary, #6200ee);fill:currentColor}.mdc-tab{background:none}.mdc-tab{min-width:90px;padding-right:24px;padding-left:24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1}.mdc-tab::-moz-focus-inner{padding:0;border:0}.mdc-tab--min-width{flex:0 1 auto}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab__icon{transition:150ms color linear;z-index:2}.mdc-tab--stacked .mdc-tab__content{flex-direction:column;align-items:center;justify-content:center}.mdc-tab--stacked .mdc-tab__text-label{padding-top:6px;padding-bottom:4px}.mdc-tab--active .mdc-tab__text-label,.mdc-tab--active .mdc-tab__icon{transition-delay:100ms}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:8px;padding-right:0}[dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label,.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label[dir=rtl]{padding-left:0;padding-right:8px;}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-tab{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-tab .mdc-tab__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-tab .mdc-tab__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-tab.mdc-ripple-upgraded--unbounded .mdc-tab__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-tab.mdc-ripple-upgraded--foreground-deactivation .mdc-tab__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{background-color:#6200ee;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee))}.mdc-tab:hover .mdc-tab__ripple::before,.mdc-tab.mdc-ripple-surface--hover .mdc-tab__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-tab.mdc-ripple-upgraded--background-focused .mdc-tab__ripple::before,.mdc-tab:not(.mdc-ripple-upgraded):focus .mdc-tab__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-tab:not(.mdc-ripple-upgraded) .mdc-tab__ripple::after{transition:opacity 150ms linear}.mdc-tab:not(.mdc-ripple-upgraded):active .mdc-tab__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-tab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-tab__ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;will-change:transform, opacity}:host(limel-tab-bar){--limel-tab-background-color:var(--contrast-300);--limel-tab-border-radius:0.625rem;--limel-active-tab-background-color:var(       --tab-panel-background-color,       rgb(var(--contrast-100))   );--limel-tab-active-outer-edge-curve-size:0.75rem;--limel-tab-separator-width:0.125rem;--limel-tab-separator-background-color:rgb(var(--contrast-600));isolation:isolate;display:block;position:relative}limel-scroller{--limel-scroller-fade-color:var(--limel-tab-background-color);--limel-scroller-content-padding:0.25rem       var(--limel-tab-active-outer-edge-curve-size) 0;background-color:rgb(var(--limel-tab-background-color))}:host(.has-tabs-with-equal-width) .mdc-tab{flex:1 0 auto}.mdc-tab{font-family:inherit;font-weight:400;letter-spacing:normal;font-size:var(--limel-theme-default-font-size);text-transform:none}.mdc-tab-indicator .mdc-tab-indicator__content{border:none}.mdc-tab__ripple{box-sizing:border-box;border-radius:var(--limel-tab-border-radius);border-style:solid;border-color:transparent;border-width:0.25rem;opacity:0.7}.mdc-tab__ripple:before,.mdc-tab__ripple:after{transition:background-color 0.5s ease}.mdc-tab{border-radius:0;padding-right:1rem;padding-left:1rem;min-width:2.5rem;background-color:transparent;flex:0 0 auto;height:2.5rem}.mdc-tab:not(.mdc-tab--active):after{content:"";display:block;background-color:var(--limel-tab-separator-background-color);width:var(--limel-tab-separator-width);height:1rem;margin:auto;position:absolute;top:0;bottom:0;border-radius:1rem;right:calc(-1 * var(--limel-tab-separator-width))}.mdc-tab:not(.mdc-tab--active):last-of-type:after{display:none}.mdc-tab .mdc-tab__icon{color:rgb(var(--contrast-800));margin-left:-0.25rem}.mdc-tab limel-badge{margin-right:-0.25rem;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.mdc-tab--active{border-radius:var(--limel-tab-border-radius) var(--limel-tab-border-radius) 0 0;background-color:var(--limel-active-tab-background-color);z-index:2}.mdc-tab--active:before,.mdc-tab--active:after{content:"";display:block;width:var(--limel-tab-active-outer-edge-curve-size);height:var(--limel-tab-active-outer-edge-curve-size);position:absolute;bottom:0;background-color:var(--limel-active-tab-background-color);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E")}.mdc-tab--active:before{left:calc(-1 * var(--limel-tab-active-outer-edge-curve-size));transform:rotateY(180deg)}.mdc-tab--active:after{right:calc(-1 * var(--limel-tab-active-outer-edge-curve-size))}.mdc-tab--active .mdc-ripple-upgraded--background-focused:before{background-color:transparent;transition:background-color 1s ease}.mdc-tab--active .mdc-tab__icon{color:var(--mdc-theme-primary)}.mdc-tab__content{gap:0.375rem}.mdc-tab .mdc-tab__text-label{transition:color 0.2s ease;padding-left:0 !important;color:var(--limel-theme-on-surface-color)}.mdc-tab:hover .mdc-tab__text-label{color:var(--limel-theme-text-primary-on-background-color)}.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--lime-primary-color, var(--limel-theme-primary-color))}`;
 
-const { TAB_ACTIVATED_EVENT } = strings$1;
-// MDC wants to scroll the tabs into view itself, and finds what to scroll by
-// looking for the `mdc-tab-scroller` class. Scrolling is up to `limel-scroller`.
-const tabScrollerForMdc = {
-    scrollTo: noop,
-    incrementScroll: noop,
-    getScrollPosition: () => 0,
-    getScrollContentWidth: () => 0,
-    destroy: noop,
+const NAVIGATION = {
+    orientation: 'horizontal',
+    wrap: true,
 };
 const TabBar = class {
     constructor(hostRef) {
@@ -2063,41 +273,34 @@ const TabBar = class {
          * List of tabs to display
          */
         this.tabs = [];
-        this.setupMdc = false;
+        this.ripples = new Map();
         this.hasLoaded = false;
-        this.handleTabActivated = this.handleTabActivated.bind(this);
-        this.renderTab = this.renderTab.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
     }
     async connectedCallback() {
-        this.setup();
         // Connecting after the first render means that the bar was moved, which
         // resets how far it is scrolled.
         if (!this.hasLoaded) {
             return;
         }
+        this.updateRipples();
         this.revealedTabId = undefined;
         await this.revealActiveTab('auto');
     }
     componentDidLoad() {
         this.hasLoaded = true;
-        this.setup();
         this.triggerIconColorWarning();
     }
     async componentDidRender() {
+        this.updateRipples();
         await this.revealActiveTab(this.hasLoaded ? undefined : 'auto');
     }
-    componentDidUpdate() {
-        if (!this.setupMdc) {
-            return;
-        }
-        this.setup();
-        this.setupMdc = false;
-    }
     disconnectedCallback() {
-        this.tearDown();
+        this.destroyRipples();
     }
     render() {
-        return (h("div", { key: '343865b4ddac8aa25042cb91916ad411366b4602', class: "mdc-tab-bar", role: "tablist" }, h("limel-scroller", { key: '7329ad9bb97c09afc79c3770d27db9fbb16093f3', class: "mdc-tab-scroller" }, this.tabs.map(this.renderTab))));
+        const tabStop = findTabStop(this.tabs, this.tabs.findIndex((tab) => tab.active), NAVIGATION);
+        return (h("div", { key: '7ab809d50e3605613f027a1782d54511e734de93', class: "mdc-tab-bar", role: "tablist", onKeyDown: this.handleKeyDown }, h("limel-scroller", { key: 'd6ac2c90e6da77a239292ac0e90288c3e70b62f8' }, this.tabs.map((tab, index) => this.renderTab(tab, index, index === tabStop)))));
     }
     tabsChanged(newTabs = [], oldTabs = []) {
         const newIds = newTabs.map((tab) => tab.id);
@@ -2105,26 +308,37 @@ const TabBar = class {
         if (isEqual(newIds, oldIds)) {
             return;
         }
-        this.setupMdc = true;
         this.revealedTabId = undefined;
-        this.tearDown();
     }
-    setup() {
-        const element = this.host.shadowRoot.querySelector('.mdc-tab-bar');
-        if (!element) {
-            return;
+    getTabElements() {
+        return [
+            ...this.host.shadowRoot.querySelectorAll('button[role="tab"]'),
+        ];
+    }
+    /**
+     * Gives every tab MDC's ripple, which is the feedback when a tab is
+     * pressed. Tabs that are gone lose theirs.
+     */
+    updateRipples() {
+        const tabs = this.getTabElements();
+        for (const [tab, ripple] of this.ripples) {
+            if (tabs.includes(tab)) {
+                continue;
+            }
+            ripple.destroy();
+            this.ripples.delete(tab);
+        }
+        for (const tab of tabs) {
+            if (!this.ripples.has(tab)) {
+                this.ripples.set(tab, new MDCRipple(tab));
+            }
         }
-        this.mdcTabBar = new MDCTabBar(element, undefined, undefined, () => tabScrollerForMdc);
-        this.mdcTabBar.focusOnActivate = true;
-        this.mdcTabBar.useAutomaticActivation = true;
-        this.mdcTabBar.listen(TAB_ACTIVATED_EVENT, this.handleTabActivated);
     }
-    tearDown() {
-        if (!this.mdcTabBar) {
-            return;
+    destroyRipples() {
+        for (const ripple of this.ripples.values()) {
+            ripple.destroy();
         }
-        this.mdcTabBar.unlisten(TAB_ACTIVATED_EVENT, this.handleTabActivated);
-        this.mdcTabBar.destroy();
+        this.ripples.clear();
     }
     /**
      * A tab that is activated by the user has focus, and the scroller reveals
@@ -2143,7 +357,7 @@ const TabBar = class {
             return;
         }
         this.revealedTabId = this.tabs[index].id;
-        const element = this.host.shadowRoot.querySelectorAll('button[role="tab"]')[index];
+        const element = this.getTabElements()[index];
         const scroller = this.host.shadowRoot.querySelector('limel-scroller');
         if (!element || !scroller || element.matches(':focus')) {
             return;
@@ -2151,8 +365,24 @@ const TabBar = class {
         await scroller.componentOnReady();
         await scroller.reveal(element, behavior);
     }
-    handleTabActivated(event) {
-        const index = event.detail.index;
+    handleKeyDown(event) {
+        if (!isNavigationKey(event, NAVIGATION)) {
+            return;
+        }
+        event.preventDefault();
+        const current = this.getTabElements().indexOf(event.target);
+        this.activateTab(findNavigationTarget(this.tabs, event.key, current, NAVIGATION));
+    }
+    activateTab(index) {
+        if (index === NO_NAVIGATION_TARGET) {
+            return;
+        }
+        // Not every browser focuses a button that is clicked, and a key can
+        // lead to the selected tab from another tab that has focus.
+        this.getTabElements()[index].focus();
+        if (index === this.tabs.findIndex((tab) => tab.active)) {
+            return;
+        }
         const newTabs = setActiveTab(this.tabs, index);
         const changedTabs = difference(newTabs, this.tabs).sort(this.sortByInactive);
         for (const tab of changedTabs) {
@@ -2175,11 +405,11 @@ const TabBar = class {
         }
         return (h("limel-icon", { class: "mdc-tab__icon", name: name, style: style, size: "small", "aria-hidden": "true" }));
     }
-    renderTab(tab) {
+    renderTab(tab, index, isTabStop) {
         return (h("button", { class: {
                 'mdc-tab': true,
                 'mdc-tab--active': !!tab.active,
-            }, role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabindex: tab.active ? 0 : -1 }, h("span", { class: "mdc-tab__content" }, this.renderIcon(tab), h("span", { class: "mdc-tab__text-label" }, tab.text), tab.badge ? h("limel-badge", { label: tab.badge }) : ''), h("span", { class: {
+            }, role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabindex: isTabStop ? 0 : -1, onClick: () => this.activateTab(index) }, h("span", { class: "mdc-tab__content" }, this.renderIcon(tab), h("span", { class: "mdc-tab__text-label" }, tab.text), tab.badge ? h("limel-badge", { label: tab.badge }) : ''), h("span", { class: {
                 'mdc-tab-indicator': true,
                 'mdc-tab-indicator--active': !!tab.active,
             } }, h("span", { class: "mdc-tab-indicator__content mdc-tab-indicator__content--underline" })), h("span", { class: "mdc-tab__ripple" })));