q2-tecton-elements 1.4.4 → 1.5.3

package/dist/esm/q2-tab-container.entry.js

@@ -1,1034 +1,463 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-b70f7228.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-06403810.js';
 import { c as createGuid } from './index-ff056163.js';
 
-function isFunction(x) {
-    return typeof x === 'function';
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+	  path: basedir,
+	  exports: {},
+	  require: function (path, base) {
+    return commonjsRequire();
+  }
+	}, fn(module, module.exports), module.exports;
 }
 
-let _enable_super_gross_mode_that_will_cause_bad_things = false;
-const config = {
-    Promise: undefined,
-    set useDeprecatedSynchronousErrorHandling(value) {
-        if (value) {
-            const error = new Error();
-            console.warn('DEPRECATED! RxJS was set to use deprecated synchronous error handling behavior by code at: \n' + error.stack);
-        }
-        else if (_enable_super_gross_mode_that_will_cause_bad_things) {
-            console.log('RxJS: Back to a better error behavior. Thank you. <3');
-        }
-        _enable_super_gross_mode_that_will_cause_bad_things = value;
-    },
-    get useDeprecatedSynchronousErrorHandling() {
-        return _enable_super_gross_mode_that_will_cause_bad_things;
-    },
-};
-
-function hostReportError(err) {
-    setTimeout(() => { throw err; }, 0);
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
 }
 
