@tylertech/forge 3.0.0-next.5 → 3.0.0-next.7

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:uaup4en;animation-name:uaup4en;-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 uaup4en{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uaup4en{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:uaup4ez;animation-name:uaup4ez;-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 uaup4ez{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uaup4ez{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:uaup4fe;animation-name:uaup4fe;-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 uaup4fe{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uaup4fe{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:uaup4fr;animation-name:uaup4fr;-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 uaup4fr{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uaup4fr{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:uaup4gh;animation-name:uaup4gh;-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 uaup4gh{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uaup4gh{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:uaup4h2;animation-name:uaup4h2;-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 uaup4h2{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uaup4h2{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:uaup4hi;animation-name:uaup4hi;-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 uaup4hi{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uaup4hi{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:uaup4i4;animation-name:uaup4i4;-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 uaup4i4{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uaup4i4{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:uvyx5ut;animation-name:uvyx5ut;-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 uvyx5ut{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uvyx5ut{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:uvyx5vd;animation-name:uvyx5vd;-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 uvyx5vd{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uvyx5vd{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:uvyx5w5;animation-name:uvyx5w5;-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 uvyx5w5{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uvyx5w5{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:uvyx5wt;animation-name:uvyx5wt;-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 uvyx5wt{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uvyx5wt{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:uvyx5xl;animation-name:uvyx5xl;-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 uvyx5xl{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uvyx5xl{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:uvyx5yd;animation-name:uvyx5yd;-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 uvyx5yd{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uvyx5yd{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:uvyx5z5;animation-name:uvyx5z5;-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 uvyx5z5{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uvyx5z5{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:uvyx5zb;animation-name:uvyx5zb;-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 uvyx5zb{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uvyx5zb{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/stepper/step/step-constants.d.ts

@@ -73,4 +73,4 @@ export declare const STEP_CONSTANTS: {
         EXPANSION_CONTENT_SLOT_NAME: string;
     };
 };
-export declare type StepIcons = 'check' | 'block' | 'mode_edit' | 'warning' | '';
+export type StepIcons = 'check' | 'block' | 'mode_edit' | 'warning' | '';

package/esm/stepper/step/step.js

@@ -20,18 +20,6 @@ const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animatio
  * @tag forge-step
  */
 let StepComponent = class StepComponent extends BaseComponent {
-    constructor() {
-        super();
-        IconRegistry.define([
-            tylIconModeEdit,
-            tylIconCheck,
-            tylIconWarning,
-            tylIconBlock,
-            tylIconKeyboardArrowDown
-        ]);
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new StepFoundation(new StepAdapter(this));
-    }
     static get observedAttributes() {
         return [
             STEP_CONSTANTS.attributes.COMPLETED,
@@ -46,6 +34,18 @@ let StepComponent = class StepComponent extends BaseComponent {
             STEP_CONSTANTS.attributes.IGNORE_USER_EXPANSION
         ];
     }
+    constructor() {
+        super();
+        IconRegistry.define([
+            tylIconModeEdit,
+            tylIconCheck,
+            tylIconWarning,
+            tylIconBlock,
+            tylIconKeyboardArrowDown
+        ]);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new StepFoundation(new StepAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

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

@@ -73,5 +73,5 @@ export interface IStepperConfiguration {
     layoutAlign: StepperLayoutAlign;
     vertical?: boolean;
 }
-export declare type StepperLayoutMode = 'fixed' | 'clustered';
-export declare type StepperLayoutAlign = 'left' | 'center' | 'right';
+export type StepperLayoutMode = 'fixed' | 'clustered';
+export type StepperLayoutAlign = 'left' | 'center' | 'right';

package/esm/stepper/stepper/stepper.js

@@ -18,11 +18,6 @@ const styles = '.forge-stepper{display:-webkit-box;display:flex;-webkit-box-alig
  * @tag forge-stepper
  */
 let StepperComponent = class StepperComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new StepperFoundation(new StepperAdapter(this));
-    }
     static get observedAttributes() {
         return [
             STEPPER_CONSTANTS.attributes.SELECTED_INDEX,
@@ -34,6 +29,11 @@ let StepperComponent = class StepperComponent extends BaseComponent {
             STEPPER_CONSTANTS.attributes.VERTICAL
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new StepperFoundation(new StepperAdapter(this));
+    }
     async connectedCallback() {
         await ensureChildren(this);
         this._foundation.initialize();

package/esm/switch/switch-component-delegate.d.ts

@@ -6,7 +6,7 @@
 import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core';
 import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
 import { ISwitchComponent } from './switch';
-export declare type SwitchComponentDelegateProps = Partial<ISwitchComponent>;
+export type SwitchComponentDelegateProps = Partial<ISwitchComponent>;
 export interface ISwitchComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
     id?: string;
     label?: string;

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

@@ -23,4 +23,4 @@ export declare const SWITCH_CONSTANTS: {
         SELECT: string;
     };
 };
-export declare type SwitchLabelPosition = 'start' | 'end';
+export type SwitchLabelPosition = 'start' | 'end';

package/esm/switch/switch.js

@@ -41,15 +41,6 @@ class ForgeMDCSwitch extends MDCSwitch {
  * @tag forge-switch
  */
 let SwitchComponent = class SwitchComponent extends BaseComponent {
-    constructor() {
-        super();
-        this._dense = false;
-        this._disabled = false;
-        this._selected = false;
-        this._labelPosition = 'end';
-        attachShadowTemplate(this, template, styles);
-        this._initialize();
-    }
     static get observedAttributes() {
         return [
             SWITCH_CONSTANTS.attributes.DENSE,
@@ -59,6 +50,15 @@ let SwitchComponent = class SwitchComponent extends BaseComponent {
             SWITCH_CONSTANTS.attributes.BUTTON_ARIA_LABEL
         ];
     }
+    constructor() {
+        super();
+        this._dense = false;
+        this._disabled = false;
+        this._selected = false;
+        this._labelPosition = 'end';
+        attachShadowTemplate(this, template, styles);
+        this._initialize();
+    }
     _initialize() {
         this._buttonElement = getShadowElement(this, SWITCH_CONSTANTS.selectors.BUTTON);
         this._containerElement = getShadowElement(this, SWITCH_CONSTANTS.selectors.CONTAINER);

package/esm/table/table.js

@@ -20,11 +20,6 @@ import { CellAlign } from './types';
  * @tag forge-table
  */
 let TableComponent = class TableComponent extends BaseComponent {
-    constructor() {
-        super();
-        IconRegistry.define(tylIconArrowDownward);
-        this._foundation = new TableFoundation(new TableAdapter(this));
-    }
     static get observedAttributes() {
         return [
             TABLE_CONSTANTS.attributes.SELECT,
@@ -45,6 +40,11 @@ let TableComponent = class TableComponent extends BaseComponent {
             TABLE_CONSTANTS.attributes.TOOLTIP_SELECT_ALL
         ];
     }
+    constructor() {
+        super();
+        IconRegistry.define(tylIconArrowDownward);
+        this._foundation = new TableFoundation(new TableAdapter(this));
+    }
     initializedCallback() {
         this._foundation.initialize();
     }

package/esm/table/types.d.ts

@@ -90,7 +90,7 @@ export interface ITableSortEventData {
     direction: SortDirection;
     columnIndex: number;
 }
-export declare type ITableSortMultipleEventData = ITableSortedMultipleEventDataItem[];
+export type ITableSortMultipleEventData = ITableSortedMultipleEventDataItem[];
 export interface ITableSortedMultipleEventDataItem extends ISortedItem {
 }
 export interface ITableColumnResizeEventData {
@@ -139,9 +139,9 @@ export declare enum TableFilterType {
     Date = "date",
     DateRange = "date-range"
 }
-export declare type TableFilterListener<T = any> = (value: T, columnIndex: number) => void;
-export declare type TableFilterDelegateFactory<T extends HTMLElement = any> = () => IFormFieldComponentDelegate<T> | IBaseComponentDelegate<HTMLElement>;
-export declare type TableLayoutType = 'auto' | 'fixed';
+export type TableFilterListener<T = any> = (value: T, columnIndex: number) => void;
+export type TableFilterDelegateFactory<T extends HTMLElement = any> = () => IFormFieldComponentDelegate<T> | IBaseComponentDelegate<HTMLElement>;
+export type TableLayoutType = 'auto' | 'fixed';
 export interface ITableFilterEventData<T = any> {
     value: T;
     columnIndex: number;

package/esm/tabs/tab/tab-adapter.d.ts

@@ -3,52 +3,28 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { IBaseAdapter, BaseAdapter } from '../../core/base/base-adapter';
+import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
 import { ITabComponent } from './tab';
 export interface ITabAdapter extends IBaseAdapter {
     initialize(): void;
-    initializeIndicator(): void;
-    destroyIndicator(): void;
-    computeIndicatorBounds(): DOMRect | undefined;
-    activateIndicator(previousIndicatorClientRect?: DOMRect): void;
-    deactivateIndicator(): void;
-    initializeRipple(): void;
-    destroyRipple(): void;
-    addButtonListener(type: string, listener: (evt: Event) => void): void;
-    removeButtonListener(type: string, listener: (evt: Event) => void): void;
+    destroy(): void;
+    addInteractionListener(type: string, listener: EventListener): void;
     setDisabled(value: boolean): void;
-    setActive(value: boolean): void;
-    getOffsetLeft(): number;
-    getOffsetWidth(): number;
-    getContentOffsetLeft(): number;
-    getContentOffsetWidth(): number;
-    focus(): void;
-    setTabIndex(value: number): void;
+    setSelected(value: boolean): void;
+    animateSelected(): void;
 }
 export declare class TabAdapter extends BaseAdapter<ITabComponent> implements ITabAdapter {
-    private _buttonElement;
-    private _content;
-    private _rippleElement;
+    private readonly _rippleElement;
+    private readonly _tabIndicatorElement;
     private _rippleInstance;
-    private _tabIndicatorElement;
-    private _tabIndicator;
     constructor(component: ITabComponent);
     initialize(): void;
-    initializeRipple(): void;
-    destroyRipple(): void;
-    initializeIndicator(): void;
-    destroyIndicator(): void;
-    activateIndicator(previousIndicatorClientRect?: DOMRect): void;
-    deactivateIndicator(): void;
-    computeIndicatorBounds(): DOMRect | undefined;
-    addButtonListener(type: string, listener: (evt: Event) => void): void;
-    removeButtonListener(type: string, listener: (evt: Event) => void): void;
+    destroy(): void;
+    addInteractionListener(type: string, listener: EventListener): void;
     setDisabled(value: boolean): void;
-    setActive(value: boolean): void;
-    getOffsetLeft(): number;
-    getOffsetWidth(): number;
-    getContentOffsetLeft(): number;
-    getContentOffsetWidth(): number;
-    focus(): void;
-    setTabIndex(value: number): void;
+    setSelected(value: boolean): void;
+    private _deferRippleInitialization;
+    animateSelected(): void;
+    private _getKeyframes;
+    private _getSelectedTabIndicator;
 }

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

@@ -3,101 +3,88 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, toggleClass } from '@tylertech/forge-core';
-import { MDCTabIndicator } from '@material/tab-indicator';
+import { getShadowElement, requireParent, toggleAttribute } from '@tylertech/forge-core';
 import { BaseAdapter } from '../../core/base/base-adapter';
 import { TAB_CONSTANTS } from './tab-constants';
-import { ForgeRipple, ForgeRippleFoundation } from '../../ripple';
-class TabRippleSurface {
-    constructor(_root) {
-        this._root = _root;
-    }
-    get root() {
-        return this._root;
-    }
-    get unbounded() {
-        return false;
-    }
-    get disabled() {
-        return this._root.disabled;
-    }
-}
+import { TabRipple } from './tab-ripple';
+import { userInteractionListener } from '../../core/utils';
+import { TAB_BAR_CONSTANTS } from '../tab-bar/tab-bar-constants';
 export class TabAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
-        this._buttonElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.BUTTON);
-        this._content = getShadowElement(this._component, TAB_CONSTANTS.selectors.CONTENT);
         this._rippleElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.RIPPLE);
         this._tabIndicatorElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.INDICATOR);
     }
     initialize() {
+        this._deferRippleInitialization();
+        this._component.tabIndex = -1;
         this._component.setAttribute('role', 'tab');
+        this._component.setAttribute('aria-selected', 'false');
     }
-    initializeRipple() {
-        const rippleCapableSurface = new TabRippleSurface(this._buttonElement);
-        const rippleAdapter = Object.assign(Object.assign({}, ForgeRipple.createAdapter(rippleCapableSurface)), { addClass: (className) => this._rippleElement.classList.add(className), removeClass: (className) => this._rippleElement.classList.remove(className), updateCssVariable: (varName, value) => this._rippleElement.style.setProperty(varName, value) });
-        const rippleFoundation = new ForgeRippleFoundation(rippleAdapter);
-        this._rippleInstance = new ForgeRipple(this._buttonElement, rippleFoundation);
-    }
-    destroyRipple() {
-        if (this._rippleInstance) {
-            this._rippleInstance.destroy();
-        }
+    destroy() {
+        var _a;
+        (_a = this._rippleInstance) === null || _a === void 0 ? void 0 : _a.destroy();
     }
-    initializeIndicator() {
-        this._tabIndicator = new MDCTabIndicator(this._tabIndicatorElement);
+    addInteractionListener(type, listener) {
+        this._component.addEventListener(type, listener);
     }
-    destroyIndicator() {
-        if (this._tabIndicator) {
-            this._tabIndicator.destroy();
-            this._tabIndicator = undefined;
+    setDisabled(value) {
+        this._component.tabIndex = value ? -1 : this._component.selected ? 0 : -1;
+        this._component.setAttribute('aria-disabled', String(value));
+        toggleAttribute(this._component, value, TAB_CONSTANTS.attributes.DISABLED, String(value));
+    }
+    setSelected(value) {
+        this._component.tabIndex = value ? 0 : -1;
+        this._component.setAttribute('aria-selected', String(value));
+    }
+    async _deferRippleInitialization() {
+        const type = await userInteractionListener(this._component);
+        this._rippleInstance = new TabRipple(this._rippleElement, this._component);
+        if (type === 'focusin' && this._component.matches(':focus')) {
+            this._rippleInstance.emulateFocus();
         }
     }
-    activateIndicator(previousIndicatorClientRect) {
-        if (this._tabIndicator) {
-            this._tabIndicator.activate(previousIndicatorClientRect);
+    animateSelected() {
+        this._tabIndicatorElement.getAnimations().forEach(a => a.cancel());
+        const frames = this._getKeyframes();
+        if (frames) {
+            this._tabIndicatorElement.animate(frames, { duration: TAB_CONSTANTS.numbers.ANIMATION_DURATION, easing: TAB_CONSTANTS.strings.EASING });
         }
     }
-    deactivateIndicator() {
-        if (this._tabIndicator) {
-            this._tabIndicator.deactivate();
+    _getKeyframes() {
+        var _a;
+        const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (!this._component.selected) {
+            return reduceMotion ? [{ opacity: 1 }, { transform: 'none' }] : null;
         }
-    }
-    computeIndicatorBounds() {
-        return this._tabIndicator ? this._tabIndicator.computeContentClientRect() : undefined;
-    }
-    addButtonListener(type, listener) {
-        this._buttonElement.addEventListener(type, listener);
-    }
-    removeButtonListener(type, listener) {
-        this._buttonElement.removeEventListener(type, listener);
-    }
-    setDisabled(value) {
-        this._buttonElement.disabled = value;
-        this.setTabIndex(!value ? 0 : -1);
-        this._component.setAttribute('aria-disabled', value.toString());
-    }
-    setActive(value) {
-        toggleClass(this._buttonElement, value, TAB_CONSTANTS.classes.ACTIVE);
-        this.setTabIndex(value ? 0 : -1);
-        this._component.setAttribute('aria-selected', value.toString());
-    }
-    getOffsetLeft() {
-        return this._buttonElement.offsetLeft;
-    }
-    getOffsetWidth() {
-        return this._buttonElement.offsetWidth;
-    }
-    getContentOffsetLeft() {
-        return this._content.offsetLeft;
-    }
-    getContentOffsetWidth() {
-        return this._content.offsetWidth;
-    }
-    focus() {
-        this._buttonElement.focus();
-    }
-    setTabIndex(value) {
-        this._buttonElement.tabIndex = value;
+        const from = {};
+        const isVertical = this._component.vertical;
+        const selectedTabIndicator = this._getSelectedTabIndicator();
+        const fromRect = (_a = selectedTabIndicator === null || selectedTabIndicator === void 0 ? void 0 : selectedTabIndicator.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
+        const fromPos = isVertical ? fromRect.top : fromRect.left;
+        const fromExtent = isVertical ? fromRect.height : fromRect.width;
+        const toRect = this._tabIndicatorElement.getBoundingClientRect();
+        const toPos = isVertical ? toRect.top : toRect.left;
+        const toExtent = isVertical ? toRect.height : toRect.width;
+        const axis = isVertical ? 'Y' : 'X';
+        const scale = fromExtent / toExtent;
+        if (!reduceMotion && fromPos !== undefined && toPos !== undefined && !isNaN(scale)) {
+            from.transform = `translate${axis}(${(fromPos - toPos).toFixed(4)}px) scale${axis}(${scale.toFixed(4)})`;
+        }
+        else {
+            from.opacity = 0;
+        }
+        return [from, { transform: 'none' }];
+    }
+    _getSelectedTabIndicator() {
+        const tabsEl = requireParent(this._component, TAB_BAR_CONSTANTS.elementName);
+        if (tabsEl) {
+            const tabChildren = Array.from(tabsEl.querySelectorAll(TAB_CONSTANTS.elementName));
+            const selectedTab = tabChildren.find(tab => tab.hasAttribute(TAB_CONSTANTS.attributes.SELECTED));
+            if (selectedTab) {
+                return getShadowElement(selectedTab, TAB_CONSTANTS.selectors.INDICATOR);
+            }
+        }
+        return null;
     }
 }