@tylertech/forge 2.16.6 → 3.0.0-next.10

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

@@ -18,11 +18,6 @@ const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animatio
  * @tag forge-split-view
  */
 let SplitViewComponent = class SplitViewComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new SplitViewFoundation(new SplitViewAdapter(this));
-    }
     static get observedAttributes() {
         return [
             SPLIT_VIEW_CONSTANTS.attributes.ORIENTATION,
@@ -32,6 +27,11 @@ let SplitViewComponent = class SplitViewComponent extends BaseComponent {
             SPLIT_VIEW_CONSTANTS.attributes.AUTO_CLOSE_THRESHOLD
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new SplitViewFoundation(new SplitViewAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

package/esm/split-view/split-view-panel/split-view-panel-constants.d.ts

@@ -63,8 +63,8 @@ export declare const SPLIT_VIEW_PANEL_CONSTANTS: {
         CURSOR: string;
     };
 };
-export declare type SplitViewPanelResizable = 'start' | 'end' | 'off';
-export declare type SplitViewInputDeviceType = 'pointer' | 'keyboard';
+export type SplitViewPanelResizable = 'start' | 'end' | 'off';
+export type SplitViewInputDeviceType = 'pointer' | 'keyboard';
 export declare enum SplitViewAnimatingLayer {
     Under = 1,
     Active = 2,

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

@@ -9,24 +9,6 @@ import { eventIncludesArrowKey } from '../../core/utils/event-utils';
 import { SPLIT_VIEW_PANEL_CONSTANTS } from './split-view-panel-constants';
 import { clampSize, clearState, getPixelDimension, getValuenow, handleBoundariesAfterResize, handleBoundariesDuringResize, initState, keyboardResize, maxResize, minResize, pointerResize, setState } from './split-view-panel-utils';
 export class SplitViewPanelFoundation {
-    constructor(_adapter) {
-        this._adapter = _adapter;
-        // API
-        this._size = 200;
-        this._min = 0;
-        this._accessibleLabel = 'Split view panel';
-        this._open = true;
-        // State
-        this._state = initState();
-        this._isInitialized = false;
-        // Properties inherited from parent split view
-        this._parentProperties = {};
-        this._pointerdownListener = evt => this._onPointerdown(evt);
-        this._pointerupListener = evt => this._onPointerup(evt);
-        this._pointermoveListener = evt => this._onPointermove(evt);
-        this._keydownListener = evt => this._onKeydown(evt);
-        this._keyupListener = evt => this._onKeyup(evt);
-    }
     // Properties stored in state
     get _orientation() {
         return this._state.orientation;
@@ -69,6 +51,24 @@ export class SplitViewPanelFoundation {
         var _a, _b;
         return (_b = (_a = this._autoCloseThreshold) !== null && _a !== void 0 ? _a : this._parentProperties.autoCloseThreshold) !== null && _b !== void 0 ? _b : 0;
     }
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        // API
+        this._size = 200;
+        this._min = 0;
+        this._accessibleLabel = 'Split view panel';
+        this._open = true;
+        // State
+        this._state = initState();
+        this._isInitialized = false;
+        // Properties inherited from parent split view
+        this._parentProperties = {};
+        this._pointerdownListener = evt => this._onPointerdown(evt);
+        this._pointerupListener = evt => this._onPointerup(evt);
+        this._pointermoveListener = evt => this._onPointermove(evt);
+        this._keydownListener = evt => this._onKeydown(evt);
+        this._keyupListener = evt => this._onKeyup(evt);
+    }
     initialize() {
         this._adapter.initialize();
         this._adapter.setPointerdownListener(this._pointerdownListener);

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

@@ -14,19 +14,13 @@ import { SplitViewPanelAdapter } from './split-view-panel-adapter';
 import { IconComponent, IconRegistry } from '../../icon';
 import { RippleComponent } from '../../ripple';
 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-ripple id=\"ripple\" part=\"ripple\"></forge-ripple></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
-const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-split-view-panel{display:-webkit-box;display:flex;width:100%;height:100%;overflow:hidden;contain:paint size}.forge-split-view-panel__handle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));background-color:#e0e0e0;background-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;outline:0}.forge-split-view-panel__content{-webkit-box-flex:1;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:8px;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));-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:8px;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;-webkit-animation-name:uuolfs8;animation-name:uuolfs8;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes uuolfs8{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uuolfs8{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:uuolft4;animation-name:uuolft4;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes uuolft4{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uuolft4{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:uuolftm;animation-name:uuolftm;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes uuolftm{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uuolftm{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:uuolfuk;animation-name:uuolfuk;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes uuolfuk{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uuolfuk{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:8px;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));-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:8px;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;-webkit-animation-name:uuolfve;animation-name:uuolfve;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes uuolfve{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uuolfve{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:uuolfvy;animation-name:uuolfvy;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes uuolfvy{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uuolfvy{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:uuolfwn;animation-name:uuolfwn;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes uuolfwn{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uuolfwn{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:uuolfx2;animation-name:uuolfx2;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes uuolfx2{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uuolfx2{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;-webkit-box-flex:0;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){-webkit-box-flex:1;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}';
+const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-split-view-panel{display:-webkit-box;display:flex;width:100%;height:100%;overflow:hidden;contain:paint size}.forge-split-view-panel__handle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));background-color:#e0e0e0;background-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;outline:0}.forge-split-view-panel__content{-webkit-box-flex:1;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:8px;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));-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:8px;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;-webkit-animation-name:urq9jga;animation-name:urq9jga;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes urq9jga{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes urq9jga{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:urq9jgg;animation-name:urq9jgg;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes urq9jgg{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes urq9jgg{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:urq9jgz;animation-name:urq9jgz;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes urq9jgz{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes urq9jgz{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:urq9jhi;animation-name:urq9jhi;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes urq9jhi{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes urq9jhi{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:8px;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));-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:8px;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;-webkit-animation-name:urq9jhk;animation-name:urq9jhk;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes urq9jhk{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes urq9jhk{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:urq9jii;animation-name:urq9jii;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes urq9jii{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes urq9jii{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:urq9jj9;animation-name:urq9jj9;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes urq9jj9{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes urq9jj9{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:urq9jjb;animation-name:urq9jjb;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes urq9jjb{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes urq9jjb{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;-webkit-box-flex:0;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){-webkit-box-flex:1;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}';
 /**
  * The custom element class behind the `<forge-split-view-panel>` element.
  *
  * @tag forge-split-view-panel
  */
 let SplitViewPanelComponent = class SplitViewPanelComponent extends BaseComponent {
-    constructor() {
-        super();
-        IconRegistry.define([tylIconDragVerticalVariant, tylIconDragHandle]);
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new SplitViewPanelFoundation(new SplitViewPanelAdapter(this));
-    }
     static get observedAttributes() {
         return [
             SPLIT_VIEW_PANEL_CONSTANTS.attributes.RESIZABLE,
@@ -41,6 +35,12 @@ let SplitViewPanelComponent = class SplitViewPanelComponent extends BaseComponen
             SPLIT_VIEW_PANEL_CONSTANTS.attributes.AUTO_CLOSE_THRESHOLD
         ];
     }
+    constructor() {
+        super();
+        IconRegistry.define([tylIconDragVerticalVariant, tylIconDragHandle]);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new SplitViewPanelFoundation(new SplitViewPanelAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

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

@@ -22,7 +22,7 @@ export declare const STACK_CONSTANTS: {
         DEFAULT_GAP: string;
     };
 };
-export declare type StackAlignment = 'start' | 'center' | 'end';
+export type StackAlignment = 'start' | 'center' | 'end';
 /** @deprecated Use `StackAlignment` instead. */
 export declare enum StackAlignMode {
     Start = "start",

package/esm/stack/stack.js

@@ -17,11 +17,6 @@ const styles = '.forge-stack{display:-webkit-box;display:flex;-webkit-box-orient
  * @tag forge-stack
  */
 let StackComponent = class StackComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new StackFoundation(new StackAdapter(this));
-    }
     static get observedAttributes() {
         return [
             STACK_CONSTANTS.attributes.INLINE,
@@ -31,6 +26,11 @@ let StackComponent = class StackComponent extends BaseComponent {
             STACK_CONSTANTS.attributes.ALIGNMENT
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new StackFoundation(new StackAdapter(this));
+    }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
             case STACK_CONSTANTS.attributes.INLINE:

package/esm/state-layer/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './state-layer-adapter';
+export * from './state-layer-constants';
+export * from './state-layer-foundation';
+export * from './state-layer';
+export declare function defineStateLayerComponent(): void;

package/esm/state-layer/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { StateLayerComponent } from './state-layer';
+export * from './state-layer-adapter';
+export * from './state-layer-constants';
+export * from './state-layer-foundation';
+export * from './state-layer';
+export function defineStateLayerComponent() {
+    defineCustomElement(StateLayerComponent);
+}

package/esm/state-layer/state-layer-adapter.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { IStateLayerComponent } from './state-layer';
+import { StateLayerCoords } from './state-layer-constants';
+export interface IStateLayerAdapter extends IBaseAdapter {
+    destroy(): void;
+    deferInitialization(listener: (evt?: PointerEvent) => void): void;
+    getTargetElement(): HTMLElement | null;
+    setTargetElement(el: HTMLElement | null): void;
+    trySetTarget(value?: string | null): void;
+    addTargetListener(type: string, listener: EventListener): void;
+    removeTargetListener(type: string, listener: EventListener): void;
+    setHovered(hovered: boolean): void;
+    setPressed(pressed: boolean): void;
+    startAnimation(coords?: StateLayerCoords): void;
+    endAnimation(): Promise<void>;
+    inBounds(x: number, y: number): boolean;
+}
+export declare class StateLayerAdapter extends BaseAdapter<IStateLayerComponent> implements IStateLayerAdapter {
+    private readonly _surfaceElement;
+    private _targetElement;
+    private _rippleAnimation;
+    private _destroyDeferListener;
+    constructor(component: IStateLayerComponent);
+    destroy(): void;
+    deferInitialization(listener: (evt?: PointerEvent) => void): Promise<void>;
+    addTargetListener(type: string, listener: EventListener): void;
+    removeTargetListener(type: string, listener: EventListener): void;
+    setHovered(hovered: boolean): void;
+    setPressed(pressed: boolean): void;
+    getTargetElement(): HTMLElement | null;
+    setTargetElement(el: HTMLElement | null): void;
+    trySetTarget(value?: string | null): void;
+    startAnimation(coords?: StateLayerCoords): void;
+    endAnimation(): Promise<void>;
+    inBounds(x: number, y: number): boolean;
+}

package/esm/state-layer/state-layer-adapter.js

@@ -0,0 +1,101 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core/base/base-adapter';
+import { locateTargetHeuristic, createUserInteractionListener } from '../core/utils/utils';
+import { ANIMATION_FILL, EASING, MINIMUM_PRESS_MS, PRESS_GROW_MS, PRESS_PSEUDO, STATE_LAYER_CONSTANTS } from './state-layer-constants';
+import { calcRippleSize, getTranslationCoordinates, isInBounds } from './state-layer-utils';
+export class StateLayerAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._targetElement = null;
+        this._surfaceElement = getShadowElement(component, STATE_LAYER_CONSTANTS.selectors.SURFACE);
+    }
+    destroy() {
+        if (typeof this._destroyDeferListener === 'function') {
+            this._destroyDeferListener();
+            this._destroyDeferListener = undefined;
+        }
+    }
+    async deferInitialization(listener) {
+        if (!this._targetElement) {
+            return;
+        }
+        const { userInteraction, destroy } = createUserInteractionListener(this._targetElement);
+        this._destroyDeferListener = destroy;
+        const evt = await userInteraction;
+        listener(evt.type === 'pointerenter' ? evt : undefined);
+    }
+    addTargetListener(type, listener) {
+        var _a;
+        (_a = this._targetElement) === null || _a === void 0 ? void 0 : _a.addEventListener(type, listener);
+    }
+    removeTargetListener(type, listener) {
+        var _a;
+        (_a = this._targetElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(type, listener);
+    }
+    setHovered(hovered) {
+        this._surfaceElement.classList.toggle(STATE_LAYER_CONSTANTS.classes.HOVERED, hovered);
+    }
+    setPressed(pressed) {
+        this._surfaceElement.classList.toggle(STATE_LAYER_CONSTANTS.classes.PRESSED, pressed);
+    }
+    getTargetElement() {
+        return this._targetElement;
+    }
+    setTargetElement(el) {
+        this._targetElement = el;
+    }
+    trySetTarget(value) {
+        this._targetElement = locateTargetHeuristic(this._component, value);
+    }
+    startAnimation(coords) {
+        var _a;
+        if (!this._surfaceElement) {
+            return;
+        }
+        this.setPressed(true);
+        (_a = this._rippleAnimation) === null || _a === void 0 ? void 0 : _a.cancel();
+        const { rippleSize, rippleScale, initialSize } = calcRippleSize(this._component);
+        const { startPoint, endPoint } = getTranslationCoordinates(this._component, initialSize, coords);
+        const translateStart = `${startPoint.x}px, ${startPoint.y}px`;
+        const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;
+        this._rippleAnimation = this._surfaceElement.animate({
+            top: [0, 0],
+            left: [0, 0],
+            height: [rippleSize, rippleSize],
+            width: [rippleSize, rippleSize],
+            transform: [
+                `translate(${translateStart}) scale(1)`,
+                `translate(${translateEnd}) scale(${rippleScale})`
+            ]
+        }, {
+            pseudoElement: PRESS_PSEUDO,
+            duration: PRESS_GROW_MS,
+            easing: EASING,
+            fill: ANIMATION_FILL
+        });
+    }
+    async endAnimation() {
+        var _a;
+        const animation = this._rippleAnimation;
+        const pressAnimationPlayState = (_a = animation === null || animation === void 0 ? void 0 : animation.currentTime) !== null && _a !== void 0 ? _a : Infinity;
+        if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
+            this.setPressed(false);
+            return;
+        }
+        await new Promise(resolve => {
+            setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);
+        });
+        if (this._rippleAnimation !== animation) {
+            return;
+        }
+        this.setPressed(false);
+    }
+    inBounds(x, y) {
+        return isInBounds(this._component, x, y);
+    }
+}

package/esm/state-layer/state-layer-constants.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const STATE_LAYER_CONSTANTS: {
+    elementName: string;
+    attributes: {
+        TARGET: string;
+        DISABLED: string;
+    };
+    selectors: {
+        SURFACE: string;
+    };
+    classes: {
+        HOVERED: string;
+        PRESSED: string;
+    };
+};
+export declare class StateLayerCoords {
+    x: number;
+    y: number;
+    constructor(x: number, y: number);
+    static fromPointerEvent(event: PointerEvent): StateLayerCoords;
+}
+export declare const TOUCH_DELAY_MS = 150;
+export declare const PRESS_GROW_MS = 450;
+export declare const MINIMUM_PRESS_MS = 225;
+export declare const INITIAL_ORIGIN_SCALE = 0.2;
+export declare const PADDING = 10;
+export declare const SOFT_EDGE_MINIMUM_SIZE = 75;
+export declare const SOFT_EDGE_CONTAINER_RATIO = 0.35;
+export declare const PRESS_PSEUDO = "::after";
+export declare const ANIMATION_FILL = "forwards";
+export declare const EASING = "cubic-bezier(0.2, 0, 0, 1)";
+/**
+ * Interaction states for the state layer.
+ *
+ * On Touch:
+ *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`
+ *  - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE`
+ *
+ * On Mouse or Pen:
+ *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`
+ */
+export declare enum PointerState {
+    /**
+     * Initial state of the control, no touch in progress.
+     *
+     * Transitions:
+     *   - on touch down: transition to `TOUCH_DELAY`.
+     *   - on mouse down: transition to `WAITING_FOR_CLICK`.
+     */
+    INACTIVE = 0,
+    /**
+     * Touch down has been received, waiting to determine if it's a swipe or
+     * scroll.
+     *
+     * Transitions:
+     *   - on touch up: begin press; transition to `WAITING_FOR_CLICK`.
+     *   - on cancel: transition to `INACTIVE`.
+     *   - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`.
+     */
+    TOUCH_DELAY = 1,
+    /**
+     * A touch has been deemed to be a press
+     *
+     * Transitions:
+     *  - on up: transition to `WAITING_FOR_CLICK`.
+     */
+    HOLDING = 2,
+    /**
+     * The user touch has finished, transition into rest state.
+     *
+     * Transitions:
+     *   - on click end press; transition to `INACTIVE`.
+     */
+    WAITING_FOR_CLICK = 3
+}

package/esm/state-layer/state-layer-constants.js

@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}state-layer`;
+const observedAttributes = {
+    TARGET: 'target',
+    DISABLED: 'disabled'
+};
+const attributes = Object.assign({}, observedAttributes);
+const selectors = {
+    SURFACE: '.forge-state-layer'
+};
+const classes = {
+    HOVERED: 'forge-state-layer--hovered',
+    PRESSED: 'forge-state-layer--pressed'
+};
+export const STATE_LAYER_CONSTANTS = {
+    elementName,
+    attributes,
+    selectors,
+    classes
+};
+export class StateLayerCoords {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+    static fromPointerEvent(event) {
+        return new StateLayerCoords(event.pageX, event.pageY);
+    }
+}
+export const TOUCH_DELAY_MS = 150;
+export const PRESS_GROW_MS = 450;
+export const MINIMUM_PRESS_MS = 225;
+export const INITIAL_ORIGIN_SCALE = 0.2;
+export const PADDING = 10;
+export const SOFT_EDGE_MINIMUM_SIZE = 75;
+export const SOFT_EDGE_CONTAINER_RATIO = 0.35;
+export const PRESS_PSEUDO = '::after';
+export const ANIMATION_FILL = 'forwards';
+export const EASING = 'cubic-bezier(0.2, 0, 0, 1)';
+/**
+ * Interaction states for the state layer.
+ *
+ * On Touch:
+ *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`
+ *  - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE`
+ *
+ * On Mouse or Pen:
+ *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`
+ */
+export var PointerState;
+(function (PointerState) {
+    /**
+     * Initial state of the control, no touch in progress.
+     *
+     * Transitions:
+     *   - on touch down: transition to `TOUCH_DELAY`.
+     *   - on mouse down: transition to `WAITING_FOR_CLICK`.
+     */
+    PointerState[PointerState["INACTIVE"] = 0] = "INACTIVE";
+    /**
+     * Touch down has been received, waiting to determine if it's a swipe or
+     * scroll.
+     *
+     * Transitions:
+     *   - on touch up: begin press; transition to `WAITING_FOR_CLICK`.
+     *   - on cancel: transition to `INACTIVE`.
+     *   - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`.
+     */
+    PointerState[PointerState["TOUCH_DELAY"] = 1] = "TOUCH_DELAY";
+    /**
+     * A touch has been deemed to be a press
+     *
+     * Transitions:
+     *  - on up: transition to `WAITING_FOR_CLICK`.
+     */
+    PointerState[PointerState["HOLDING"] = 2] = "HOLDING";
+    /**
+     * The user touch has finished, transition into rest state.
+     *
+     * Transitions:
+     *   - on click end press; transition to `INACTIVE`.
+     */
+    PointerState[PointerState["WAITING_FOR_CLICK"] = 3] = "WAITING_FOR_CLICK";
+})(PointerState || (PointerState = {}));

package/esm/state-layer/state-layer-foundation.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IStateLayerAdapter } from './state-layer-adapter';
+import { StateLayerCoords } from './state-layer-constants';
+export interface IStateLayerFoundation extends ICustomElementFoundation {
+    targetElement: HTMLElement | null;
+    target: string | null;
+    disabled: boolean;
+    playAnimation(coords?: StateLayerCoords): void;
+}
+export declare class StateLayerFoundation implements IStateLayerFoundation {
+    private _adapter;
+    private _target;
+    private _disabled;
+    private _attached;
+    private _deferred;
+    private _pointerStartEvent;
+    private _pointerState;
+    private _checkBoundsAfterContextMenu;
+    private _pointerEnterListener;
+    private _pointerLeaveListener;
+    private _pointerDownListener;
+    private _pointerUpListener;
+    private _pointerCancelListener;
+    private _clickListener;
+    private _contextmenuListener;
+    constructor(_adapter: IStateLayerAdapter);
+    initialize(): void;
+    disconnect(): void;
+    playAnimation(coords?: StateLayerCoords): void;
+    private _deferInitialization;
+    private _applyListeners;
+    private _removeListeners;
+    private _onDeferredInitialize;
+    private _onPointerEnter;
+    private _onPointerLeave;
+    private _onPointerDown;
+    private _onPointerUp;
+    private _onClick;
+    private _onPointerCancel;
+    private _onContextmenu;
+    private _startAnimation;
+    private _endAnimation;
+    private _canHandleEvent;
+    private _isTouch;
+    get isAttached(): boolean;
+    get targetElement(): HTMLElement | null;
+    set targetElement(el: HTMLElement | null);
+    get target(): string | null;
+    set target(value: string | null);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+}