@tylertech/forge 3.8.0 → 3.8.2-dev.0

package/esm/core/utils/event-utils.d.ts

@@ -11,3 +11,10 @@
  */
 export declare function proxyShadowScrollEvent(shadowEl: Node, proxyEl: Node): () => void;
 export declare function eventIncludesArrowKey(evt: KeyboardEvent): boolean;
+/**
+ * Returns the composed path of an event stopping at the given element.
+ * @param fromElement The element to start the composed path from.
+ * @param evt The event to get the composed path from.
+ * @returns An array of elements in the composed path starting from the given element.
+ */
+export declare function composedPathFrom(fromElement: HTMLElement, evt: Event): HTMLElement[];

package/esm/core/utils/event-utils.js

@@ -17,3 +17,14 @@ export function proxyShadowScrollEvent(shadowEl, proxyEl) {
 export function eventIncludesArrowKey(evt) {
     return evt.key === 'ArrowLeft' || evt.key === 'ArrowRight' || evt.key === 'ArrowUp' || evt.key === 'ArrowDown';
 }
+/**
+ * Returns the composed path of an event stopping at the given element.
+ * @param fromElement The element to start the composed path from.
+ * @param evt The event to get the composed path from.
+ * @returns An array of elements in the composed path starting from the given element.
+ */
+export function composedPathFrom(fromElement, evt) {
+    const composedElements = evt.composedPath().filter((el) => el.nodeType === Node.ELEMENT_NODE);
+    const startIndex = composedElements.indexOf(fromElement);
+    return startIndex >= 0 ? composedElements.slice(0, startIndex) : [];
+}

package/esm/date-picker/base/base-date-picker-adapter.js

@@ -173,6 +173,9 @@ export class BaseDatePickerAdapter extends BaseAdapter {
                 return;
             }
             const iconButtonElement = this._createToggleElement();
+            // if (textField.density === 'extra-small') {
+            //   iconButtonElement.density = 'small';
+            // }
             textField.appendChild(iconButtonElement);
             this._toggleElement = iconButtonElement;
         }

package/esm/dialog/dialog-constants.d.ts

@@ -92,7 +92,7 @@ export interface IDialogBeforeCloseEventData {
 }
 export type DialogMode = 'modal' | 'inline-modal' | 'nonmodal';
 export type DialogType = 'dialog' | 'alertdialog';
-export type DialogAnimationType = 'none' | 'zoom' | 'fade' | 'slide' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right';
+export type DialogAnimationType = 'none' | 'zoom' | 'fade' | 'slide';
 export type DialogPositionStrategy = 'viewport' | 'container';
 export type DialogPlacement = 'custom' | 'center' | 'top' | 'right' | 'bottom' | 'left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 export type DialogSizeStrategy = 'content' | 'container-inline' | 'container-block';

package/esm/expansion-panel/expansion-panel-core.js

