@tylertech/forge 3.0.0-next.5 → 3.0.0-next.7

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

@@ -3,32 +3,64 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { TabBarLayoutMode, TabBarLayoutAlign, ITabBarActivateEventData } from './tab-bar-constants';
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 export interface ITabBarComponent extends IBaseComponent {
-    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;
-    scrollTabIntoView(index: number): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'forge-tab-bar': ITabBarComponent;
     }
     interface HTMLElementEventMap {
-        'forge-tab-bar-activate': CustomEvent<ITabBarActivateEventData>;
+        'forge-tab-bar-change': CustomEvent<number>;
     }
 }
 /**
- * The custom element class behind the `<forge-tab-bar>` element.
- *
  * @tag forge-tab-bar
+ *
+ * @summary Tabs organize content across different screens and views.
+ *
+ * @description
+ * Use tabs to group content into helpful categories. Tabs are typically placed
+ * above the content they relate to. Tabs can be used to navigate between screens,
+ * or to group related content within a screen.
+ *
+ * @property {boolean} disabled - The disabled state of the tab bar.
+ * @property {number} activeTab - The index of the active tab.
+ * @property {boolean} vertical - Controls whether the tab bar is vertical or horizontal.
+ * @property {boolean} clustered - Controls whether the tabs stretch the full width of their container or cluster together at their minimum width.
+ * @property {boolean} stacked - Controls whether the tabs are taller to allow for slotted leading/trailing elements.
+ * @property {boolean} secondary - Controls whether the tabs are styled as secondary tab navigation.
+ * @property {boolean} inverted - Controls whether the tabs are rendered inverted (tab indicator at top instead of bottom).
+ * @property {boolean} autoActivate - Controls whether the tabs are automatically activated when receiving focus.
+ * @property {boolean} scrollButtons - Controls whether scroll buttons are displayed when the tabs overflow their container.
+ *
+ * @attribute disabled - The disabled state of the tab bar.
+ * @attribute active-tab - The index of the active tab.
+ * @attribute vertical - Controls whether the tab bar is vertical or horizontal.
+ * @attribute clustered - Controls whether the tabs stretch the full width of their container or cluster together at their minimum width.
+ * @attribute stacked - Controls whether the tabs are taller to allow for slotted leading/trailing elements.
+ * @attribute secondary - Controls whether the tabs are styled as secondary tab navigation.
+ * @attribute auto-activate - Controls whether the tabs are automatically activated when receiving focus.
+ * @attribute scroll-buttons - Controls whether scroll buttons are displayed when the tabs overflow their container.
+ *
+ * @event forge-tab-bar-change {CustomEvent<number>} - Dispatches when the active tab changes.
+ *
+ * @cssproperty --forge-tab-bar-justify - The `justify-content` value for the tab bar flex container.
+ * @cssproperty --forge-tab-bar-stretch - The `flex` value for the child `<forge-tab>` elements.
+ * @cssproperty --forge-tab-bar-underline-color - The color of the underline.
+ * @cssproperty --forge-tab-bar-underline-thickness - The thickness of the underline.
+ *
+ * @csspart container - The container element.
+ * @csspart scroll-container - The scroll container element.
  */
 export declare class TabBarComponent extends BaseComponent implements ITabBarComponent {
     static get observedAttributes(): string[];
@@ -37,30 +69,13 @@ export declare class TabBarComponent extends BaseComponent implements ITabBarCom
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** Gets and sets the active tab index. */
-    activeTab: number;
-    /** Gets/sets the layout mode that controls how the tabs are sized and rendered. */
-    layoutMode: TabBarLayoutMode;
-    /** Gets/sets the layout alignment. Only pertains to non-full width layout modes. */
-    layoutAlign: TabBarLayoutAlign;
-    /** Gets/sets whether the component displays an underline or not. Default is `false`. */
-    underline: boolean;
-    /** Gets/sets whether tabs are auto-activated when using arrow keys. Default is `true` */
-    autoActivate: boolean;
-    /** Gets/sets whether the tabs are displayed with as their stacked variant. Default is `false`. */
+    disabled: boolean;
+    activeTab: number | null | undefined;
+    vertical: boolean;
+    clustered: boolean;
     stacked: boolean;
-    /** Gets/sets whether the scroll buttons can be displayed or not. Default is `true`. The component handles visibility automatically. */
+    secondary: boolean;
+    inverted: boolean;
+    autoActivate: boolean;
     scrollButtons: boolean;
-    /** Gets/sets whether the scroll buttons are visible indefinitely or not. Default is `false`. */
-    forceScrollButtons: boolean;
-    /**
-     * Activates the tab at the given index.
-     * @param index The index of the tab.
-     */
-    activateTab(index: number): void;
-    /**
-     * Scrolls the tab at the given index into view.
-     * @param index The index of the tab.
-     */
-    scrollTabIntoView(index: number): void;
 }

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

