@tylertech/forge 2.16.6 → 3.0.0-next.10

package/esm/tabs/tab/tab-foundation.js

@@ -7,65 +7,40 @@ import { TAB_CONSTANTS } from './tab-constants';
 export class TabFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
+        // State
+        this._selected = false;
         this._disabled = false;
-        this._active = false;
-        this._stretch = false;
-        this._clickListener = (evt) => this._onClick(evt);
+        this._vertical = false;
+        this._stacked = false;
+        this._secondary = false;
+        this._inverted = false;
+        this._clickListener = () => this._onClick();
+        this._keydownListener = (evt) => this._onKeydown(evt);
     }
     initialize() {
         this._adapter.initialize();
-        this._adapter.initializeRipple();
-        this._adapter.initializeIndicator();
-        this._adapter.setDisabled(this._disabled);
-        this._setActive(this._active);
-        this._adapter.addButtonListener('click', this._clickListener);
-    }
-    disconnect() {
-        this._adapter.destroyRipple();
-        this._adapter.destroyIndicator();
-        this._adapter.removeButtonListener('click', this._clickListener);
-    }
-    _onClick(evt) {
-        if (!this._active) {
-            this._adapter.emitHostEvent(TAB_CONSTANTS.events.INTERACTED, undefined, true);
+        this._adapter.addInteractionListener('click', this._clickListener);
+        this._adapter.addInteractionListener('keydown', this._keydownListener);
+    }
+    _onClick() {
+        if (this._disabled || this._selected) {
+            return;
         }
+        this._dispatchSelectEvent();
     }
-    _setActive(isActive, previousIndicatorClientRect) {
-        this._active = isActive;
-        this._adapter.setActive(this._active);
-        if (this._active) {
-            this._adapter.activateIndicator(previousIndicatorClientRect);
+    _onKeydown(evt) {
+        if (this._disabled || this._selected) {
+            return;
         }
-        else {
-            this._adapter.deactivateIndicator();
+        const isSelectionKey = evt.key === ' ' || evt.key === 'Enter';
+        if (isSelectionKey) {
+            evt.preventDefault();
+            this._adapter.animateStateLayer();
+            this._dispatchSelectEvent();
         }
     }
-    activate(previousIndicatorClientRect) {
-        this._setActive(true, previousIndicatorClientRect);
-    }
-    deactivate() {
-        this._setActive(false);
-    }
-    computeIndicatorBounds() {
-        return this._adapter.computeIndicatorBounds();
-    }
-    computeDimensions() {
-        const rootWidth = this._adapter.getOffsetWidth();
-        const rootLeft = this._adapter.getOffsetLeft();
-        const contentWidth = this._adapter.getContentOffsetWidth();
-        const contentLeft = this._adapter.getContentOffsetLeft();
-        return {
-            contentLeft: rootLeft + contentLeft,
-            contentRight: rootLeft + contentLeft + contentWidth,
-            rootLeft,
-            rootRight: rootLeft + rootWidth
-        };
-    }
-    focus() {
-        this._adapter.focus();
-    }
-    setTabIndex(value) {
-        this._adapter.setTabIndex(value);
+    _dispatchSelectEvent() {
+        this._adapter.emitHostEvent(TAB_CONSTANTS.events.SELECT, { bubbles: true, composed: true });
     }
     get disabled() {
         return this._disabled;
@@ -77,22 +52,51 @@ export class TabFoundation {
             this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.DISABLED, this._disabled);
         }
     }
-    get active() {
-        return this._active;
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        if (this._selected !== value) {
+            this._selected = value;
+            this._adapter.setSelected(this._selected);
+            this._adapter.animateSelected();
+            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.SELECTED, this._selected);
+        }
+    }
+    get vertical() {
+        return this._vertical;
+    }
+    set vertical(value) {
+        if (this._vertical !== value) {
+            this._vertical = value;
+            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.VERTICAL, this._vertical);
+        }
+    }
+    get stacked() {
+        return this._stacked;
+    }
+    set stacked(value) {
+        if (this._stacked !== value) {
+            this._stacked = value;
+            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.STACKED, this._stacked);
+        }
+    }
+    get secondary() {
+        return this._secondary;
     }
-    set active(value) {
-        if (this._active !== value) {
-            this._setActive(value);
-            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.ACTIVE, this._active);
+    set secondary(value) {
+        if (this._secondary !== value) {
+            this._secondary = value;
+            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.SECONDARY, this._secondary);
         }
     }
-    get stretch() {
-        return this._stretch;
+    get inverted() {
+        return this._inverted;
     }
-    set stretch(value) {
-        if (this._stretch !== value) {
-            this._stretch = value;
-            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.STRETCH, this._stretch);
+    set inverted(value) {
+        if (this._inverted !== value) {
+            this._inverted = value;
+            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.INVERTED, this._inverted);
         }
     }
 }

package/esm/tabs/tab/tab.d.ts

@@ -3,45 +3,81 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { ITabDimensions } from './tab-constants';
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 export interface ITabComponent extends IBaseComponent {
     disabled: boolean;
-    active: boolean;
-    stretch: boolean;
-    activate(previousIndicatorClientRect?: DOMRect): void;
-    deactivate(): void;
-    computeIndicatorBounds(): DOMRect | undefined;
-    computeDimensions(): ITabDimensions;
-    setTabIndex(value: number): void;
+    selected: boolean;
+    vertical: boolean;
+    stacked: boolean;
+    secondary: boolean;
+    inverted: boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'forge-tab': ITabComponent;
     }
     interface HTMLElementEventMap {
-        'forge-tab-interacted': CustomEvent<void>;
+        'forge-tab-select': CustomEvent<void>;
     }
 }
 /**
- * The web component class behind the `<forge-tab>` custom element.
- *
  * @tag forge-tab
+ *
+ * @property {boolean} disabled - The disabled state of the tab.
+ * @property {boolean} selected - The selected state of the tab.
+ * @property {boolean} vertical - Controls whether the tab is vertical or horizontal.
+ * @property {boolean} stacked - Controls whether the tab is taller to allow for slotted leading/trailing elements.
+ * @property {boolean} secondary - Controls whether the tab is styled as secondary tab navigation.
+ * @property {boolean} inverted - Controls whether the tab indicator is rendered on the opposite side of the tab.
+ *
+ * @attribute disabled - The disabled state of the tab.
+ * @attribute selected - The selected state of the tab.
+ * @attribute vertical - Controls whether the tab is vertical or horizontal.
+ * @attribute stacked - Controls whether the tab is taller to allow for slotted leading/trailing elements.
+ * @attribute secondary - Controls whether the tab is styled as secondary tab navigation.
+ *
+ * @event forge-tab-select - Dispatched when the tab is selected.
+ *
+ * @cssproperty --forge-tab-indicator-color - The color of the tab indicator. Defaults to the primary theme.
+ * @cssproperty --forge-tab-indicator-height - The height of the tab indicator.
+ * @cssproperty --forge-tab-indicator-shape - The shape of the tab indicator.
+ * @cssproperty --forge-tab-container-color - The color of the tab container. Defaults to the surface theme.
+ * @cssproperty --forge-tab-height - The height of the tab.
+ * @cssproperty --forge-tab-shape - The shape of the tab.
+ * @cssproperty --forge-tab-disabled-opacity - The opacity of the tab when disabled.
+ * @cssproperty --forge-tab-active-focus-icon-color - The color of the icon when the tab is active and focused. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-hover-icon-color - The color of the icon when the tab is active and hovered. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-icon-color - The color of the icon when the tab is active. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-pressed-icon-color - The color of the icon when the tab is active and pressed. Defaults to the primary theme.
+ * @cssproperty --forge-tab-icon-size - The size of the icon.
+ * @cssproperty --forge-tab-focus-icon-color - The color of the icon when the tab is focused. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-hover-icon-color - The color of the icon when the tab is hovered. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-icon-color - The color of the icon. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-pressed-icon-color - The color of the icon when the tab is pressed. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-active-focus-label-text-color - The color of the label text when the tab is active and focused. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-hover-label-text-color - The color of the label text when the tab is active and hovered. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-label-text-color - The color of the label text when the tab is active. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-pressed-label-text-color - The color of the label text when the tab is active and pressed. Defaults to the primary theme.
+ * @cssproperty --forge-tab-focus-label-text-color - The color of the label text when the tab is focused. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-hover-label-text-color - The color of the label text when the tab is hovered. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-label-text-color - The color of the label text. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-pressed-label-text-color - The color of the label text when the tab is pressed. Defaults to the text-on-background theme.
+ *
+ * @csspart container - The tab container.
+ * @csspart content - The tab content container.
+ * @csspart label - The tab label container.
+ * @csspart indicator - The tab active indicator.
  */
 export declare class TabComponent extends BaseComponent implements ITabComponent {
     static get observedAttributes(): string[];
     private _foundation;
     constructor();
     connectedCallback(): void;
-    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     disabled: boolean;
-    active: boolean;
-    stretch: boolean;
-    activate(previousIndicatorClientRect?: DOMRect): void;
-    deactivate(): void;
-    computeIndicatorBounds(): DOMRect | undefined;
-    computeDimensions(): ITabDimensions;
-    focus(): void;
-    setTabIndex(value: number): void;
+    selected: boolean;
+    vertical: boolean;
+    stacked: boolean;
+    secondary: boolean;
+    inverted: boolean;
 }

