@tylertech/forge 3.13.1 → 3.14.0-dev.0

package/esm/drawer/mini-drawer/mini-drawer.js

@@ -1,14 +1,19 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { __decorate } from "tslib";
+
+import { __decorate } from 'tslib';
 import { attachShadowTemplate, customElement } from '@tylertech/forge-core';
-import { BaseDrawerAdapter, BaseDrawerComponent, BaseDrawerCore } from '../base';
-import { MINI_DRAWER_CONSTANTS } from './mini-drawer-constants';
-const template = '<template><div class=\"root\" part=\"root\"><div class=\"forge-drawer mini\" part=\"container\"><slot name=\"header\"></slot><div class=\"content\" part=\"content\"><slot></slot></div><slot name=\"footer\"></slot></div></div></template>';
-const styles = ':host{--_mini-drawer-width:var(--forge-mini-drawer-width, 56px);--_mini-drawer-min-width:var(--forge-mini-drawer-min-width, var(--_mini-drawer-width));--_mini-drawer-hover-width:var(--forge-mini-drawer-hover-width, var(--forge-drawer-width, 256px));--_mini-drawer-transition-duration:var(--forge-mini-drawer-transition-duration, var(--forge-animation-duration-short4, 200ms));--_mini-drawer-transition-easing:var(--forge-mini-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_mini-drawer-transition-delay:var(--forge-mini-drawer-transition-delay, 300ms);--_mini-drawer-hover-transition-duration:var(--forge-mini-drawer-hover-transition-duration, var(--forge-animation-duration-medium2, 300ms));--_mini-drawer-hover-transition-easing:var(--forge-mini-drawer-hover-transition-easing, var(--_mini-drawer-transition-easing));--_mini-drawer-hover-transition-delay:var(--forge-mini-drawer-hover-transition-delay, var(--forge-animation-duration-medium2, 300ms))}:host{display:grid;box-sizing:border-box;height:100%;overflow:hidden!important;width:var(--_mini-drawer-width);overflow:visible!important;--forge-divider-margin:4px 0}:host([direction=right]){min-width:var(--_mini-drawer-width);width:auto}:host([direction=right]) .root{position:relative}:host(:not([open])){display:none}:host([hover]) .right{position:absolute;right:0}:host([hover]) .forge-drawer:hover{width:var(--_mini-drawer-hover-width)!important;transition:width var(--_mini-drawer-hover-transition-duration) var(--_mini-drawer-hover-transition-easing) var(--_mini-drawer-hover-transition-delay)}:host([hover]) .forge-drawer:hover .content{overflow:auto}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none!important}.root{z-index:var(--forge-z-index-surface,1);height:100%;min-width:var(--_mini-drawer-min-width)}.forge-drawer.mini{width:var(--_mini-drawer-width);z-index:var(--forge-z-index-surface,1);transition:width var(--_mini-drawer-transition-duration) var(--_mini-drawer-transition-easing)}.forge-drawer.mini .content{overflow:hidden}.forge-drawer.closed{width:0}';
+import '../base/index.js';
+import { MINI_DRAWER_CONSTANTS } from './mini-drawer-constants.js';
+import template from './mini-drawer.html.js';
+import styles from './mini-drawer.scss.js';
+import { BaseDrawerComponent } from '../base/base-drawer.js';
+import { BaseDrawerCore } from '../base/base-drawer-core.js';
+import { BaseDrawerAdapter } from '../base/base-drawer-adapter.js';
+
 /**
  * @tag forge-mini-drawer
  *
@@ -61,4 +66,5 @@ MiniDrawerComponent = __decorate([
         name: MINI_DRAWER_CONSTANTS.elementName
     })
 ], MiniDrawerComponent);
+
 export { MiniDrawerComponent };

package/esm/drawer/mini-drawer/mini-drawer.scss.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+
+var styles = ":host{--_mini-drawer-width:var(--forge-mini-drawer-width, 56px);--_mini-drawer-min-width:var(--forge-mini-drawer-min-width, var(--_mini-drawer-width));--_mini-drawer-hover-width:var(--forge-mini-drawer-hover-width, var(--forge-drawer-width, 256px));--_mini-drawer-transition-duration:var(--forge-mini-drawer-transition-duration, var(--forge-animation-duration-short4, 200ms));--_mini-drawer-transition-easing:var(--forge-mini-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_mini-drawer-transition-delay:var(--forge-mini-drawer-transition-delay, 300ms);--_mini-drawer-hover-transition-duration:var(--forge-mini-drawer-hover-transition-duration, var(--forge-animation-duration-medium2, 300ms));--_mini-drawer-hover-transition-easing:var(--forge-mini-drawer-hover-transition-easing, var(--_mini-drawer-transition-easing));--_mini-drawer-hover-transition-delay:var(--forge-mini-drawer-hover-transition-delay, var(--forge-animation-duration-medium2, 300ms))}:host{display:grid;box-sizing:border-box;height:100%;overflow:hidden !important;width:var(--_mini-drawer-width);overflow:visible !important;--forge-divider-margin: 4px 0}:host([direction=right]){min-width:var(--_mini-drawer-width);width:auto}:host([direction=right]) .root{position:relative}:host(:not([open])){display:none}:host([hover]) .right{position:absolute;right:0}:host([hover]) .forge-drawer:hover{width:var(--_mini-drawer-hover-width) !important;transition:width var(--_mini-drawer-hover-transition-duration) var(--_mini-drawer-hover-transition-easing) var(--_mini-drawer-hover-transition-delay)}:host([hover]) .forge-drawer:hover .content{overflow:auto}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height, 16px);width:var(--forge-scrollbar-width, 16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover, var(--forge-theme-surface-container-low, #ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb))}.forge-drawer .content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height, 32px);width:var(--forge-scrollbar-thumb-min-width, 32px);border-radius:var(--forge-scrollbar-border-radius, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));border-width:var(--forge-scrollbar-border-width, 3px);border-style:solid;border-color:rgba(0,0,0,0);background-color:var(--forge-scrollbar-thumb-container, var(--forge-theme-surface-container-medium, #c2c2c2));background-clip:content-box}.forge-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover, var(--forge-theme-surface-container-high, #9e9e9e))}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface, 1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface, 1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none !important}.root{z-index:var(--forge-z-index-surface, 1);height:100%;min-width:var(--_mini-drawer-min-width)}.forge-drawer.mini{width:var(--_mini-drawer-width);z-index:var(--forge-z-index-surface, 1);transition:width var(--_mini-drawer-transition-duration) var(--_mini-drawer-transition-easing)}.forge-drawer.mini .content{overflow:hidden}.forge-drawer.closed{width:0}";
+
+export { styles as default };

package/esm/drawer/modal-drawer/index.d.ts

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-export * from './modal-drawer-adapter';
-export * from './modal-drawer-constants';
-export * from './modal-drawer-core';
-export * from './modal-drawer';
+export * from './modal-drawer-adapter.js';
+export * from './modal-drawer-constants.js';
+export * from './modal-drawer-core.js';
+export * from './modal-drawer.js';
 export declare function defineModalDrawerComponent(): void;

package/esm/drawer/modal-drawer/index.js

@@ -1,14 +1,17 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
+
 import { defineCustomElement } from '@tylertech/forge-core';
-import { ModalDrawerComponent } from './modal-drawer';
-export * from './modal-drawer-adapter';
-export * from './modal-drawer-constants';
-export * from './modal-drawer-core';
-export * from './modal-drawer';
-export function defineModalDrawerComponent() {
+import { ModalDrawerComponent } from './modal-drawer.js';
+export { ModalDrawerAdapter } from './modal-drawer-adapter.js';
+export { MODAL_DRAWER_CONSTANTS } from './modal-drawer-constants.js';
+export { ModalDrawerCore } from './modal-drawer-core.js';
+
+function defineModalDrawerComponent() {
     defineCustomElement(ModalDrawerComponent);
 }
+
+export { ModalDrawerComponent, defineModalDrawerComponent };

package/esm/drawer/modal-drawer/modal-drawer-adapter.d.ts

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseDrawerAdapter, IBaseDrawerAdapter } from '../base';
-import { IModalDrawerComponent } from './modal-drawer';
+import { BaseDrawerAdapter, IBaseDrawerAdapter } from '../base/index.js';
+import { IModalDrawerComponent } from './modal-drawer.js';
 export interface IModalDrawerAdapter extends IBaseDrawerAdapter {
     setBackdropCloseListener(listener: EventListener): void;
     setBackdropVisibility(visible: boolean, options?: {

package/esm/drawer/modal-drawer/modal-drawer-adapter.js

@@ -1,12 +1,16 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
+
 import { getShadowElement, toggleClass } from '@tylertech/forge-core';
-import { BACKDROP_CONSTANTS } from '../../backdrop';
-import { BaseDrawerAdapter } from '../base';
-export class ModalDrawerAdapter extends BaseDrawerAdapter {
+import '../../backdrop/index.js';
+import '../base/index.js';
+import { BaseDrawerAdapter } from '../base/base-drawer-adapter.js';
+import { BACKDROP_CONSTANTS } from '../../backdrop/backdrop-constants.js';
+
+class ModalDrawerAdapter extends BaseDrawerAdapter {
     constructor(_component) {
         super(_component);
         this._component = _component;
@@ -32,3 +36,5 @@ export class ModalDrawerAdapter extends BaseDrawerAdapter {
         toggleClass(this._backdropElement, hasClass, className);
     }
 }
+
+export { ModalDrawerAdapter };

package/esm/drawer/modal-drawer/modal-drawer-constants.d.ts

@@ -1,8 +1,3 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
 export declare const MODAL_DRAWER_CONSTANTS: {
     elementName: "forge-modal-drawer";
     classes: {

package/esm/drawer/modal-drawer/modal-drawer-constants.js

@@ -1,9 +1,11 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { COMPONENT_NAME_PREFIX } from '../../constants';
+
+import { COMPONENT_NAME_PREFIX } from '../../constants.js';
+
 const elementName = `${COMPONENT_NAME_PREFIX}modal-drawer`;
 const classes = {
     DISPLAY_NONE: 'display-none',
@@ -12,8 +14,10 @@ const classes = {
 const events = {
     CLOSE: `${elementName}-close`
 };
-export const MODAL_DRAWER_CONSTANTS = {
+const MODAL_DRAWER_CONSTANTS = {
     elementName,
     classes,
     events
 };
+
+export { MODAL_DRAWER_CONSTANTS };

package/esm/drawer/modal-drawer/modal-drawer-core.d.ts

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseDrawerCore, IBaseDrawerCore } from '../base';
-import { IModalDrawerAdapter } from './modal-drawer-adapter';
+import { BaseDrawerCore, IBaseDrawerCore } from '../base/index.js';
+import { IModalDrawerAdapter } from './modal-drawer-adapter.js';
 export interface IModalDrawerCore extends IBaseDrawerCore {
 }
 export declare class ModalDrawerCore extends BaseDrawerCore implements IModalDrawerCore {

package/esm/drawer/modal-drawer/modal-drawer-core.js

@@ -1,11 +1,14 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { BaseDrawerCore } from '../base';
-import { MODAL_DRAWER_CONSTANTS } from './modal-drawer-constants';
-export class ModalDrawerCore extends BaseDrawerCore {
+
+import '../base/index.js';
+import { MODAL_DRAWER_CONSTANTS } from './modal-drawer-constants.js';
+import { BaseDrawerCore } from '../base/base-drawer-core.js';
+
+class ModalDrawerCore extends BaseDrawerCore {
     constructor(_adapter) {
         super(_adapter);
         this._adapter = _adapter;
@@ -44,3 +47,5 @@ export class ModalDrawerCore extends BaseDrawerCore {
         }
     }
 }
+
+export { ModalDrawerCore };

package/esm/drawer/modal-drawer/modal-drawer.d.ts

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseDrawerComponent, IBaseDrawerComponent } from '../base';
-import { ModalDrawerCore } from './modal-drawer-core';
+import { BaseDrawerComponent, IBaseDrawerComponent } from '../base/index.js';
+import { ModalDrawerCore } from './modal-drawer-core.js';
 export interface IModalDrawerComponent extends IBaseDrawerComponent {
 }
 declare global {

package/esm/drawer/modal-drawer/modal-drawer.html.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+
+var template = "<template>\n  <forge-backdrop class=\"scrim\" hidden exportparts=\"root:backdrop\"></forge-backdrop>\n  <div class=\"forge-drawer modal\" part=\"root\">\n    <slot name=\"header\"></slot>\n    <div class=\"content\" part=\"content\">\n      <slot></slot>\n    </div>\n    <slot name=\"footer\"></slot>\n  </div>\n</template>\n";
+
+export { template as default };

package/esm/drawer/modal-drawer/modal-drawer.js

@@ -1,17 +1,21 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { __decorate } from "tslib";
+
+import { __decorate } from 'tslib';
 import { attachShadowTemplate, customElement } from '@tylertech/forge-core';
-import { BackdropComponent } from '../../backdrop';
-import { BaseDrawerComponent } from '../base';
-import { ModalDrawerAdapter } from './modal-drawer-adapter';
-import { MODAL_DRAWER_CONSTANTS } from './modal-drawer-constants';
-import { ModalDrawerCore } from './modal-drawer-core';
-const template = '<template><forge-backdrop class=\"scrim\" hidden exportparts=\"root:backdrop\"></forge-backdrop><div class=\"forge-drawer modal\" part=\"root\"><slot name=\"header\"></slot><div class=\"content\" part=\"content\"><slot></slot></div><slot name=\"footer\"></slot></div></template>';
-const styles = ':host{--forge-divider-margin:4px 0}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none!important}.forge-drawer.modal{position:absolute;top:0;z-index:var(--forge-z-index-dialog,8);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);max-width:80%}.forge-drawer.modal.closed,.forge-drawer.modal.closing{box-shadow:none}.forge-drawer.modal.closing.right{transform:translateX(100%)}.forge-drawer.right{right:0}.forge-drawer.display-none{display:none!important}.scrim{z-index:var(--forge-z-index-dialog,8)}.scrim.closed{display:none}';
+import '../../backdrop/index.js';
+import '../base/index.js';
+import { ModalDrawerAdapter } from './modal-drawer-adapter.js';
+import { MODAL_DRAWER_CONSTANTS } from './modal-drawer-constants.js';
+import { ModalDrawerCore } from './modal-drawer-core.js';
+import template from './modal-drawer.html.js';
+import styles from './modal-drawer.scss.js';
+import { BaseDrawerComponent } from '../base/base-drawer.js';
+import { BackdropComponent } from '../../backdrop/backdrop.js';
+
 /**
  * @tag forge-modal-drawer
  *
@@ -50,4 +54,5 @@ ModalDrawerComponent = __decorate([
         dependencies: [BackdropComponent]
     })
 ], ModalDrawerComponent);
+
 export { ModalDrawerComponent };

package/esm/drawer/modal-drawer/modal-drawer.scss.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+
+var styles = ":host{--forge-divider-margin: 4px 0}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height, 16px);width:var(--forge-scrollbar-width, 16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover, var(--forge-theme-surface-container-low, #ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb))}.forge-drawer .content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height, 32px);width:var(--forge-scrollbar-thumb-min-width, 32px);border-radius:var(--forge-scrollbar-border-radius, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));border-width:var(--forge-scrollbar-border-width, 3px);border-style:solid;border-color:rgba(0,0,0,0);background-color:var(--forge-scrollbar-thumb-container, var(--forge-theme-surface-container-medium, #c2c2c2));background-clip:content-box}.forge-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover, var(--forge-theme-surface-container-high, #9e9e9e))}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface, 1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface, 1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none !important}.forge-drawer.modal{position:absolute;top:0;z-index:var(--forge-z-index-dialog, 8);box-shadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);max-width:80%}.forge-drawer.modal.closing,.forge-drawer.modal.closed{box-shadow:none}.forge-drawer.modal.closing.right{transform:translateX(100%)}.forge-drawer.right{right:0}.forge-drawer.display-none{display:none !important}.scrim{z-index:var(--forge-z-index-dialog, 8)}.scrim.closed{display:none}";
+
+export { styles as default };

package/esm/expansion-panel/expansion-panel-constants.d.ts

@@ -1,8 +1,4 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
+/** @deprecated - These are internal constants that will be removed/moved in the future. Please avoid using them. */
 export declare const EXPANSION_PANEL_CONSTANTS: {
     elementName: "forge-expansion-panel";
     observedAttributes: {

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

@@ -1,10 +1,13 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { COMPONENT_NAME_PREFIX } from '../constants';
-import { OPEN_ICON_CONSTANTS } from '../open-icon';
+
+import { COMPONENT_NAME_PREFIX } from '../constants.js';
+import '../open-icon/index.js';
+import { OPEN_ICON_CONSTANTS } from '../open-icon/open-icon-constants.js';
+
 const elementName = `${COMPONENT_NAME_PREFIX}expansion-panel`;
 const observedAttributes = {
     OPEN: 'open',
@@ -33,7 +36,8 @@ const events = {
     TOGGLE: `${elementName}-toggle`,
     ANIMATION_COMPLETE: `${elementName}-animation-complete`
 };
-export const EXPANSION_PANEL_CONSTANTS = {
+/** @deprecated - These are internal constants that will be removed/moved in the future. Please avoid using them. */
+const EXPANSION_PANEL_CONSTANTS = {
     elementName,
     observedAttributes,
     attributes,
@@ -41,4 +45,6 @@ export const EXPANSION_PANEL_CONSTANTS = {
     selectors,
     events
 };
-export const emulateUserToggle = Symbol('emulateUserToggle');
+const emulateUserToggle = Symbol('emulateUserToggle');
+
+export { EXPANSION_PANEL_CONSTANTS, emulateUserToggle };

package/esm/expansion-panel/expansion-panel-trigger-controller.d.ts

@@ -0,0 +1,16 @@
+import { ReactiveController } from 'lit';
+import { IOpenIconComponent } from '../index.js';
+import { ExpansionPanelComponent } from './expansion-panel.js';
+export interface ExpansionPanelTriggerControllerOptions {
+    clickHandler: EventListener;
+    keydownHandler: EventListener;
+    keyupHandler: EventListener;
+}
+export declare class ExpansionPanelTriggerController implements ReactiveController {
+    #private;
+    get openIcon(): IOpenIconComponent | undefined;
+    constructor(host: ExpansionPanelComponent, options: ExpansionPanelTriggerControllerOptions);
+    hostUpdate(): void;
+    hostDisconnected(): void;
+    setControls(value: string): void;
+}

package/esm/expansion-panel/expansion-panel-trigger-controller.js

@@ -0,0 +1,121 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+
+import { toggleAttribute } from '@tylertech/forge-core';
+import { OPEN_ICON_CONSTANTS } from '../open-icon/open-icon-constants.js';
+
+class ExpansionPanelTriggerController {
+    #host;
+    #triggerElement;
+    #controlsId;
+    #hostOldTrigger;
+    #hostOldTriggerElement;
+    #hostOldOpen;
+    #abortController;
+    #clickHandler;
+    #keydownHandler;
+    #keyupHandler;
+    get openIcon() {
+        return this.#triggerElement?.querySelector(OPEN_ICON_CONSTANTS.elementName) ?? undefined;
+    }
+    constructor(host, options) {
+        this.#host = host;
+        this.#host.addController(this);
+        this.#clickHandler = options.clickHandler;
+        this.#keydownHandler = options.keydownHandler;
+        this.#keyupHandler = options.keyupHandler;
+    }
+    hostUpdate() {
+        this.#tryHostTriggerChanged();
+        this.#tryHostOpenChanged();
+    }
+    hostDisconnected() {
+        this.#detach();
+    }
+    setControls(value) {
+        this.#controlsId = value;
+        this.#setAriaControls(value);
+    }
+    #tryHostTriggerChanged() {
+        // Check for changes to the host's trigger and triggerElement properties
+        const trigger = this.#host.trigger;
+        const triggerElement = this.#host.triggerElement ?? undefined;
+        const triggerChanged = trigger !== this.#hostOldTrigger;
+        const triggerElementChanged = triggerElement !== this.#hostOldTriggerElement;
+        // Do nothing if there's been no change since the last update
+        if (!triggerChanged && !triggerElementChanged) {
+            return;
+        }
+        // Store the new values for comparison on the next update
+        if (triggerChanged) {
+            this.#hostOldTrigger = trigger;
+        }
+        if (triggerElementChanged) {
+            this.#hostOldTriggerElement = triggerElement;
+        }
+        // Attempt to find and attach to the new trigger element
+        const newTriggerEl = this.#getTriggerElement({
+            trigger: (triggerChanged && trigger) || undefined,
+            triggerElement: (triggerElementChanged && triggerElement) || undefined
+        });
+        if (newTriggerEl) {
+            this.#attach(newTriggerEl);
+        }
+        else {
+            this.#detach();
+        }
+    }
+    #tryHostOpenChanged() {
+        const open = this.#host.open;
+        if (open !== this.#hostOldOpen) {
+            this.#hostOldOpen = open;
+            this.#toggleExpanded(open);
+        }
+    }
+    #getTriggerElement(changedProperties) {
+        if (changedProperties.triggerElement) {
+            return changedProperties.triggerElement;
+        }
+        if (changedProperties.trigger && this.#host.isConnected) {
+            const rootNode = this.#host.getRootNode();
+            return rootNode.getElementById(changedProperties.trigger) ?? undefined;
+        }
+    }
+    #attach(triggerElement) {
+        if (this.#triggerElement) {
+            this.#detach();
+        }
+        if (!triggerElement.isConnected) {
+            return;
+        }
+        if (!this.#abortController) {
+            this.#abortController = new AbortController();
+        }
+        this.#triggerElement = triggerElement;
+        this.#triggerElement.addEventListener('click', this.#clickHandler, { signal: this.#abortController.signal });
+        this.#triggerElement.addEventListener('keydown', this.#keydownHandler, { signal: this.#abortController.signal });
+        this.#triggerElement.addEventListener('keyup', this.#keyupHandler, { signal: this.#abortController.signal });
+        this.#toggleExpanded(this.#host.open);
+        this.#setAriaControls(this.#controlsId);
+    }
+    #detach() {
+        this.#abortController?.abort();
+        this.#abortController = undefined;
+        this.#triggerElement?.removeAttribute('aria-controls');
+        this.#triggerElement?.removeAttribute('aria-expanded');
+        this.#triggerElement = undefined;
+    }
+    #toggleExpanded(expanded) {
+        this.#triggerElement?.setAttribute('aria-expanded', expanded.toString());
+    }
+    #setAriaControls(value) {
+        if (this.#triggerElement) {
+            toggleAttribute(this.#triggerElement, !!value, 'aria-controls', value);
+        }
+    }
+}
+
+export { ExpansionPanelTriggerController };