@@ -140,8 +140,8 @@ export class ExpansionPanelCore {
         if (this._trigger !== value) {
             this._clearTrigger();
             this._trigger = value;
-            this._adapter.setTriggerElementById(this._trigger);
             if (this._adapter.isConnected) {
+                this._adapter.setTriggerElementById(this._trigger);
                 this._syncTrigger();
             }
         }

package/esm/list/list-item/list-item-core.js

@@ -3,6 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { composedPathFrom } from '../../core/utils/event-utils';
 import { LIST_ITEM_CONSTANTS } from './list-item-constants';
 export class ListItemCore {
     constructor(_adapter) {
@@ -34,14 +35,14 @@ export class ListItemCore {
         this._adapter.destroy();
     }
     _onMousedown(evt) {
-        const composedElements = evt.composedPath().filter((el) => el.nodeType === Node.ELEMENT_NODE);
+        const composedElements = composedPathFrom(this._adapter.hostElement, evt);
         const fromInteractiveElement = composedElements.some(el => el === this._adapter.interactiveElement);
         if (this._focusPropagation === 'off' || !fromInteractiveElement) {
             evt.preventDefault();
         }
     }
     _onKeydown(evt) {
-        const composedElements = evt.composedPath().filter((el) => el.nodeType === Node.ELEMENT_NODE);
+        const composedElements = composedPathFrom(this._adapter.hostElement, evt);
         const isFromStartEndSlot = composedElements.some((el) => el.matches(LIST_ITEM_CONSTANTS.selectors.SLOTTED_START_END));
         if (evt.key === 'Enter' || evt.key === ' ') {
             evt.stopPropagation();
@@ -61,7 +62,7 @@ export class ListItemCore {
         }
     }
     _onClick(evt) {
-        const composedElements = evt.composedPath().filter((el) => el.nodeType === Node.ELEMENT_NODE);
+        const composedElements = composedPathFrom(this._adapter.hostElement, evt);
         // Ignore clicks from elements that should not trigger selection
         const fromIgnoredElement = composedElements.some(el => el.matches(LIST_ITEM_CONSTANTS.selectors.IGNORE));
         if (fromIgnoredElement) {

package/esm/paginator/paginator.d.ts

@@ -29,6 +29,14 @@ declare global {
 /**
  * @tag forge-paginator
  *
+ * @slot label - Overrides the label text when in the default variant.
+ * @slot range-label - Overrides the default range label with a custom label when in the default variant.
+ * @slot alternative-range-label - Overrides the default range label with a custom label when in the `alternative` variant.
+ * @slot first-page-tooltip - Overrides the default tooltip for the first page button.
+ * @slot last-page-tooltip - Overrides the default tooltip for the last page button.
+ * @slot previous-page-tooltip - Overrides the default tooltip for the previous page button.
+ * @slot next-page-tooltip - Overrides the default tooltip for the next page button.
+ *
  * @event {CustomEvent<IPaginatorChangeEventData>} forge-paginator-change - Dispatched when the paginator state changes.
  */
 export declare class PaginatorComponent extends BaseComponent implements IPaginatorComponent {

package/esm/paginator/paginator.js

@@ -19,6 +19,14 @@ const styles = ':host{display:block}:host([hidden]){display:none}.forge-paginato
 /**
  * @tag forge-paginator
  *
+ * @slot label - Overrides the label text when in the default variant.
+ * @slot range-label - Overrides the default range label with a custom label when in the default variant.
+ * @slot alternative-range-label - Overrides the default range label with a custom label when in the `alternative` variant.
+ * @slot first-page-tooltip - Overrides the default tooltip for the first page button.
+ * @slot last-page-tooltip - Overrides the default tooltip for the last page button.
+ * @slot previous-page-tooltip - Overrides the default tooltip for the previous page button.
+ * @slot next-page-tooltip - Overrides the default tooltip for the next page button.
+ *
  * @event {CustomEvent<IPaginatorChangeEventData>} forge-paginator-change - Dispatched when the paginator state changes.
  */
 let PaginatorComponent = class PaginatorComponent extends BaseComponent {

package/esm/split-view/split-view-panel/split-view-panel.js

@@ -13,7 +13,7 @@ import { SplitViewPanelCore } from './split-view-panel-core';
 import { SplitViewPanelAdapter } from './split-view-panel-adapter';
 import { IconComponent, IconRegistry } from '../../icon';
 const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-state-layer target=\"handle\" id=\"state-layer\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator inward target=\"handle\" part=\"focus-indicator\"></forge-focus-indicator></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
-const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:u910hqj;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u910hqj{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:u910hqz;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u910hqz{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u910hrq;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes u910hrq{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:u910hrw;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes u910hrw{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:u910hsf;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u910hsf{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u910ht3;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u910ht3{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u910htz;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes u910htz{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u910hul;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes u910hul{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
+const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:uez234f;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uez234f{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:uez234v;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uez234v{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:uez235n;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uez235n{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:uez236i;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uez236i{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:uez236l;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uez236l{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:uez237k;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uez237k{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:uez237p;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uez237p{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:uez2389;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uez2389{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
 import { StateLayerComponent } from '../../state-layer';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 /**

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

@@ -29,7 +29,6 @@ export declare class TabBarCore implements ITabBarCore {
     private _inverted;
     private _autoActivate;
     private _scrollButtons;
-    private _tabs;
     private _scrollButtonsVisible;
     private _tabScrollAnimationFrame;
     private _tabsChangedListener;

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

@@ -18,7 +18,6 @@ export class TabBarCore {
         this._inverted = false;
         this._autoActivate = false;
         this._scrollButtons = false;
-        this._tabs = [];
         this._scrollButtonsVisible = false;
         this._tabsChangedListener = () => this._onTabsChanged();
         this._tabSelectedListener = (evt) => this._onTabSelected(evt);
@@ -38,7 +37,7 @@ export class TabBarCore {
             this._adapter.initializeScrollObserver(this._scrollListener);
             this._updateScrollState();
         }
-        this._tryScrollActiveTabIntoView();
+        this._syncTabState();
         this._isInitialized = true;
     }
     destroy() {
@@ -47,7 +46,6 @@ export class TabBarCore {
         this._isInitialized = false;
     }
     async _onTabsChanged() {
-        this._tabs = this._adapter.getTabs();
         this._syncTabState();
         if (this._scrollButtons) {
             this._detectScrollableStatus();
@@ -65,24 +63,25 @@ export class TabBarCore {
         }
         evt.preventDefault();
         let index = -1;
+        const tabs = this._adapter.getTabs();
         if (evt.key === 'Home') {
             // Locate the first non-disabled tab
-            index = this._tabs.findIndex(tab => !tab.disabled);
+            index = tabs.findIndex(tab => !tab.disabled);
         }
         else if (evt.key === 'End') {
             // Locate the last non-disabled tab
-            index = this._tabs.reduceRight((acc, tab, i) => (!tab.disabled && acc === -1 ? i : acc), -1);
+            index = tabs.reduceRight((acc, tab, i) => (!tab.disabled && acc === -1 ? i : acc), -1);
         }
         else {
             // Locate the next or previous tab based on the key that was pressed
-            const currentIndex = this._tabs.findIndex(tab => tab.matches(':focus'));
+            const currentIndex = tabs.findIndex(tab => tab.matches(':focus'));
             const isPrevKey = evt.key === 'ArrowLeft' || evt.key === 'ArrowUp';
             const calcIndex = (startIndex) => {
                 index = startIndex + (isPrevKey ? -1 : 1);
-                index = index < 0 ? this._tabs.length - 1 : index % this._tabs.length;
+                index = index < 0 ? tabs.length - 1 : index % tabs.length;
                 // Try to recurse until we find a non-disabled tab (unless all tabs are disabled already)
-                const isAllTabsDisabled = this._tabs.every(tab => tab.disabled);
-                if (!isAllTabsDisabled && this._tabs[index]?.disabled) {
+                const isAllTabsDisabled = tabs.every(tab => tab.disabled);
+                if (!isAllTabsDisabled && tabs[index]?.disabled) {
                     calcIndex(index);
                 }
             };
@@ -92,23 +91,24 @@ export class TabBarCore {
             return;
         }
         if (this._autoActivate) {
-            this._selectTab({ tab: this._tabs[index], focusTab: true });
+            this._selectTab({ tab: tabs[index], focusTab: true });
         }
         else {
-            this._tabs[index].focus({ preventScroll: true, focusVisible: true });
-            await this._adapter.tryScrollTabIntoView(this._tabs[index]);
+            tabs[index].focus({ preventScroll: true, focusVisible: true });
+            await this._adapter.tryScrollTabIntoView(tabs[index]);
         }
     }
     async _selectTab({ tab, emitEvent = true, focusTab = false }) {
         if (!tab || tab.disabled) {
             return;
         }
-        const currentSelectedTab = this._tabs.find(t => t.selected);
+        const tabs = this._adapter.getTabs();
+        const currentSelectedTab = tabs.find(t => t.selected);
         if (currentSelectedTab === tab) {
             return;
         }
         if (emitEvent) {
-            const index = this._tabs.indexOf(tab);
+            const index = tabs.indexOf(tab);
             const event = new CustomEvent(TAB_BAR_CONSTANTS.events.CHANGE, {
                 detail: { index },
                 bubbles: true,
@@ -132,7 +132,7 @@ export class TabBarCore {
         if (currentSelectedTab) {
             currentSelectedTab.selected = false;
         }
-        this._activeTab = this._tabs.indexOf(tab);
+        this._activeTab = tabs.indexOf(tab);
     }
     /**
      * Ensures that all tabs have the correct state based on the tab bar state.
@@ -140,13 +140,14 @@ export class TabBarCore {
      * This is called whenever a child tab is added to the DOM.
      */
     _syncTabState() {
-        this._tabs.forEach((tab, index) => {
+        const tabs = this._adapter.getTabs();
+        tabs.forEach((tab, index) => {
             tab.selected = index === this._activeTab;
-            if (this._disabled)
+            if (this._disabled) {
                 tab.disabled = this._disabled;
+            }
             tab.vertical = this._vertical;
             tab.stacked = this._stacked;
-            tab.secondary = this._secondary;
             tab.inverted = this._inverted;
         });
     }
@@ -199,10 +200,11 @@ export class TabBarCore {
         }
         // We batch the tab scrolling into a single animation frame to unnecessarily scrolling for each tab
         this._tabScrollAnimationFrame = window.requestAnimationFrame(() => {
+            const tabs = this._adapter.getTabs();
             this._tabScrollAnimationFrame = undefined;
             if (this._adapter.isScrollable()) {
-                if (typeof this._activeTab === 'number' && this._activeTab >= 0 && this._tabs[this._activeTab]) {
-                    this._adapter.tryScrollTabIntoView(this._tabs[this._activeTab]);
+                if (typeof this._activeTab === 'number' && this._activeTab >= 0 && tabs[this._activeTab]) {
+                    this._adapter.tryScrollTabIntoView(tabs[this._activeTab]);
                 }
             }
         });
@@ -214,7 +216,7 @@ export class TabBarCore {
         value = Boolean(value);
         if (this._disabled !== value) {
             this._disabled = value;
-            this._tabs.forEach(tab => (tab.disabled = this._disabled));
+            this._adapter.getTabs().forEach(tab => (tab.disabled = this._disabled));
             this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.DISABLED, this._disabled);
         }
     }
@@ -224,13 +226,14 @@ export class TabBarCore {
     set activeTab(value) {
         if (this._activeTab !== value) {
             this._activeTab = value ?? undefined;
+            const tabs = this._adapter.getTabs();
             if (typeof this._activeTab === 'number') {
-                const newSelectedTab = this._tabs[this._activeTab];
+                const newSelectedTab = tabs[this._activeTab];
                 this._selectTab({ tab: newSelectedTab, emitEvent: false, focusTab: false });
                 this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB, String(this._activeTab));
             }
             else {
-                this._tabs.forEach(tab => (tab.selected = false));
+                tabs.forEach(tab => (tab.selected = false));
                 this._adapter.removeHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB);
             }
         }
@@ -245,7 +248,7 @@ export class TabBarCore {
             if (this._isInitialized) {
                 this._adapter.setVertical(this._vertical);
             }
-            this._tabs.forEach(tab => (tab.vertical = this._vertical));
+            this._adapter.getTabs().forEach(tab => (tab.vertical = this._vertical));
             if (this._scrollButtonsVisible) {
                 this._adapter.updateScrollButtonIcons(this._vertical);
             }
@@ -269,7 +272,7 @@ export class TabBarCore {
         value = Boolean(value);
         if (this._stacked !== value) {
             this._stacked = value;
-            this._tabs.forEach(tab => (tab.stacked = this._stacked));
+            this._adapter.getTabs().forEach(tab => (tab.stacked = this._stacked));
             this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.STACKED, this._stacked);
         }
     }
@@ -280,7 +283,7 @@ export class TabBarCore {
         value = Boolean(value);
         if (this._secondary !== value) {
             this._secondary = value;
-            this._tabs.forEach(tab => (tab.secondary = this._secondary));
+            this._adapter.getTabs().forEach(tab => (tab.secondary = this._secondary));
             this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.SECONDARY, this._secondary);
         }
     }
@@ -291,7 +294,7 @@ export class TabBarCore {
         value = Boolean(value);
         if (this._inverted !== value) {
             this._inverted = value;
-            this._tabs.forEach(tab => (tab.inverted = this._inverted));
+            this._adapter.getTabs().forEach(tab => (tab.inverted = this._inverted));
             this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.INVERTED, this._inverted);
         }
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.8.0",
+  "version": "3.8.2-dev.0",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -21,4 +21,4 @@
     "tslib": "^2.8.1"
   },
   "customElements": "custom-elements.json"
-}
+}