package/esm/tabs/tab/tab.js

@@ -9,76 +9,125 @@ import { TabAdapter } from './tab-adapter';
 import { TabFoundation } from './tab-foundation';
 import { TAB_CONSTANTS } from './tab-constants';
 import { BaseComponent } from '../../core/base/base-component';
-const template = '<template><button class=\"forge-tab\" type=\"button\" part=\"button\"><slot name=\"top\"></slot><span class=\"forge-tab__content\" part=\"content\"><slot name=\"leading\"></slot><span class=\"forge-tab__text\" part=\"text\"><slot></slot></span><slot name=\"trailing\"></slot></span><span class=\"mdc-tab-indicator\" part=\"indicator-container\"><span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\" part=\"indicator\"></span> </span><span class=\"forge-tab__ripple\" part=\"ripple-container\"></span></button></template>';
-const styles = '@-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}}.mdc-ripple-surface{--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;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::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)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.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}.mdc-ripple-surface.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))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.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%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5)}.mdc-tab-indicator .mdc-tab-indicator__content--icon{color:#ffc107;color:var(--mdc-theme-secondary,#ffc107)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:2px}.mdc-tab-indicator .mdc-tab-indicator__content--icon{height:34px;font-size:34px}.mdc-tab-indicator{display:-webkit-box;display:flex;position:absolute;top:0;left:0;-webkit-box-pack:center;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{-webkit-transform-origin:left;transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__content{-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-indicator--no-transition .mdc-tab-indicator__content{-webkit-transition:none;transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{-webkit-transition:150ms opacity linear;transition:150ms opacity linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{-webkit-transition-delay:0.1s;transition-delay:0.1s}.forge-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size, .875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, .0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));position:relative;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-flex:1;flex:1 0 auto;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;border:none;outline:0;background:0 0;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1;padding-right:24px;padding-left:24px;height:100%;width:100%}.forge-tab:disabled{color:rgba(0,0,0,.12);color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12));cursor:not-allowed;pointer-events:none}.forge-tab::-moz-focus-inner{padding:0;border:0}.forge-tab ::slotted([slot=top]){padding-top:8px}.forge-tab ::slotted([slot=leading]),.forge-tab ::slotted([slot=top]),.forge-tab ::slotted([slot=trailing]){-webkit-transition:150ms color linear;transition:150ms color linear;fill:currentColor;width:24px;height:24px;font-size:24px;z-index:2}.forge-tab ::slotted([slot=leading]),.forge-tab ::slotted([slot=trailing]){padding:0 8px}.forge-tab__content{position:relative;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;height:inherit;pointer-events:none}.forge-tab__text{-webkit-transition:150ms color linear;transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.forge-tab--active{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-tab--active ::slotted([slot=leading]),.forge-tab--active ::slotted([slot=top]),.forge-tab--active ::slotted([slot=trailing]){-webkit-transition-delay:0.1s;transition-delay:0.1s}.forge-tab__ripple{--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;position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.forge-tab__ripple::after,.forge-tab__ripple::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-tab__ripple::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-tab__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-tab__ripple.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-tab__ripple.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-tab__ripple.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-tab__ripple.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-tab__ripple.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-tab__ripple::after,.forge-tab__ripple::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-tab__ripple.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-tab__ripple::after,.forge-tab__ripple::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-tab__ripple.mdc-ripple-surface--hover::before,.forge-tab__ripple:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-tab__ripple.mdc-ripple-upgraded--background-focused::before,.forge-tab__ripple:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-tab__ripple:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-tab__ripple:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-tab__ripple.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}:host{display:inline-block}:host([hidden]){display:none}:host([stretch]){-webkit-box-flex:1;flex:1}:host([theme=primary]){--mdc-theme-primary:var(--mdc-theme-primary, $defaultValue)}:host([theme=primary]) .forge-tab.forge-tab--active{color:#3f51b5}:host([theme=secondary]){--mdc-theme-primary:var(--mdc-theme-secondary, $defaultValue)}:host([theme=secondary]) .forge-tab.forge-tab--active{color:#ffc107}:host([theme=warning]){--mdc-theme-primary:var(--mdc-theme-warning, $defaultValue)}:host([theme=warning]) .forge-tab.forge-tab--active{color:#d14900}:host([theme=success]){--mdc-theme-primary:var(--mdc-theme-success, $defaultValue)}:host([theme=success]) .forge-tab.forge-tab--active{color:#2e7d32}:host([theme=danger]){--mdc-theme-primary:var(--mdc-theme-danger, $defaultValue)}:host([theme=danger]) .forge-tab.forge-tab--active{color:#b00020}:host([theme=info]){--mdc-theme-primary:var(--mdc-theme-info, $defaultValue)}:host([theme=info]) .forge-tab.forge-tab--active{color:#424242}';
+import { FocusIndicatorComponent } from '../../focus-indicator/focus-indicator';
+import { StateLayerComponent } from '../../state-layer/state-layer';
+const template = '<template><div class=\"forge-tab\" part=\"container\"><span class=\"content\" part=\"content\"><slot name=\"leading\"></slot><span class=\"label\" part=\"label\"><slot></slot></span><slot name=\"trailing\"></slot><span class=\"indicator\" part=\"indicator\"></span></span><forge-state-layer target=\":host\"></forge-state-layer><forge-focus-indicator target=\":host\" inward></forge-focus-indicator></div></template>';
+const styles = ':host{display:-webkit-inline-box;display:inline-flex;outline:0;-webkit-tap-highlight-color:transparent;vertical-align:middle}:host([hidden]){display:none}:host(:focus) .forge-tab{color:var(--_focus-label-text-color)}:host(:focus) .forge-tab ::slotted([slot=leading]),:host(:focus) .forge-tab ::slotted([slot=trailing]){color:var(--_focus-icon-color)}:host(:active) .forge-tab{color:var(--_pressed-label-text-color);outline:0}:host(:active) .forge-tab ::slotted([slot=leading]),:host(:active) .forge-tab ::slotted([slot=trailing]){color:var(--_pressed-icon-color)}:host([disabled]){cursor:not-allowed;opacity:var(--forge-tab-disabled-opacity, .38)}:host([disabled]) .forge-tab{pointer-events:none}:host([selected]) .forge-tab{color:var(--_active-label-text-color)}:host([selected]) .forge-tab ::slotted([slot=leading]),:host([selected]) .forge-tab ::slotted([slot=trailing]){color:var(--_active-icon-color)}:host([selected]) .forge-tab:hover{color:var(--_active-hover-label-text-color)}:host([selected]) .forge-tab:hover ::slotted([slot=leading]),:host([selected]) .forge-tab:hover ::slotted([slot=trailing]){color:var(--_active-hover-icon-color)}:host([selected]) .forge-tab .indicator{opacity:1}:host([selected]:focus) .forge-tab{color:var(--_active-focus-label-text-color)}:host([selected]:focus) .forge-tab ::slotted([slot=leading]),:host([selected]:focus) .forge-tab ::slotted([slot=trailing]){color:var(--_active-focus-icon-color)}:host([selected]:active) .forge-tab{color:var(--_active-pressed-label-text-color)}:host([selected]:active) .forge-tab ::slotted([slot=leading]),:host([selected]:active) .forge-tab ::slotted([slot=trailing]){color:var(--_active-pressed-icon-color)}:host([stacked]) .forge-tab{--_height:var(--forge-tab-stacked-height, 64px)}:host([stacked]) .forge-tab .content{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}:host([secondary]) .forge-tab{--_active-indicator-height:var(--forge-tab-indicator-height, 2px);--_active-indicator-shape:var(--forge-tab-indicator-shape, 0)}:host([secondary]) .content{width:100%}:host([secondary]) .indicator{min-width:100%}:host([vertical]) .forge-tab{width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom:none}:host([vertical]) .forge-tab .content{width:100%}:host([vertical]) .forge-tab .indicator{height:100%;min-width:var(--_active-indicator-height);inset:0 0 0 auto}:host([vertical][secondary]) .content{min-height:100%}:host([vertical]:not([secondary])) .forge-tab{--_active-indicator-shape:var(--forge-tab-indicator-shape, 3px 0 0 3px)}:host([inverted]) .forge-tab{--_active-indicator-shape:var(--forge-tab-indicator-shape, 0 0 3px 3px)}:host([inverted]) .indicator{inset:0 0 auto;-webkit-transform-origin:top left;transform-origin:top left}:host([inverted][vertical]) .forge-tab{--_active-indicator-shape:var(--forge-tab-indicator-shape, 0 3px 3px 0)}:host([inverted][vertical]) .indicator{inset:0 auto 0 0}.forge-tab{--_active-color:var(--forge-tab-active-color, var(--forge-theme-primary, #3f51b5));--_inactive-color:var(--forge-tab-inactive-color, var(--forge-theme-text-secondary, rgba(0, 0, 0, 0.54)));--_height:var(--forge-tab-height, 48px);--_active-indicator-color:var(--forge-tab-indicator-color, var(--_active-color));--_active-indicator-height:var(--forge-tab-indicator-height, 3px);--_active-indicator-shape:var(--forge-tab-indicator-shape, 3px 3px 0 0);--_container-color:var(--forge-tab-container-color, transparent);--_container-height:var(--forge-tab-container-height, var(--_height));--_container-shape:var(--forge-tab-container-shape, 0);--_content-height:var(--forge-tab-content-height, var(--_height));--_active-focus-icon-color:var(--forge-tab-active-focus-icon-color, var(--_active-color));--_active-hover-icon-color:var(--forge-tab-active-hover-icon-color, var(--_active-color));--_active-icon-color:var(--forge-tab-active-icon-color, var(--_active-color));--_active-pressed-icon-color:var(--forge-tab-active-pressed-icon-color, var(--_active-color));--_icon-size:var(--forge-tab-icon-size, 24px);--_focus-icon-color:var(--forge-tab-focus-icon-color, var(--_inactive-color));--_hover-icon-color:var(--forge-tab-hover-icon-color, var(--_inactive-color));--_icon-color:var(--forge-tab-icon-color, var(--_inactive-color));--_pressed-icon-color:var(--forge-tab-pressed-icon-color, var(--_inactive-color));--_active-focus-label-text-color:var(--forge-tab-active-focus-label-text-color, var(--_active-color));--_active-hover-label-text-color:var(--forge-tab-active-hover-label-text-color, var(--_active-color));--_active-label-text-color:var(--forge-tab-active-label-text-color, var(--_active-color));--_active-pressed-label-text-color:var(--forge-tab-active-pressed-label-text-color, var(--_active-color));--_focus-label-text-color:var(--forge-tab-focus-label-text-color, var(--_inactive-color));--_hover-label-text-color:var(--forge-tab-hover-label-text-color, var(--_inactive-color));--_label-text-color:var(--forge-tab-label-text-color, var(--_inactive-color));--_pressed-label-text-color:var(--forge-tab-pressed-label-text-color, var(--_inactive-color));-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size, .875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, .0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;vertical-align:middle;background:0 0;text-decoration:none;width:100%;position:relative;padding:0;margin:0;z-index:0;background-color:var(--_container-color);color:var(--_label-text-color);min-height:var(--_container-height)}.forge-tab::-moz-focus-inner{padding:0;border:0}.forge-tab ::slotted([slot=leading]),.forge-tab ::slotted([slot=trailing]){display:-webkit-inline-box;display:inline-flex;position:relative;-webkit-writing-mode:horizontal-tb;-ms-writing-mode:lr-tb;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size)}.forge-tab:hover{color:var(--_hover-label-text-color);cursor:pointer}.forge-tab:hover ::slotted([slot=leading]),.forge-tab:hover ::slotted([slot=trailing]){color:var(--_hover-icon-color)}.forge-tab .content{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;white-space:nowrap;-webkit-transition:150ms color linear;transition:150ms color linear;max-height:calc(var(--_content-height) + 16px);min-height:var(--_content-height);padding:8px 16px;gap:4px}.forge-tab .content .label{display:inline-block;line-height:1}.forge-tab .indicator{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:-1;-webkit-transform-origin:bottom left;transform-origin:bottom left;background:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape);height:var(--_active-indicator-height);inset:auto 0 0;opacity:0}::slotted(*),host{white-space:nowrap}forge-focus-indicator{--forge-focus-indicator-color:var(--_active-color);--forge-focus-indicator-shape:8px}forge-state-layer{--forge-state-layer-color:var(--_inactive-color)}';
 /**
- * The web component class behind the `<forge-tab>` custom element.
- *
  * @tag forge-tab
+ *
+ * @property {boolean} disabled - The disabled state of the tab.
+ * @property {boolean} selected - The selected state of the tab.
+ * @property {boolean} vertical - Controls whether the tab is vertical or horizontal.
+ * @property {boolean} stacked - Controls whether the tab is taller to allow for slotted leading/trailing elements.
+ * @property {boolean} secondary - Controls whether the tab is styled as secondary tab navigation.
+ * @property {boolean} inverted - Controls whether the tab indicator is rendered on the opposite side of the tab.
+ *
+ * @attribute disabled - The disabled state of the tab.
+ * @attribute selected - The selected state of the tab.
+ * @attribute vertical - Controls whether the tab is vertical or horizontal.
+ * @attribute stacked - Controls whether the tab is taller to allow for slotted leading/trailing elements.
+ * @attribute secondary - Controls whether the tab is styled as secondary tab navigation.
+ *
+ * @event forge-tab-select - Dispatched when the tab is selected.
+ *
+ * @cssproperty --forge-tab-indicator-color - The color of the tab indicator. Defaults to the primary theme.
+ * @cssproperty --forge-tab-indicator-height - The height of the tab indicator.
+ * @cssproperty --forge-tab-indicator-shape - The shape of the tab indicator.
+ * @cssproperty --forge-tab-container-color - The color of the tab container. Defaults to the surface theme.
+ * @cssproperty --forge-tab-height - The height of the tab.
+ * @cssproperty --forge-tab-shape - The shape of the tab.
+ * @cssproperty --forge-tab-disabled-opacity - The opacity of the tab when disabled.
+ * @cssproperty --forge-tab-active-focus-icon-color - The color of the icon when the tab is active and focused. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-hover-icon-color - The color of the icon when the tab is active and hovered. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-icon-color - The color of the icon when the tab is active. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-pressed-icon-color - The color of the icon when the tab is active and pressed. Defaults to the primary theme.
+ * @cssproperty --forge-tab-icon-size - The size of the icon.
+ * @cssproperty --forge-tab-focus-icon-color - The color of the icon when the tab is focused. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-hover-icon-color - The color of the icon when the tab is hovered. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-icon-color - The color of the icon. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-pressed-icon-color - The color of the icon when the tab is pressed. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-active-focus-label-text-color - The color of the label text when the tab is active and focused. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-hover-label-text-color - The color of the label text when the tab is active and hovered. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-label-text-color - The color of the label text when the tab is active. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-pressed-label-text-color - The color of the label text when the tab is active and pressed. Defaults to the primary theme.
+ * @cssproperty --forge-tab-focus-label-text-color - The color of the label text when the tab is focused. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-hover-label-text-color - The color of the label text when the tab is hovered. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-label-text-color - The color of the label text. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-pressed-label-text-color - The color of the label text when the tab is pressed. Defaults to the text-on-background theme.
+ *
+ * @csspart container - The tab container.
+ * @csspart content - The tab content container.
+ * @csspart label - The tab label container.
+ * @csspart indicator - The tab active indicator.
  */
 let TabComponent = class TabComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new TabFoundation(new TabAdapter(this));
