@tylertech/forge 2.0.0 → 2.1.0

package/dist/esm/chunks/chunk.OQRMHHPB.js

@@ -0,0 +1,1335 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import {
+  TAB_CONSTANTS,
+  TabComponent
+} from "./chunk.EWQENJ4W.js";
+import {
+  IconButtonComponent
+} from "./chunk.7Y4NHCJH.js";
+import {
+  applyPassive,
+  matches
+} from "./chunk.4HQ5VELO.js";
+import {
+  MDCComponent,
+  MDCFoundation,
+  __assign,
+  __extends,
+  __read
+} from "./chunk.5VKAVHLM.js";
+import {
+  tylIconKeyboardArrowLeft,
+  tylIconKeyboardArrowRight
+} from "./chunk.GS2AXUCN.js";
+import {
+  Platform
+} from "./chunk.BYN27JXZ.js";
+import {
+  IconComponent,
+  IconRegistry
+} from "./chunk.P43Z3YAS.js";
+import {
+  BaseAdapter
+} from "./chunk.KZATVOA6.js";
+import {
+  FoundationProperty
+} from "./chunk.MMIZOYAS.js";
+import {
+  COMPONENT_NAME_PREFIX,
+  CustomElement
+} from "./chunk.35U3UPDV.js";
+import {
+  BaseComponent
+} from "./chunk.VK6LIH3B.js";
+import {
+  attachShadowTemplate,
+  defineCustomElement,
+  getShadowElement
+} from "./chunk.K2PCTUVN.js";
+import {
+  getActiveElement,
+  removeClass,
+  toggleClass
+} from "./chunk.4JURZYE4.js";
+import {
+  coerceBoolean,
+  coerceNumber,
+  isFunction,
+  isNumber
+} from "./chunk.MEFT5FQC.js";
+import {
+  __decorateClass
+} from "./chunk.LM5TVNZY.js";
+
+// dist/build/lib/staging/src/tabs/tab-bar/tab-bar-constants.ts
+var elementName = `${COMPONENT_NAME_PREFIX}tab-bar`;
+var attributes = {
+  ACTIVE_TAB: "active-tab",
+  LAYOUT_MODE: "layout-mode",
+  LAYOUT_ALIGN: "layout-align",
+  UNDERLINE: "underline",
+  AUTO_ACTIVATE: "auto-activate",
+  STACKED: "stacked",
+  SCROLL_BUTTONS: "scroll-buttons",
+  FORCE_SCROLL_BUTTONS: "force-scroll-buttons"
+};
+var classes = {
+  UNDERLINED: "forge-tab-bar--underlined",
+  ALIGN_CENTER: "forge-tab-bar--align-center",
+  ALIGN_END: "forge-tab-bar--align-end",
+  FIXED: "forge-tab-bar--fixed",
+  STACKED: "forge-tab-bar--stacked"
+};
+var selectors = {
+  ROOT: ".forge-tab-bar",
+  TAB_SCROLLER: ".mdc-tab-scroller",
+  TAB_SCROLLER_AREA: ".mdc-tab-scroller__scroll-area",
+  TAB_SCROLLER_CONTENT: ".mdc-tab-scroller__scroll-content",
+  PREV_BUTTON_CONTAINER: ".forge-tab-bar__scroll-prev-container",
+  PREV_BUTTON: "#scroll-prev-btn",
+  NEXT_BUTTON_CONTAINER: ".forge-tab-bar__scroll-next-container",
+  NEXT_BUTTON: "#scroll-next-btn"
+};
+var events = {
+  ACTIVATE: `${elementName}-activate`
+};
+var strings = {
+  ARROW_LEFT_KEY: "ArrowLeft",
+  ARROW_RIGHT_KEY: "ArrowRight",
+  END_KEY: "End",
+  ENTER_KEY: "Enter",
+  HOME_KEY: "Home",
+  SPACE_KEY: "Space"
+};
+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
+};
+var TAB_BAR_CONSTANTS = {
+  attributes,
+  elementName,
+  classes,
+  selectors,
+  events,
+  strings,
+  numbers
+};
+var ACCEPTABLE_KEYS = [
+  strings.ARROW_LEFT_KEY,
+  strings.ARROW_RIGHT_KEY,
+  strings.END_KEY,
+  strings.HOME_KEY,
+  strings.ENTER_KEY,
+  strings.SPACE_KEY
+];
+var KEYCODE_MAP = {
+  [numbers.ARROW_LEFT_KEYCODE]: strings.ARROW_LEFT_KEY,
+  [numbers.ARROW_RIGHT_KEYCODE]: strings.ARROW_RIGHT_KEY,
+  [numbers.END_KEYCODE]: strings.END_KEY,
+  [numbers.HOME_KEYCODE]: strings.HOME_KEY,
+  [numbers.ENTER_KEYCODE]: strings.ENTER_KEY,
+  [numbers.SPACE_KEYCODE]: strings.SPACE_KEY
+};
+
+// dist/build/lib/staging/src/tabs/tab-bar/tab-bar-foundation.ts
+var TabBarFoundation = class {
+  constructor(_adapter) {
+    this._adapter = _adapter;
+    this._isInitialized = false;
+    this._activeTab = -1;
+    this._layoutMode = "fixed";
+    this._layoutAlign = "start";
+    this._underline = false;
+    this._autoActivate = false;
+    this._stacked = false;
+    this._scrollButtons = true;
+    this._forceScrollButtons = false;
+    this._tabsChangedListener = (evt) => this._onTabsChanged(evt);
+    this._tabInteractedListener = (evt) => this._onTabInteracted(evt);
+    this._keydownListener = (evt) => this._onKeydown(evt);
+    this._scrollPrevClickListener = (evt) => this._onScrollPrevious(evt);
+    this._scrollPrevMousedownListener = (evt) => evt.preventDefault();
+    this._scrollNextClickListener = (evt) => this._onScrollNext(evt);
+    this._scrollNextMousedownListener = (evt) => evt.preventDefault();
+    this._scrollListener = (evt) => this._onScroll(evt);
+  }
+  initialize() {
+    this._adapter.initializeTabs(this._activeTab, this._isFixed);
+    this._adapter.initializeTabScroller();
+    this._adapter.initializeAccessibility();
+    this._adapter.addTabChangeListener(this._tabsChangedListener);
+    this._adapter.addScrollPreviousListener("click", this._scrollPrevClickListener);
+    this._adapter.addScrollPreviousListener("mousedown", this._scrollPrevMousedownListener);
+    this._adapter.addScrollNextListener("click", this._scrollNextClickListener);
+    this._adapter.addScrollNextListener("mousedown", this._scrollNextMousedownListener);
+    this._adapter.addHostListener(TAB_CONSTANTS.events.INTERACTED, this._tabInteractedListener);
+    this._adapter.addHostListener("keydown", this._keydownListener);
+    this._adapter.addScrollListener(this._scrollListener);
+    this._adapter.setUnderline(this._underline);
+    this._adapter.setLayoutMode(this._layoutMode);
+    this._adapter.setLayoutAlign(this._layoutAlign);
+    window.requestAnimationFrame(() => {
+      this._syncScrollButtons();
+      this._adapter.ensureFocusableTab();
+    });
+    this._isInitialized = true;
+  }
+  disconnect() {
+    this._adapter.destroyTabScroller();
+    this._adapter.removeTabChangeListener(this._tabsChangedListener);
+    this._adapter.removeHostListener(TAB_CONSTANTS.events.INTERACTED, this._tabInteractedListener);
+    this._adapter.removeHostListener("keydown", this._keydownListener);
+    this._isInitialized = false;
+  }
+  _onTabsChanged(evt) {
+    this._adapter.initializeTabs(this._activeTab, this._isFixed);
+    this._adapter.ensureFocusableTab();
+    window.setTimeout(() => {
+      window.requestAnimationFrame(() => {
+        this.scrollIntoView(this._activeTab);
+        this._syncScrollButtons();
+      });
+    });
+  }
+  _onTabInteracted(evt) {
+    const activatedTab = evt.target;
+    const activatedTabIndex = this._adapter.getTabIndex(activatedTab);
+    const isTabEvent = activatedTab.tagName.toLowerCase() === TAB_CONSTANTS.elementName;
+    const isValidTabIndex = activatedTabIndex !== this._activeTab && this._indexIsInRange(activatedTabIndex);
+    if (!isTabEvent || !isValidTabIndex) {
+      return;
+    }
+    const activateEventData = { index: activatedTabIndex };
+    const canActivate = this._adapter.emitHostEvent(TAB_BAR_CONSTANTS.events.ACTIVATE, activateEventData, true, true);
+    if (!canActivate) {
+      return;
+    }
+    this.activateTab(activatedTabIndex);
+    this._adapter.focusTabAtIndex(activatedTabIndex);
+  }
+  _onKeydown(evt) {
+    const key = this._getKeyFromEvent(evt);
+    if (!key) {
+      return;
+    }
+    if (!this._isActivationKey(key)) {
+      evt.preventDefault();
+    }
+    if (this._autoActivate) {
+      if (this._isActivationKey(key)) {
+        return;
+      }
+      const index = this._determineTargetFromKey(this._activeTab, key);
+      if (this._activeTab === index) {
+        return;
+      }
+      const activateEventData = { index };
+      const canActivate = this._adapter.emitHostEvent(TAB_BAR_CONSTANTS.events.ACTIVATE, activateEventData, true, true);
+      if (canActivate) {
+        this.activateTab(index);
+        this._adapter.focusTabAtIndex(index);
+      }
+    } else {
+      const focusedTabIndex = this._adapter.getFocusedTabIndex();
+      if (focusedTabIndex === -1) {
+        return;
+      }
+      if (this._isActivationKey(key)) {
+        const activateEventData = { index: focusedTabIndex };
+        const canActivate = this._adapter.emitHostEvent(TAB_BAR_CONSTANTS.events.ACTIVATE, activateEventData, true, true);
+        if (canActivate) {
+          this.activateTab(focusedTabIndex);
+        }
+      } else {
+        const index = this._determineTargetFromKey(focusedTabIndex, key);
+        if (focusedTabIndex === index) {
+          return;
+        }
+        this._adapter.focusTabAtIndex(index);
+        this.scrollIntoView(index);
+      }
+    }
+  }
+  _onScrollPrevious(evt) {
+    const scrollAmount = -this._adapter.getOffsetWidth();
+    this._adapter.incrementScroll(scrollAmount);
+    this._syncScrollButtons();
+  }
+  _onScrollNext(evt) {
+    const scrollAmount = this._adapter.getOffsetWidth();
+    this._adapter.incrementScroll(scrollAmount);
+    this._syncScrollButtons();
+  }
+  _onScroll(evt) {
+    this._syncScrollButtons();
+  }
+  _syncScrollButtons() {
+    const isScrollable = this._isScrollable();
+    this._adapter.setPreviousButtonVisibility(isScrollable);
+    this._adapter.setNextButtonVisibility(isScrollable);
+    if (isScrollable) {
+      this._adapter.setPreviousButtonEnabled(this._adapter.isScrolled());
+      this._adapter.setNextButtonEnabled(!this._adapter.isScrolledEnd());
+    }
+  }
+  _findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth) {
+    const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;
+    const relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;
+    const relativeRootDelta = relativeRootLeft + relativeRootRight;
+    const leftEdgeIsCloser = relativeRootLeft < 0 || relativeRootDelta < 0;
+    const rightEdgeIsCloser = relativeRootRight > 0 || relativeRootDelta > 0;
+    if (leftEdgeIsCloser) {
+      return index - 1;
+    }
+    if (rightEdgeIsCloser) {
+      return index + 1;
+    }
+    return -1;
+  }
+  _calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth) {
+    const nextTabDimensions = this._adapter.getTabDimensionsAtIndex(nextIndex);
+    const relativeContentLeft = nextTabDimensions.contentLeft - scrollPosition - barWidth;
+    const relativeContentRight = nextTabDimensions.contentRight - scrollPosition;
+    const leftIncrement = relativeContentRight - TAB_BAR_CONSTANTS.numbers.EXTRA_SCROLL_AMOUNT;
+    const rightIncrement = relativeContentLeft + TAB_BAR_CONSTANTS.numbers.EXTRA_SCROLL_AMOUNT;
+    if (nextIndex < index) {
+      return Math.min(leftIncrement, 0);
+    }
+    return Math.max(rightIncrement, 0);
+  }
+  _determineTargetFromKey(origin, key, nextIndex) {
+    if (origin === nextIndex) {
+      return origin;
+    }
+    const maxIndex = this._adapter.getTabCount() - 1;
+    const shouldGoToEnd = key === TAB_BAR_CONSTANTS.strings.END_KEY;
+    const shouldDecrement = key === TAB_BAR_CONSTANTS.strings.ARROW_LEFT_KEY;
+    const shouldIncrement = key === TAB_BAR_CONSTANTS.strings.ARROW_RIGHT_KEY;
+    let index = nextIndex !== void 0 ? nextIndex : 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;
+    }
+    if (this._adapter.isTabDisabled(index)) {
+      return this._determineTargetFromKey(origin, key, index);
+    }
+    return index;
+  }
+  _isScrollable() {
+    return this._forceScrollButtons || this._scrollButtons && !Platform.isMobile && !this._isFixed && this._adapter.getScrollContentWidth() > this._adapter.getOffsetWidth();
+  }
+  _getKeyFromEvent(evt) {
+    if (ACCEPTABLE_KEYS.includes(evt.key)) {
+      return evt.key;
+    }
+    return KEYCODE_MAP[evt.keyCode];
+  }
+  _isActivationKey(key) {
+    return key === TAB_BAR_CONSTANTS.strings.SPACE_KEY || key === TAB_BAR_CONSTANTS.strings.ENTER_KEY;
+  }
+  _indexIsInRange(index) {
+    return index >= 0 && index < this._adapter.getTabCount();
+  }
+  activateTab(index) {
+    if (!isNumber(index)) {
+      index = -1;
+    }
+    if (this._activeTab !== -1) {
+      this._adapter.deactivateTab(this._activeTab);
+    }
+    const previousTabBounds = this._adapter.getTabBounds(this._activeTab);
+    this._adapter.activateTab(index, previousTabBounds);
+    this._adapter.syncTabIndex(index);
+    this._adapter.ensureFocusableTab();
+    this.scrollIntoView(index);
+    this._activeTab = index;
+    this._syncScrollButtons();
+    this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB, this._activeTab.toString());
+  }
+  scrollIntoView(index) {
+    if (!this._indexIsInRange(index)) {
+      return;
+    }
+    if (index === 0) {
+      return this._adapter.scrollTo(0);
+    }
+    if (index === this._adapter.getTabCount() - 1) {
+      return this._adapter.scrollTo(this._adapter.getScrollContentWidth());
+    }
+    const scrollPosition = this._adapter.getScrollPosition();
+    const barWidth = this._adapter.getOffsetWidth();
+    const tabDimensions = this._adapter.getTabDimensionsAtIndex(index);
+    const nextIndex = this._findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth);
+    if (!this._indexIsInRange(nextIndex)) {
+      return;
+    }
+    const scrollIncrement = this._calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth);
+    this._adapter.incrementScroll(scrollIncrement);
+  }
+  get activeTab() {
+    return this._activeTab;
+  }
+  set activeTab(value) {
+    if (this._activeTab !== value) {
+      if (!this._isInitialized) {
+        this._activeTab = value;
+        this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB, this._activeTab.toString());
+      } else {
+        this.activateTab(value);
+      }
+    }
+  }
+  get _isFixed() {
+    return this._layoutMode === "fixed";
+  }
+  get layoutMode() {
+    return this._layoutMode;
+  }
+  set layoutMode(value) {
+    if (this._layoutMode !== value) {
+      this._layoutMode = value;
+      this._adapter.setLayoutMode(this._layoutMode);
+      this._syncScrollButtons();
+    }
+  }
+  get layoutAlign() {
+    return this._layoutAlign;
+  }
+  set layoutAlign(value) {
+    if (this._layoutAlign !== value) {
+      this._layoutAlign = value;
+      this._adapter.setLayoutAlign(this._layoutAlign);
+    }
+  }
+  get underline() {
+    return this._underline;
+  }
+  set underline(value) {
+    if (this._underline !== value) {
+      this._underline = value;
+      this._adapter.setUnderline(this._underline);
+      this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.UNDERLINE, this._underline);
+    }
+  }
+  get stacked() {
+    return this._stacked;
+  }
+  set stacked(value) {
+    if (this._stacked !== value) {
+      this._stacked = value;
+      this._adapter.setStacked(this._stacked);
+      if (this._stacked) {
+        this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.STACKED);
+      } else {
+        this._adapter.removeHostAttribute(TAB_BAR_CONSTANTS.attributes.STACKED);
+      }
+    }
+  }
+  get scrollButtons() {
+    return this._scrollButtons;
+  }
+  set scrollButtons(value) {
+    if (this._scrollButtons !== value) {
+      this._scrollButtons = value;
+      this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.SCROLL_BUTTONS, this._scrollButtons.toString());
+      if (this._isInitialized) {
+        this._syncScrollButtons();
+      }
+    }
+  }
+  get forceScrollButtons() {
+    return this._forceScrollButtons;
+  }
+  set forceScrollButtons(value) {
+    if (this._forceScrollButtons !== value) {
+      this._forceScrollButtons = value;
+      if (this._isInitialized) {
+        this._syncScrollButtons();
+      }
+    }
+  }
+  get autoActivate() {
+    return this._autoActivate;
+  }
+  set autoActivate(value) {
+    if (this._autoActivate !== value) {
+      this._autoActivate = value;
+      this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.AUTO_ACTIVATE, this._autoActivate.toString());
+    }
+  }
+};
+
+// node_modules/@material/tab-scroller/constants.js
+var cssClasses = {
+  ANIMATING: "mdc-tab-scroller--animating",
+  SCROLL_AREA_SCROLL: "mdc-tab-scroller__scroll-area--scroll",
+  SCROLL_TEST: "mdc-tab-scroller__test"
+};
+var strings2 = {
+  AREA_SELECTOR: ".mdc-tab-scroller__scroll-area",
+  CONTENT_SELECTOR: ".mdc-tab-scroller__scroll-content"
+};
+
+// node_modules/@material/tab-scroller/util.js
+var horizontalScrollbarHeight_;
+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.SCROLL_TEST);
+  documentObj.body.appendChild(el);
+  var horizontalScrollbarHeight = el.offsetHeight - el.clientHeight;
+  documentObj.body.removeChild(el);
+  if (shouldCacheResult) {
+    horizontalScrollbarHeight_ = horizontalScrollbarHeight;
+  }
+  return horizontalScrollbarHeight;
+}
+
+// node_modules/@material/tab-scroller/rtl-scroller.js
+var MDCTabScrollerRTL = function() {
+  function MDCTabScrollerRTL2(adapter) {
+    this.adapter = adapter;
+  }
+  return MDCTabScrollerRTL2;
+}();
+
+// node_modules/@material/tab-scroller/rtl-default-scroller.js
+var MDCTabScrollerRTLDefault = function(_super) {
+  __extends(MDCTabScrollerRTLDefault2, _super);
+  function MDCTabScrollerRTLDefault2() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  MDCTabScrollerRTLDefault2.prototype.getScrollPositionRTL = function() {
+    var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
+    var right = this.calculateScrollEdges().right;
+    return Math.round(right - currentScrollLeft);
+  };
+  MDCTabScrollerRTLDefault2.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
+    };
+  };
+  MDCTabScrollerRTLDefault2.prototype.incrementScrollRTL = function(scrollX) {
+    var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
+    var clampedScrollLeft = this.clampScrollValue(currentScrollLeft - scrollX);
+    return {
+      finalScrollPosition: clampedScrollLeft,
+      scrollDelta: clampedScrollLeft - currentScrollLeft
+    };
+  };
+  MDCTabScrollerRTLDefault2.prototype.getAnimatingScrollPosition = function(scrollX) {
+    return scrollX;
+  };
+  MDCTabScrollerRTLDefault2.prototype.calculateScrollEdges = function() {
+    var contentWidth = this.adapter.getScrollContentOffsetWidth();
+    var rootWidth = this.adapter.getScrollAreaOffsetWidth();
+    return {
+      left: 0,
+      right: contentWidth - rootWidth
+    };
+  };
+  MDCTabScrollerRTLDefault2.prototype.clampScrollValue = function(scrollX) {
+    var edges = this.calculateScrollEdges();
+    return Math.min(Math.max(edges.left, scrollX), edges.right);
+  };
+  return MDCTabScrollerRTLDefault2;
+}(MDCTabScrollerRTL);
+
+// node_modules/@material/tab-scroller/rtl-negative-scroller.js
+var MDCTabScrollerRTLNegative = function(_super) {
+  __extends(MDCTabScrollerRTLNegative2, _super);
+  function MDCTabScrollerRTLNegative2() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  MDCTabScrollerRTLNegative2.prototype.getScrollPositionRTL = function(translateX) {
+    var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
+    return Math.round(translateX - currentScrollLeft);
+  };
+  MDCTabScrollerRTLNegative2.prototype.scrollToRTL = function(scrollX) {
+    var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
+    var clampedScrollLeft = this.clampScrollValue(-scrollX);
+    return {
+      finalScrollPosition: clampedScrollLeft,
+      scrollDelta: clampedScrollLeft - currentScrollLeft
+    };
+  };
+  MDCTabScrollerRTLNegative2.prototype.incrementScrollRTL = function(scrollX) {
+    var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
+    var clampedScrollLeft = this.clampScrollValue(currentScrollLeft - scrollX);
+    return {
+      finalScrollPosition: clampedScrollLeft,
+      scrollDelta: clampedScrollLeft - currentScrollLeft
+    };
+  };
+  MDCTabScrollerRTLNegative2.prototype.getAnimatingScrollPosition = function(scrollX, translateX) {
+    return scrollX - translateX;
+  };
+  MDCTabScrollerRTLNegative2.prototype.calculateScrollEdges = function() {
+    var contentWidth = this.adapter.getScrollContentOffsetWidth();
+    var rootWidth = this.adapter.getScrollAreaOffsetWidth();
+    return {
+      left: rootWidth - contentWidth,
+      right: 0
+    };
+  };
+  MDCTabScrollerRTLNegative2.prototype.clampScrollValue = function(scrollX) {
+    var edges = this.calculateScrollEdges();
+    return Math.max(Math.min(edges.right, scrollX), edges.left);
+  };
+  return MDCTabScrollerRTLNegative2;
+}(MDCTabScrollerRTL);
+
+// node_modules/@material/tab-scroller/rtl-reverse-scroller.js
+var MDCTabScrollerRTLReverse = function(_super) {
+  __extends(MDCTabScrollerRTLReverse2, _super);
+  function MDCTabScrollerRTLReverse2() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  MDCTabScrollerRTLReverse2.prototype.getScrollPositionRTL = function(translateX) {
+    var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
+    return Math.round(currentScrollLeft - translateX);
+  };
+  MDCTabScrollerRTLReverse2.prototype.scrollToRTL = function(scrollX) {
+    var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
+    var clampedScrollLeft = this.clampScrollValue(scrollX);
+    return {
+      finalScrollPosition: clampedScrollLeft,
+      scrollDelta: currentScrollLeft - clampedScrollLeft
+    };
+  };
+  MDCTabScrollerRTLReverse2.prototype.incrementScrollRTL = function(scrollX) {
+    var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
+    var clampedScrollLeft = this.clampScrollValue(currentScrollLeft + scrollX);
+    return {
+      finalScrollPosition: clampedScrollLeft,
+      scrollDelta: currentScrollLeft - clampedScrollLeft
+    };
+  };
+  MDCTabScrollerRTLReverse2.prototype.getAnimatingScrollPosition = function(scrollX, translateX) {
+    return scrollX + translateX;
+  };
+  MDCTabScrollerRTLReverse2.prototype.calculateScrollEdges = function() {
+    var contentWidth = this.adapter.getScrollContentOffsetWidth();
+    var rootWidth = this.adapter.getScrollAreaOffsetWidth();
+    return {
+      left: contentWidth - rootWidth,
+      right: 0
+    };
+  };
+  MDCTabScrollerRTLReverse2.prototype.clampScrollValue = function(scrollX) {
+    var edges = this.calculateScrollEdges();
+    return Math.min(Math.max(edges.right, scrollX), edges.left);
+  };
+  return MDCTabScrollerRTLReverse2;
+}(MDCTabScrollerRTL);
+
+// node_modules/@material/tab-scroller/foundation.js
+var MDCTabScrollerFoundation = function(_super) {
+  __extends(MDCTabScrollerFoundation2, _super);
+  function MDCTabScrollerFoundation2(adapter) {
+    var _this = _super.call(this, __assign(__assign({}, MDCTabScrollerFoundation2.defaultAdapter), adapter)) || this;
+    _this.isAnimating = false;
+    return _this;
+  }
+  Object.defineProperty(MDCTabScrollerFoundation2, "cssClasses", {
+    get: function() {
+      return cssClasses;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(MDCTabScrollerFoundation2, "strings", {
+    get: function() {
+      return strings2;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(MDCTabScrollerFoundation2, "defaultAdapter", {
+    get: function() {
+      return {
+        eventTargetMatchesSelector: function() {
+          return false;
+        },
+        addClass: function() {
+          return void 0;
+        },
+        removeClass: function() {
+          return void 0;
+        },
+        addScrollAreaClass: function() {
+          return void 0;
+        },
+        setScrollAreaStyleProperty: function() {
+          return void 0;
+        },
+        setScrollContentStyleProperty: function() {
+          return void 0;
+        },
+        getScrollContentStyleValue: function() {
+          return "";
+        },
+        setScrollAreaScrollLeft: function() {
+          return void 0;
+        },
+        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;
+        }
+      };
+    },
+    enumerable: false,
+    configurable: true
+  });
+  MDCTabScrollerFoundation2.prototype.init = function() {
+    var horizontalScrollbarHeight = this.adapter.computeHorizontalScrollbarHeight();
+    this.adapter.setScrollAreaStyleProperty("margin-bottom", -horizontalScrollbarHeight + "px");
+    this.adapter.addScrollAreaClass(MDCTabScrollerFoundation2.cssClasses.SCROLL_AREA_SCROLL);
+  };
+  MDCTabScrollerFoundation2.prototype.getScrollPosition = function() {
+    if (this.isRTL()) {
+      return this.computeCurrentScrollPositionRTL();
+    }
+    var currentTranslateX = this.calculateCurrentTranslateX();
+    var scrollLeft = this.adapter.getScrollAreaScrollLeft();
+    return scrollLeft - currentTranslateX;
+  };
+  MDCTabScrollerFoundation2.prototype.handleInteraction = function() {
+    if (!this.isAnimating) {
+      return;
+    }
+    this.stopScrollAnimation();
+  };
+  MDCTabScrollerFoundation2.prototype.handleTransitionEnd = function(evt) {
+    var evtTarget = evt.target;
+    if (!this.isAnimating || !this.adapter.eventTargetMatchesSelector(evtTarget, MDCTabScrollerFoundation2.strings.CONTENT_SELECTOR)) {
+      return;
+    }
+    this.isAnimating = false;
+    this.adapter.removeClass(MDCTabScrollerFoundation2.cssClasses.ANIMATING);
+  };
+  MDCTabScrollerFoundation2.prototype.incrementScroll = function(scrollXIncrement) {
+    if (scrollXIncrement === 0) {
+      return;
+    }
+    this.animate(this.getIncrementScrollOperation(scrollXIncrement));
+  };
+  MDCTabScrollerFoundation2.prototype.incrementScrollImmediate = function(scrollXIncrement) {
+    if (scrollXIncrement === 0) {
+      return;
+    }
+    var operation = this.getIncrementScrollOperation(scrollXIncrement);
+    if (operation.scrollDelta === 0) {
+      return;
+    }
+    this.stopScrollAnimation();
+    this.adapter.setScrollAreaScrollLeft(operation.finalScrollPosition);
+  };
+  MDCTabScrollerFoundation2.prototype.scrollTo = function(scrollX) {
+    if (this.isRTL()) {
+      this.scrollToImplRTL(scrollX);
+      return;
+    }
+    this.scrollToImpl(scrollX);
+  };
+  MDCTabScrollerFoundation2.prototype.getRTLScroller = function() {
+    if (!this.rtlScrollerInstance) {
+      this.rtlScrollerInstance = this.rtlScrollerFactory();
+    }
+    return this.rtlScrollerInstance;
+  };
+  MDCTabScrollerFoundation2.prototype.calculateCurrentTranslateX = function() {
+    var transformValue = this.adapter.getScrollContentStyleValue("transform");
+    if (transformValue === "none") {
+      return 0;
+    }
+    var match = /\((.+?)\)/.exec(transformValue);
+    if (!match) {
+      return 0;
+    }
+    var matrixParams = match[1];
+    var _a = __read(matrixParams.split(","), 6), a = _a[0], b = _a[1], c = _a[2], d = _a[3], tx = _a[4], ty = _a[5];
+    return parseFloat(tx);
+  };
+  MDCTabScrollerFoundation2.prototype.clampScrollValue = function(scrollX) {
+    var edges = this.calculateScrollEdges();
+    return Math.min(Math.max(edges.left, scrollX), edges.right);
+  };
+  MDCTabScrollerFoundation2.prototype.computeCurrentScrollPositionRTL = function() {
+    var translateX = this.calculateCurrentTranslateX();
+    return this.getRTLScroller().getScrollPositionRTL(translateX);
+  };
+  MDCTabScrollerFoundation2.prototype.calculateScrollEdges = function() {
+    var contentWidth = this.adapter.getScrollContentOffsetWidth();
+    var rootWidth = this.adapter.getScrollAreaOffsetWidth();
+    return {
+      left: 0,
+      right: contentWidth - rootWidth
+    };
+  };
+  MDCTabScrollerFoundation2.prototype.scrollToImpl = function(scrollX) {
+    var currentScrollX = this.getScrollPosition();
+    var safeScrollX = this.clampScrollValue(scrollX);
+    var scrollDelta = safeScrollX - currentScrollX;
+    this.animate({
+      finalScrollPosition: safeScrollX,
+      scrollDelta
+    });
+  };
+  MDCTabScrollerFoundation2.prototype.scrollToImplRTL = function(scrollX) {
+    var animation = this.getRTLScroller().scrollToRTL(scrollX);
+    this.animate(animation);
+  };
+  MDCTabScrollerFoundation2.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
+    };
+  };
+  MDCTabScrollerFoundation2.prototype.animate = function(animation) {
+    var _this = this;
+    if (animation.scrollDelta === 0) {
+      return;
+    }
+    this.stopScrollAnimation();
+    this.adapter.setScrollAreaScrollLeft(animation.finalScrollPosition);
+    this.adapter.setScrollContentStyleProperty("transform", "translateX(" + animation.scrollDelta + "px)");
+    this.adapter.computeScrollAreaClientRect();
+    requestAnimationFrame(function() {
+      _this.adapter.addClass(MDCTabScrollerFoundation2.cssClasses.ANIMATING);
+      _this.adapter.setScrollContentStyleProperty("transform", "none");
+    });
+    this.isAnimating = true;
+  };
+  MDCTabScrollerFoundation2.prototype.stopScrollAnimation = function() {
+    this.isAnimating = false;
+    var currentScrollPosition = this.getAnimatingScrollPosition();
+    this.adapter.removeClass(MDCTabScrollerFoundation2.cssClasses.ANIMATING);
+    this.adapter.setScrollContentStyleProperty("transform", "translateX(0px)");
+    this.adapter.setScrollAreaScrollLeft(currentScrollPosition);
+  };
+  MDCTabScrollerFoundation2.prototype.getAnimatingScrollPosition = function() {
+    var currentTranslateX = this.calculateCurrentTranslateX();
+    var scrollLeft = this.adapter.getScrollAreaScrollLeft();
+    if (this.isRTL()) {
+      return this.getRTLScroller().getAnimatingScrollPosition(scrollLeft, currentTranslateX);
+    }
+    return scrollLeft - currentTranslateX;
+  };
+  MDCTabScrollerFoundation2.prototype.rtlScrollerFactory = function() {
+    var initialScrollLeft = this.adapter.getScrollAreaScrollLeft();
+    this.adapter.setScrollAreaScrollLeft(initialScrollLeft - 1);
+    var newScrollLeft = this.adapter.getScrollAreaScrollLeft();
+    if (newScrollLeft < 0) {
+      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);
+    this.adapter.setScrollAreaScrollLeft(initialScrollLeft);
+    if (rightEdgeDelta === newScrollLeft) {
+      return new MDCTabScrollerRTLReverse(this.adapter);
+    }
+    return new MDCTabScrollerRTLDefault(this.adapter);
+  };
+  MDCTabScrollerFoundation2.prototype.isRTL = function() {
+    return this.adapter.getScrollContentStyleValue("direction") === "rtl";
+  };
+  return MDCTabScrollerFoundation2;
+}(MDCFoundation);
+
+// node_modules/@material/tab-scroller/component.js
+var MDCTabScroller = function(_super) {
+  __extends(MDCTabScroller2, _super);
+  function MDCTabScroller2() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  MDCTabScroller2.attachTo = function(root) {
+    return new MDCTabScroller2(root);
+  };
+  MDCTabScroller2.prototype.initialize = function() {
+    this.area = this.root.querySelector(MDCTabScrollerFoundation.strings.AREA_SELECTOR);
+    this.content = this.root.querySelector(MDCTabScrollerFoundation.strings.CONTENT_SELECTOR);
+  };
+  MDCTabScroller2.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);
+  };
+  MDCTabScroller2.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);
+  };
+  MDCTabScroller2.prototype.getDefaultFoundation = function() {
+    var _this = this;
+    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);
+      }
+    };
+    return new MDCTabScrollerFoundation(adapter);
+  };
+  MDCTabScroller2.prototype.getScrollPosition = function() {
+    return this.foundation.getScrollPosition();
+  };
+  MDCTabScroller2.prototype.getScrollContentWidth = function() {
+    return this.content.offsetWidth;
+  };
+  MDCTabScroller2.prototype.incrementScroll = function(scrollXIncrement) {
+    this.foundation.incrementScroll(scrollXIncrement);
+  };
+  MDCTabScroller2.prototype.scrollTo = function(scrollX) {
+    this.foundation.scrollTo(scrollX);
+  };
+  return MDCTabScroller2;
+}(MDCComponent);
+
+// dist/build/lib/staging/src/tabs/tab-bar/tab-bar-adapter.ts
+var TabBarAdapter = class extends BaseAdapter {
+  constructor(component) {
+    super(component);
+    this._tabs = [];
+    this._rootElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.ROOT);
+    this._tabScrollElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.TAB_SCROLLER);
+    this._tabScrollAreaElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.TAB_SCROLLER_AREA);
+    this._tabScrollContentElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.TAB_SCROLLER_CONTENT);
+    this._defaultSlotElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.DEFAULT_SLOT);
+    this._prevButtonContainerElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.PREV_BUTTON_CONTAINER);
+    this._prevButtonElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.PREV_BUTTON);
+    this._nextButtonContainerElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.NEXT_BUTTON_CONTAINER);
+    this._nextButtonElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.NEXT_BUTTON);
+  }
+  initializeTabs(activeTabIndex, stretch) {
+    this._tabs = this._getTabs();
+    if (!this._tabs.length) {
+      return;
+    }
+    this._tabs.forEach((tab) => {
+      tab.active = false;
+      tab.stretch = stretch;
+    });
+    if (activeTabIndex >= 0 && activeTabIndex < this._tabs.length) {
+      this._tabs[activeTabIndex].active = true;
+    } else {
+      this.ensureFocusableTab();
+    }
+  }
+  initializeTabScroller() {
+    this._tabScroller = new MDCTabScroller(this._tabScrollElement);
+  }
+  initializeAccessibility() {
+    if (!this._component.hasAttribute("role")) {
+      this._component.setAttribute("role", "tablist");
+    }
+  }
+  destroyTabScroller() {
+    if (this._tabScroller) {
+      this._tabScroller.destroy();
+    }
+  }
+  addTabChangeListener(listener) {
+    this._defaultSlotElement.addEventListener("slotchange", listener);
+  }
+  removeTabChangeListener(listener) {
+    this._defaultSlotElement.removeEventListener("slotchange", listener);
+  }
+  addScrollListener(listener) {
+    this._tabScrollAreaElement.addEventListener("scroll", listener);
+  }
+  getTabIndex(tab) {
+    return this._tabs.indexOf(tab);
+  }
+  getTabCount() {
+    return this._tabs.length;
+  }
+  activateTab(index, previousTabBounds) {
+    const tab = this._getTabByIndex(index);
+    if (tab) {
+      tab.activate(previousTabBounds);
+    }
+  }
+  deactivateTab(index) {
+    const tab = this._getTabByIndex(index);
+    if (tab) {
+      tab.deactivate();
+    }
+  }
+  syncTabIndex(index) {
+    const tabs = this._getTabs();
+    const activeTab = tabs[index];
+    tabs.filter((t) => t !== activeTab).forEach((t) => t.setTabIndex(-1));
+  }
+  getTabBounds(index) {
+    const tab = this._getTabByIndex(index);
+    if (tab) {
+      return tab.computeIndicatorBounds();
+    }
+    return void 0;
+  }
+  setUnderline(value) {
+    toggleClass(this._rootElement, value, TAB_BAR_CONSTANTS.classes.UNDERLINED);
+  }
+  setStacked(value) {
+    toggleClass(this._rootElement, value, TAB_BAR_CONSTANTS.classes.STACKED);
+  }
+  scrollTo(scrollX) {
+    if (this._tabScroller) {
+      this._tabScroller.scrollTo(scrollX);
+    }
+  }
+  getScrollContentWidth() {
+    return this._tabScroller ? this._tabScroller.getScrollContentWidth() : 0;
+  }
+  getScrollPosition() {
+    return this._tabScroller ? this._tabScroller.getScrollPosition() : 0;
+  }
+  getOffsetWidth() {
+    return this._tabScrollElement.offsetWidth;
+  }
+  getTabDimensionsAtIndex(index) {
+    const tab = this._getTabByIndex(index);
+    if (tab) {
+      return tab.computeDimensions();
+    }
+    return {
+      rootLeft: 0,
+      rootRight: 0,
+      contentLeft: 0,
+      contentRight: 0
+    };
+  }
+  incrementScroll(scrollXIncrement) {
+    if (this._tabScroller) {
+      this._tabScroller.incrementScroll(scrollXIncrement);
+    }
+  }
+  isScrolled() {
+    const position = this._tabScrollAreaElement.scrollLeft;
+    return position > 0;
+  }
+  isScrolledEnd() {
+    const position = Math.round(this._tabScrollAreaElement.scrollLeft);
+    const scrollWidth = Math.round(this._tabScrollContentElement.scrollWidth - this._tabScrollElement.offsetWidth);
+    return position >= scrollWidth;
+  }
+  getFocusedTabIndex() {
+    const activeElement = getActiveElement();
+    return this._tabs.findIndex((tab) => {
+      if (tab === activeElement) {
+        return true;
+      }
+      return !!tab.shadowRoot.contains(activeElement);
+    });
+  }
+  focusTabAtIndex(index) {
+    const tab = this._getTabByIndex(index);
+    if (tab) {
+      return tab.focus();
+    }
+  }
+  setLayoutMode(value) {
+    const isFixed = value === "fixed";
+    toggleClass(this._rootElement, isFixed, TAB_BAR_CONSTANTS.classes.FIXED);
+    this._tabs.forEach((tab) => tab.stretch = isFixed);
+  }
+  setLayoutAlign(value) {
+    removeClass([
+      TAB_BAR_CONSTANTS.classes.ALIGN_CENTER,
+      TAB_BAR_CONSTANTS.classes.ALIGN_END
+    ], this._rootElement);
+    switch (value) {
+      case "center":
+        this._rootElement.classList.add(TAB_BAR_CONSTANTS.classes.ALIGN_CENTER);
+        break;
+      case "end":
+        this._rootElement.classList.add(TAB_BAR_CONSTANTS.classes.ALIGN_END);
+        break;
+    }
+  }
+  setPreviousButtonVisibility(value) {
+    if (value) {
+      this._prevButtonContainerElement.style.removeProperty("display");
+    } else {
+      this._prevButtonContainerElement.style.display = "none";
+    }
+  }
+  setPreviousButtonEnabled(value) {
+    this._prevButtonElement.disabled = !value;
+  }
+  setNextButtonVisibility(value) {
+    if (value) {
+      this._nextButtonContainerElement.style.removeProperty("display");
+    } else {
+      this._nextButtonContainerElement.style.display = "none";
+    }
+  }
+  setNextButtonEnabled(value) {
+    this._nextButtonElement.disabled = !value;
+  }
+  addScrollPreviousListener(type, listener) {
+    this._prevButtonElement.addEventListener(type, listener);
+  }
+  addScrollNextListener(type, listener) {
+    this._nextButtonElement.addEventListener(type, listener);
+  }
+  isTabDisabled(index) {
+    const tab = this._getTabByIndex(index);
+    return tab ? tab.disabled : true;
+  }
+  ensureFocusableTab() {
+    const tabs = this._getTabs();
+    const hasActiveTab = tabs.some((tab) => tab.active);
+    if (!hasActiveTab && tabs.length) {
+      const firstTab = tabs[0];
+      if (isFunction(firstTab.setTabIndex)) {
+        tabs[0].setTabIndex(0);
+      }
+    }
+  }
+  _getTabs() {
+    return Array.from(this._component.querySelectorAll(TAB_CONSTANTS.elementName));
+  }
+  _getTabByIndex(index) {
+    return this._tabs[index];
+  }
+};
+
+// dist/build/lib/staging/src/tabs/tab-bar/tab-bar.ts
+var template = '<template><div class="forge-tab-bar" part="root"><div class="forge-tab-bar__scroll-prev-container" part="previous-container"><forge-icon-button part="previous-button"><button type="button" tabindex="-1" aria-label="Scroll left" id="scroll-prev-btn" part="previous-button-element"><forge-icon name="keyboard_arrow_left" part="previous-button-icon"></forge-icon></button></forge-icon-button></div><div class="mdc-tab-scroller" part="tab-scroller"><div class="mdc-tab-scroller__scroll-area" part="scroll-area"><div class="mdc-tab-scroller__scroll-content" part="scroll-content"><slot></slot></div></div></div><div class="forge-tab-bar__scroll-next-container" part="next-container"><forge-icon-button part="next-button"><button type="button" tabindex="-1" aria-label="Scroll right" id="scroll-next-btn" part="next-button-element"><forge-icon name="keyboard_arrow_right" part="next-button-icon"></forge-icon></button></forge-icon-button></div></div></template>';
+var styles = '.forge-icon-button{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.forge-icon-button forge-icon,.forge-icon-button img,.forge-icon-button svg{width:24px;height:24px}.forge-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-icon-button:disabled{cursor:default;pointer-events:none}.forge-icon-button__icon{display:inline-block}.forge-icon-button__icon.forge-icon-button__icon--on{display:none}.forge-icon-button--on .forge-icon-button__icon{display:none}.forge-icon-button--on .forge-icon-button__icon.forge-icon-button__icon--on{display:inline-block}@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.forge-icon-button{--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:transparent;will-change:transform,opacity}.forge-icon-button::after,.forge-icon-button::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.forge-icon-button::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-icon-button::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-icon-button.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-icon-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-icon-button.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-icon-button.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button::after,.forge-icon-button::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.forge-icon-button.mdc-ripple-upgraded::after,.forge-icon-button.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button::after,.forge-icon-button::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-icon-button.mdc-ripple-surface--hover::before,.forge-icon-button:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button.mdc-ripple-upgraded--background-focused::before,.forge-icon-button:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}forge-icon-button{position:relative;display:inline-block;overflow:visible}.forge-icon-button--on{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-icon-button--on::after,.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-icon-button--on.mdc-ripple-surface--hover::before,.forge-icon-button--on:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button--on.mdc-ripple-upgraded--background-focused::before,.forge-icon-button--on:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button--on:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button--on:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button--on.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);opacity:.08}.forge-icon-button--dense{width:28px;height:28px;padding:2px;padding:0}.forge-icon-button--dense-1{width:44px;height:44px;padding:10px}.forge-icon-button--dense-2{width:40px;height:40px;padding:8px}.forge-icon-button--dense-3{width:36px;height:36px;padding:6px}.forge-icon-button--dense-4{width:32px;height:32px;padding:4px}.forge-icon-button--dense-5{width:28px;height:28px;padding:2px}.forge-icon-button--dense-6{width:24px;height:24px;padding:0}.forge-icon-button--with-badge forge-badge{z-index:1;z-index:var(--forge-z-index-surface,1);pointer-events:none;--forge-badge-max-width:32px;--forge-badge-border:1px solid transparent}.forge-icon-button--with-badge forge-badge[app-bar-context]{--forge-badge-border:2px solid var(--forge-app-bar-theme-background)}.mdc-tab-scroller{overflow-y:hidden}.mdc-tab-scroller.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-content{-webkit-transition:250ms -webkit-transform cubic-bezier(.4, 0, .2, 1);transition:250ms -webkit-transform cubic-bezier(.4, 0, .2, 1);transition:250ms transform cubic-bezier(.4, 0, .2, 1);transition:250ms transform cubic-bezier(.4, 0, .2, 1),250ms -webkit-transform cubic-bezier(.4, 0, .2, 1)}.mdc-tab-scroller__test{position:absolute;top:-9999px;width:100px;height:100px;overflow-x:scroll}.mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:touch;display:-webkit-box;display:flex;overflow-x:hidden}.mdc-tab-scroller__scroll-area::-webkit-scrollbar,.mdc-tab-scroller__test::-webkit-scrollbar{display:none}.mdc-tab-scroller__scroll-area--scroll{overflow-x:scroll}.mdc-tab-scroller__scroll-content{position:relative;display:-webkit-box;display:flex;-webkit-box-flex:1;flex:1 0 auto;-webkit-transform:none;transform:none;will-change:transform}.mdc-tab-scroller--align-start .mdc-tab-scroller__scroll-content{-webkit-box-pack:start;justify-content:flex-start}.mdc-tab-scroller--align-end .mdc-tab-scroller__scroll-content{-webkit-box-pack:end;justify-content:flex-end}.mdc-tab-scroller--align-center .mdc-tab-scroller__scroll-content{-webkit-box-pack:center;justify-content:center}.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:auto}.forge-tab-bar{height:48px;height:var(--forge-tab-bar-height,48px);display:-webkit-box;display:flex;position:relative}.forge-tab-bar--underlined::after{border-bottom-color:#e0e0e0;border-bottom-color:var(--forge-theme-border-color,#e0e0e0);content:"";border-bottom-width:1px;border-bottom-style:solid;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;position:absolute;bottom:0;left:0;right:0}.forge-tab-bar--align-center .mdc-tab-scroller__scroll-content{-webkit-box-pack:center;justify-content:center}.forge-tab-bar--align-end .mdc-tab-scroller__scroll-content{-webkit-box-pack:end;justify-content:flex-end}.forge-tab-bar--stacked{height:72px;height:var(--forge-tab-bar-height,72px);-webkit-box-align:center;align-items:center}.forge-tab-bar--stacked .mdc-tab-scroller{height:100%}.mdc-tab-scroller{z-index:1;width:100%}.mdc-tab-scroller__scroll-area{height:100%;overflow-x:auto;scrollbar-width:none}:host{display:block;overflow:hidden}:host([hidden]){display:none}';
+var TabBarComponent = class extends BaseComponent {
+  constructor() {
+    super();
+    IconRegistry.define([tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight]);
+    attachShadowTemplate(this, template, styles);
+    this._foundation = new TabBarFoundation(new TabBarAdapter(this));
+  }
+  static get observedAttributes() {
+    return [
+      TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB,
+      TAB_BAR_CONSTANTS.attributes.LAYOUT_MODE,
+      TAB_BAR_CONSTANTS.attributes.LAYOUT_ALIGN,
+      TAB_BAR_CONSTANTS.attributes.UNDERLINE,
+      TAB_BAR_CONSTANTS.attributes.AUTO_ACTIVATE,
+      TAB_BAR_CONSTANTS.attributes.STACKED,
+      TAB_BAR_CONSTANTS.attributes.SCROLL_BUTTONS,
+      TAB_BAR_CONSTANTS.attributes.FORCE_SCROLL_BUTTONS
+    ];
+  }
+  connectedCallback() {
+    this._foundation.initialize();
+  }
+  disconnectedCallback() {
+    this._foundation.disconnect();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB:
+        this.activeTab = coerceNumber(newValue);
+        break;
+      case TAB_BAR_CONSTANTS.attributes.LAYOUT_MODE:
+        this.layoutMode = newValue;
+        break;
+      case TAB_BAR_CONSTANTS.attributes.LAYOUT_ALIGN:
+        this.layoutAlign = newValue;
+        break;
+      case TAB_BAR_CONSTANTS.attributes.UNDERLINE:
+        this.underline = coerceBoolean(newValue);
+        break;
+      case TAB_BAR_CONSTANTS.attributes.AUTO_ACTIVATE:
+        this.autoActivate = coerceBoolean(newValue);
+        break;
+      case TAB_BAR_CONSTANTS.attributes.STACKED:
+        this.stacked = coerceBoolean(newValue);
+        break;
+      case TAB_BAR_CONSTANTS.attributes.SCROLL_BUTTONS:
+        this.scrollButtons = coerceBoolean(newValue);
+        break;
+      case TAB_BAR_CONSTANTS.attributes.FORCE_SCROLL_BUTTONS:
+        this.forceScrollButtons = coerceBoolean(newValue);
+        break;
+    }
+  }
+  activateTab(index) {
+    this._foundation.activateTab(index);
+  }
+  scrollTabIntoView(index) {
+    this._foundation.scrollIntoView(index);
+  }
+};
+__decorateClass([
+  FoundationProperty()
+], TabBarComponent.prototype, "activeTab", 2);
+__decorateClass([
+  FoundationProperty()
+], TabBarComponent.prototype, "layoutMode", 2);
+__decorateClass([
+  FoundationProperty()
+], TabBarComponent.prototype, "layoutAlign", 2);
+__decorateClass([
+  FoundationProperty()
+], TabBarComponent.prototype, "underline", 2);
+__decorateClass([
+  FoundationProperty()
+], TabBarComponent.prototype, "autoActivate", 2);
+__decorateClass([
+  FoundationProperty()
+], TabBarComponent.prototype, "stacked", 2);
+__decorateClass([
+  FoundationProperty()
+], TabBarComponent.prototype, "scrollButtons", 2);
+__decorateClass([
+  FoundationProperty()
+], TabBarComponent.prototype, "forceScrollButtons", 2);
+TabBarComponent = __decorateClass([
+  CustomElement({
+    name: TAB_BAR_CONSTANTS.elementName,
+    dependencies: [
+      TabComponent,
+      IconButtonComponent,
+      IconComponent
+    ]
+  })
+], TabBarComponent);
+
+// dist/build/lib/staging/src/tabs/tab-bar/index.ts
+function defineTabBarComponent() {
+  defineCustomElement(TabBarComponent);
+}
+
+export {
+  TAB_BAR_CONSTANTS,
+  ACCEPTABLE_KEYS,
+  KEYCODE_MAP,
+  TabBarFoundation,
+  TabBarAdapter,
+  TabBarComponent,
+  defineTabBarComponent
+};
+/**
+ * @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.
+ */
+//# sourceMappingURL=chunk.OQRMHHPB.js.map