@tylertech/forge 3.9.0-dev.0 → 3.9.0-dev.2

package/esm/icon-button/icon-button-core.js

@@ -29,9 +29,18 @@ export class IconButtonCore extends BaseButtonCore {
         // Update internal state first so listeners can access the new state
         const originalPressed = this._pressed;
         this._pressed = !this._pressed;
-        const cancelled = !this._adapter.emitHostEvent(ICON_BUTTON_CONSTANTS.events.TOGGLE, this.pressed, true, true);
+        const event = new CustomEvent(ICON_BUTTON_CONSTANTS.events.TOGGLE, {
+            detail: {
+                pressed: this._pressed,
+                toggle: this._toggle
+            },
+            bubbles: true,
+            cancelable: true,
+            composed: true
+        });
+        this._adapter.dispatchHostEvent(event);
         this._pressed = originalPressed;
-        if (cancelled) {
+        if (event.defaultPrevented) {
             return;
         }
         this.pressed = !originalPressed;

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/list-dropdown/list-dropdown-utils.js

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { addClass, getEventPath, isDeepEqual, isDefined, isObject } from '@tylertech/forge-core';
-import { tylIconCheckBox, tylIconCheckBoxOutlineBlank } from '@tylertech/tyler-icons/standard';
+import { tylIconCheckBox, tylIconCheckBoxOutlineBlank } from '@tylertech/tyler-icons';
 import { ICON_CLASS_NAME } from '../constants';
 import { LINEAR_PROGRESS_CONSTANTS } from '../linear-progress';
 import { LIST_CONSTANTS } from '../list/list';

package/esm/list-dropdown/list-dropdown.js

@@ -3,7 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { tylIconCheckBox, tylIconCheckBoxOutlineBlank } from '@tylertech/tyler-icons/standard';
+import { tylIconCheckBox, tylIconCheckBoxOutlineBlank } from '@tylertech/tyler-icons';
 import { ListDropdownCore } from './list-dropdown-core';
 import { ListDropdownAdapter } from './list-dropdown-adapter';
 import { IconRegistry } from '../icon';

package/esm/menu/menu.js

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, customElement, ensureChild, coreProperty, isDefined } from '@tylertech/forge-core';
-import { tylIconArrowRight } from '@tylertech/tyler-icons/standard';
+import { tylIconArrowRight } from '@tylertech/tyler-icons';
 import { IconRegistry } from '../icon';
 import { ListComponent } from '../list';
 import { ListDropdownAware } from '../list-dropdown/list-dropdown-aware';

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/open-icon/open-icon.js

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { customElement, attachShadowTemplate, coerceBoolean } from '@tylertech/forge-core';
-import { tylIconKeyboardArrowRight, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
+import { tylIconKeyboardArrowRight, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons';
 import { OPEN_ICON_CONSTANTS } from './open-icon-constants';
 import { IconRegistry, IconComponent } from '../icon';
 import { BaseComponent } from '../core/base/base-component';

package/esm/paginator/paginator.js

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { customElement, attachShadowTemplate, coreProperty, coerceBoolean, coerceNumberArray, coerceNumber } from '@tylertech/forge-core';
-import { tylIconFirstPage, tylIconLastPage, tylIconKeyboardArrowRight, tylIconKeyboardArrowLeft } from '@tylertech/tyler-icons/standard';
+import { tylIconFirstPage, tylIconLastPage, tylIconKeyboardArrowRight, tylIconKeyboardArrowLeft } from '@tylertech/tyler-icons';
 import { PAGINATOR_CONSTANTS } from './paginator-constants';
 import { PaginatorCore } from './paginator-core';
 import { PaginatorAdapter } from './paginator-adapter';

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

@@ -15,6 +15,7 @@ export declare const POPOVER_CONSTANTS: {
         HOVER_DELAY: string;
         HOVER_DISMISS_DELAY: string;
         PRESET: string;
+        DISTINCT: string;
     };
     attributes: {
         OPEN: string;
@@ -28,6 +29,7 @@ export declare const POPOVER_CONSTANTS: {
         HOVER_DELAY: string;
         HOVER_DISMISS_DELAY: string;
         PRESET: string;
+        DISTINCT: string;
     };
     classes: {
         ARROW: string;
@@ -48,6 +50,7 @@ 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

@@ -13,7 +13,8 @@ const observedAttributes = {
     PERSISTENT_HOVER: 'persistent-hover',
     HOVER_DELAY: 'hover-delay',
     HOVER_DISMISS_DELAY: 'hover-dismiss-delay',
-    PRESET: 'preset'
+    PRESET: 'preset',
+    DISTINCT: 'distinct'
 };
 const attributes = {
     ...observedAttributes,
@@ -39,7 +40,8 @@ const events = {
 const defaults = {
     TRIGGER_TYPE: 'click',
     HOVER_DELAY: 0,
-    PRESET: 'popover'
+    PRESET: 'popover',
+    DISTINCT: '<default>'
 };
 export const POPOVER_CONSTANTS = {
     elementName,

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

@@ -18,6 +18,7 @@ export interface IPopoverCore extends IOverlayAwareCore {
     hoverDismissDelay: number;
     hoverDelay: number;
     preset: PopoverPreset;
+    distinct: string | null;
     hideAsync(): Promise<void>;
     dispatchBeforeToggleEvent(state: IDismissibleStackState): boolean;
 }
@@ -31,6 +32,7 @@ export declare class PopoverCore extends PopoverCore_base implements IPopoverCor
     private _hoverDismissDelay;
     private _hoverDelay;
     private _preset;
+    private _distinct;
     private _previouslyFocusedElement;
     private _hoverAnchorLeaveTimeout;
     private _popoverMouseleaveTimeout;
@@ -146,5 +148,7 @@ export declare class PopoverCore extends PopoverCore_base implements IPopoverCor
     set hoverDismissDelay(value: number);
     get preset(): PopoverPreset;
     set preset(value: PopoverPreset);
+    get distinct(): string | null;
+    set distinct(value: string | null);
 }
 export {};

package/esm/popover/popover-core.js

@@ -19,6 +19,7 @@ export class PopoverCore extends WithLongpressListener((OverlayAwareCore)) {
         this._hoverDismissDelay = POPOVER_HOVER_TIMEOUT;
         this._hoverDelay = POPOVER_CONSTANTS.defaults.HOVER_DELAY;
         this._preset = POPOVER_CONSTANTS.defaults.PRESET;
+        this._distinct = null;
         this._previouslyFocusedElement = null;
         // Click trigger listeners
         this._anchorClickListener = this._onAnchorClick.bind(this);
@@ -102,6 +103,11 @@ export class PopoverCore extends WithLongpressListener((OverlayAwareCore)) {
         }
         this._previouslyFocusedElement = this._adapter.captureFocusedElement();
         this._adapter.setOverlayOpen(true);
+        if (this._distinct) {
+            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));
+        }
         if (!this.overlayElement.persistent) {
             DismissibleStack.instance.add(this._adapter.hostElement);
         }
@@ -518,4 +524,18 @@ export class PopoverCore extends WithLongpressListener((OverlayAwareCore)) {
             this._adapter.toggleHostAttribute(POPOVER_CONSTANTS.attributes.PRESET, hasPreset, this._preset);
         }
     }
+    get distinct() {
+        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;
+            }
+        }
+    }
 }

package/esm/popover/popover.d.ts

@@ -16,6 +16,7 @@ export interface IPopoverProperties extends IOverlayAware, IDismissible {
     hoverDelay: number;
     hoverDismissDelay: number;
     preset: PopoverPreset;
+    distinct: string | null;
 }
 export interface IPopoverComponent extends IPopoverProperties {
     hideAsync(): Promise<void>;
@@ -44,6 +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.
  *
  * @globalconfig placement
  * @globalconfig animationType
@@ -64,6 +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.
  *
  * @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.
@@ -125,6 +128,7 @@ export declare class PopoverComponent extends OverlayAware<IPopoverCore> impleme
     hoverDelay: number;
     hoverDismissDelay: number;
     preset: PopoverPreset;
+    distinct: string | null;
     /**
      * Hides the popover, and returns a `Promise` that resolves when the hide animation is complete.
      */

package/esm/popover/popover.js

@@ -29,6 +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.
  *
  * @globalconfig placement
  * @globalconfig animationType
@@ -49,6 +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.
  *
  * @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.
@@ -139,6 +141,9 @@ let PopoverComponent = class PopoverComponent extends OverlayAware {
             case POPOVER_CONSTANTS.observedAttributes.PRESET:
                 this.preset = newValue;
                 return;
+            case POPOVER_CONSTANTS.observedAttributes.DISTINCT:
+                this.distinct = !newValue ? null : newValue.trim();
+                return;
         }
         super.attributeChangedCallback(name, oldValue, newValue);
     }
@@ -173,6 +178,9 @@ __decorate([
 __decorate([
     coreProperty()
 ], PopoverComponent.prototype, "preset", void 0);
+__decorate([
+    coreProperty()
+], PopoverComponent.prototype, "distinct", void 0);
 PopoverComponent = __decorate([
     customElement({
         name: POPOVER_CONSTANTS.elementName,

package/esm/select/select/select.js

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, coreProperty, customElement } from '@tylertech/forge-core';
-import { tylIconCheckBox, tylIconCheckBoxOutlineBlank } from '@tylertech/tyler-icons/standard';
+import { tylIconCheckBox, tylIconCheckBoxOutlineBlank } from '@tylertech/tyler-icons';
 import { CircularProgressComponent } from '../../circular-progress';
 import { getFormValue, getValidationMessage, inputType, internals, setDefaultAria, setValidity } from '../../constants';
 import { WithFocusable } from '../../core/mixins/focus/with-focusable';

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

@@ -5,17 +5,16 @@
  */
 import { __decorate } from "tslib";
 import { customElement, attachShadowTemplate, coreProperty, coerceBoolean, coerceNumber } from '@tylertech/forge-core';
-import { tylIconDragVerticalVariant } from '@tylertech/tyler-icons/extended';
-import { tylIconDragHandle } from '@tylertech/tyler-icons/standard';
+import { tylIconDragHandle, tylIconDragVerticalVariant } from '@tylertech/tyler-icons';
 import { BaseComponent } from '../../core/base/base-component';
 import { SPLIT_VIEW_PANEL_CONSTANTS } from './split-view-panel-constants';
 import { SplitViewPanelCore } from './split-view-panel-core';
 import { SplitViewPanelAdapter } from './split-view-panel-adapter';
 import { IconComponent, IconRegistry } from '../../icon';
-const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-state-layer target=\"handle\" id=\"state-layer\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator inward target=\"handle\" part=\"focus-indicator\"></forge-focus-indicator></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
-const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:uaukume;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uaukume{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:uaukumo;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uaukumo{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:uaukung;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 uaukung{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:uaukunu;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 uaukunu{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:uaukuod;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uaukuod{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:uaukup9;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uaukup9{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:uaukupi;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 uaukupi{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:uaukupq;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 uaukupq{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
 import { StateLayerComponent } from '../../state-layer';
 import { FocusIndicatorComponent } from '../../focus-indicator';
+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:u5hcny5;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u5hcny5{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:u5hcnya;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u5hcnya{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:u5hcnyv;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 u5hcnyv{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:u5hcnzl;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 u5hcnzl{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:u5hcnzx;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u5hcnzx{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:u5hco06;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u5hco06{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:u5hco0q;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 u5hco0q{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:u5hco1q;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 u5hco1q{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/stepper/step/step.js

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, coerceNumber, customElement, coreProperty } from '@tylertech/forge-core';
-import { tylIconModeEdit, tylIconWarning, tylIconCheck, tylIconBlock, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
+import { tylIconModeEdit, tylIconWarning, tylIconCheck, tylIconBlock, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons';
 import { StepAdapter } from './step-adapter';
 import { STEP_CONSTANTS } from './step-constants';
 import { StepCore } from './step-core';

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) {
@@ -573,6 +575,7 @@ export class TableCore {
      * Handles a row being selected/deselected.
      */
     _onRowSelected(evt) {
+        // TODO: We need to ignore this if the checkbox is disabled (which could happen in user code)
         // We handle row selection manually with either a pointerdown or keydown event (space key), so we listen
         // for the change event as well to prevent checking the checkbox being checked by the time the event reaches us
         if (evt.type === 'change') {

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

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { coerceBoolean, coerceNumber, customElement, coreProperty } from '@tylertech/forge-core';
-import { tylIconArrowDownward } from '@tylertech/tyler-icons/standard';
+import { tylIconArrowDownward } from '@tylertech/tyler-icons';
 import { ExpansionPanelComponent } from '../expansion-panel';
 import { CheckboxComponent } from '../checkbox';
 import { TableAdapter } from './table-adapter';
@@ -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/tabs/tab-bar/tab-bar-adapter.js

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { getShadowElement, toggleAttribute } from '@tylertech/forge-core';
-import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight, tylIconKeyboardArrowUp, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
+import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight, tylIconKeyboardArrowUp, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons';
 import { BaseAdapter } from '../../core/base/base-adapter';
 import { TAB_CONSTANTS } from '../tab/tab-constants';
 import { TAB_BAR_CONSTANTS } from './tab-bar-constants';

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

@@ -12,7 +12,7 @@ import { TabComponent } from '../tab/tab';
 import { TabBarAdapter } from './tab-bar-adapter';
 import { TAB_BAR_CONSTANTS } from './tab-bar-constants';
 import { TabBarCore } from './tab-bar-core';
-import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight, tylIconKeyboardArrowUp, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
+import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight, tylIconKeyboardArrowUp, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons';
 import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
 import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
 import { setDefaultAria } from '../../constants';

package/esm/text-field/text-field.js

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, customElement, coreProperty } from '@tylertech/forge-core';
-import { tylIconClear } from '@tylertech/tyler-icons/standard';
+import { tylIconClear } from '@tylertech/tyler-icons';
 import { BASE_FIELD_CONSTANTS, FieldComponent } from '../field';
 import { BaseField } from '../field/base/base-field';
 import { IconRegistry } from '../icon';

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

@@ -5,8 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { customElement, attachShadowTemplate, coreProperty, coerceBoolean, coerceNumber, ensureChild } from '@tylertech/forge-core';
-import { tylIconClockOutline } from '@tylertech/tyler-icons/extended';
-import { tylIconClose } from '@tylertech/tyler-icons/standard';
+import { tylIconClockOutline, tylIconClose } from '@tylertech/tyler-icons';
 import { TimePickerAdapter } from './time-picker-adapter';
 import { TimePickerCore } from './time-picker-core';
 import { TIME_PICKER_CONSTANTS } from './time-picker-constants';

package/esm/toast/toast.js

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, customElement, coreProperty } from '@tylertech/forge-core';
-import { tylIconClose } from '@tylertech/tyler-icons/standard';
+import { tylIconClose } from '@tylertech/tyler-icons';
 import { ButtonComponent } from '../button';
 import { setDefaultAria } from '../constants';
 import { BaseComponent } from '../core/base/base-component';

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.0",
+  "version": "3.9.0-dev.2",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
     "@tylertech/forge-core": "^3.1.0",
-    "@tylertech/tyler-icons": "^1.12.0",
+    "@tylertech/tyler-icons": "^2.0.1",
     "imask": "^7.6.1",
     "lit": "^3.2.1",
     "tslib": "^2.8.1"

package/sass/calendar/_mixins.scss

@@ -195,9 +195,8 @@
 
 @mixin footer() {
   padding: var(--forge-calendar-controls-padding, 0);
-  display: grid;
-  grid-template-columns: 33% 33% 33%;
-  grid-auto-flow: row;
+  display: flex;
+  align-items: center;
   justify-content: space-between;
 }
 

package/sass/data-table/_core.scss

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/typography';
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+// Common mixins for data-table components
+@mixin host() {
+  display: block;
+}
+
+// Base data-table styles
+@mixin base-table() {
+  display: table;
+  width: 100%;
+  border-collapse: collapse;
+}
+
+// Base column styles
+@mixin base-column() {
+  display: table-column;
+}
+
+// Base cell styles
+@mixin base-cell() {
+  display: table-cell;
+  padding: 0.5rem;
+}
+
+// Base row styles
+@mixin base-row() {
+  display: table-row;
+}
+
+// Base header styles
+@mixin base-head() {
+  display: table-header-group;
+}
+
+// Base body styles
+@mixin base-body() {
+  display: table-row-group;
+}
+
+// Base footer styles
+@mixin base-footer() {
+  display: table-footer-group;
+}