-    }
     static get observedAttributes() {
         return [
             TAB_CONSTANTS.attributes.DISABLED,
-            TAB_CONSTANTS.attributes.ACTIVE,
-            TAB_CONSTANTS.attributes.STRETCH
+            TAB_CONSTANTS.attributes.SELECTED,
+            TAB_CONSTANTS.attributes.VERTICAL,
+            TAB_CONSTANTS.attributes.STACKED,
+            TAB_CONSTANTS.attributes.SECONDARY,
+            TAB_CONSTANTS.attributes.INVERTED
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new TabFoundation(new TabAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }
-    disconnectedCallback() {
-        this._foundation.disconnect();
-    }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
             case TAB_CONSTANTS.attributes.DISABLED:
                 this.disabled = coerceBoolean(newValue);
                 break;
-            case TAB_CONSTANTS.attributes.ACTIVE:
-                this.active = coerceBoolean(newValue);
+            case TAB_CONSTANTS.attributes.SELECTED:
+                this.selected = coerceBoolean(newValue);
+                break;
+            case TAB_CONSTANTS.attributes.VERTICAL:
+                this.vertical = coerceBoolean(newValue);
+                break;
+            case TAB_CONSTANTS.attributes.STACKED:
+                this.stacked = coerceBoolean(newValue);
+                break;
+            case TAB_CONSTANTS.attributes.SECONDARY:
+                this.secondary = coerceBoolean(newValue);
                 break;
-            case TAB_CONSTANTS.attributes.STRETCH:
-                this.stretch = coerceBoolean(newValue);
+            case TAB_CONSTANTS.attributes.INVERTED:
+                this.inverted = coerceBoolean(newValue);
                 break;
         }
     }
