@tylertech/forge 3.0.0-next.1 → 3.0.0-next.10

package/esm/tabs/tab-bar/tab-bar-adapter.js

@@ -3,221 +3,147 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { MDCTabScroller } from '@material/tab-scroller';
-import { getShadowElement, removeClass, isFunction, getActiveElement, toggleClass } from '@tylertech/forge-core';
+import { getShadowElement, toggleAttribute } from '@tylertech/forge-core';
+import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight, tylIconKeyboardArrowUp, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
 import { BaseAdapter } from '../../core/base/base-adapter';
-import { TAB_BAR_CONSTANTS } from './tab-bar-constants';
 import { TAB_CONSTANTS } from '../tab/tab-constants';
+import { TAB_BAR_CONSTANTS } from './tab-bar-constants';
 export class TabBarAdapter 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;
-        });
-        // Set the initial active tab
-        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);
+        this._defaultSlotElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.DEFAULT_SLOT);
+        this._container = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.CONTAINER);
+        this._scrollContainer = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.SCROLL_CONTAINER);
     }
-    getTabCount() {
-        return this._tabs.length;
+    initializeContainerSizeObserver(listener) {
+        this._resizeObserver = new ResizeObserver(() => listener());
+        this._resizeObserver.observe(this._component);
     }
-    activateTab(index, previousTabBounds) {
-        const tab = this._getTabByIndex(index);
-        if (tab) {
-            tab.activate(previousTabBounds);
-        }
-    }
-    deactivateTab(index) {
-        const tab = this._getTabByIndex(index);
-        if (tab) {
-            tab.deactivate();
-        }
+    initializeScrollObserver(listener) {
+        this._scrollContainer.addEventListener('scroll', listener, { passive: true });
     }
-    syncTabIndex(index) {
-        const tabs = this._getTabs();
-        const activeTab = tabs[index];
-        tabs.filter(t => t !== activeTab)
-            .forEach(t => t.setTabIndex(-1));
+    destroyContainerSizeObserver() {
+        var _a;
+        (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._resizeObserver = undefined;
     }
-    getTabBounds(index) {
-        const tab = this._getTabByIndex(index);
-        if (tab) {
-            return tab.computeIndicatorBounds();
-        }
-        return undefined;
-    }
-    setUnderline(value) {
-        toggleClass(this._rootElement, value, TAB_BAR_CONSTANTS.classes.UNDERLINED);
+    destroyScrollObserver(listener) {
+        this._scrollContainer.removeEventListener('scroll', listener, { passive: true });
     }
-    setStacked(value) {
-        toggleClass(this._rootElement, value, TAB_BAR_CONSTANTS.classes.STACKED);
+    setVertical(value) {
+        toggleAttribute(this._scrollContainer, !!value, 'aria-orientation', 'vertical');
     }
-    scrollTo(scrollX) {
-        if (this._tabScroller) {
-            this._tabScroller.scrollTo(scrollX);
-        }
+    setScrollBackwardButtonListener(listener) {
+        var _a, _b;
+        (_b = (_a = this._backwardScrollButton) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', listener);
     }
-    getScrollContentWidth() {
-        return this._tabScroller ? this._tabScroller.getScrollContentWidth() : 0;
+    setScrollForwardButtonListener(listener) {
+        var _a, _b;
+        (_b = (_a = this._forwardScrollButton) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', listener);
     }
-    getScrollPosition() {
-        return this._tabScroller ? this._tabScroller.getScrollPosition() : 0;
+    addSlotListener(listener) {
+        this._defaultSlotElement.addEventListener('slotchange', listener);
     }
-    getOffsetWidth() {
-        return this._tabScrollElement.offsetWidth;
+    getTabs() {
+        return Array.from(this._component.querySelectorAll(TAB_CONSTANTS.elementName));
     }
-    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);
+    async tryScrollTabIntoView(tab) {
+        await new Promise(requestAnimationFrame);
+        // Due to the async nature of this method, make sure we still need to scroll this tab into view...
+        if (!tab.isConnected || (!tab.selected && !tab.matches(':focus'))) {
+            return;
         }
-    }
-    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);
+        const isVertical = this._component.vertical;
+        const scrollContainerOffset = isVertical ? this._scrollContainer.offsetTop : this._scrollContainer.offsetLeft;
+        const offset = isVertical ? tab.offsetTop : tab.offsetLeft;
+        const extent = isVertical ? tab.offsetHeight : tab.offsetWidth;
+        const scroll = isVertical ? this._scrollContainer.scrollTop : this._scrollContainer.scrollLeft;
+        const hostExtent = isVertical ? this._scrollContainer.offsetHeight : this._scrollContainer.offsetWidth;
+        const min = offset - (TAB_BAR_CONSTANTS.numbers.SCROLL_MARGIN + scrollContainerOffset);
+        const max = offset + extent - hostExtent + (TAB_BAR_CONSTANTS.numbers.SCROLL_MARGIN - scrollContainerOffset);
+        const to = Math.min(min, Math.max(max, scroll));
+        const behavior = tab.matches(':focus') ? 'smooth' : 'instant';
+        this._scrollContainer.scrollTo({
+            behavior,
+            [isVertical ? 'left' : 'top']: 0,
+            [isVertical ? 'top' : 'left']: to
         });
     }
-    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';
-        }
+    getScrollState() {
+        const { scrollHeight, scrollWidth, scrollLeft, scrollTop, clientHeight, clientWidth } = this._scrollContainer;
+        const scrollPosition = this._component.vertical ? clientHeight + scrollTop : clientWidth + scrollLeft;
+        const scrollSize = this._component.vertical ? scrollHeight : scrollWidth;
+        const isScrolledEnd = scrollPosition === scrollSize;
+        const isScrolledStart = (this._component.vertical ? scrollPosition - clientHeight : scrollPosition - clientWidth) === 0;
+        return { isScrolledStart, isScrolledEnd };
     }
-    setPreviousButtonEnabled(value) {
-        this._prevButtonElement.disabled = !value;
+    isScrollable() {
+        const { scrollHeight, scrollWidth, clientHeight, clientWidth } = this._scrollContainer;
+        return this._component.vertical ? scrollHeight > clientHeight : scrollWidth > clientWidth;
     }
-    setNextButtonVisibility(value) {
+    setScrollButtons(value) {
+        var _a, _b;
         if (value) {
-            this._nextButtonContainerElement.style.removeProperty('display');
+            this._backwardScrollButton = this._createScrollButton(this._component.vertical ? tylIconKeyboardArrowUp.name : tylIconKeyboardArrowLeft.name);
+            this._container.insertAdjacentElement('afterbegin', this._backwardScrollButton);
+            this._forwardScrollButton = this._createScrollButton(this._component.vertical ? tylIconKeyboardArrowDown.name : tylIconKeyboardArrowRight.name);
+            this._container.insertAdjacentElement('beforeend', this._forwardScrollButton);
         }
         else {
-            this._nextButtonContainerElement.style.display = 'none';
+            (_a = this._backwardScrollButton) === null || _a === void 0 ? void 0 : _a.remove();
+            this._backwardScrollButton = undefined;
+            (_b = this._forwardScrollButton) === null || _b === void 0 ? void 0 : _b.remove();
+            this._forwardScrollButton = undefined;
+        }
+    }
+    syncScrollButtons({ backwardEnabled, forwardEnabled }) {
+        var _a, _b;
+        const backButton = (_a = this._backwardScrollButton) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+        const forwardButton = (_b = this._forwardScrollButton) === null || _b === void 0 ? void 0 : _b.querySelector('button');
+        if (backButton) {
+            const disabled = !backwardEnabled;
+            if (disabled && backButton.matches(':focus')) {
+                forwardButton === null || forwardButton === void 0 ? void 0 : forwardButton.focus();
+            }
+            backButton.disabled = disabled;
         }
-    }
-    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);
+        if (forwardButton) {
+            const disabled = !forwardEnabled;
+            if (disabled && forwardButton.matches(':focus')) {
+                backButton === null || backButton === void 0 ? void 0 : backButton.focus();
             }
+            forwardButton.disabled = disabled;
         }
     }
-    _getTabs() {
-        return Array.from(this._component.querySelectorAll(TAB_CONSTANTS.elementName));
+    scroll(which) {
+        const amount = this._component.vertical ? this._scrollContainer.offsetHeight : this._scrollContainer.offsetWidth;
+        this._scrollContainer.scrollBy({
+            behavior: 'smooth',
+            [this._component.vertical ? 'top' : 'left']: amount * (which === 'forward' ? 1 : -1)
+        });
     }
-    _getTabByIndex(index) {
-        return this._tabs[index];
+    updateScrollButtonIcons(vertical) {
+        var _a, _b;
+        const backButtonIcon = (_a = this._backwardScrollButton) === null || _a === void 0 ? void 0 : _a.querySelector('forge-icon');
+        if (backButtonIcon) {
+            backButtonIcon.name = vertical ? tylIconKeyboardArrowUp.name : tylIconKeyboardArrowLeft.name;
+        }
+        const nextButtonIcon = (_b = this._forwardScrollButton) === null || _b === void 0 ? void 0 : _b.querySelector('forge-icon');
+        if (nextButtonIcon) {
+            nextButtonIcon.name = vertical ? tylIconKeyboardArrowDown.name : tylIconKeyboardArrowRight.name;
+        }
+    }
+    _createScrollButton(iconName) {
+        const iconButton = document.createElement('forge-icon-button');
+        iconButton.classList.add(TAB_BAR_CONSTANTS.classes.SCROLL_BUTTON);
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.tabIndex = -1;
+        button.setAttribute('aria-hidden', 'true');
+        iconButton.appendChild(button);
+        const icon = document.createElement('forge-icon');
+        icon.name = iconName;
+        button.appendChild(icon);
+        return iconButton;
     }
 }

package/esm/tabs/tab-bar/tab-bar-constants.d.ts

@@ -5,60 +5,30 @@
  */
 export declare const TAB_BAR_CONSTANTS: {
     attributes: {
+        DISABLED: string;
         ACTIVE_TAB: string;
-        LAYOUT_MODE: string;
-        LAYOUT_ALIGN: string;
-        UNDERLINE: string;
-        AUTO_ACTIVATE: string;
+        VERTICAL: string;
         STACKED: string;
+        CLUSTERED: string;
+        SECONDARY: string;
+        INVERTED: string;
+        AUTO_ACTIVATE: string;
         SCROLL_BUTTONS: string;
-        FORCE_SCROLL_BUTTONS: string;
     };
     elementName: "forge-tab-bar";
-    classes: {
-        UNDERLINED: string;
-        ALIGN_CENTER: string;
-        ALIGN_END: string;
-        FIXED: string;
-        STACKED: string;
+    events: {
+        CHANGE: string;
     };
     selectors: {
-        ROOT: string;
-        TAB_SCROLLER: string;
-        TAB_SCROLLER_AREA: string;
-        TAB_SCROLLER_CONTENT: string;
-        PREV_BUTTON_CONTAINER: string;
-        PREV_BUTTON: string;
-        NEXT_BUTTON_CONTAINER: string;
-        NEXT_BUTTON: string;
+        CONTAINER: string;
+        SCROLL_CONTAINER: string;
+        DEFAULT_SLOT: string;
     };
-    events: {
-        ACTIVATE: string;
-    };
-    strings: {
-        ARROW_LEFT_KEY: string;
-        ARROW_RIGHT_KEY: string;
-        END_KEY: string;
-        ENTER_KEY: string;
-        HOME_KEY: string;
-        SPACE_KEY: string;
+    classes: {
+        SCROLL_BUTTON: string;
     };
     numbers: {
-        ARROW_LEFT_KEYCODE: number;
-        ARROW_RIGHT_KEYCODE: number;
-        END_KEYCODE: number;
-        ENTER_KEYCODE: number;
-        EXTRA_SCROLL_AMOUNT: number;
-        HOME_KEYCODE: number;
-        SPACE_KEYCODE: number;
+        SCROLL_MARGIN: number;
     };
 };
-export interface ITabBarActivateEventData {
-    index: number;
-}
-export declare type TabBarLayoutMode = 'fixed' | 'clustered';
-export declare type TabBarLayoutAlign = 'start' | 'center' | 'end';
-export declare const ACCEPTABLE_KEYS: string[];
-export declare const KEYCODE_MAP: {
-    [x: number]: string;
-};
+export declare const NAVIGATION_KEYS: Map<string, Set<string>>;

package/esm/tabs/tab-bar/tab-bar-constants.js

@@ -6,74 +6,40 @@
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}tab-bar`;
 const attributes = {
+    DISABLED: 'disabled',
     ACTIVE_TAB: 'active-tab',
-    LAYOUT_MODE: 'layout-mode',
-    LAYOUT_ALIGN: 'layout-align',
-    UNDERLINE: 'underline',
-    AUTO_ACTIVATE: 'auto-activate',
+    VERTICAL: 'vertical',
     STACKED: 'stacked',
-    SCROLL_BUTTONS: 'scroll-buttons',
-    FORCE_SCROLL_BUTTONS: 'force-scroll-buttons'
-};
-const 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'
+    CLUSTERED: 'clustered',
+    SECONDARY: 'secondary',
+    INVERTED: 'inverted',
+    AUTO_ACTIVATE: 'auto-activate',
+    SCROLL_BUTTONS: 'scroll-buttons'
 };
 const 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'
+    CONTAINER: '.container',
+    SCROLL_CONTAINER: '.scroll-container',
+    DEFAULT_SLOT: 'slot:not([name])'
 };
-const events = {
-    ACTIVATE: `${elementName}-activate`
+const classes = {
+    SCROLL_BUTTON: 'scroll-button'
 };
-const strings = {
-    ARROW_LEFT_KEY: 'ArrowLeft',
-    ARROW_RIGHT_KEY: 'ArrowRight',
-    END_KEY: 'End',
-    ENTER_KEY: 'Enter',
-    HOME_KEY: 'Home',
-    SPACE_KEY: 'Space'
+const events = {
+    CHANGE: `${elementName}-change`
 };
 const 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
+    SCROLL_MARGIN: 48
 };
 export const TAB_BAR_CONSTANTS = {
     attributes,
     elementName,
-    classes,
-    selectors,
     events,
-    strings,
+    selectors,
+    classes,
     numbers
 };
-export const ACCEPTABLE_KEYS = [
-    strings.ARROW_LEFT_KEY,
-    strings.ARROW_RIGHT_KEY,
-    strings.END_KEY,
-    strings.HOME_KEY,
-    strings.ENTER_KEY,
-    strings.SPACE_KEY
-];
-export const 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
-};
+export const NAVIGATION_KEYS = new Map([
+    ['default', new Set(['Home', 'End'])],
+    ['horizontal', new Set(['ArrowLeft', 'ArrowRight'])],
+    ['vertical', new Set(['ArrowUp', 'ArrowDown'])]
+]);

package/esm/tabs/tab-bar/tab-bar-foundation.d.ts

@@ -5,92 +5,83 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { ITabBarAdapter } from './tab-bar-adapter';
-import { TabBarLayoutMode, TabBarLayoutAlign } from './tab-bar-constants';
 export interface ITabBarFoundation extends ICustomElementFoundation {
-    activeTab: number;
-    layoutMode: TabBarLayoutMode;
-    layoutAlign: TabBarLayoutAlign;
-    underline: boolean;
-    autoActivate: boolean;
+    disabled: boolean;
+    activeTab: number | null | undefined;
+    vertical: boolean;
+    clustered: boolean;
     stacked: boolean;
+    secondary: boolean;
+    inverted: boolean;
+    autoActivate: boolean;
     scrollButtons: boolean;
-    forceScrollButtons: boolean;
-    activateTab(index: number): void;
-    scrollIntoView(index: number): void;
+    initialize(): void;
+    destroy(): void;
 }
 export declare class TabBarFoundation implements ITabBarFoundation {
     private _adapter;
     private _isInitialized;
     private _activeTab;
-    private _layoutMode;
-    private _layoutAlign;
-    private _underline;
-    private _autoActivate;
+    private _disabled;
+    private _vertical;
+    private _clustered;
     private _stacked;
+    private _secondary;
+    private _inverted;
+    private _autoActivate;
     private _scrollButtons;
-    private _forceScrollButtons;
+    private _tabs;
+    private _scrollButtonsVisible;
+    private _tabScrollAnimationFrame;
     private _tabsChangedListener;
-    private _tabInteractedListener;
+    private _tabSelectedListener;
     private _keydownListener;
-    private _scrollPrevClickListener;
-    private _scrollPrevMousedownListener;
-    private _scrollNextClickListener;
-    private _scrollNextMousedownListener;
+    private _resizeListener;
     private _scrollListener;
+    private _scrollBackwardButtonListener;
+    private _scrollForwardButtonListener;
     constructor(_adapter: ITabBarAdapter);
     initialize(): void;
-    disconnect(): void;
+    destroy(): void;
     private _onTabsChanged;
-    private _onTabInteracted;
+    private _onTabSelected;
     private _onKeydown;
-    private _onScrollPrevious;
-    private _onScrollNext;
-    private _onScroll;
-    private _syncScrollButtons;
-    /**
-     * Determines the index of the adjacent tab closest to either edge of the Tab Bar
-     * @param index The index of the tab
-     * @param tabDimensions The dimensions of the tab
-     * @param scrollPosition The current scroll position
-     * @param barWidth The width of the tab bar
-     */
-    private _findAdjacentTabIndexClosestToEdge;
+    private _selectTab;
     /**
-     * Calculates the scroll increment that will make the tab at the given index visible
-     * @param index The index of the tab
-     * @param nextIndex The index of the next tab
-     * @param scrollPosition The current scroll position
-     * @param barWidth The width of the tab-bar
+     * Ensures that all tabs have the correct state based on the tab bar state.
+     *
+     * This is called whenever a child tab is added to the DOM.
      */
-    private _calculateScrollIncrement;
-    /**
-     * Private method for determining the index of the destination tab based on what key was pressed
-     * @param origin The original index from which to determine the destination
-     * @param key The name of the key
-     */
-    private _determineTargetFromKey;
-    private _isScrollable;
-    private _getKeyFromEvent;
-    private _isActivationKey;
-    private _indexIsInRange;
-    activateTab(index: number): void;
-    scrollIntoView(index: number): void;
-    /** Gets and sets the active tab index. */
-    get activeTab(): number;
-    set activeTab(value: number);
-    private get _isFixed();
-    get layoutMode(): TabBarLayoutMode;
-    set layoutMode(value: TabBarLayoutMode);
-    get layoutAlign(): TabBarLayoutAlign;
-    set layoutAlign(value: TabBarLayoutAlign);
-    get underline(): boolean;
-    set underline(value: boolean);
+    private _syncTabState;
+    /** Called when the container size changes, but only if scroll buttons are enabled. */
+    private _onResize;
+    /** Called when the scroll container scrolls, but only if scroll buttons are enabled. */
+    private _onScroll;
+    /** Handles clicking the scroll backward button. */
+    private _onScrollBackward;
+    /** Handles clicking the scroll forward button. */
+    private _onScrollForward;
+    /** Determines whether scroll buttons should be displayed based on the size of the container. */
+    private _detectScrollableStatus;
+    /** Updates the enabled/disabled state of the scroll buttons. */
+    private _updateScrollState;
+    private _tryScrollActiveTabIntoView;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get activeTab(): number | null | undefined;
+    set activeTab(value: number | null | undefined);
+    get vertical(): boolean;
+    set vertical(value: boolean);
+    get clustered(): boolean;
+    set clustered(value: boolean);
     get stacked(): boolean;
     set stacked(value: boolean);
-    get scrollButtons(): boolean;
-    set scrollButtons(value: boolean);
-    get forceScrollButtons(): boolean;
-    set forceScrollButtons(value: boolean);
+    get secondary(): boolean;
+    set secondary(value: boolean);
+    get inverted(): boolean;
+    set inverted(value: boolean);
     get autoActivate(): boolean;
     set autoActivate(value: boolean);
+    get scrollButtons(): boolean;
+    set scrollButtons(value: boolean);
 }