@tylertech/forge 3.9.0-dev.1 → 3.9.0-dev.3

package/esm/avatar/index.js

@@ -3,10 +3,10 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { tryDefine } from '@tylertech/forge-core';
-import { AVATAR_TAG_NAME, AvatarComponent } from './avatar';
+import { defineCustomElement } from '@tylertech/forge-core';
+import { AvatarComponent } from './avatar';
 export * from './avatar';
 export * from './avatar-constants';
 export function defineAvatarComponent() {
-    tryDefine(AVATAR_TAG_NAME, AvatarComponent);
+    defineCustomElement(AvatarComponent);
 }

package/esm/badge/index.js

@@ -3,11 +3,11 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { tryDefine } from '@tylertech/forge-core';
-import { BADGE_TAG_NAME, BadgeComponent } from './badge';
+import { defineCustomElement } from '@tylertech/forge-core';
+import { BadgeComponent } from './badge';
 export * from './badge-component-delegate';
 export * from './badge-constants';
 export * from './badge';
 export function defineBadgeComponent() {
-    tryDefine(BADGE_TAG_NAME, BadgeComponent);
+    defineCustomElement(BadgeComponent);
 }

package/esm/card/index.d.ts

@@ -3,6 +3,6 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export * from './card-constants';
 export * from './card';
+export * from './card-constants';
 export declare function defineCardComponent(): void;

package/esm/card/index.js

@@ -3,10 +3,10 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { tryDefine } from '@tylertech/forge-core';
-import { CARD_TAG_NAME, CardComponent } from './card';
-export * from './card-constants';
+import { defineCustomElement } from '@tylertech/forge-core';
+import { CardComponent } from './card';
 export * from './card';
+export * from './card-constants';
 export function defineCardComponent() {
-    tryDefine(CARD_TAG_NAME, CardComponent);
+    defineCustomElement(CardComponent);
 }

package/esm/core/utils/dismissible-stack.js

@@ -50,8 +50,11 @@ export class DismissibleStack {
      * @param state The state to pass to the dismiss method of each element
      */
     async dismiss(el, state) {
-        const elements = Array.from(this._dismissibleElements);
-        const elementsAfter = elements.slice(elements.indexOf(el)).reverse();
+        const elements = DismissibleStack.instance.getAll();
+        const elementsAfter = elements
+            .slice(elements.indexOf(el))
+            .filter(element => element === el || element.contains(el))
+            .reverse();
         for (const element of elementsAfter) {
             if (!element[tryDismiss](state)) {
                 break;

package/esm/key/key/index.js

@@ -3,9 +3,9 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { tryDefine } from '@tylertech/forge-core';
-import { KEY_TAG_NAME, KeyComponent } from './key';
+import { defineCustomElement } from '@tylertech/forge-core';
+import { KeyComponent } from './key';
 export * from './key';
 export function defineKeyComponent() {
-    tryDefine(KEY_TAG_NAME, KeyComponent);
+    defineCustomElement(KeyComponent);
 }

package/esm/key/key-item/index.js

@@ -3,9 +3,9 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { tryDefine } from '@tylertech/forge-core';
-import { KEY_ITEM_TAG_NAME, KeyItemComponent } from './key-item';
+import { defineCustomElement } from '@tylertech/forge-core';
+import { KeyItemComponent } from './key-item';
 export * from './key-item';
 export function defineKeyItemComponent() {
-    tryDefine(KEY_ITEM_TAG_NAME, KeyItemComponent);
+    defineCustomElement(KeyItemComponent);
 }

package/esm/meter/meter/index.js

@@ -3,9 +3,9 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { tryDefine } from '@tylertech/forge-core';
+import { defineCustomElement } from '@tylertech/forge-core';
 import { MeterComponent } from './meter';
 export * from './meter';
 export function defineMeterComponent() {
-    tryDefine('forge-meter', MeterComponent);
+    defineCustomElement(MeterComponent);
 }

package/esm/meter/meter-group/index.js

@@ -3,9 +3,9 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { tryDefine } from '@tylertech/forge-core';
-import { METER_GROUP_TAG_NAME, MeterGroupComponent } from './meter-group';
+import { defineCustomElement } from '@tylertech/forge-core';
+import { MeterGroupComponent } from './meter-group';
 export * from './meter-group';
 export function defineMeterGroupComponent() {
-    tryDefine(METER_GROUP_TAG_NAME, MeterGroupComponent);
+    defineCustomElement(MeterGroupComponent);
 }

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

@@ -50,7 +50,6 @@ export declare const POPOVER_CONSTANTS: {
         TRIGGER_TYPE: PopoverTriggerType;
         HOVER_DELAY: number;
         PRESET: PopoverPreset;
-        DISTINCT: string;
     };
 };
 export declare const POPOVER_HOVER_TIMEOUT = 500;

package/esm/popover/popover-constants.js

@@ -40,8 +40,7 @@ const events = {
 const defaults = {
     TRIGGER_TYPE: 'click',
     HOVER_DELAY: 0,
-    PRESET: 'popover',
-    DISTINCT: '<default>'
+    PRESET: 'popover'
 };
 export const POPOVER_CONSTANTS = {
     elementName,

package/esm/popover/popover-core.js

@@ -103,10 +103,13 @@ export class PopoverCore extends WithLongpressListener((OverlayAwareCore)) {
         }
         this._previouslyFocusedElement = this._adapter.captureFocusedElement();
         this._adapter.setOverlayOpen(true);
-        if (this._distinct) {
+        // Popovers can be distinct from each other, meaning that only one popover with the same distinct
+        // value can be open at a time. Let's capture the distinct group context and close any other popovers
+        // that are open in the same context.
+        if (this._distinct != null) {
             const allPopovers = DismissibleStack.instance.getAll().filter(el => el.tagName.toLowerCase() === 'forge-popover');
-            const contextPopovers = allPopovers.filter(popover => popover.distinct === this._distinct);
-            contextPopovers.filter(popover => popover !== this._adapter.hostElement).forEach(popover => (popover.open = false));
+            const contextPopovers = allPopovers.filter(popover => popover.distinct === this._distinct && !popover.persistent);
+            contextPopovers.filter(popover => popover !== this._adapter.hostElement).forEach(popover => popover.hideAsync());
         }
         if (!this.overlayElement.persistent) {
             DismissibleStack.instance.add(this._adapter.hostElement);
@@ -528,14 +531,6 @@ export class PopoverCore extends WithLongpressListener((OverlayAwareCore)) {
         return this._distinct;
     }
     set distinct(value) {
-        value = value ?? null;
-        if (this._distinct !== value) {
-            if (this._adapter.hasHostAttribute(POPOVER_CONSTANTS.attributes.DISTINCT) && !value) {
-                this._distinct = POPOVER_CONSTANTS.defaults.DISTINCT;
-            }
-            else {
-                this._distinct = value;
-            }
-        }
+        this._distinct = value;
     }
 }

package/esm/popover/popover.d.ts

@@ -45,7 +45,7 @@ declare global {
  * @property {number} [hoverDismissDelay=500] - The delay in milliseconds before the popover is dismissed when the user hovers outside of the popover.
  * @property {number} [hoverDelay=0] - The delay in milliseconds before the popover is shown.
  * @property {PopoverPreset} [preset="popover"] - The preset to use for the popover.
- * @property {string | null} [distinct=null] - Enforces that this popover should be the only one open in the same context. Use a unique name otherwise a default context will be used.
+ * @property {string | null} [distinct=null] - Enforces that this popover should be the only one open with the same unique value.
  *
  * @globalconfig placement
  * @globalconfig animationType
@@ -66,7 +66,7 @@ declare global {
  * @attribute {string} [hover-dismiss-delay=500] - The delay in milliseconds before the popover is dismissed when the user hovers outside of the popover.
  * @attribute {number} [hover-delay=0] - The delay in milliseconds before the popover is shown.
  * @attribute {string} [preset="popover"] - The preset to use for the popover.
- * @attribute {string | null} [distinct=null] - Enforces that this popover should be the only one open in the same context. Use a unique name otherwise a default context will be used.
+ * @attribute {string | null} [distinct=null] - Enforces that this popover should be the only one open with the same unique value.
  *
  * @event {CustomEvent<IPopoverToggleEventData>} forge-popover-beforetoggle - Dispatches before the popover is toggled, and is cancelable.
  * @event {CustomEvent<IPopoverToggleEventData>} forge-popover-toggle - Dispatches after the popover is toggled.

package/esm/popover/popover.js

@@ -29,7 +29,7 @@ const styles = '@keyframes zoomin{from{transform:scale(.8)}to{transform:scale(1)
  * @property {number} [hoverDismissDelay=500] - The delay in milliseconds before the popover is dismissed when the user hovers outside of the popover.
  * @property {number} [hoverDelay=0] - The delay in milliseconds before the popover is shown.
  * @property {PopoverPreset} [preset="popover"] - The preset to use for the popover.
- * @property {string | null} [distinct=null] - Enforces that this popover should be the only one open in the same context. Use a unique name otherwise a default context will be used.
+ * @property {string | null} [distinct=null] - Enforces that this popover should be the only one open with the same unique value.
  *
  * @globalconfig placement
  * @globalconfig animationType
@@ -50,7 +50,7 @@ const styles = '@keyframes zoomin{from{transform:scale(.8)}to{transform:scale(1)
  * @attribute {string} [hover-dismiss-delay=500] - The delay in milliseconds before the popover is dismissed when the user hovers outside of the popover.
  * @attribute {number} [hover-delay=0] - The delay in milliseconds before the popover is shown.
  * @attribute {string} [preset="popover"] - The preset to use for the popover.
- * @attribute {string | null} [distinct=null] - Enforces that this popover should be the only one open in the same context. Use a unique name otherwise a default context will be used.
+ * @attribute {string | null} [distinct=null] - Enforces that this popover should be the only one open with the same unique value.
  *
  * @event {CustomEvent<IPopoverToggleEventData>} forge-popover-beforetoggle - Dispatches before the popover is toggled, and is cancelable.
  * @event {CustomEvent<IPopoverToggleEventData>} forge-popover-toggle - Dispatches after the popover is toggled.
@@ -142,7 +142,7 @@ let PopoverComponent = class PopoverComponent extends OverlayAware {
                 this.preset = newValue;
                 return;
             case POPOVER_CONSTANTS.observedAttributes.DISTINCT:
-                this.distinct = !newValue ? null : newValue.trim();
+                this.distinct = newValue;
                 return;
         }
         super.attributeChangedCallback(name, oldValue, newValue);

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

@@ -14,7 +14,7 @@ import { IconComponent, IconRegistry } from '../../icon';
 import { StateLayerComponent } from '../../state-layer';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 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:uwedhbm;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uwedhbm{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:uwedhbz;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uwedhbz{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:uwedhcs;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 uwedhcs{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:uwedhd4;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 uwedhd4{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:uwedhd8;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uwedhd8{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:uwedhds;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uwedhds{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:uwedheb;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 uwedheb{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:uwedher;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 uwedher{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:ud3jlhz;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ud3jlhz{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:ud3jli1;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ud3jli1{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:ud3jliz;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 ud3jliz{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:ud3jlj0;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 ud3jlj0{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:ud3jlje;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ud3jlje{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:ud3jljg;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ud3jljg{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:ud3jljo;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 ud3jljo{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:ud3jlk5;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 ud3jlk5{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}';
 /**
  * @tag forge-split-view-panel
  *

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

@@ -88,6 +88,7 @@ export declare const TABLE_CONSTANTS: {
         FILTER: string;
         INITIALIZED: string;
         COLUMN_RESIZE: string;
+        BODY_RENDERED: string;
     };
     strings: {
         SELECT_ALL: string;

package/esm/table/table-constants.js

@@ -89,7 +89,8 @@ const events = {
     SORT: `${elementName}-sort`,
     FILTER: `${elementName}-filter`,
     INITIALIZED: `${elementName}-initialized`,
-    COLUMN_RESIZE: `${elementName}-column-resize`
+    COLUMN_RESIZE: `${elementName}-column-resize`,
+    BODY_RENDERED: `${elementName}-body-rendered`
 };
 const strings = {
     SELECT_ALL: 'select-all',

package/esm/table/table-core.js

@@ -443,6 +443,7 @@ export class TableCore {
         this._adapter.createTable(this._tableConfiguration);
         this._renderSelections();
         this._rendered = true;
+        this._adapter.emitHostEvent(TABLE_CONSTANTS.events.BODY_RENDERED, undefined, false);
     }
     /**
      * Renders the table body only.
@@ -453,6 +454,7 @@ export class TableCore {
         }
         this._adapter.recreateTableBody(this._tableConfiguration);
         this._renderSelections();
+        this._adapter.emitHostEvent(TABLE_CONSTANTS.events.BODY_RENDERED, undefined, false);
     }
     _renderSelections() {
         if (this.select) {

package/esm/table/table.d.ts

@@ -59,6 +59,7 @@ declare global {
         'forge-table-filter': CustomEvent<ITableFilterEventData>;
         'forge-table-initialized': CustomEvent<void>;
         'forge-table-column-resize': CustomEvent<ITableColumnResizeEventData>;
+        'forge-table-body-rendered': CustomEvent<void>;
     }
 }
 /**
@@ -77,6 +78,7 @@ declare global {
  * @event {CustomEvent<ITableFilterEventData>} forge-table-filter - Dispatched when a column is filtered. Only applies when `filter` is specified.
  * @event {CustomEvent<void>} forge-table-initialized - Dispatched when the table is initialized in the DOM for the first time.
  * @event {CustomEvent<ITableColumnResizeEventData>} forge-table-column-resize - Dispatched when a column is resized.
+ * @event {CustomEvent<void>} forge-table-body-rendered - Dispatched when the table body is rendered.
  *
  * @cssclass forge-data-table - The base table class.
  */

package/esm/table/table.js

@@ -31,6 +31,7 @@ import { TooltipComponent } from '../tooltip';
  * @event {CustomEvent<ITableFilterEventData>} forge-table-filter - Dispatched when a column is filtered. Only applies when `filter` is specified.
  * @event {CustomEvent<void>} forge-table-initialized - Dispatched when the table is initialized in the DOM for the first time.
  * @event {CustomEvent<ITableColumnResizeEventData>} forge-table-column-resize - Dispatched when a column is resized.
+ * @event {CustomEvent<void>} forge-table-body-rendered - Dispatched when the table body is rendered.
  *
  * @cssclass forge-data-table - The base table class.
  */

package/esm/view-switcher/view-switcher.d.ts

@@ -22,6 +22,11 @@ declare global {
  * @tag forge-view-switcher
  *
  * @dependency forge-view
+ *
+ * @cssproperty --forge-view-switcher-height - The `height` of the view switcher.
+ * @cssproperty --forge-view-switcher-width - The `width` of the view switcher.
+ * @cssproperty --forge-view-switcher-animation-duration - The duration of view switching animations.
+ * @cssproperty --forge-view-switcher-animation-easing - The timing function of view switching animations.
  */
 export declare class ViewSwitcherComponent extends BaseComponent implements IViewSwitcherComponent {
     static get observedAttributes(): string[];

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

@@ -11,11 +11,16 @@ import { VIEW_SWITCHER_CONSTANTS } from './view-switcher-constants';
 import { ViewComponent } from './view/view';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-view-switcher\" part=\"root\"><slot></slot></div></template>';
-const styles = ':host{height:var(--_view-switcher-height);width:var(--_view-switcher-width);display:block}:host([hidden]){display:none}.forge-view-switcher{--_view-switcher-height:var(--forge-view-switcher-height, auto);--_view-switcher-width:var(--forge-view-switcher-width, auto);--_view-switcher-animation-duration:var(--forge-view-switcher-animation-duration, var(--forge-animation-duration-medium2, 300ms));--_view-switcher-animation-easing:var(--forge-view-switcher-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-view-switcher{height:var(--_view-switcher-height);width:var(--_view-switcher-width);position:relative;overflow:hidden;transition-property:height;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing)}.forge-view-switcher ::slotted(.forge-view-switcher__view--hidden){position:absolute;top:0;right:0;bottom:0;left:0}:host(.slide) ::slotted(forge-view){transition-property:transform;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing);will-change:transform}:host(.fade) ::slotted(forge-view){transition-property:opacity;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing);will-change:opacity}:host(.fade) ::slotted(.forge-view-switcher__view--hidden){opacity:0}';
+const styles = ':host{height:var(--_view-switcher-height);width:var(--_view-switcher-width);display:block}:host{--_view-switcher-height:var(--forge-view-switcher-height, auto);--_view-switcher-width:var(--forge-view-switcher-width, auto)}:host([hidden]){display:none}.forge-view-switcher{--_view-switcher-animation-duration:var(--forge-view-switcher-animation-duration, var(--forge-animation-duration-medium2, 300ms));--_view-switcher-animation-easing:var(--forge-view-switcher-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-view-switcher{height:var(--_view-switcher-height);width:var(--_view-switcher-width);position:relative;overflow:hidden;transition-property:height;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing)}.forge-view-switcher ::slotted(.forge-view-switcher__view--hidden){position:absolute;top:0;right:0;bottom:0;left:0}:host(.slide) ::slotted(forge-view){transition-property:transform;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing);will-change:transform}:host(.fade) ::slotted(forge-view){transition-property:opacity;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing);will-change:opacity}:host(.fade) ::slotted(.forge-view-switcher__view--hidden){opacity:0}';
 /**
  * @tag forge-view-switcher
  *
  * @dependency forge-view
+ *
+ * @cssproperty --forge-view-switcher-height - The `height` of the view switcher.
+ * @cssproperty --forge-view-switcher-width - The `width` of the view switcher.
+ * @cssproperty --forge-view-switcher-animation-duration - The duration of view switching animations.
+ * @cssproperty --forge-view-switcher-animation-easing - The timing function of view switching animations.
  */
 let ViewSwitcherComponent = class ViewSwitcherComponent extends BaseComponent {
     static get observedAttributes() {

package/package.json

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

package/sass/view-switcher/view-switcher.scss

@@ -3,14 +3,20 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './core';
+@use './core' as *;
 
 //
 // Host
 //
 
+$host-tokens: (height, width);
+
+:host {
+  @include host;
+}
+
 :host {
-  @include core.host;
+  @include tokens($includes: $host-tokens);
 }
 
 :host([hidden]) {
@@ -22,14 +28,14 @@
 //
 
 .forge-view-switcher {
-  @include core.tokens;
+  @include tokens($excludes: $host-tokens);
 }
 
 .forge-view-switcher {
-  @include core.base;
+  @include base;
 
   ::slotted(.forge-view-switcher__view--hidden) {
-    @include core.view-hidden;
+    @include view-hidden;
   }
 }
 
@@ -39,7 +45,7 @@
 
 :host(.slide) {
   ::slotted(forge-view) {
-    @include core.view-slidable;
+    @include view-slidable;
   }
 }
 
@@ -49,7 +55,7 @@
 
 :host(.fade) {
   ::slotted(forge-view) {
-    @include core.view-fadeable;
+    @include view-fadeable;
   }
 
   ::slotted(.forge-view-switcher__view--hidden) {