-    activate(previousIndicatorClientRect) {
-        this._foundation.activate(previousIndicatorClientRect);
-    }
-    deactivate() {
-        this._foundation.deactivate();
-    }
-    computeIndicatorBounds() {
-        return this._foundation.computeIndicatorBounds();
-    }
-    computeDimensions() {
-        return this._foundation.computeDimensions();
-    }
-    focus() {
-        this._foundation.focus();
-    }
-    setTabIndex(value) {
-        this._foundation.setTabIndex(value);
-    }
 };
 __decorate([
     FoundationProperty()
 ], TabComponent.prototype, "disabled", void 0);
 __decorate([
     FoundationProperty()
-], TabComponent.prototype, "active", void 0);
+], TabComponent.prototype, "selected", void 0);
+__decorate([
+    FoundationProperty()
+], TabComponent.prototype, "vertical", void 0);
+__decorate([
+    FoundationProperty()
+], TabComponent.prototype, "stacked", void 0);
+__decorate([
+    FoundationProperty()
+], TabComponent.prototype, "secondary", void 0);
 __decorate([
     FoundationProperty()
-], TabComponent.prototype, "stretch", void 0);
+], TabComponent.prototype, "inverted", void 0);
 TabComponent = __decorate([
     CustomElement({
-        name: TAB_CONSTANTS.elementName
+        name: TAB_CONSTANTS.elementName,
+        dependencies: [
+            FocusIndicatorComponent,
+            StateLayerComponent
+        ]
     })
 ], TabComponent);
 export { TabComponent };

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

@@ -3,96 +3,58 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { IBaseAdapter, BaseAdapter } from '../../core/base/base-adapter';
-import { ITabBarComponent } from './tab-bar';
-import { TabBarLayoutMode, TabBarLayoutAlign } from './tab-bar-constants';
+import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
 import { ITabComponent } from '../tab/tab';
-import { ITabDimensions } from '../tab/tab-constants';
+import { ITabBarComponent } from './tab-bar';
 export interface ITabBarAdapter extends IBaseAdapter {
-    initializeTabs(activeTabIndex: number, stretch: boolean): void;
-    initializeTabScroller(): void;
-    initializeAccessibility(): void;
-    destroyTabScroller(): void;
-    addTabChangeListener(listener: (evt: Event) => void): void;
-    removeTabChangeListener(listener: (evt: Event) => void): void;
-    addScrollListener(listener: (evt: Event) => void): void;
-    getTabIndex(tab: ITabComponent): number;
-    getTabCount(): number;
-    activateTab(index: number, previousTabBounds?: DOMRect): void;
-    deactivateTab(index: number): void;
-    syncTabIndex(index: number): void;
-    getTabBounds(index: number): DOMRect | undefined;
-    setUnderline(value: boolean): void;
-    setStacked(value: boolean): void;
-    scrollTo(scrollX: number): void;
-    getScrollContentWidth(): number;
-    getScrollPosition(): number;
-    getOffsetWidth(): number;
-    getTabDimensionsAtIndex(index: number): ITabDimensions;
-    incrementScroll(scrollXIncrement: number): void;
-    isScrolled(): boolean;
-    isScrolledEnd(): boolean;
-    getFocusedTabIndex(): number;
-    focusTabAtIndex(index: number): void;
-    setLayoutMode(value: TabBarLayoutMode): void;
-    setLayoutAlign(value: TabBarLayoutAlign): void;
-    setPreviousButtonVisibility(value: boolean): void;
-    setPreviousButtonEnabled(value: boolean): void;
-    setNextButtonVisibility(value: boolean): void;
-    setNextButtonEnabled(value: boolean): void;
-    addScrollPreviousListener(type: string, listener: (evt: MouseEvent) => void): void;
-    addScrollNextListener(type: string, listener: (evt: MouseEvent) => void): void;
-    isTabDisabled(index: number): boolean;
-    ensureFocusableTab(): void;
+    initializeContainerSizeObserver(listener: () => void): void;
+    destroyContainerSizeObserver(): void;
+    initializeScrollObserver(listener: EventListener): void;
+    destroyScrollObserver(listener: EventListener): void;
+    setVertical(value: boolean): void;
+    setScrollBackwardButtonListener(listener: EventListener): void;
+    setScrollForwardButtonListener(listener: EventListener): void;
+    addSlotListener(listener: EventListener): void;
+    getTabs(): ITabComponent[];
+    tryScrollTabIntoView(tab: ITabComponent): Promise<void>;
+    isScrollable(): boolean;
+    getScrollState(): ITabBarScrollInfo;
+    setScrollButtons(value: boolean): void;
+    syncScrollButtons(state: ITabBarScrollButtonState): void;
+    scroll(which: 'backward' | 'forward'): void;
+    updateScrollButtonIcons(vertical: boolean): void;
+}
+export interface ITabBarScrollInfo {
+    isScrolledStart: boolean;
+    isScrolledEnd: boolean;
+}
+export interface ITabBarScrollButtonState {
+    backwardEnabled: boolean;
+    forwardEnabled: boolean;
 }
 export declare class TabBarAdapter extends BaseAdapter<ITabBarComponent> implements ITabBarAdapter {
-    private _rootElement;
-    private _defaultSlotElement;
-    private _tabScrollElement;
-    private _tabScrollAreaElement;
-    private _tabScrollContentElement;
-    private _tabScroller;
-    private _tabs;
-    private _prevButtonContainerElement;
-    private _nextButtonContainerElement;
-    private _prevButtonElement;
-    private _nextButtonElement;
+    private readonly _defaultSlotElement;
+    private readonly _container;
+    private readonly _scrollContainer;
+    private _resizeObserver;
+    private _backwardScrollButton;
+    private _forwardScrollButton;
     constructor(component: ITabBarComponent);
-    initializeTabs(activeTabIndex: number, stretch: boolean): void;
-    initializeTabScroller(): void;
-    initializeAccessibility(): void;
-    destroyTabScroller(): void;
-    addTabChangeListener(listener: (evt: Event) => void): void;
-    removeTabChangeListener(listener: (evt: Event) => void): void;
-    addScrollListener(listener: (evt: Event) => void): void;
-    getTabIndex(tab: ITabComponent): number;
-    getTabCount(): number;
-    activateTab(index: number, previousTabBounds?: DOMRect): void;
-    deactivateTab(index: number): void;
-    syncTabIndex(index: number): void;
-    getTabBounds(index: number): DOMRect | undefined;
-    setUnderline(value: boolean): void;
-    setStacked(value: boolean): void;
-    scrollTo(scrollX: number): void;
-    getScrollContentWidth(): number;
-    getScrollPosition(): number;
-    getOffsetWidth(): number;
-    getTabDimensionsAtIndex(index: number): ITabDimensions;
-    incrementScroll(scrollXIncrement: number): void;
-    isScrolled(): boolean;
-    isScrolledEnd(): boolean;
-    getFocusedTabIndex(): number;
-    focusTabAtIndex(index: number): void;
-    setLayoutMode(value: TabBarLayoutMode): void;
-    setLayoutAlign(value: TabBarLayoutAlign): void;
-    setPreviousButtonVisibility(value: boolean): void;
-    setPreviousButtonEnabled(value: boolean): void;
-    setNextButtonVisibility(value: boolean): void;
-    setNextButtonEnabled(value: boolean): void;
-    addScrollPreviousListener(type: string, listener: (evt: MouseEvent) => void): void;
-    addScrollNextListener(type: string, listener: (evt: MouseEvent) => void): void;
-    isTabDisabled(index: number): boolean;
-    ensureFocusableTab(): void;
-    private _getTabs;
-    private _getTabByIndex;
+    initializeContainerSizeObserver(listener: () => void): void;
+    initializeScrollObserver(listener: EventListener): void;
+    destroyContainerSizeObserver(): void;
+    destroyScrollObserver(listener: EventListener): void;
+    setVertical(value: boolean): void;
+    setScrollBackwardButtonListener(listener: EventListener): void;
+    setScrollForwardButtonListener(listener: EventListener): void;
+    addSlotListener(listener: EventListener): void;
+    getTabs(): ITabComponent[];
+    tryScrollTabIntoView(tab: ITabComponent): Promise<void>;
+    getScrollState(): ITabBarScrollInfo;
+    isScrollable(): boolean;
+    setScrollButtons(value: boolean): void;
+    syncScrollButtons({ backwardEnabled, forwardEnabled }: ITabBarScrollButtonState): void;
+    scroll(which: 'backward' | 'forward'): void;
+    updateScrollButtonIcons(vertical: boolean): void;
+    private _createScrollButton;
 }