-const empty = {
-    closed: true,
-    next(value) { },
-    error(err) {
-        if (config.useDeprecatedSynchronousErrorHandling) {
-            throw err;
-        }
-        else {
-            hostReportError(err);
-        }
-    },
-    complete() { }
-};
-
-const isArray = (() => Array.isArray || ((x) => x && typeof x.length === 'number'))();
+var smoothscroll = createCommonjsModule(function (module, exports) {
+/* smoothscroll v0.4.4 - 2019 - Dustan Kasten, Jeremias Menichelli - MIT License */
+(function () {
 
-function isObject(x) {
-    return x !== null && typeof x === 'object';
-}
+  // polyfill
+  function polyfill() {
+    // aliases
+    var w = window;
+    var d = document;
 
-const UnsubscriptionErrorImpl = (() => {
-    function UnsubscriptionErrorImpl(errors) {
-        Error.call(this);
-        this.message = errors ?
-            `${errors.length} errors occurred during unsubscription:
-${errors.map((err, i) => `${i + 1}) ${err.toString()}`).join('\n  ')}` : '';
-        this.name = 'UnsubscriptionError';
-        this.errors = errors;
-        return this;
+    // return if scroll behavior is supported and polyfill is not forced
+    if (
+      'scrollBehavior' in d.documentElement.style &&
+      w.__forceSmoothScrollPolyfill__ !== true
+    ) {
+      return;
     }
-    UnsubscriptionErrorImpl.prototype = Object.create(Error.prototype);
-    return UnsubscriptionErrorImpl;
-})();
-const UnsubscriptionError = UnsubscriptionErrorImpl;
 
-class Subscription {
-    constructor(unsubscribe) {
-        this.closed = false;
-        this._parentOrParents = null;
-        this._subscriptions = null;
-        if (unsubscribe) {
-            this._ctorUnsubscribe = true;
-            this._unsubscribe = unsubscribe;
-        }
-    }
-    unsubscribe() {
-        let errors;
-        if (this.closed) {
-            return;
-        }
-        let { _parentOrParents, _ctorUnsubscribe, _unsubscribe, _subscriptions } = this;
-        this.closed = true;
-        this._parentOrParents = null;
-        this._subscriptions = null;
-        if (_parentOrParents instanceof Subscription) {
-            _parentOrParents.remove(this);
-        }
-        else if (_parentOrParents !== null) {
-            for (let index = 0; index < _parentOrParents.length; ++index) {
-                const parent = _parentOrParents[index];
-                parent.remove(this);
-            }
-        }
-        if (isFunction(_unsubscribe)) {
-            if (_ctorUnsubscribe) {
-                this._unsubscribe = undefined;
-            }
-            try {
-                _unsubscribe.call(this);
-            }
-            catch (e) {
-                errors = e instanceof UnsubscriptionError ? flattenUnsubscriptionErrors(e.errors) : [e];
-            }
-        }
-        if (isArray(_subscriptions)) {
-            let index = -1;
-            let len = _subscriptions.length;
-            while (++index < len) {
-                const sub = _subscriptions[index];
-                if (isObject(sub)) {
-                    try {
-                        sub.unsubscribe();
-                    }
-                    catch (e) {
-                        errors = errors || [];
-                        if (e instanceof UnsubscriptionError) {
-                            errors = errors.concat(flattenUnsubscriptionErrors(e.errors));
-                        }
-                        else {
-                            errors.push(e);
-                        }
-                    }
-                }
-            }
-        }
-        if (errors) {
-            throw new UnsubscriptionError(errors);
-        }
-    }
-    add(teardown) {
-        let subscription = teardown;
-        if (!teardown) {
-            return Subscription.EMPTY;
-        }
-        switch (typeof teardown) {
-            case 'function':
-                subscription = new Subscription(teardown);
-            case 'object':
-                if (subscription === this || subscription.closed || typeof subscription.unsubscribe !== 'function') {
-                    return subscription;
-                }
-                else if (this.closed) {
-                    subscription.unsubscribe();
-                    return subscription;
-                }
-                else if (!(subscription instanceof Subscription)) {
-                    const tmp = subscription;
-                    subscription = new Subscription();
-                    subscription._subscriptions = [tmp];
-                }
-                break;
-            default: {
-                throw new Error('unrecognized teardown ' + teardown + ' added to Subscription.');
-            }
-        }
-        let { _parentOrParents } = subscription;
-        if (_parentOrParents === null) {
-            subscription._parentOrParents = this;
-        }
-        else if (_parentOrParents instanceof Subscription) {
-            if (_parentOrParents === this) {
-                return subscription;
-            }
-            subscription._parentOrParents = [_parentOrParents, this];
-        }
-        else if (_parentOrParents.indexOf(this) === -1) {
-            _parentOrParents.push(this);
-        }
-        else {
-            return subscription;
-        }
-        const subscriptions = this._subscriptions;
-        if (subscriptions === null) {
-            this._subscriptions = [subscription];
-        }
-        else {
-            subscriptions.push(subscription);
-        }
-        return subscription;
-    }
-    remove(subscription) {
-        const subscriptions = this._subscriptions;
-        if (subscriptions) {
-            const subscriptionIndex = subscriptions.indexOf(subscription);
-            if (subscriptionIndex !== -1) {
-                subscriptions.splice(subscriptionIndex, 1);
-            }
-        }
-    }
-}
-Subscription.EMPTY = (function (empty) {
-    empty.closed = true;
-    return empty;
-}(new Subscription()));
-function flattenUnsubscriptionErrors(errors) {
-    return errors.reduce((errs, err) => errs.concat((err instanceof UnsubscriptionError) ? err.errors : err), []);
-}
+    // globals
+    var Element = w.HTMLElement || w.Element;
+    var SCROLL_TIME = 468;
 
-const rxSubscriber = (() => typeof Symbol === 'function'
-    ? Symbol('rxSubscriber')
-    : '@@rxSubscriber_' + Math.random())();
+    // object gathering original scroll methods
+    var original = {
+      scroll: w.scroll || w.scrollTo,
+      scrollBy: w.scrollBy,
+      elementScroll: Element.prototype.scroll || scrollElement,
+      scrollIntoView: Element.prototype.scrollIntoView
+    };
 
-class Subscriber extends Subscription {
-    constructor(destinationOrNext, error, complete) {
-        super();
-        this.syncErrorValue = null;
-        this.syncErrorThrown = false;
-        this.syncErrorThrowable = false;
-        this.isStopped = false;
-        switch (arguments.length) {
-            case 0:
-                this.destination = empty;
-                break;
-            case 1:
-                if (!destinationOrNext) {
-                    this.destination = empty;
-                    break;
-                }
-                if (typeof destinationOrNext === 'object') {
-                    if (destinationOrNext instanceof Subscriber) {
-                        this.syncErrorThrowable = destinationOrNext.syncErrorThrowable;
-                        this.destination = destinationOrNext;
-                        destinationOrNext.add(this);
-                    }
-                    else {
-                        this.syncErrorThrowable = true;
-                        this.destination = new SafeSubscriber(this, destinationOrNext);
-                    }
-                    break;
-                }
-            default:
-                this.syncErrorThrowable = true;
-                this.destination = new SafeSubscriber(this, destinationOrNext, error, complete);
-                break;
-        }
-    }
-    [rxSubscriber]() { return this; }
-    static create(next, error, complete) {
-        const subscriber = new Subscriber(next, error, complete);
-        subscriber.syncErrorThrowable = false;
-        return subscriber;
-    }
-    next(value) {
-        if (!this.isStopped) {
-            this._next(value);
-        }
-    }
-    error(err) {
-        if (!this.isStopped) {
-            this.isStopped = true;
-            this._error(err);
-        }
-    }
-    complete() {
-        if (!this.isStopped) {
-            this.isStopped = true;
-            this._complete();
-        }
-    }
-    unsubscribe() {
-        if (this.closed) {
-            return;
-        }
-        this.isStopped = true;
-        super.unsubscribe();
-    }
-    _next(value) {
-        this.destination.next(value);
-    }
-    _error(err) {
-        this.destination.error(err);
-        this.unsubscribe();
-    }
-    _complete() {
-        this.destination.complete();
-        this.unsubscribe();
-    }
-    _unsubscribeAndRecycle() {
-        const { _parentOrParents } = this;
-        this._parentOrParents = null;
-        this.unsubscribe();
-        this.closed = false;
-        this.isStopped = false;
-        this._parentOrParents = _parentOrParents;
-        return this;
-    }
-}
-class SafeSubscriber extends Subscriber {
-    constructor(_parentSubscriber, observerOrNext, error, complete) {
-        super();
-        this._parentSubscriber = _parentSubscriber;
-        let next;
-        let context = this;
-        if (isFunction(observerOrNext)) {
-            next = observerOrNext;
-        }
-        else if (observerOrNext) {
-            next = observerOrNext.next;
-            error = observerOrNext.error;
-            complete = observerOrNext.complete;
-            if (observerOrNext !== empty) {
-                context = Object.create(observerOrNext);
-                if (isFunction(context.unsubscribe)) {
-                    this.add(context.unsubscribe.bind(context));
-                }
-                context.unsubscribe = this.unsubscribe.bind(this);
-            }
-        }
-        this._context = context;
-        this._next = next;
-        this._error = error;
-        this._complete = complete;
-    }
-    next(value) {
-        if (!this.isStopped && this._next) {
-            const { _parentSubscriber } = this;
-            if (!config.useDeprecatedSynchronousErrorHandling || !_parentSubscriber.syncErrorThrowable) {
-                this.__tryOrUnsub(this._next, value);
-            }
-            else if (this.__tryOrSetError(_parentSubscriber, this._next, value)) {
-                this.unsubscribe();
-            }
-        }
-    }
-    error(err) {
-        if (!this.isStopped) {
-            const { _parentSubscriber } = this;
-            const { useDeprecatedSynchronousErrorHandling } = config;
-            if (this._error) {
-                if (!useDeprecatedSynchronousErrorHandling || !_parentSubscriber.syncErrorThrowable) {
-                    this.__tryOrUnsub(this._error, err);
-                    this.unsubscribe();
-                }
-                else {
-                    this.__tryOrSetError(_parentSubscriber, this._error, err);
-                    this.unsubscribe();
-                }
-            }
-            else if (!_parentSubscriber.syncErrorThrowable) {
-                this.unsubscribe();
-                if (useDeprecatedSynchronousErrorHandling) {
-                    throw err;
-                }
-                hostReportError(err);
-            }
-            else {
-                if (useDeprecatedSynchronousErrorHandling) {
-                    _parentSubscriber.syncErrorValue = err;
-                    _parentSubscriber.syncErrorThrown = true;
-                }
-                else {
-                    hostReportError(err);
-                }
-                this.unsubscribe();
-            }
-        }
-    }
-    complete() {
-        if (!this.isStopped) {
-            const { _parentSubscriber } = this;
-            if (this._complete) {
-                const wrappedComplete = () => this._complete.call(this._context);
-                if (!config.useDeprecatedSynchronousErrorHandling || !_parentSubscriber.syncErrorThrowable) {
-                    this.__tryOrUnsub(wrappedComplete);
-                    this.unsubscribe();
-                }
-                else {
-                    this.__tryOrSetError(_parentSubscriber, wrappedComplete);
-                    this.unsubscribe();
-                }
-            }
-            else {
-                this.unsubscribe();
-            }
-        }
-    }
-    __tryOrUnsub(fn, value) {
-        try {
-            fn.call(this._context, value);
-        }
-        catch (err) {
-            this.unsubscribe();
-            if (config.useDeprecatedSynchronousErrorHandling) {
-                throw err;
-            }
-            else {
-                hostReportError(err);
-            }
-        }
-    }
-    __tryOrSetError(parent, fn, value) {
-        if (!config.useDeprecatedSynchronousErrorHandling) {
-            throw new Error('bad call');
-        }
-        try {
-            fn.call(this._context, value);
-        }
-        catch (err) {
-            if (config.useDeprecatedSynchronousErrorHandling) {
-                parent.syncErrorValue = err;
-                parent.syncErrorThrown = true;
-                return true;
-            }
-            else {
-                hostReportError(err);
-                return true;
-            }
-        }
+    // define timing method
+    var now =
+      w.performance && w.performance.now
+        ? w.performance.now.bind(w.performance)
+        : Date.now;
+
+    /**
+     * indicates if a the current browser is made by Microsoft
+     * @method isMicrosoftBrowser
+     * @param {String} userAgent
+     * @returns {Boolean}
+     */
+    function isMicrosoftBrowser(userAgent) {
+      var userAgentPatterns = ['MSIE ', 'Trident/', 'Edge/'];
+
+      return new RegExp(userAgentPatterns.join('|')).test(userAgent);
+    }
+
+    /*
+     * IE has rounding bug rounding down clientHeight and clientWidth and
+     * rounding up scrollHeight and scrollWidth causing false positives
+     * on hasScrollableSpace
+     */
+    var ROUNDING_TOLERANCE = isMicrosoftBrowser(w.navigator.userAgent) ? 1 : 0;
+
+    /**
+     * changes scroll position inside an element
+     * @method scrollElement
+     * @param {Number} x
+     * @param {Number} y
+     * @returns {undefined}
+     */
+    function scrollElement(x, y) {
+      this.scrollLeft = x;
+      this.scrollTop = y;
+    }
+
+    /**
+     * returns result of applying ease math function to a number
+     * @method ease
+     * @param {Number} k
+     * @returns {Number}
+     */
+    function ease(k) {
+      return 0.5 * (1 - Math.cos(Math.PI * k));
+    }
+
+    /**
+     * indicates if a smooth behavior should be applied
+     * @method shouldBailOut
+     * @param {Number|Object} firstArg
+     * @returns {Boolean}
+     */
+    function shouldBailOut(firstArg) {
+      if (
+        firstArg === null ||
+        typeof firstArg !== 'object' ||
+        firstArg.behavior === undefined ||
+        firstArg.behavior === 'auto' ||
+        firstArg.behavior === 'instant'
+      ) {
+        // first argument is not an object/null
+        // or behavior is auto, instant or undefined
+        return true;
+      }
+
+      if (typeof firstArg === 'object' && firstArg.behavior === 'smooth') {
+        // first argument is an object and behavior is smooth
         return false;
-    }
-    _unsubscribe() {
-        const { _parentSubscriber } = this;
-        this._context = null;
-        this._parentSubscriber = null;
-        _parentSubscriber.unsubscribe();
-    }
-}
-
-function canReportError(observer) {
-    while (observer) {
-        const { closed, destination, isStopped } = observer;
-        if (closed || isStopped) {
-            return false;
-        }
-        else if (destination && destination instanceof Subscriber) {
-            observer = destination;
-        }
-        else {
-            observer = null;
-        }
-    }
-    return true;
-}
-
-function toSubscriber(nextOrObserver, error, complete) {
-    if (nextOrObserver) {
-        if (nextOrObserver instanceof Subscriber) {
-            return nextOrObserver;
-        }
-        if (nextOrObserver[rxSubscriber]) {
-            return nextOrObserver[rxSubscriber]();
-        }
-    }
-    if (!nextOrObserver && !error && !complete) {
-        return new Subscriber(empty);
-    }
-    return new Subscriber(nextOrObserver, error, complete);
-}
-
-const observable = (() => typeof Symbol === 'function' && Symbol.observable || '@@observable')();
-
-function identity(x) {
-    return x;
-}
-
-function pipeFromArray(fns) {
-    if (fns.length === 0) {
-        return identity;
-    }
-    if (fns.length === 1) {
-        return fns[0];
-    }
-    return function piped(input) {
-        return fns.reduce((prev, fn) => fn(prev), input);
+      }
+
+      // throw error when behavior is not supported
+      throw new TypeError(
+        'behavior member of ScrollOptions ' +
+          firstArg.behavior +
+          ' is not a valid value for enumeration ScrollBehavior.'
+      );
+    }
+
+    /**
+     * indicates if an element has scrollable space in the provided axis
+     * @method hasScrollableSpace
+     * @param {Node} el
+     * @param {String} axis
+     * @returns {Boolean}
+     */
+    function hasScrollableSpace(el, axis) {
+      if (axis === 'Y') {
+        return el.clientHeight + ROUNDING_TOLERANCE < el.scrollHeight;
+      }
+
+      if (axis === 'X') {
+        return el.clientWidth + ROUNDING_TOLERANCE < el.scrollWidth;
+      }
+    }
+
+    /**
+     * indicates if an element has a scrollable overflow property in the axis
+     * @method canOverflow
+     * @param {Node} el
+     * @param {String} axis
+     * @returns {Boolean}
+     */
+    function canOverflow(el, axis) {
+      var overflowValue = w.getComputedStyle(el, null)['overflow' + axis];
+
+      return overflowValue === 'auto' || overflowValue === 'scroll';
+    }
+
+    /**
+     * indicates if an element can be scrolled in either axis
+     * @method isScrollable
+     * @param {Node} el
+     * @param {String} axis
+     * @returns {Boolean}
+     */
+    function isScrollable(el) {
+      var isScrollableY = hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y');
+      var isScrollableX = hasScrollableSpace(el, 'X') && canOverflow(el, 'X');
+
+      return isScrollableY || isScrollableX;
+    }
+
+    /**
+     * finds scrollable parent of an element
+     * @method findScrollableParent
+     * @param {Node} el
+     * @returns {Node} el
+     */
+    function findScrollableParent(el) {
+      while (el !== d.body && isScrollable(el) === false) {
+        el = el.parentNode || el.host;
+      }
+
+      return el;
+    }
+
+    /**
+     * self invoked function that, given a context, steps through scrolling
+     * @method step
+     * @param {Object} context
+     * @returns {undefined}
+     */
+    function step(context) {
+      var time = now();
+      var value;
+      var currentX;
+      var currentY;
+      var elapsed = (time - context.startTime) / SCROLL_TIME;
+
+      // avoid elapsed times higher than one
+      elapsed = elapsed > 1 ? 1 : elapsed;
+
+      // apply easing to elapsed time
+      value = ease(elapsed);
+
+      currentX = context.startX + (context.x - context.startX) * value;
+      currentY = context.startY + (context.y - context.startY) * value;
+
+      context.method.call(context.scrollable, currentX, currentY);
+
+      // scroll more if we have not reached our destination
+      if (currentX !== context.x || currentY !== context.y) {
+        w.requestAnimationFrame(step.bind(w, context));
+      }
+    }
+
+    /**
+     * scrolls window or element with a smooth behavior
+     * @method smoothScroll
+     * @param {Object|Node} el
+     * @param {Number} x
+     * @param {Number} y
+     * @returns {undefined}
+     */
+    function smoothScroll(el, x, y) {
+      var scrollable;
+      var startX;
+      var startY;
+      var method;
+      var startTime = now();
+
+      // define scroll context
+      if (el === d.body) {
+        scrollable = w;
+        startX = w.scrollX || w.pageXOffset;
+        startY = w.scrollY || w.pageYOffset;
+        method = original.scroll;
+      } else {
+        scrollable = el;
+        startX = el.scrollLeft;
+        startY = el.scrollTop;
+        method = scrollElement;
+      }
+
+      // scroll looping over a frame
+      step({
+        scrollable: scrollable,
+        method: method,
+        startTime: startTime,
+        startX: startX,
+        startY: startY,
+        x: x,
+        y: y
+      });
+    }
+
+    // ORIGINAL METHODS OVERRIDES
+    // w.scroll and w.scrollTo
+    w.scroll = w.scrollTo = function() {
+      // avoid action when no arguments are passed
+      if (arguments[0] === undefined) {
+        return;
+      }
+
+      // avoid smooth behavior if not required
+      if (shouldBailOut(arguments[0]) === true) {
+        original.scroll.call(
+          w,
+          arguments[0].left !== undefined
+            ? arguments[0].left
+            : typeof arguments[0] !== 'object'
+              ? arguments[0]
+              : w.scrollX || w.pageXOffset,
+          // use top prop, second argument if present or fallback to scrollY
+          arguments[0].top !== undefined
+            ? arguments[0].top
+            : arguments[1] !== undefined
+              ? arguments[1]
+              : w.scrollY || w.pageYOffset
+        );
+
+        return;
+      }
+
+      // LET THE SMOOTHNESS BEGIN!
+      smoothScroll.call(
+        w,
+        d.body,
+        arguments[0].left !== undefined
+          ? ~~arguments[0].left
+          : w.scrollX || w.pageXOffset,
+        arguments[0].top !== undefined
+          ? ~~arguments[0].top
+          : w.scrollY || w.pageYOffset
+      );
     };
-}
-
-class Observable {
-    constructor(subscribe) {
-        this._isScalar = false;
-        if (subscribe) {
-            this._subscribe = subscribe;
-        }
-    }
-    lift(operator) {
-        const observable = new Observable();
-        observable.source = this;
-        observable.operator = operator;
-        return observable;
-    }
-    subscribe(observerOrNext, error, complete) {
-        const { operator } = this;
-        const sink = toSubscriber(observerOrNext, error, complete);
-        if (operator) {
-            sink.add(operator.call(sink, this.source));
-        }
-        else {
-            sink.add(this.source || (config.useDeprecatedSynchronousErrorHandling && !sink.syncErrorThrowable) ?
-                this._subscribe(sink) :
-                this._trySubscribe(sink));
-        }
-        if (config.useDeprecatedSynchronousErrorHandling) {
-            if (sink.syncErrorThrowable) {
-                sink.syncErrorThrowable = false;
-                if (sink.syncErrorThrown) {
-                    throw sink.syncErrorValue;
-                }
-            }
-        }
-        return sink;
-    }
-    _trySubscribe(sink) {
-        try {
-            return this._subscribe(sink);
-        }
-        catch (err) {
-            if (config.useDeprecatedSynchronousErrorHandling) {
-                sink.syncErrorThrown = true;
-                sink.syncErrorValue = err;
-            }
-            if (canReportError(sink)) {
-                sink.error(err);
-            }
-            else {
-                console.warn(err);
-            }
-        }
-    }
-    forEach(next, promiseCtor) {
-        promiseCtor = getPromiseCtor(promiseCtor);
-        return new promiseCtor((resolve, reject) => {
-            let subscription;
-            subscription = this.subscribe((value) => {
-                try {
-                    next(value);
-                }
-                catch (err) {
-                    reject(err);
-                    if (subscription) {
-                        subscription.unsubscribe();
-                    }
-                }
-            }, reject, resolve);
-        });
-    }
-    _subscribe(subscriber) {
-        const { source } = this;
-        return source && source.subscribe(subscriber);
-    }
-    [observable]() {
-        return this;
-    }
-    pipe(...operations) {
-        if (operations.length === 0) {
-            return this;
-        }
-        return pipeFromArray(operations)(this);
-    }
-    toPromise(promiseCtor) {
-        promiseCtor = getPromiseCtor(promiseCtor);
-        return new promiseCtor((resolve, reject) => {
-            let value;
-            this.subscribe((x) => value = x, (err) => reject(err), () => resolve(value));
-        });
-    }
-}
-Observable.create = (subscribe) => {
-    return new Observable(subscribe);
-};
-function getPromiseCtor(promiseCtor) {
-    if (!promiseCtor) {
-        promiseCtor =  Promise;
-    }
-    if (!promiseCtor) {
-        throw new Error('no Promise impl found');
-    }
-    return promiseCtor;
-}
-
-class Action extends Subscription {
-    constructor(scheduler, work) {
-        super();
-    }
-    schedule(state, delay = 0) {
-        return this;
-    }
-}
-
-class AsyncAction extends Action {
-    constructor(scheduler, work) {
-        super(scheduler, work);
-        this.scheduler = scheduler;
-        this.work = work;
-        this.pending = false;
-    }
-    schedule(state, delay = 0) {
-        if (this.closed) {
-            return this;
-        }
-        this.state = state;
-        const id = this.id;
-        const scheduler = this.scheduler;
-        if (id != null) {
-            this.id = this.recycleAsyncId(scheduler, id, delay);
-        }
-        this.pending = true;
-        this.delay = delay;
-        this.id = this.id || this.requestAsyncId(scheduler, this.id, delay);
-        return this;
-    }
-    requestAsyncId(scheduler, id, delay = 0) {
-        return setInterval(scheduler.flush.bind(scheduler, this), delay);
-    }
-    recycleAsyncId(scheduler, id, delay = 0) {
-        if (delay !== null && this.delay === delay && this.pending === false) {
-            return id;
-        }
-        clearInterval(id);
-        return undefined;
-    }
-    execute(state, delay) {
-        if (this.closed) {
-            return new Error('executing a cancelled action');
-        }
-        this.pending = false;
-        const error = this._execute(state, delay);
-        if (error) {
-            return error;
-        }
-        else if (this.pending === false && this.id != null) {
-            this.id = this.recycleAsyncId(this.scheduler, this.id, null);
-        }
-    }
-    _execute(state, delay) {
-        let errored = false;
-        let errorValue = undefined;
-        try {
-            this.work(state);
-        }
-        catch (e) {
-            errored = true;
-            errorValue = !!e && e || new Error(e);
-        }
-        if (errored) {
-            this.unsubscribe();
-            return errorValue;
-        }
-    }
-    _unsubscribe() {
-        const id = this.id;
-        const scheduler = this.scheduler;
-        const actions = scheduler.actions;
-        const index = actions.indexOf(this);
-        this.work = null;
-        this.state = null;
-        this.pending = false;
-        this.scheduler = null;
-        if (index !== -1) {
-            actions.splice(index, 1);
-        }
-        if (id != null) {
-            this.id = this.recycleAsyncId(scheduler, id, null);
-        }
-        this.delay = null;
-    }
-}
-
-class Scheduler {
-    constructor(SchedulerAction, now = Scheduler.now) {
-        this.SchedulerAction = SchedulerAction;
-        this.now = now;
-    }
-    schedule(work, delay = 0, state) {
-        return new this.SchedulerAction(this, work).schedule(state, delay);
-    }
-}
-Scheduler.now = () => Date.now();
-
-class AsyncScheduler extends Scheduler {
-    constructor(SchedulerAction, now = Scheduler.now) {
-        super(SchedulerAction, () => {
-            if (AsyncScheduler.delegate && AsyncScheduler.delegate !== this) {
-                return AsyncScheduler.delegate.now();
-            }
-            else {
-                return now();
-            }
-        });
-        this.actions = [];
-        this.active = false;
-        this.scheduled = undefined;
-    }
-    schedule(work, delay = 0, state) {
-        if (AsyncScheduler.delegate && AsyncScheduler.delegate !== this) {
-            return AsyncScheduler.delegate.schedule(work, delay, state);
-        }
-        else {
-            return super.schedule(work, delay, state);
-        }
-    }
-    flush(action) {
-        const { actions } = this;
-        if (this.active) {
-            actions.push(action);
-            return;
-        }
-        let error;
-        this.active = true;
-        do {
-            if (error = action.execute(action.state, action.delay)) {
-                break;
-            }
-        } while (action = actions.shift());
-        this.active = false;
-        if (error) {
-            while (action = actions.shift()) {
-                action.unsubscribe();
-            }
-            throw error;
-        }
-    }
-}
 
-const subscribeToArray = (array) => (subscriber) => {
-    for (let i = 0, len = array.length; i < len && !subscriber.closed; i++) {
-        subscriber.next(array[i]);
-    }
-    subscriber.complete();
-};
-
-const asyncScheduler = new AsyncScheduler(AsyncAction);
-const async = asyncScheduler;
-
-function map(project, thisArg) {
-    return function mapOperation(source) {
-        if (typeof project !== 'function') {
-            throw new TypeError('argument is not a function. Are you looking for `mapTo()`?');
-        }
-        return source.lift(new MapOperator(project, thisArg));
+    // w.scrollBy
+    w.scrollBy = function() {
+      // avoid action when no arguments are passed
+      if (arguments[0] === undefined) {
+        return;
+      }
+
+      // avoid smooth behavior if not required
+      if (shouldBailOut(arguments[0])) {
+        original.scrollBy.call(
+          w,
+          arguments[0].left !== undefined
+            ? arguments[0].left
+            : typeof arguments[0] !== 'object' ? arguments[0] : 0,
+          arguments[0].top !== undefined
+            ? arguments[0].top
+            : arguments[1] !== undefined ? arguments[1] : 0
+        );
+
+        return;
+      }
+
+      // LET THE SMOOTHNESS BEGIN!
+      smoothScroll.call(
+        w,
+        d.body,
+        ~~arguments[0].left + (w.scrollX || w.pageXOffset),
+        ~~arguments[0].top + (w.scrollY || w.pageYOffset)
+      );
     };
-}
-class MapOperator {
-    constructor(project, thisArg) {
-        this.project = project;
-        this.thisArg = thisArg;
-    }
-    call(subscriber, source) {
-        return source.subscribe(new MapSubscriber(subscriber, this.project, this.thisArg));
-    }
-}
-class MapSubscriber extends Subscriber {
-    constructor(destination, project, thisArg) {
-        super(destination);
-        this.project = project;
-        this.count = 0;
-        this.thisArg = thisArg || this;
-    }
-    _next(value) {
-        let result;
-        try {
-            result = this.project.call(this.thisArg, value, this.count++);
-        }
-        catch (err) {
-            this.destination.error(err);
-            return;
-        }
-        this.destination.next(result);
-    }
-}
 
-const subscribeToPromise = (promise) => (subscriber) => {
-    promise.then((value) => {
-        if (!subscriber.closed) {
-            subscriber.next(value);
-            subscriber.complete();
-        }
-    }, (err) => subscriber.error(err))
-        .then(null, hostReportError);
-    return subscriber;
-};
+    // Element.prototype.scroll and Element.prototype.scrollTo
+    Element.prototype.scroll = Element.prototype.scrollTo = function() {
+      // avoid action when no arguments are passed
+      if (arguments[0] === undefined) {
+        return;
+      }
+
+      // avoid smooth behavior if not required
+      if (shouldBailOut(arguments[0]) === true) {
+        // if one number is passed, throw error to match Firefox implementation
+        if (typeof arguments[0] === 'number' && arguments[1] === undefined) {
+          throw new SyntaxError('Value could not be converted');
+        }
+
+        original.elementScroll.call(
+          this,
+          // use left prop, first number argument or fallback to scrollLeft
+          arguments[0].left !== undefined
+            ? ~~arguments[0].left
+            : typeof arguments[0] !== 'object' ? ~~arguments[0] : this.scrollLeft,
+          // use top prop, second argument or fallback to scrollTop
+          arguments[0].top !== undefined
+            ? ~~arguments[0].top
+            : arguments[1] !== undefined ? ~~arguments[1] : this.scrollTop
+        );
+
+        return;
+      }
+
+      var left = arguments[0].left;
+      var top = arguments[0].top;
+
+      // LET THE SMOOTHNESS BEGIN!
+      smoothScroll.call(
+        this,
+        this,
+        typeof left === 'undefined' ? this.scrollLeft : ~~left,
+        typeof top === 'undefined' ? this.scrollTop : ~~top
+      );
+    };
 
-function getSymbolIterator() {
-    if (typeof Symbol !== 'function' || !Symbol.iterator) {
-        return '@@iterator';
-    }
-    return Symbol.iterator;
-}
-const iterator = getSymbolIterator();
+    // Element.prototype.scrollBy
+    Element.prototype.scrollBy = function() {
+      // avoid action when no arguments are passed
+      if (arguments[0] === undefined) {
+        return;
+      }
+
+      // avoid smooth behavior if not required
+      if (shouldBailOut(arguments[0]) === true) {
+        original.elementScroll.call(
+          this,
+          arguments[0].left !== undefined
+            ? ~~arguments[0].left + this.scrollLeft
+            : ~~arguments[0] + this.scrollLeft,
+          arguments[0].top !== undefined
+            ? ~~arguments[0].top + this.scrollTop
+            : ~~arguments[1] + this.scrollTop
+        );
+
+        return;
+      }
+
+      this.scroll({
+        left: ~~arguments[0].left + this.scrollLeft,
+        top: ~~arguments[0].top + this.scrollTop,
+        behavior: arguments[0].behavior
+      });
+    };
 
-const subscribeToIterable = (iterable) => (subscriber) => {
-    const iterator$1 = iterable[iterator]();
-    do {
-        let item;
-        try {
-            item = iterator$1.next();
-        }
-        catch (err) {
-            subscriber.error(err);
-            return subscriber;
-        }
-        if (item.done) {
-            subscriber.complete();
-            break;
-        }
-        subscriber.next(item.value);
-        if (subscriber.closed) {
-            break;
-        }
-    } while (true);
-    if (typeof iterator$1.return === 'function') {
-        subscriber.add(() => {
-            if (iterator$1.return) {
-                iterator$1.return();
-            }
+    // Element.prototype.scrollIntoView
+    Element.prototype.scrollIntoView = function() {
+      // avoid smooth behavior if not required
+      if (shouldBailOut(arguments[0]) === true) {
+        original.scrollIntoView.call(
+          this,
+          arguments[0] === undefined ? true : arguments[0]
+        );
+
+        return;
+      }
+
+      // LET THE SMOOTHNESS BEGIN!
+      var scrollableParent = findScrollableParent(this);
+      var parentRects = scrollableParent.getBoundingClientRect();
+      var clientRects = this.getBoundingClientRect();
+
+      if (scrollableParent !== d.body) {
+        // reveal element inside parent
+        smoothScroll.call(
+          this,
+          scrollableParent,
+          scrollableParent.scrollLeft + clientRects.left - parentRects.left,
+          scrollableParent.scrollTop + clientRects.top - parentRects.top
+        );
+
+        // reveal parent in viewport unless is fixed
+        if (w.getComputedStyle(scrollableParent).position !== 'fixed') {
+          w.scrollBy({
+            left: parentRects.left,
+            top: parentRects.top,
+            behavior: 'smooth'
+          });
+        }
+      } else {
+        // reveal element in viewport
+        w.scrollBy({
+          left: clientRects.left,
+          top: clientRects.top,
+          behavior: 'smooth'
         });
-    }
-    return subscriber;
-};
-
-const subscribeToObservable = (obj) => (subscriber) => {
-    const obs = obj[observable]();
-    if (typeof obs.subscribe !== 'function') {
-        throw new TypeError('Provided object does not correctly implement Symbol.observable');
-    }
-    else {
-        return obs.subscribe(subscriber);
-    }
-};
-
-const isArrayLike = ((x) => x && typeof x.length === 'number' && typeof x !== 'function');
-
-function isPromise(value) {
-    return !!value && typeof value.subscribe !== 'function' && typeof value.then === 'function';
-}
-
-const subscribeTo = (result) => {
-    if (!!result && typeof result[observable] === 'function') {
-        return subscribeToObservable(result);
-    }
-    else if (isArrayLike(result)) {
-        return subscribeToArray(result);
-    }
-    else if (isPromise(result)) {
-        return subscribeToPromise(result);
-    }
-    else if (!!result && typeof result[iterator] === 'function') {
-        return subscribeToIterable(result);
-    }
-    else {
-        const value = isObject(result) ? 'an invalid object' : `'${result}'`;
-        const msg = `You provided ${value} where a stream was expected.`
-            + ' You can provide an Observable, Promise, Array, or Iterable.';
-        throw new TypeError(msg);
-    }
-};
-
-class SimpleInnerSubscriber extends Subscriber {
-    constructor(parent) {
-        super();
-        this.parent = parent;
-    }
-    _next(value) {
-        this.parent.notifyNext(value);
-    }
-    _error(error) {
-        this.parent.notifyError(error);
-        this.unsubscribe();
-    }
-    _complete() {
-        this.parent.notifyComplete();
-        this.unsubscribe();
-    }
-}
-class SimpleOuterSubscriber extends Subscriber {
-    notifyNext(innerValue) {
-        this.destination.next(innerValue);
-    }
-    notifyError(err) {
-        this.destination.error(err);
-    }
-    notifyComplete() {
-        this.destination.complete();
-    }
-}
-function innerSubscribe(result, innerSubscriber) {
-    if (innerSubscriber.closed) {
-        return undefined;
-    }
-    if (result instanceof Observable) {
-        return result.subscribe(innerSubscriber);
-    }
-    return subscribeTo(result)(innerSubscriber);
-}
+      }
+    };
+  }
 
-function fromEvent(target, eventName, options, resultSelector) {
-    if (isFunction(options)) {
-        resultSelector = options;
-        options = undefined;
-    }
-    if (resultSelector) {
-        return fromEvent(target, eventName, options).pipe(map(args => isArray(args) ? resultSelector(...args) : resultSelector(args)));
-    }
-    return new Observable(subscriber => {
-        function handler(e) {
-            if (arguments.length > 1) {
-                subscriber.next(Array.prototype.slice.call(arguments));
-            }
-            else {
-                subscriber.next(e);
-            }
-        }
-        setupSubscription(target, eventName, handler, subscriber, options);
-    });
-}
-function setupSubscription(sourceObj, eventName, handler, subscriber, options) {
-    let unsubscribe;
-    if (isEventTarget(sourceObj)) {
-        const source = sourceObj;
-        sourceObj.addEventListener(eventName, handler, options);
-        unsubscribe = () => source.removeEventListener(eventName, handler, options);
-    }
-    else if (isJQueryStyleEventEmitter(sourceObj)) {
-        const source = sourceObj;
-        sourceObj.on(eventName, handler);
-        unsubscribe = () => source.off(eventName, handler);
-    }
-    else if (isNodeStyleEventEmitter(sourceObj)) {
-        const source = sourceObj;
-        sourceObj.addListener(eventName, handler);
-        unsubscribe = () => source.removeListener(eventName, handler);
-    }
-    else if (sourceObj && sourceObj.length) {
-        for (let i = 0, len = sourceObj.length; i < len; i++) {
-            setupSubscription(sourceObj[i], eventName, handler, subscriber, options);
-        }
-    }
-    else {
-        throw new TypeError('Invalid event target');
-    }
-    subscriber.add(unsubscribe);
-}
-function isNodeStyleEventEmitter(sourceObj) {
-    return sourceObj && typeof sourceObj.addListener === 'function' && typeof sourceObj.removeListener === 'function';
-}
-function isJQueryStyleEventEmitter(sourceObj) {
-    return sourceObj && typeof sourceObj.on === 'function' && typeof sourceObj.off === 'function';
-}
-function isEventTarget(sourceObj) {
-    return sourceObj && typeof sourceObj.addEventListener === 'function' && typeof sourceObj.removeEventListener === 'function';
-}
+  {
+    // commonjs
+    module.exports = { polyfill: polyfill };
+  }
 
-function isNumeric(val) {
-    return !isArray(val) && (val - parseFloat(val) + 1) >= 0;
-}
+}());
+});
 
-function interval(period = 0, scheduler = async) {
-    if (!isNumeric(period) || period < 0) {
-        period = 0;
-    }
-    if (!scheduler || typeof scheduler.schedule !== 'function') {
-        scheduler = async;
-    }
-    return new Observable(subscriber => {
-        subscriber.add(scheduler.schedule(dispatch, period, { subscriber, counter: 0, period }));
-        return subscriber;
-    });
-}
-function dispatch(state) {
-    const { subscriber, counter, period } = state;
-    subscriber.next(counter);
-    this.schedule({ subscriber, counter: counter + 1, period }, period);
-}
+const stylesCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}*:active{outline:none}*:focus{outline:none;-webkit-box-shadow:var(--const-global-focus);box-shadow:var(--const-global-focus)}:host{-webkit-box-shadow:none !important;box-shadow:none !important}::-moz-focus-inner{border:none}input,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.tab-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.tab-list{padding:0;display:-ms-flexbox;display:flex;margin:0;list-style:none;border-bottom:1px solid\n        var(--tct-tab-container-border-color, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)));white-space:nowrap;overflow-x:hidden;-ms-flex-align:center;align-items:center}.tab-list li.nav{position:absolute;height:44px;width:46px}.tab-list li.nav-left{left:-15px;background:-webkit-gradient(linear, left top, right top, color-stop(60%, var(--tct-section-bg, var(--t-section-bg, #ffffff))), to(rgba(255,255,255,0)));background:linear-gradient(to right, var(--tct-section-bg, var(--t-section-bg, #ffffff)) 60%, rgba(255,255,255,0))}.tab-list li.nav-right{right:-15px;background:-webkit-gradient(linear, right top, left top, color-stop(60%, var(--tct-section-bg, var(--t-section-bg, #ffffff))), to(rgba(255,255,255,0)));background:linear-gradient(to left, var(--tct-section-bg, var(--t-section-bg, #ffffff)) 60%, rgba(255,255,255,0))}.tab-list li.nav .arrow-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:inherit;width:inherit;cursor:pointer}.tab-list li.nav .arrow-container a{padding:0;margin:0;height:inherit;width:inherit;border-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.tab-list li.nav .arrow-container a q2-icon{width:19px;height:19px}.tab-list a{width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%));text-align:center;text-decoration:none;padding:var(--tct-scale-2, var(--app-scale-2, 10px));margin:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px))\n        0;color:var(--tct-tab-inactive-color, var(--t-tab-inactive, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));border-bottom:3px solid transparent;display:block;-webkit-transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type='section']) .tab-list a{font-size:inherit;padding:var(--tct-scale-2, var(--app-scale-2, 10px))\n        var(--tct-scale-1, var(--app-scale-1, 5px))}@media screen and (max-width: 767px){.tab-list a{font-size:inherit;padding:var(--tct-scale-2, var(--app-scale-2, 10px))\n            var(--tct-scale-1, var(--app-scale-1, 5px))}}.tab-list a:hover{color:var(--tct-tab-active-color, var(--t-tab-active, #2e2e2e));background-color:var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}.tab-list a[aria-selected='true']{color:var(--tct-tab-active-color, var(--t-tab-active, #2e2e2e));border-color:currentColor;width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background-color:var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit))}:host([color='alt']) .tab-list a{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive, inherit))}:host([color='alt']) .tab-list a:hover,:host([color='alt']) .tab-list a[aria-selected='true']{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active, inherit))}.tab-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px)) 0}";
 
-function debounce(durationSelector) {
-    return (source) => source.lift(new DebounceOperator(durationSelector));
-}
-class DebounceOperator {
-    constructor(durationSelector) {
-        this.durationSelector = durationSelector;
-    }
-    call(subscriber, source) {
-        return source.subscribe(new DebounceSubscriber(subscriber, this.durationSelector));
-    }
+// enable scroll animation polyfill only on safari
+const userAgent = navigator.userAgent.toLowerCase();
+const isSafari = userAgent.includes('safari') && !userAgent.includes('chrome');
+const isFirefox = userAgent.includes('firefox');
+if (isSafari) {
+    // smooth scroll is not supported on safari
+    smoothscroll.polyfill();
+    window['__forceSmoothScrollPolyfill__'] = true;
 }
-class DebounceSubscriber extends SimpleOuterSubscriber {
-    constructor(destination, durationSelector) {
-        super(destination);
-        this.durationSelector = durationSelector;
-        this.hasValue = false;
-    }
-    _next(value) {
-        try {
-            const result = this.durationSelector.call(this, value);
-            if (result) {
-                this._tryNext(value, result);
-            }
-        }
-        catch (err) {
-            this.destination.error(err);
-        }
-    }
-    _complete() {
-        this.emitValue();
-        this.destination.complete();
-    }
-    _tryNext(value, duration) {
-        let subscription = this.durationSubscription;
-        this.value = value;
-        this.hasValue = true;
-        if (subscription) {
-            subscription.unsubscribe();
-            this.remove(subscription);
-        }
-        subscription = innerSubscribe(duration, new SimpleInnerSubscriber(this));
-        if (subscription && !subscription.closed) {
-            this.add(this.durationSubscription = subscription);
-        }
-    }
-    notifyNext() {
-        this.emitValue();
-    }
-    notifyComplete() {
-        this.emitValue();
-    }
-    emitValue() {
-        if (this.hasValue) {
-            const value = this.value;
-            const subscription = this.durationSubscription;
-            if (subscription) {
-                this.durationSubscription = undefined;
-                subscription.unsubscribe();
-                this.remove(subscription);
-            }
-            this.value = undefined;
-            this.hasValue = false;
-            super._next(value);
-        }
-    }
-}
-
-const stylesCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}*:active{outline:none}*:focus{outline:none;-webkit-box-shadow:var(--const-global-focus);box-shadow:var(--const-global-focus)}:host{-webkit-box-shadow:none !important;box-shadow:none !important}::-moz-focus-inner{border:none}input,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.tab-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.tab-list{padding:0;display:-ms-flexbox;display:flex;margin:0;list-style:none;border-bottom:1px solid\n        var(--tct-tab-container-border-color, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)));white-space:nowrap;overflow-x:hidden;-ms-flex-align:center;align-items:center}.tab-list li.nav{position:absolute;height:44px;width:46px}.tab-list li.nav-left{left:-15px;background:-webkit-gradient(linear, left top, right top, color-stop(60%, var(--tct-section-bg, var(--t-section-bg, #ffffff))), to(transparent));background:linear-gradient(to right, var(--tct-section-bg, var(--t-section-bg, #ffffff)) 60%, transparent)}.tab-list li.nav-right{right:-15px;background:-webkit-gradient(linear, right top, left top, color-stop(60%, var(--tct-section-bg, var(--t-section-bg, #ffffff))), to(transparent));background:linear-gradient(to left, var(--tct-section-bg, var(--t-section-bg, #ffffff)) 60%, transparent)}.tab-list li.nav .arrow-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:inherit;width:inherit;cursor:pointer}.tab-list li.nav .arrow-container a{padding:0;margin:0;height:inherit;width:inherit;border-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.tab-list li.nav .arrow-container a q2-icon{width:19px;height:19px}.tab-list a{text-decoration:none;padding:var(--tct-scale-2, var(--app-scale-2, 10px));margin:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px))\n        0;color:var(--tct-tab-inactive-color, var(--t-tab-inactive, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));border-bottom:3px solid transparent;display:block;-webkit-transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type='section']) .tab-list a{font-size:inherit;padding:var(--tct-scale-2, var(--app-scale-2, 10px))\n        var(--tct-scale-1, var(--app-scale-1, 5px))}@media screen and (max-width: 767px){.tab-list a{font-size:inherit;padding:var(--tct-scale-2, var(--app-scale-2, 10px))\n            var(--tct-scale-1, var(--app-scale-1, 5px))}}.tab-list a:hover{color:var(--tct-tab-active-color, var(--t-tab-active, #2e2e2e));background-color:var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}.tab-list a[aria-selected='true']{color:var(--tct-tab-active-color, var(--t-tab-active, #2e2e2e));border-color:currentColor;width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background-color:var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit))}:host([color='alt']) .tab-list a{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive, inherit))}:host([color='alt']) .tab-list a:hover,:host([color='alt']) .tab-list a[aria-selected='true']{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active, inherit))}.tab-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px)) 0}";
-
 const Q2TabContainer = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -1036,16 +465,9 @@ const Q2TabContainer = class {
         this.settled = createEvent(this, "settled", 7);
         this.guid = createGuid();
         this.scheduledAfterRender = [];
+        this.lastScrolled = new Date(null).getTime();
         this.hasLeft = false;
         this.hasRight = false;
-        this.initTabScroll = () => {
-            const tabList = this.hostElement.shadowRoot.querySelector('.tab-list');
-            if (tabList) {
-                const { scrollWidth, clientWidth, scrollLeft } = tabList;
-                this.hasLeft = scrollLeft > 0;
-                this.hasRight = scrollWidth > clientWidth;
-            }
-        };
         ///////// Actions /////////
         this.updateTabData = () => {
             this.updateTabPaneProps();
@@ -1081,34 +503,77 @@ const Q2TabContainer = class {
                 this.moveToAdjacentTab(value, 'prev');
                 return;
             }
+            if (event.code === 'Space' || event.code === 'Enter') {
+                // to prevent triggering scroll when press the space key
+                event.preventDefault();
+                this.change.emit({ value });
+                return;
+            }
         };
         this.moveToAdjacentTab = (value, direction) => {
             let index = this.tabs.map(({ value }) => value).indexOf(value);
-            let indexUpdated = false;
-            if (direction === 'next' && index !== this.tabs.length - 1) {
-                index = index + 1;
-                indexUpdated = true;
-            }
-            if (direction === 'prev' && index !== 0) {
-                index = index - 1;
-                indexUpdated = true;
+            let newIndex = direction === 'next'
+                ? Math.min(index + 1, this.tabs.length - 1)
+                : Math.max(index - 1, 0);
+            if (index !== newIndex) {
+                const focusedTab = this.moveFocus(newIndex);
+                // Scroll only if it overflows
+                if (this.tabList.scrollWidth > this.tabList.clientWidth) {
+                    // Scroll only if it's first or last tab
+                    if (newIndex !== 0 && newIndex !== this.tabs.length - 1) {
+                        this.scrollByKeyboard(direction, focusedTab);
+                    }
+                    else {
+                        // first or last element: just show or hide nav arrow
+                        this.onTabScroll(direction);
+                    }
+                }
             }
-            if (indexUpdated) {
-                const value = this.tabs[index].value;
-                this.hostElement.shadowRoot
-                    .querySelector(`.tab-list a[data-value="${value}"]`)
-                    .focus();
-                this.change.emit({ value });
+        };
+        this.moveFocus = (index) => {
+            const focusedValue = this.tabs[index].value;
+            const focusedTab = this.hostElement.shadowRoot.querySelector(`.tab-list a[data-value="${focusedValue}"]`);
+            focusedTab.focus({ preventScroll: true });
+            return focusedTab;
+        };
+        this.calculateKeyboardScroll = (direction, focusedTab) => {
+            const { left: tabListLeft } = this.tabList.getBoundingClientRect();
+            const { left: focusedTabLeft } = focusedTab.getBoundingClientRect();
+            const arrowWidth = 46;
+            let scrollAmount = 0;
+            // check how much focused tab overflows
+            if (direction === 'next' &&
+                focusedTabLeft + focusedTab.clientWidth >
+                    tabListLeft + this.tabList.clientWidth + arrowWidth) {
+                scrollAmount =
+                    this.tabList.scrollLeft +
+                        arrowWidth +
+                        (focusedTabLeft + focusedTab.clientWidth) -
+                        (tabListLeft + this.tabList.clientWidth);
+            }
+            else if (direction === 'prev' && focusedTabLeft + arrowWidth < tabListLeft) {
+                scrollAmount = this.tabList.scrollLeft - arrowWidth + (focusedTabLeft - tabListLeft);
+            }
+            return scrollAmount;
+        };
+        this.scrollByKeyboard = (direction, focusedTab) => {
+            const scrollAmount = this.calculateKeyboardScroll(direction, focusedTab);
+            if (scrollAmount !== 0) {
+                this.tabList.scroll({ left: scrollAmount, behavior: 'smooth' });
+                // wait to finish scroll then show or hide nav arrow
+                setTimeout(() => this.onTabScroll(), 100);
             }
         };
         this.calculateTabScroll = ({ direction, scrollWidth, clientWidth, scrollLeft }) => {
+            const directions = { prev: -1, next: 1 };
+            // step 0 means no scroll needed, re-render or resize can trigger this
+            const step = directions[direction] || 0;
             const scrollRate = 0.5; // half of visual width
-            const step = direction === 'left' ? -1 : 1;
             const delta = Math.round(clientWidth * scrollRate);
             const newScrollLeft = scrollLeft + step * delta;
             const scrolled = clientWidth + newScrollLeft;
             const hasLeft = newScrollLeft > 0;
-            const hasRight = scrollWidth >= scrolled;
+            const hasRight = scrollWidth > scrolled;
             return {
                 newScrollLeft,
                 hasLeft,
@@ -1116,8 +581,14 @@ const Q2TabContainer = class {
             };
         };
         this.onTabScroll = (direction) => {
-            const tabList = this.hostElement.shadowRoot.querySelector('.tab-list');
-            let { scrollWidth, clientWidth, scrollLeft } = tabList;
+            // throttle under 50ms due to re-rendering & resizing
+            const now = new Date().getTime();
+            if (now - this.lastScrolled < 50)
+                return;
+            this.lastScrolled = now;
+            if (!this.tabList)
+                return;
+            let { scrollWidth, clientWidth, scrollLeft } = this.tabList;
             const { newScrollLeft, hasLeft, hasRight } = this.calculateTabScroll({
                 direction,
                 scrollWidth,
@@ -1126,7 +597,9 @@ const Q2TabContainer = class {
             });
             this.hasLeft = hasLeft;
             this.hasRight = hasRight;
-            tabList.scroll({ left: newScrollLeft, behavior: 'smooth' });
+            if (direction) {
+                this.tabList.scroll({ left: newScrollLeft, behavior: 'smooth' });
+            }
         };
     }
     loc(key, subs) {
@@ -1149,12 +622,25 @@ const Q2TabContainer = class {
     get selectedTabValue() {
         return this.value || this.tabPanes[0].value || '';
     }
+    get tabList() {
+        return this.hostElement.shadowRoot.querySelector('.tab-list');
+    }
     ///////// Default Handler /////////
     defaultChangeHandler(event) {
         if (event.target === this.hostElement && !this.hostElement.onchange) {
             this.value = event.detail.value;
         }
     }
+    onResize() {
+        this.onTabScroll();
+    }
+    onFocus() {
+        // firefox receives focus on overflowed element even if it's not interactive element
+        if (isFirefox) {
+            const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);
+            this.moveFocus(index);
+        }
+    }
     ///////// Lifecycle Hooks /////////
     componentWillLoad() {
         const observer = new MutationObserver(this.updateTabData);
@@ -1166,18 +652,11 @@ const Q2TabContainer = class {
         this.scheduledAfterRender.forEach(fn => fn());
         this.scheduledAfterRender = [];
         this.settled.emit();
-        if (!this.resizeSubscription) {
-            this.initTabScroll();
-            this.resizeSubscription = fromEvent(window, 'resize')
-                .pipe(debounce(() => interval(200)))
-                .subscribe(this.initTabScroll);
-        }
+        this.onTabScroll();
     }
     disconnectedCallback() {
         this.mutationObserver.disconnect();
         this.mutationObserver = null;
-        this.resizeSubscription.unsubscribe();
-        this.resizeSubscription = null;
     }
     ///////// Observers /////////
     valueObserver() {
@@ -1189,7 +668,7 @@ const Q2TabContainer = class {
     }
     ///////// View Methods /////////
     render() {
-        return (h("div", { class: "tab-container" }, h("ul", { class: "tab-list", role: "tablist" }, this.hasLeft && (h("li", { role: "presentation", class: "nav nav-left", onClick: () => this.onTabScroll('left') }, h("div", { class: "arrow-container" }, h("a", null, h("q2-icon", { type: "chevron-left" }))))), this.tabs.map((tab, index) => this.generateTab(tab, index)), this.hasRight && (h("li", { role: "presentation", class: "nav nav-right", onClick: () => this.onTabScroll('right') }, h("div", { class: "arrow-container" }, h("a", null, h("q2-icon", { type: "chevron-right" })))))), h("div", { class: "tab-content" }, h("slot", null))));
+        return (h("div", { class: "tab-container" }, h("ul", { class: "tab-list", role: "tablist" }, this.hasLeft && (h("li", { role: "presentation", class: "nav nav-left", onClick: () => this.onTabScroll('prev') }, h("div", { class: "arrow-container" }, h("a", null, h("q2-icon", { type: "chevron-left" }))))), this.tabs.map((tab, index) => this.generateTab(tab, index)), this.hasRight && (h("li", { role: "presentation", class: "nav nav-right", onClick: () => this.onTabScroll('next') }, h("div", { class: "arrow-container" }, h("a", null, h("q2-icon", { type: "chevron-right" })))))), h("div", { class: "tab-content" }, h("slot", null))));
     }
     generateTab(tab, index) {
         const { label, value } = tab;