@@ -4,114 +4,146 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, attachShadowTemplate, coerceNumber, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
-import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight } from '@tylertech/tyler-icons/standard';
-import { TabComponent } from '../tab/tab';
+import { attachShadowTemplate, coerceBoolean, coerceNumber, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { IconComponent, IconRegistry } from '../../icon';
 import { IconButtonComponent } from '../../icon-button';
+import { BaseComponent } from '../../core/base/base-component';
+import { TabComponent } from '../tab/tab';
+import { TabBarAdapter } from './tab-bar-adapter';
 import { TAB_BAR_CONSTANTS } from './tab-bar-constants';
 import { TabBarFoundation } from './tab-bar-foundation';
-import { TabBarAdapter } from './tab-bar-adapter';
-import { IconComponent, IconRegistry } from '../../icon';
-import { BaseComponent } from '../../core/base/base-component';
-const template = '<template><div class=\"forge-tab-bar\" part=\"root\"><div class=\"forge-tab-bar__scroll-prev-container\" part=\"previous-container\"><forge-icon-button part=\"previous-button\"><button type=\"button\" tabindex=\"-1\" aria-label=\"Scroll left\" id=\"scroll-prev-btn\" part=\"previous-button-element\"><forge-icon name=\"keyboard_arrow_left\" part=\"previous-button-icon\"></forge-icon></button></forge-icon-button></div><div class=\"mdc-tab-scroller\" part=\"tab-scroller\"><div class=\"mdc-tab-scroller__scroll-area\" part=\"scroll-area\"><div class=\"mdc-tab-scroller__scroll-content\" part=\"scroll-content\"><slot></slot></div></div></div><div class=\"forge-tab-bar__scroll-next-container\" part=\"next-container\"><forge-icon-button part=\"next-button\"><button type=\"button\" tabindex=\"-1\" aria-label=\"Scroll right\" id=\"scroll-next-btn\" part=\"next-button-element\"><forge-icon name=\"keyboard_arrow_right\" part=\"next-button-icon\"></forge-icon></button></forge-icon-button></div></div></template>';
-const styles = '.forge-icon-button{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.forge-icon-button forge-icon,.forge-icon-button img,.forge-icon-button svg{width:24px;height:24px}.forge-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-icon-button:disabled{cursor:default;pointer-events:none}.forge-icon-button__icon{display:inline-block}.forge-icon-button__icon.forge-icon-button__icon--on{display:none}.forge-icon-button--on .forge-icon-button__icon{display:none}.forge-icon-button--on .forge-icon-button__icon.forge-icon-button__icon--on{display:inline-block}@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.forge-icon-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity}.forge-icon-button::after,.forge-icon-button::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-icon-button::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-icon-button::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-icon-button.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-icon-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-icon-button.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-icon-button.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button::after,.forge-icon-button::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.forge-icon-button.mdc-ripple-upgraded::after,.forge-icon-button.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button::after,.forge-icon-button::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-icon-button.mdc-ripple-surface--hover::before,.forge-icon-button:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button.mdc-ripple-upgraded--background-focused::before,.forge-icon-button:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}forge-icon-button{position:relative;display:inline-block;overflow:visible}.forge-icon-button--on{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-icon-button--on::after,.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-icon-button--on.mdc-ripple-surface--hover::before,.forge-icon-button--on:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button--on.mdc-ripple-upgraded--background-focused::before,.forge-icon-button--on:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button--on:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button--on:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button--on.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);opacity:.08}.forge-icon-button--dense{width:28px;height:28px;padding:2px;padding:0}.forge-icon-button--dense-1{width:44px;height:44px;padding:10px}.forge-icon-button--dense-2{width:40px;height:40px;padding:8px}.forge-icon-button--dense-3{width:36px;height:36px;padding:6px}.forge-icon-button--dense-4{width:32px;height:32px;padding:4px}.forge-icon-button--dense-5{width:28px;height:28px;padding:2px}.forge-icon-button--dense-6{width:24px;height:24px;padding:0}.forge-icon-button--with-badge forge-badge{z-index:1;z-index:var(--forge-z-index-surface,1);pointer-events:none;--forge-badge-max-width:32px;--forge-badge-border:1px solid transparent}.forge-icon-button--with-badge forge-badge[app-bar-context]{--forge-badge-border:2px solid var(--forge-app-bar-theme-background)}.mdc-tab-scroller{overflow-y:hidden}.mdc-tab-scroller.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-content{-webkit-transition:250ms -webkit-transform cubic-bezier(.4, 0, .2, 1);transition:250ms -webkit-transform cubic-bezier(.4, 0, .2, 1);transition:250ms transform cubic-bezier(.4, 0, .2, 1);transition:250ms transform cubic-bezier(.4, 0, .2, 1),250ms -webkit-transform cubic-bezier(.4, 0, .2, 1)}.mdc-tab-scroller__test{position:absolute;top:-9999px;width:100px;height:100px;overflow-x:scroll}.mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:touch;display:-webkit-box;display:flex;overflow-x:hidden}.mdc-tab-scroller__scroll-area::-webkit-scrollbar,.mdc-tab-scroller__test::-webkit-scrollbar{display:none}.mdc-tab-scroller__scroll-area--scroll{overflow-x:scroll}.mdc-tab-scroller__scroll-content{position:relative;display:-webkit-box;display:flex;-webkit-box-flex:1;flex:1 0 auto;-webkit-transform:none;transform:none;will-change:transform}.mdc-tab-scroller--align-start .mdc-tab-scroller__scroll-content{-webkit-box-pack:start;justify-content:flex-start}.mdc-tab-scroller--align-end .mdc-tab-scroller__scroll-content{-webkit-box-pack:end;justify-content:flex-end}.mdc-tab-scroller--align-center .mdc-tab-scroller__scroll-content{-webkit-box-pack:center;justify-content:center}.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:auto}.forge-tab-bar{height:48px;height:var(--forge-tab-bar-height,48px);display:-webkit-box;display:flex;position:relative}.forge-tab-bar--underlined::after{border-bottom-color:#e0e0e0;border-bottom-color:var(--forge-theme-border-color,#e0e0e0);content:\"\";border-bottom-width:1px;border-bottom-style:solid;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;position:absolute;bottom:0;left:0;right:0}.forge-tab-bar--align-center .mdc-tab-scroller__scroll-content{-webkit-box-pack:center;justify-content:center}.forge-tab-bar--align-end .mdc-tab-scroller__scroll-content{-webkit-box-pack:end;justify-content:flex-end}.forge-tab-bar--stacked{height:72px;height:var(--forge-tab-bar-height,72px);-webkit-box-align:center;align-items:center}.forge-tab-bar--stacked .mdc-tab-scroller{height:100%}.mdc-tab-scroller{z-index:1;width:100%}.mdc-tab-scroller__scroll-area{height:100%;overflow-x:auto;scrollbar-width:none}:host{display:block;overflow:hidden}:host([hidden]){display:none}';
+import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight, tylIconKeyboardArrowUp, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
+const template = '<template><div class=\"container\" part=\"container\"><div role=\"tablist\" class=\"scroll-container\" part=\"scroll-container\"><slot></slot></div></div></template>';
+const styles = '.forge-icon-button{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.forge-icon-button forge-icon,.forge-icon-button img,.forge-icon-button svg{width:24px;height:24px}.forge-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-icon-button:disabled{cursor:default;pointer-events:none}.forge-icon-button__icon{display:inline-block}.forge-icon-button__icon.forge-icon-button__icon--on{display:none}.forge-icon-button--on .forge-icon-button__icon{display:none}.forge-icon-button--on .forge-icon-button__icon.forge-icon-button__icon--on{display:inline-block}@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.forge-icon-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity}.forge-icon-button::after,.forge-icon-button::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-icon-button::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-icon-button::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-icon-button.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-icon-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-icon-button.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-icon-button.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button::after,.forge-icon-button::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.forge-icon-button.mdc-ripple-upgraded::after,.forge-icon-button.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button::after,.forge-icon-button::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-icon-button.mdc-ripple-surface--hover::before,.forge-icon-button:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button.mdc-ripple-upgraded--background-focused::before,.forge-icon-button:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}forge-icon-button{position:relative;display:inline-block;overflow:visible}.forge-icon-button--on{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-icon-button--on::after,.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-icon-button--on.mdc-ripple-surface--hover::before,.forge-icon-button--on:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button--on.mdc-ripple-upgraded--background-focused::before,.forge-icon-button--on:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button--on:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button--on:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button--on.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);opacity:.08}.forge-icon-button--dense{width:28px;height:28px;padding:2px;padding:0}.forge-icon-button--dense-1{width:44px;height:44px;padding:10px}.forge-icon-button--dense-2{width:40px;height:40px;padding:8px}.forge-icon-button--dense-3{width:36px;height:36px;padding:6px}.forge-icon-button--dense-4{width:32px;height:32px;padding:4px}.forge-icon-button--dense-5{width:28px;height:28px;padding:2px}.forge-icon-button--dense-6{width:24px;height:24px;padding:0}.forge-icon-button--with-badge forge-badge{z-index:1;z-index:var(--forge-z-index-surface,1);pointer-events:none;--forge-badge-max-width:32px;--forge-badge-border:1px solid transparent}.forge-icon-button--with-badge forge-badge[app-bar-context]{--forge-badge-border:2px solid var(--forge-app-bar-theme-background)}.container{--_container-justify:var(--forge-tab-bar-justify, space-between);--_tab-flex:var(--forge-tab-bar-stretch, 1);--_divider-color:var(--forge-tab-bar-underline-color, var(--forge-theme-border-color, #e0e0e0));--_divider-thickness:var(--forge-tab-bar-underline-thickness, 1px);position:relative;display:grid;grid-template-columns:auto 1fr auto;max-width:100%;max-height:100%;-webkit-box-align:center;align-items:center;border-bottom:var(--_divider-thickness) solid var(--_divider-color)}.scroll-container{position:relative;display:-webkit-box;display:flex;-webkit-box-pack:var(--_container-justify);justify-content:var(--_container-justify);-webkit-box-align:end;align-items:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;grid-column:2}.scroll-container::-webkit-scrollbar{display:none}::slotted(*){-webkit-box-flex:var(--_tab-flex);flex:var(--_tab-flex)}::slotted([selected]){z-index:1}:host{position:relative;display:block}:host([vertical]) .container{grid-template-columns:none;grid-template-rows:auto 1fr auto;-webkit-box-align:initial;align-items:initial;border-bottom:none;border-right:var(--_divider-thickness) solid var(--_divider-color);height:100%}:host([vertical]) .scroll-container{display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:stretch;align-items:stretch;gap:0;grid-column:auto;grid-row:2}:host([vertical]) .scroll-button{justify-self:center}:host([inverted]:not([vertical])) .container{border-bottom:none;border-top:var(--_divider-thickness) solid var(--_divider-color)}:host([inverted][vertical]) .container{border-right:none;border-left:var(--_divider-thickness) solid var(--_divider-color)}:host([clustered]){--forge-tab-bar-justify:flex-start;--forge-tab-bar-stretch:0}:host([clustered=start]){--forge-tab-bar-justify:flex-start}:host([clustered=center]){--forge-tab-bar-justify:center}:host([clustered=end]){--forge-tab-bar-justify:flex-end}:host([hidden]){display:none}';
 /**
- * The custom element class behind the `<forge-tab-bar>` element.
- *
  * @tag forge-tab-bar
+ *
+ * @summary Tabs organize content across different screens and views.
+ *
+ * @description
+ * Use tabs to group content into helpful categories. Tabs are typically placed
+ * above the content they relate to. Tabs can be used to navigate between screens,
+ * or to group related content within a screen.
+ *
+ * @property {boolean} disabled - The disabled state of the tab bar.
+ * @property {number} activeTab - The index of the active tab.
+ * @property {boolean} vertical - Controls whether the tab bar is vertical or horizontal.
+ * @property {boolean} clustered - Controls whether the tabs stretch the full width of their container or cluster together at their minimum width.
+ * @property {boolean} stacked - Controls whether the tabs are taller to allow for slotted leading/trailing elements.
+ * @property {boolean} secondary - Controls whether the tabs are styled as secondary tab navigation.
+ * @property {boolean} inverted - Controls whether the tabs are rendered inverted (tab indicator at top instead of bottom).
+ * @property {boolean} autoActivate - Controls whether the tabs are automatically activated when receiving focus.
+ * @property {boolean} scrollButtons - Controls whether scroll buttons are displayed when the tabs overflow their container.
+ *
+ * @attribute disabled - The disabled state of the tab bar.
+ * @attribute active-tab - The index of the active tab.
+ * @attribute vertical - Controls whether the tab bar is vertical or horizontal.
+ * @attribute clustered - Controls whether the tabs stretch the full width of their container or cluster together at their minimum width.
+ * @attribute stacked - Controls whether the tabs are taller to allow for slotted leading/trailing elements.
+ * @attribute secondary - Controls whether the tabs are styled as secondary tab navigation.
+ * @attribute auto-activate - Controls whether the tabs are automatically activated when receiving focus.
+ * @attribute scroll-buttons - Controls whether scroll buttons are displayed when the tabs overflow their container.
+ *
+ * @event forge-tab-bar-change {CustomEvent<number>} - Dispatches when the active tab changes.
+ *
+ * @cssproperty --forge-tab-bar-justify - The `justify-content` value for the tab bar flex container.
+ * @cssproperty --forge-tab-bar-stretch - The `flex` value for the child `<forge-tab>` elements.
+ * @cssproperty --forge-tab-bar-underline-color - The color of the underline.
+ * @cssproperty --forge-tab-bar-underline-thickness - The thickness of the underline.
+ *
+ * @csspart container - The container element.
+ * @csspart scroll-container - The scroll container element.
  */
 let TabBarComponent = class TabBarComponent extends BaseComponent {
-    constructor() {
-        super();
-        IconRegistry.define([tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight]);
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new TabBarFoundation(new TabBarAdapter(this));
-    }
     static get observedAttributes() {
         return [
+            TAB_BAR_CONSTANTS.attributes.DISABLED,
             TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB,
-            TAB_BAR_CONSTANTS.attributes.LAYOUT_MODE,
-            TAB_BAR_CONSTANTS.attributes.LAYOUT_ALIGN,
-            TAB_BAR_CONSTANTS.attributes.UNDERLINE,
-            TAB_BAR_CONSTANTS.attributes.AUTO_ACTIVATE,
+            TAB_BAR_CONSTANTS.attributes.VERTICAL,
+            TAB_BAR_CONSTANTS.attributes.CLUSTERED,
             TAB_BAR_CONSTANTS.attributes.STACKED,
-            TAB_BAR_CONSTANTS.attributes.SCROLL_BUTTONS,
-            TAB_BAR_CONSTANTS.attributes.FORCE_SCROLL_BUTTONS
+            TAB_BAR_CONSTANTS.attributes.SECONDARY,
+            TAB_BAR_CONSTANTS.attributes.INVERTED,
+            TAB_BAR_CONSTANTS.attributes.AUTO_ACTIVATE,
+            TAB_BAR_CONSTANTS.attributes.SCROLL_BUTTONS
         ];
     }
+    constructor() {
+        super();
+        IconRegistry.define([
+            tylIconKeyboardArrowLeft,
+            tylIconKeyboardArrowRight,
+            tylIconKeyboardArrowUp,
+            tylIconKeyboardArrowDown
+        ]);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new TabBarFoundation(new TabBarAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }
     disconnectedCallback() {
-        this._foundation.disconnect();
+        this._foundation.destroy();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
+            case TAB_BAR_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
             case TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB:
-                this.activeTab = coerceNumber(newValue);
+                this.activeTab = newValue ? coerceNumber(newValue) : undefined;
+                break;
+            case TAB_BAR_CONSTANTS.attributes.VERTICAL:
+                this.vertical = coerceBoolean(newValue);
                 break;
-            case TAB_BAR_CONSTANTS.attributes.LAYOUT_MODE:
-                this.layoutMode = newValue;
+            case TAB_BAR_CONSTANTS.attributes.CLUSTERED:
+                this.clustered = coerceBoolean(newValue);
                 break;
-            case TAB_BAR_CONSTANTS.attributes.LAYOUT_ALIGN:
-                this.layoutAlign = newValue;
+            case TAB_BAR_CONSTANTS.attributes.STACKED:
+                this.stacked = coerceBoolean(newValue);
+                break;
+            case TAB_BAR_CONSTANTS.attributes.SECONDARY:
+                this.secondary = coerceBoolean(newValue);
                 break;
-            case TAB_BAR_CONSTANTS.attributes.UNDERLINE:
-                this.underline = coerceBoolean(newValue);
+            case TAB_BAR_CONSTANTS.attributes.INVERTED:
+                this.inverted = coerceBoolean(newValue);
                 break;
             case TAB_BAR_CONSTANTS.attributes.AUTO_ACTIVATE:
                 this.autoActivate = coerceBoolean(newValue);
                 break;
-            case TAB_BAR_CONSTANTS.attributes.STACKED:
-                this.stacked = coerceBoolean(newValue);
-                break;
             case TAB_BAR_CONSTANTS.attributes.SCROLL_BUTTONS:
                 this.scrollButtons = coerceBoolean(newValue);
                 break;
-            case TAB_BAR_CONSTANTS.attributes.FORCE_SCROLL_BUTTONS:
-                this.forceScrollButtons = coerceBoolean(newValue);
-                break;
         }
     }
-    /**
-     * Activates the tab at the given index.
-     * @param index The index of the tab.
-     */
-    activateTab(index) {
-        this._foundation.activateTab(index);
-    }
-    /**
-     * Scrolls the tab at the given index into view.
-     * @param index The index of the tab.
-     */
-    scrollTabIntoView(index) {
-        this._foundation.scrollIntoView(index);
-    }
 };
+__decorate([
+    FoundationProperty()
+], TabBarComponent.prototype, "disabled", void 0);
 __decorate([
     FoundationProperty()
 ], TabBarComponent.prototype, "activeTab", void 0);
 __decorate([
     FoundationProperty()
-], TabBarComponent.prototype, "layoutMode", void 0);
+], TabBarComponent.prototype, "vertical", void 0);
 __decorate([
     FoundationProperty()
-], TabBarComponent.prototype, "layoutAlign", void 0);
+], TabBarComponent.prototype, "clustered", void 0);
 __decorate([
     FoundationProperty()
-], TabBarComponent.prototype, "underline", void 0);
+], TabBarComponent.prototype, "stacked", void 0);
 __decorate([
     FoundationProperty()
-], TabBarComponent.prototype, "autoActivate", void 0);
+], TabBarComponent.prototype, "secondary", void 0);
 __decorate([
     FoundationProperty()
-], TabBarComponent.prototype, "stacked", void 0);
+], TabBarComponent.prototype, "inverted", void 0);
 __decorate([
     FoundationProperty()
-], TabBarComponent.prototype, "scrollButtons", void 0);
+], TabBarComponent.prototype, "autoActivate", void 0);
 __decorate([
     FoundationProperty()
-], TabBarComponent.prototype, "forceScrollButtons", void 0);
+], TabBarComponent.prototype, "scrollButtons", void 0);
 TabBarComponent = __decorate([
     CustomElement({
         name: TAB_BAR_CONSTANTS.elementName,

package/esm/text-field/text-field-component-delegate.d.ts

@@ -6,7 +6,7 @@
 import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
 import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core/delegates/form-field-component-delegate';
 import { ITextFieldComponent } from './text-field';
-export declare type TextFieldComponentDelegateProps = Partial<ITextFieldComponent>;
+export type TextFieldComponentDelegateProps = Partial<ITextFieldComponent>;
 export interface ITextFieldComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
     id?: string;
     label?: string;

package/esm/theme/theme-utils.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export declare type ThemeType = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
-export declare type ColorType = 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' | 'brown' | 'grey' | 'blue-grey';
+export type ThemeType = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+export type ColorType = 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' | 'brown' | 'grey' | 'blue-grey';
 export declare function getThemeColor(type: ThemeType): string;
 export declare function getColor(type: ColorType, hue?: string): string;

package/esm/time-picker/time-picker-component-delegate.d.ts

@@ -7,7 +7,7 @@ import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-d
 import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core/delegates/form-field-component-delegate';
 import { ITextFieldComponent, ITextFieldComponentDelegateConfig } from '../text-field';
 import { ITimePickerComponent } from './time-picker';
-export declare type TimePickerComponentDelegateProps = Partial<ITimePickerComponent>;
+export type TimePickerComponentDelegateProps = Partial<ITimePickerComponent>;
 export interface ITimePickerComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
     textFieldDelegateConfig?: ITextFieldComponentDelegateConfig;
 }

package/esm/time-picker/time-picker-constants.d.ts

@@ -43,12 +43,12 @@ export declare const TIME_PICKER_CONSTANTS: {
         MAX_DAY_MINUTES: number;
     };
 };
-export declare type TimePickerValidationCallback = (time: string) => boolean;
-export declare type TimePickerParseCallback = (time: string) => number | null;
-export declare type TimePickerFormatCallback = (value: number | null) => string;
-export declare type TimePickerCustomOptionCallback<T> = (value: T, use24HourTime: boolean, allowSeconds: boolean) => number;
-export declare type TimePickerCoercionCallback = (rawValue: string, coercedValue: string, allowSeconds: boolean) => string;
-export declare type TimePickerPrepareMaskCallback = (value: string, masked: Masked<string>, flags: IMask.AppendFlags, maskInstance: InputMask<IMask.AnyMaskedOptions>) => string;
+export type TimePickerValidationCallback = (time: string) => boolean;
+export type TimePickerParseCallback = (time: string) => number | null;
+export type TimePickerFormatCallback = (value: number | null) => string;
+export type TimePickerCustomOptionCallback<T> = (value: T, use24HourTime: boolean, allowSeconds: boolean) => number;
+export type TimePickerCoercionCallback = (rawValue: string, coercedValue: string, allowSeconds: boolean) => string;
+export type TimePickerPrepareMaskCallback = (value: string, masked: Masked<string>, flags: IMask.AppendFlags, maskInstance: InputMask<IMask.AnyMaskedOptions>) => string;
 export interface ITimePickerOption<T = any> extends IListDropdownOption<T> {
     toMilliseconds: TimePickerCustomOptionCallback<T>;
 }

package/esm/time-picker/time-picker.js

@@ -24,12 +24,6 @@ const styles = ':host{display:block}:host([hidden]){display:none}';
  * @tag forge-time-picker
  */
 let TimePickerComponent = class TimePickerComponent extends BaseComponent {
-    constructor() {
-        super();
-        IconRegistry.define([tylIconClockOutline, tylIconClose]);
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new TimePickerFoundation(new TimePickerAdapter(this));
-    }
     static get observedAttributes() {
         return [
             TIME_PICKER_CONSTANTS.attributes.VALUE,
@@ -51,6 +45,12 @@ let TimePickerComponent = class TimePickerComponent extends BaseComponent {
             TIME_PICKER_CONSTANTS.attributes.ALLOW_DROPDOWN
         ];
     }
+    constructor() {
+        super();
+        IconRegistry.define([tylIconClockOutline, tylIconClose]);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new TimePickerFoundation(new TimePickerAdapter(this));
+    }
     connectedCallback() {
         if (this.querySelector(TIME_PICKER_CONSTANTS.selectors.INPUT)) {
             this._foundation.initialize();

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

@@ -54,5 +54,5 @@ export declare const TOAST_CONSTANTS: {
         BOTTOM_RIGHT_MARGIN_BOTTOM: string;
     };
 };
-export declare type ToastBuilder = () => HTMLElement | string;
-export declare type ToastPlacement = PopupPlacement;
+export type ToastBuilder = () => HTMLElement | string;
+export type ToastPlacement = PopupPlacement;

package/esm/toast/toast.js

@@ -21,12 +21,6 @@ const styles = '.mdc-elevation-overlay{position:absolute;border-radius:inherit;p
  * @tag forge-toast
  */
 let ToastComponent = class ToastComponent extends BaseComponent {
-    constructor() {
-        super();
-        IconRegistry.define(tylIconClose);
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new ToastFoundation(new ToastAdapter(this));
-    }
     static get observedAttributes() {
         return [
             TOAST_CONSTANTS.attributes.MESSAGE,
@@ -36,6 +30,12 @@ let ToastComponent = class ToastComponent extends BaseComponent {
             TOAST_CONSTANTS.attributes.SHOW_CLOSE
         ];
     }
+    constructor() {
+        super();
+        IconRegistry.define(tylIconClose);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ToastFoundation(new ToastAdapter(this));
+    }
     initializedCallback() {
         this._foundation.initialize();
     }

package/esm/toolbar/toolbar.js

@@ -15,17 +15,17 @@ const styles = '.forge-toolbar{background-color:#fff;background-color:var(--mdc-
  * @tag forge-toolbar
  */
 let ToolbarComponent = class ToolbarComponent extends BaseComponent {
+    static get observedAttributes() {
+        return [
+            TOOLBAR_CONSTANTS.attributes.INVERTED
+        ];
+    }
     constructor() {
         super();
         this._inverted = false;
         attachShadowTemplate(this, template, styles);
         this._rootElement = getShadowElement(this, TOOLBAR_CONSTANTS.selectors.TOOLBAR);
     }
-    static get observedAttributes() {
-        return [
-            TOOLBAR_CONSTANTS.attributes.INVERTED
-        ];
-    }
     connectedCallback() {
         this._initialize();
     }

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

@@ -32,4 +32,4 @@ export declare const TOOLTIP_CONSTANTS: {
         DEFAULT_POSITION: string;
     };
 };
-export declare type TooltipBuilder = () => HTMLElement;
+export type TooltipBuilder = () => HTMLElement;

package/esm/tooltip/tooltip.js

@@ -15,10 +15,6 @@ import { BaseComponent } from '../core/base/base-component';
  * @tag forge-tooltip
  */
 let TooltipComponent = class TooltipComponent extends BaseComponent {
-    constructor() {
-        super();
-        this._foundation = new TooltipFoundation(new TooltipAdapter(this));
-    }
     static get observedAttributes() {
         return [
             TOOLTIP_CONSTANTS.attributes.TEXT,
@@ -27,6 +23,10 @@ let TooltipComponent = class TooltipComponent extends BaseComponent {
             TOOLTIP_CONSTANTS.attributes.POSITION
         ];
     }
+    constructor() {
+        super();
+        this._foundation = new TooltipFoundation(new TooltipAdapter(this));
+    }
     connectedCallback() {
         hideElementVisually(this);
         requestAnimationFrame(() => this._foundation.initialize());

package/esm/utils/color-utils.js

@@ -23,6 +23,7 @@ export function getTextColor(text) {
     if (!text || typeof text !== 'string') {
         text = '';
     }
+    text = text.toUpperCase();
     let color;
     if (text.charCodeAt(0) < 65) {
         color = randomHexColor();

package/esm/view-switcher/view-switcher.js

@@ -18,17 +18,17 @@ const styles = '.forge-view-switcher{height:auto;height:var(--forge-view-switche
  * @tag forge-view-switcher
  */
 let ViewSwitcherComponent = class ViewSwitcherComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new ViewSwitcherFoundation(new ViewSwitcherAdapter(this));
-    }
     static get observedAttributes() {
         return [
             VIEW_SWITCHER_CONSTANTS.attributes.INDEX,
             VIEW_SWITCHER_CONSTANTS.attributes.ANIMATION_TYPE
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ViewSwitcherFoundation(new ViewSwitcherAdapter(this));
+    }
     connectedCallback() {
         // upgradeProperty(this, 'index');
         this._foundation.initialize();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.0.0-next.5",
+  "version": "3.0.0-next.7",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {