@tylertech/forge 3.0.0-next.6 → 3.0.0-next.8

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,38 +4,78 @@
  * 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 {
     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]);
+        IconRegistry.define([
+            tylIconKeyboardArrowLeft,
+            tylIconKeyboardArrowRight,
+            tylIconKeyboardArrowUp,
+            tylIconKeyboardArrowDown
+        ]);
         attachShadowTemplate(this, template, styles);
         this._foundation = new TabBarFoundation(new TabBarAdapter(this));
     }
@@ -43,75 +83,67 @@ let TabBarComponent = class TabBarComponent extends BaseComponent {
         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.LAYOUT_MODE:
-                this.layoutMode = newValue;
+            case TAB_BAR_CONSTANTS.attributes.VERTICAL:
+                this.vertical = coerceBoolean(newValue);
                 break;
-            case TAB_BAR_CONSTANTS.attributes.LAYOUT_ALIGN:
-                this.layoutAlign = newValue;
+            case TAB_BAR_CONSTANTS.attributes.CLUSTERED:
+                this.clustered = coerceBoolean(newValue);
                 break;
-            case TAB_BAR_CONSTANTS.attributes.UNDERLINE:
-                this.underline = coerceBoolean(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.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/package.json

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

package/styles/card/_mixins.scss

@@ -16,8 +16,8 @@
   .forge-card {
     @include base;
   
-    &--outlined {
-      @include outlined;
+    &--raised {
+      @include raised;
     }
   }
 }
@@ -29,17 +29,18 @@
 @mixin base() {
   @include mdc-card-mixins.fill-color(surface);
   @include mdc-card-mixins.shape-radius(medium);
-  @include mdc-elevation-theme.elevation(1);
+  @include mdc-card-mixins.outline(mdc-card-variables.$outline-color);
   @include theme.css-custom-property(height, --forge-card-height, 100%);
   @include theme.css-custom-property(width, --forge-card-width, 100%);
   @include theme.css-custom-property(padding, --forge-card-padding, variables.$padding);
   @include theme.css-custom-property(overflow, --forge-card-overflow, hidden);
+  @include theme.property(border-color, border-color);
 
   box-sizing: border-box;
 }
 
-@mixin outlined() {
-  @include mdc-elevation-theme.elevation(0);
-  @include mdc-card-mixins.outline(mdc-card-variables.$outline-color);
-  @include theme.property(border-color, border-color);
+@mixin raised() {
+  @include mdc-elevation-theme.elevation(1);
+  
+  border: none;
 }