package/esm/expansion-panel/expansion-panel.d.ts

@@ -1,11 +1,10 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-import { ExpansionPanelAnimationType, ExpansionPanelOrientation, emulateUserToggle } from './expansion-panel-constants';
-import { IOpenIconComponent } from '../open-icon';
+import { CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY, CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
+import { PropertyValues, TemplateResult } from 'lit';
+import { IBaseComponent } from '../core/base/base-component.js';
+import { BaseLitElement } from '../core/base/base-lit-element.js';
+import { IOpenIconComponent } from '../open-icon/index.js';
+import { emulateUserToggle, ExpansionPanelAnimationType, ExpansionPanelOrientation } from './expansion-panel-constants.js';
+/** @deprecated - This will be removed in the future. Please switch to using ExpansionPanelComponent. */
 export interface IExpansionPanelComponent extends IBaseComponent {
     open: boolean;
     orientation: ExpansionPanelOrientation;
@@ -14,40 +13,21 @@ export interface IExpansionPanelComponent extends IBaseComponent {
     triggerElement: HTMLElement | null;
     openIcon: string;
     openIconElement: IOpenIconComponent | null;
+    name: string;
     toggle(): void;
     [emulateUserToggle](open: boolean): void;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'forge-expansion-panel': IExpansionPanelComponent;
-    }
-    interface HTMLElementEventMap {
-        'forge-expansion-panel-toggle': CustomEvent<boolean>;
-        'forge-expansion-panel-animation-complete': CustomEvent<boolean>;
-    }
-}
 /**
  * @tag forge-expansion-panel
  *
  * @summary Expansion panels provide progressive disclosure of content.
  *
- * @property {boolean} [open=false] - Whether the panel is open or closed.
- * @property {ExpansionPanelOrientation} [orientation="vertical"] - The orientation of the panel.
- * @property {ExpansionPanelAnimationType} [animationType="default"] - The type of animation to use when opening/closing the panel.
- * @property {string} trigger - The id of the button that the expansion panel should be toggled by.
- * @property {HTMLElement | null} triggerElement - The button that the expansion panel should be toggled by.
- * @property {string} openIcon - The id of the `<forge-open-icon>` that the expansion panel should toggle.
- * @property {IOpenIconComponent | null} openIconElement - The `<forge-open-icon>` that the expansion panel should toggle.
- *
- * @attribute {boolean} [open=false] - Whether the panel is open or closed.
- * @attribute {ExpansionPanelOrientation} [orientation="vertical"] - The orientation of the panel.
- * @attribute {ExpansionPanelAnimationType} [animation-type="default"] - The type of animation to use when opening/closing the panel.
- * @attribute {string} [trigger] - The id of the button that the expansion panel should be toggled by.
- * @attribute {string} [open-icon] - The id of the `<forge-open-icon>` that the expansion panel should toggle.
- *
  * @fires {CustomEvent<boolean>} forge-expansion-panel-toggle - Event fired when the panel is toggled open or closed.
  * @fires {CustomEvent<boolean>} forge-expansion-panel-animation-complete - Event fired when the panel has finished animating when toggling.
  *
+ * @state open - Applied when the panel is open.
+ * @state horizontal - Applied when the orientation is horizontal.
+ *
  * @cssproperty --forge-expansion-panel-animation-duration - The duration of the open/close animation.
  * @cssproperty --forge-expansion-panel-animation-easing - The easing function of the open/close animation.
  *
@@ -62,28 +42,70 @@ declare global {
  * @slot - The content of the panel.
  * @slot header - The header of the panel. This is deprecated, prefer using the trigger property instead, or manually associating a button with the panel.
  */
-export declare class ExpansionPanelComponent extends BaseComponent implements IExpansionPanelComponent {
-    static get observedAttributes(): string[];
-    private _core;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+export declare class ExpansionPanelComponent extends BaseLitElement implements IExpansionPanelComponent {
+    #private;
+    static styles: import("lit").CSSResult;
+    /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+    static [CUSTOM_ELEMENT_NAME_PROPERTY]: "forge-expansion-panel";
+    /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+    static [CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY]: never[];
+    /**
+     * Whether the panel is open or closed.
+     * @default false
+     * @attribute
+     */
     open: boolean;
+    /**
+     * The orientation of the panel.
+     * @default 'vertical'
+     * @attribute
+     */
     orientation: ExpansionPanelOrientation;
+    /**
+     * The type of animation to use when opening/closing the panel.
+     * @default 'default'
+     * @attribute {animation-type}
+     */
     animationType: ExpansionPanelAnimationType;
+    /**
+     * The id of the button that the expansion panel should be toggled by.
+     * @attribute
+     */
     trigger: string;
+    /**
+     * The button that the expansion panel should be toggled by.
+     */
     triggerElement: HTMLElement | null;
+    /**
+     * The id of the `<forge-open-icon>` that the expansion panel should toggle.
+     * @attribute {open-icon}
+     */
     openIcon: string;
-    openIconElement: IOpenIconComponent | null;
     /**
-     * Toggles the open state of the panel.
+     * The `<forge-open-icon>` that the expansion panel should toggle.
      */
-    toggle(): void;
+    openIconElement: IOpenIconComponent | null;
     /**
-     * @internal
-     *
-     * Emulates a user toggle of the panel, by also dispatching the toggle event.
+     * The expansion panel's name. Expansion panels that share the same name form an accordion group where only one panel may be open at a time.
+     * @attribute
      */
+    name: string;
+    private _isAnimating;
+    private _slottedContentElements;
+    constructor();
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+    toggle(): void;
     [emulateUserToggle](open: boolean): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-expansion-panel': IExpansionPanelComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-expansion-panel-toggle': CustomEvent<boolean>;
+        'forge-expansion-panel-animation-complete': CustomEvent<boolean>;
+    }
+}