@tylertech/forge 2.21.1 → 2.21.2

package/esm/list/list/list-constants.js

@@ -12,11 +12,11 @@ const attributes = {
     INDENTED: 'indented',
     SELECTED_VALUE: 'selected-value'
 };
-const selectors = {
-    FOCUSABLE_LIST_ITEMS: '.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled)'
+const events = {
+    SCOPE_TEST: `${elementName}-item-scope-test`
 };
 export const LIST_CONSTANTS = {
     elementName,
     attributes,
-    selectors
+    events
 };

package/esm/list/list/list-foundation.js

@@ -28,6 +28,12 @@ export class ListFoundation {
         }
     }
     _onKeydown(evt) {
+        const path = evt.composedPath();
+        const composedBeforeUs = path.slice(0, path.indexOf(this._adapter.hostElement));
+        const fromListDescendant = composedBeforeUs.some((el) => el.localName === LIST_CONSTANTS.elementName.toLowerCase());
+        if (fromListDescendant) {
+            return; // We ignore keydown events coming from sub-lists because they are already handling it themselves
+        }
         const isArrowDown = evt.key === 'ArrowDown' || evt.keyCode === 40;
         const isArrowUp = evt.key === 'ArrowUp' || evt.keyCode === 38;
         const isHome = evt.key === 'Home' || evt.keyCode === 36;

package/esm/list/list-item/list-item-adapter.d.ts

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
-import { userInteractionListener } from '../../core/utils';
+import { createUserInteractionListener } from '../../core/utils';
 import { IListItemComponent } from './list-item';
 export interface IListItemAdapter extends IBaseAdapter {
     initializeAccessibility(): void;
@@ -27,7 +27,7 @@ export interface IListItemAdapter extends IBaseAdapter {
     setIndented(indented: boolean): void;
     setWrap(value: boolean): void;
     trySelect(value: unknown): boolean | null;
-    userInteractionListener(): ReturnType<typeof userInteractionListener>;
+    createUserInteractionListener(): ReturnType<typeof createUserInteractionListener>;
 }
 export declare class ListItemAdapter extends BaseAdapter<IListItemComponent> implements IListItemAdapter {
     private _listItemElement;
@@ -105,5 +105,5 @@ export declare class ListItemAdapter extends BaseAdapter<IListItemComponent> imp
      * @returns Returns whether the list item is selected or not
      */
     trySelect(value: unknown): boolean | null;
-    userInteractionListener(): ReturnType<typeof userInteractionListener>;
+    createUserInteractionListener(): ReturnType<typeof createUserInteractionListener>;
 }

package/esm/list/list-item/list-item-adapter.js

@@ -5,7 +5,7 @@
  */
 import { addClass, getShadowElement, removeClass, requireParent, isDeepEqual, toggleClass } from '@tylertech/forge-core';
 import { BaseAdapter } from '../../core/base/base-adapter';
-import { userInteractionListener } from '../../core/utils';
+import { createUserInteractionListener } from '../../core/utils';
 import { LIST_CONSTANTS } from '../list/list-constants';
 import { LIST_ITEM_CONSTANTS } from './list-item-constants';
 import { ForgeRipple } from '../../ripple';
@@ -179,7 +179,7 @@ export class ListItemAdapter extends BaseAdapter {
         this.tryToggleCheckboxRadio(isSelected);
         return isSelected;
     }
-    userInteractionListener() {
-        return userInteractionListener(this._listItemElement);
+    createUserInteractionListener() {
+        return createUserInteractionListener(this._listItemElement);
     }
 }

package/esm/list/list-item/list-item-foundation.d.ts

@@ -43,6 +43,7 @@ export declare class ListItemFoundation implements IListItemFoundation {
     private _clickListener;
     private _mouseDownListener;
     private _keydownListener;
+    private _destroyUserInteractionListener;
     constructor(_adapter: IListItemAdapter);
     initialize(): void;
     disconnect(): void;

package/esm/list/list-item/list-item-foundation.js

@@ -55,6 +55,10 @@ export class ListItemFoundation {
             this._rippleInstance.destroy();
             this._rippleInstance = undefined;
         }
+        if (typeof this._destroyUserInteractionListener === 'function') {
+            this._destroyUserInteractionListener();
+            this._destroyUserInteractionListener = undefined;
+        }
     }
     _onMouseDown(evt) {
         if (this._adapter.hasFocus() || !this._propagateClick) {
@@ -295,8 +299,14 @@ export class ListItemFoundation {
     }
     async _setRipple() {
         if (this._ripple && !this._static && !this._rippleInstance) {
-            const type = await this._adapter.userInteractionListener();
-            if (this._ripple && !this._static && !this._rippleInstance) { // need to re-check after await
+            const { userInteraction, destroy } = await this._adapter.createUserInteractionListener();
+            this._destroyUserInteractionListener = destroy;
+            const { type } = await userInteraction;
+            this._destroyUserInteractionListener = undefined;
+            if (!this._adapter.isConnected) {
+                return;
+            }
+            if (this._ripple && !this._static && !this._rippleInstance) {
                 this._rippleInstance = this._adapter.createRipple();
                 if (type === 'focusin') {
                     this._rippleInstance.handleFocus();

package/esm/menu/menu-foundation.js

@@ -295,6 +295,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
             if (this._open) {
                 if (results && isArray(results) && results.length) {
                     this._options = results;
+                    this._mapIconToLeadingIcon();
                     this._adapter.setOptions(results);
                     const selectedValues = this._getSelectedValues();
                     if (selectedValues.length) {

package/esm/menu/menu.d.ts

@@ -73,7 +73,10 @@ export declare class MenuComponent extends ListDropdownAware implements IMenuCom
     popupOffset: IPopupPosition;
     /** Sets the callback that will be executed for each option in the dropdown for producing custom option templates. */
     optionBuilder: MenuOptionBuilder;
-    /** Gets the currently active popup element when the dropdown is open. */
+    /**
+     * Gets the currently active popup element when the dropdown is open.
+     * @readonly
+     */
     popupElement: HTMLElement | undefined;
     /** Force propagates the key event from another element this component. */
     propagateKeyEvent(evt: KeyboardEvent): void;

package/esm/open-icon/open-icon.js

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { CustomElement, attachShadowTemplate, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
-import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
+import { tylIconKeyboardArrowRight, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
 import { OpenIconFoundation } from './open-icon-foundation';
 import { OpenIconAdapter } from './open-icon-adapter';
 import { OPEN_ICON_CONSTANTS } from './open-icon-constants';
@@ -21,7 +21,7 @@ const styles = '.forge-open-icon{color:#757575;color:var(--forge-theme-icon-colo
 let OpenIconComponent = class OpenIconComponent extends BaseComponent {
     constructor() {
         super();
-        IconRegistry.define([tylIconKeyboardArrowLeft, tylIconKeyboardArrowDown]);
+        IconRegistry.define([tylIconKeyboardArrowRight, tylIconKeyboardArrowDown]);
         attachShadowTemplate(this, template, styles);
         this._foundation = new OpenIconFoundation(new OpenIconAdapter(this));
     }

package/esm/paginator/paginator-adapter.d.ts

@@ -43,7 +43,9 @@ export interface IPaginatorAdapter extends IBaseAdapter {
     setAlternative(alternative: boolean): void;
     setAlignment(alignment: PaginatorAlternativeAlignment): void;
     hasFocus(): boolean;
-    handleFocusMove(from?: PaginatorFieldIdentifier | null, options?: FocusOptions): void;
+    setFocus(options?: FocusOptions): void;
+    getFocusedField(): PaginatorFieldIdentifier | null;
+    tryDisableFields(fieldsToDisable: PaginatorFieldIdentifier[]): void;
 }
 /**
  * Provides facilities for interacting with the internal DOM of `PaginatorComponent`.
@@ -97,6 +99,8 @@ export declare class PaginatorAdapter extends BaseAdapter<IPaginatorComponent> i
     setAlternative(alternative: boolean): void;
     setAlignment(alignment: PaginatorAlternativeAlignment): void;
     hasFocus(): boolean;
-    handleFocusMove(from?: PaginatorFieldIdentifier, options?: FocusOptions): void;
+    setFocus(options?: FocusOptions): void;
+    getFocusedField(): PaginatorFieldIdentifier | null;
+    tryDisableFields(fieldsToDisable: PaginatorFieldIdentifier[]): void;
     private _tryFocus;
 }

package/esm/paginator/paginator-adapter.js

@@ -149,66 +149,46 @@ export class PaginatorAdapter extends BaseAdapter {
     hasFocus() {
         return this._component.matches(':focus');
     }
-    handleFocusMove(from, options) {
-        if (from && !this.hasFocus()) {
-            return; // We can only move focus elsewhere within the element if the element already contains focus
+    setFocus(options) {
+        this._tryFocus([
+            this._pageSizeSelect,
+            this._firstPageButton,
+            this._previousPageButton,
+            this._nextPageButton,
+            this._lastPageButton
+        ], options);
+    }
+    getFocusedField() {
+        if (this._pageSizeSelect.matches(':focus-within')) {
+            return 'page-size';
         }
-        switch (from) {
-            case 'first':
-                this._tryFocus([
-                    this._nextPageButton,
-                    this._lastPageButton,
-                    this._previousPageButton,
-                    this._pageSizeSelect
-                ], options);
-                break;
-            case 'last':
-                this._tryFocus([
-                    this._previousPageButton,
-                    this._firstPageButton,
-                    this._nextPageButton,
-                    this._pageSizeSelect
-                ], options);
-                break;
-            case 'previous':
-                this._tryFocus([
-                    this._nextPageButton,
-                    this._lastPageButton,
-                    this._firstPageButton,
-                    this._pageSizeSelect
-                ]);
-                break;
-            case 'next':
-                this._tryFocus([
-                    this._previousPageButton,
-                    this._firstPageButton,
-                    this._lastPageButton,
-                    this._pageSizeSelect
-                ], options);
-                break;
-            case 'page-size':
-                this._tryFocus([
-                    this._nextPageButton,
-                    this._lastPageButton,
-                    this._firstPageButton,
-                    this._previousPageButton
-                ], options);
-                break;
-            default:
-                this._tryFocus([
-                    this._firstPageButton,
-                    this._previousPageButton,
-                    this._nextPageButton,
-                    this._lastPageButton,
-                    this._pageSizeSelect
-                ], options);
-                break;
+        else if (this._firstPageButton.matches(':focus-within')) {
+            return 'first';
+        }
+        else if (this._previousPageButton.matches(':focus-within')) {
+            return 'previous';
+        }
+        else if (this._nextPageButton.matches(':focus-within')) {
+            return 'next';
         }
+        else if (this._lastPageButton.matches(':focus-within')) {
+            return 'last';
+        }
+        return null;
+    }
+    tryDisableFields(fieldsToDisable) {
+        const fieldDisablers = {
+            'first': () => this.disableFirstPageButton(),
+            'last': () => this.disableLastPageButton(),
+            'previous': () => this.disablePreviousPageButton(),
+            'next': () => this.disableNextPageButton()
+        };
+        fieldsToDisable.forEach(field => { var _a; return (_a = fieldDisablers[field]) === null || _a === void 0 ? void 0 : _a.call(fieldDisablers); });
     }
     _tryFocus(elements, options) {
         const preventScroll = typeof (options === null || options === void 0 ? void 0 : options.preventScroll) === 'boolean' ? options.preventScroll : true;
         for (const el of elements) {
-            if (el && el.isConnected && !el.disabled) {
+            if (el && el.isConnected && !el.disabled && el.style.display !== 'none') {
                 el.focus(Object.assign(Object.assign({}, options), { preventScroll }));
                 return;
             }

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

@@ -47,7 +47,7 @@ export declare const PAGINATOR_CONSTANTS: {
         ALIGNMENT: string;
     };
     events: {
-        CHANGE: string;
+        readonly CHANGE: "forge-paginator-change";
     };
     numbers: {
         DEFAULT_PAGE_INDEX: number;

package/esm/paginator/paginator-foundation.js

@@ -37,7 +37,7 @@ export class PaginatorFoundation {
         this._detachListeners();
     }
     focus(options) {
-        this._adapter.handleFocusMove(null, options);
+        this._adapter.setFocus(options);
     }
     _attachListeners() {
         this._adapter.attachPageSizeChangeListener(this._pageSizeListener);
@@ -149,30 +149,20 @@ export class PaginatorFoundation {
         this._adapter.enablePreviousPageButton();
         this._adapter.enableNextPageButton();
         this._adapter.enableLastPageButton();
+        const fieldsToDisable = [];
         if (!this._hasFirstPage()) {
-            if (this._adapter.hasFocus()) {
-                this._adapter.handleFocusMove('first');
-            }
-            this._adapter.disableFirstPageButton();
+            fieldsToDisable.push('first');
         }
         if (!this._hasPreviousPage()) {
-            if (this._adapter.hasFocus()) {
-                this._adapter.handleFocusMove('previous');
-            }
-            this._adapter.disablePreviousPageButton();
+            fieldsToDisable.push('previous');
         }
         if (!this._hasNextPage()) {
-            if (this._adapter.hasFocus()) {
-                this._adapter.handleFocusMove('next');
-            }
-            this._adapter.disableNextPageButton();
+            fieldsToDisable.push('next');
         }
         if (!this._hasLastPage()) {
-            if (this._adapter.hasFocus()) {
-                this._adapter.handleFocusMove('last');
-            }
-            this._adapter.disableLastPageButton();
+            fieldsToDisable.push('last');
         }
+        this._adapter.tryDisableFields(fieldsToDisable);
     }
     _toggleFirstLastButtons() {
         this._toggleFirstButton();

package/esm/radio/radio-adapter.d.ts

@@ -33,6 +33,7 @@ export declare class RadioAdapter implements IRadioAdapter, ForgeRippleCapableSu
     private _nativeInputElement;
     private _inputAttributeMutationObserver?;
     private _rippleInstance;
+    private _destroyUserInteractionListener;
     constructor(_component: IRadioComponent);
     get root(): Element;
     get unbounded(): boolean | undefined;

package/esm/radio/radio-adapter.js

@@ -6,7 +6,7 @@
 import { addClass, getShadowElement, removeClass, getActiveElement } from '@tylertech/forge-core';
 import { RADIO_CONSTANTS } from './radio-constants';
 import { ForgeRipple, ForgeRippleFoundation } from '../ripple';
-import { userInteractionListener } from '../core/utils';
+import { createUserInteractionListener } from '../core/utils';
 export class RadioAdapter {
     constructor(_component) {
         this._component = _component;
@@ -30,16 +30,27 @@ export class RadioAdapter {
         }
     }
     async deferRippleInitialization() {
-        const type = await userInteractionListener(this._rootElement);
-        if (!this._rippleInstance) {
-            this._rippleInstance = this._createRipple();
-            if (type === 'focusin') {
-                this._rippleInstance.handleFocus();
-            }
+        if (typeof this._destroyUserInteractionListener === 'function') {
+            this._destroyUserInteractionListener();
+        }
+        const { userInteraction, destroy } = createUserInteractionListener(this._rootElement);
+        this._destroyUserInteractionListener = destroy;
+        const { type } = await userInteraction;
+        this._destroyUserInteractionListener = undefined;
+        if (!this._component.isConnected) {
+            return;
+        }
+        this._rippleInstance = this._createRipple();
+        if (type === 'focusin') {
+            this._rippleInstance.handleFocus();
         }
     }
     destroyRipple() {
         var _a;
+        if (typeof this._destroyUserInteractionListener === 'function') {
+            this._destroyUserInteractionListener();
+            this._destroyUserInteractionListener = undefined;
+        }
         (_a = this._rippleInstance) === null || _a === void 0 ? void 0 : _a.destroy();
         this._rippleInstance = undefined;
     }

package/esm/ripple/forge-ripple.d.ts

@@ -7,6 +7,8 @@ import { MDCRipple, type MDCRippleAdapter, MDCRippleFoundation, type MDCRippleCa
 export declare class ForgeRipple extends MDCRipple {
     /** Manually trigger focus activation. */
     handleFocus(): void;
+    /** Manually trigger blur activation */
+    handleBlur(): void;
     /** Executes the ripple animation. */
     animate(): void;
 }

package/esm/ripple/forge-ripple.js

@@ -9,6 +9,10 @@ export class ForgeRipple extends MDCRipple {
     handleFocus() {
         this.foundation.handleFocus();
     }
+    /** Manually trigger blur activation */
+    handleBlur() {
+        this.foundation.handleBlur();
+    }
     /** Executes the ripple animation. */
     animate() {
         this.foundation.animateActivation(); // MDC does not expose this method, using `any` to access it.

package/esm/select/core/base-select.d.ts

@@ -40,7 +40,10 @@ export declare abstract class BaseSelectComponent<T extends IBaseSelectFoundatio
     selectedTextBuilder: SelectSelectedTextBuilder;
     /** Sets the callback to be executed when the user selects a value. */
     beforeValueChange: SelectBeforeValueChangeCallback<any>;
-    /** Gets the popup element (when the dropdown is open). */
+    /**
+     * Gets the popup element (when the dropdown is open).
+     * @readonly
+     */
     popupElement: IPopupComponent | undefined;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     appendOptions(options: ISelectOption[] | ISelectOptionGroup[]): void;

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

@@ -14,7 +14,7 @@ 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:uutjpx6;animation-name:uutjpx6;-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 uutjpx6{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uutjpx6{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:uutjpxb;animation-name:uutjpxb;-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 uutjpxb{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uutjpxb{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:uutjpxp;animation-name:uutjpxp;-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 uutjpxp{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uutjpxp{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:uutjpyk;animation-name:uutjpyk;-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 uutjpyk{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uutjpyk{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:uutjpyl;animation-name:uutjpyl;-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 uutjpyl{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uutjpyl{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:uutjpzl;animation-name:uutjpzl;-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 uutjpzl{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uutjpzl{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:uutjpzq;animation-name:uutjpzq;-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 uutjpzq{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uutjpzq{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:uutjq0i;animation-name:uutjq0i;-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 uutjq0i{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uutjq0i{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:u7xut8q;animation-name:u7xut8q;-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 u7xut8q{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes u7xut8q{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:u7xut8x;animation-name:u7xut8x;-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 u7xut8x{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes u7xut8x{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:u7xut9f;animation-name:u7xut9f;-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 u7xut9f{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes u7xut9f{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:u7xutaa;animation-name:u7xutaa;-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 u7xutaa{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes u7xutaa{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:u7xutav;animation-name:u7xutav;-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 u7xutav{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes u7xutav{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:u7xutbo;animation-name:u7xutbo;-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 u7xutbo{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes u7xutbo{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:u7xutbu;animation-name:u7xutbu;-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 u7xutbu{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes u7xutbu{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:u7xutcm;animation-name:u7xutcm;-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 u7xutcm{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes u7xutcm{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.
  *

package/esm/switch/switch.js

@@ -9,9 +9,9 @@ import { MDCSwitch } from '@material/switch';
 import { MDCRipple } from '@material/ripple';
 import { SWITCH_CONSTANTS } from './switch-constants';
 import { BaseComponent } from '../core/base/base-component';
+import { createUserInteractionListener } from '../core/utils';
 const template = '<template><div class=\"forge-switch__container\" part=\"root\"><button id=\"switch-btn\" class=\"mdc-switch\" type=\"button\" role=\"switch\" aria-checked=\"false\" aria-labelledby=\"switch-label\" part=\"button\"><div class=\"mdc-switch__track\" part=\"track\"></div><div class=\"mdc-switch__handle-track\" part=\"handle-track\"><div class=\"mdc-switch__handle\" part=\"handle\"><div class=\"mdc-switch__shadow\" part=\"shadow\"><div class=\"mdc-elevation-overlay\" part=\"overlay\"></div></div><div class=\"mdc-switch__ripple\" part=\"ripple\"></div><div class=\"mdc-switch__icons\" part=\"icons\"><svg class=\"mdc-switch__icon mdc-switch__icon--on\" viewBox=\"0 0 24 24\" part=\"icon-on\"><path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" part=\"icon-on-path\"/></svg> <svg class=\"mdc-switch__icon mdc-switch__icon--off\" viewBox=\"0 0 24 24\" part=\"icon-off\"><path d=\"M20 13H4v-2h16v2z\" part=\"icon-off-path\"/></svg></div></div></div></button> <label id=\"switch-label\" class=\"forge-switch__label\" for=\"switch-btn\" part=\"label\"><slot></slot></label></div></template>';
 const styles = '.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);-webkit-transition:opacity 280ms cubic-bezier(.4, 0, .2, 1);transition:opacity 280ms cubic-bezier(.4, 0, .2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color,#fff)}.mdc-switch{-webkit-box-align:center;align-items:center;background:0 0;border:none;display:-webkit-inline-box;display:inline-flex;flex-shrink:0;margin:0;outline:0;overflow:visible;padding:0;position:relative}.mdc-switch__track{overflow:hidden;position:relative;width:100%}.mdc-switch__track::after,.mdc-switch__track::before{border:1px solid transparent;border-radius:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;width:100%}.mdc-switch__track::before{-webkit-transition:-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);-webkit-transform:translateX(0);transform:translateX(0)}.mdc-switch__track::after{-webkit-transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.mdc-switch__track[dir=rtl]::after,[dir=rtl] .mdc-switch__track::after{-webkit-transform:translateX(100%);transform:translateX(100%)}.mdc-switch--selected .mdc-switch__track::before{-webkit-transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);-webkit-transform:translateX(100%);transform:translateX(100%)}.mdc-switch--selected .mdc-switch__track[dir=rtl]::before,[dir=rtl] .mdc-switch--selected .mdc-switch__track::before{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.mdc-switch--selected .mdc-switch__track::after{-webkit-transition:-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);-webkit-transform:translateX(0);transform:translateX(0)}.mdc-switch__handle-track{height:100%;pointer-events:none;position:absolute;top:0;-webkit-transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .2, 1);transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .2, 1),-webkit-transform 75ms 0s cubic-bezier(.4, 0, .2, 1);left:0;right:auto;-webkit-transform:translateX(0);transform:translateX(0)}.mdc-switch__handle-track[dir=rtl],[dir=rtl] .mdc-switch__handle-track{left:auto;right:0}.mdc-switch--selected .mdc-switch__handle-track{-webkit-transform:translateX(100%);transform:translateX(100%)}.mdc-switch--selected .mdc-switch__handle-track[dir=rtl],[dir=rtl] .mdc-switch--selected .mdc-switch__handle-track{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.mdc-switch__handle{display:-webkit-box;display:flex;pointer-events:auto;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:0;right:auto}.mdc-switch__handle[dir=rtl],[dir=rtl] .mdc-switch__handle{left:auto;right:0}.mdc-switch__handle::after,.mdc-switch__handle::before{border:1px solid transparent;border-radius:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;content:\"\";width:100%;height:100%;left:0;position:absolute;top:0;-webkit-transition:background-color 75ms 0s cubic-bezier(.4, 0, .2, 1),border-color 75ms 0s cubic-bezier(.4, 0, .2, 1);transition:background-color 75ms 0s cubic-bezier(.4, 0, .2, 1),border-color 75ms 0s cubic-bezier(.4, 0, .2, 1);z-index:-1}.mdc-switch__shadow{border-radius:inherit;bottom:0;left:0;position:absolute;right:0;top:0}.mdc-elevation-overlay{bottom:0;left:0;right:0;top:0}.mdc-switch__ripple{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:-1}.mdc-switch:disabled .mdc-switch__ripple{display:none}.mdc-switch__icons{height:100%;position:relative;width:100%;z-index:1}.mdc-switch__icon{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0;opacity:0;-webkit-transition:opacity 30ms 0s cubic-bezier(.4, 0, 1, 1);transition:opacity 30ms 0s cubic-bezier(.4, 0, 1, 1)}.mdc-switch--selected .mdc-switch__icon--on,.mdc-switch--unselected .mdc-switch__icon--off{opacity:1;-webkit-transition:opacity 45ms 30ms cubic-bezier(0, 0, .2, 1);transition:opacity 45ms 30ms cubic-bezier(0, 0, .2, 1)}.mdc-switch{--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}@-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-switch .mdc-switch__ripple::after,.mdc-switch .mdc-switch__ripple::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-switch .mdc-switch__ripple::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-switch .mdc-switch__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-switch.mdc-ripple-upgraded--unbounded .mdc-switch__ripple::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-switch.mdc-ripple-upgraded--foreground-activation .mdc-switch__ripple::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-switch.mdc-ripple-upgraded--foreground-deactivation .mdc-switch__ripple::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-switch .mdc-switch__ripple::after,.mdc-switch .mdc-switch__ripple::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after,.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::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-switch.mdc-ripple-upgraded .mdc-switch__ripple::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-switch{width:36px;width:var(--mdc-switch-track-width,36px)}.mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after{background:#3d5afe;background:var(--mdc-switch-selected-handle-color,#3d5afe)}.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after{background:#3d477f;background:var(--mdc-switch-selected-hover-handle-color,#3d477f)}.mdc-switch.mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle::after{background:#3d477f;background:var(--mdc-switch-selected-focus-handle-color,#3d477f)}.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__handle::after{background:#3d477f;background:var(--mdc-switch-selected-pressed-handle-color,#3d477f)}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle::after{background:#3d5afe;background:var(--mdc-switch-disabled-selected-handle-color,#3d5afe)}.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after{background:#9e9e9e;background:var(--mdc-switch-unselected-handle-color,#9e9e9e)}.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after{background:#212121;background:var(--mdc-switch-unselected-hover-handle-color,#212121)}.mdc-switch.mdc-switch--unselected:enabled:focus:not(:active) .mdc-switch__handle::after{background:#212121;background:var(--mdc-switch-unselected-focus-handle-color,#212121)}.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__handle::after{background:#212121;background:var(--mdc-switch-unselected-pressed-handle-color,#212121)}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle::after{background:#424242;background:var(--mdc-switch-disabled-unselected-handle-color,#424242)}.mdc-switch .mdc-switch__handle::before{background:#fff;background:var(--mdc-switch-handle-surface-color,var(--mdc-theme-surface,#fff))}.mdc-switch:enabled .mdc-switch__shadow{--mdc-elevation-box-shadow-for-gss:0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);-webkit-box-shadow:var(--mdc-switch-handle-elevation,var(--mdc-elevation-box-shadow-for-gss));box-shadow:var(--mdc-switch-handle-elevation,var(--mdc-elevation-box-shadow-for-gss))}.mdc-switch:disabled .mdc-switch__shadow{--mdc-elevation-box-shadow-for-gss:0px 0px 0px 0px rgba(0, 0, 0, 0.2),0px 0px 0px 0px rgba(0, 0, 0, 0.14),0px 0px 0px 0px rgba(0, 0, 0, 0.12);-webkit-box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);-webkit-box-shadow:var(--mdc-switch-disabled-handle-elevation,var(--mdc-elevation-box-shadow-for-gss));box-shadow:var(--mdc-switch-disabled-handle-elevation,var(--mdc-elevation-box-shadow-for-gss))}.mdc-switch .mdc-switch__handle{height:20px;height:var(--mdc-switch-handle-height,20px)}.mdc-switch:disabled .mdc-switch__handle::after{opacity:.24;opacity:var(--mdc-switch-disabled-handle-opacity, .24)}.mdc-switch .mdc-switch__handle{border-radius:10px;border-radius:var(--mdc-switch-handle-shape,10px)}.mdc-switch .mdc-switch__handle{width:20px;width:var(--mdc-switch-handle-width,20px)}.mdc-switch .mdc-switch__handle-track{width:calc(100% - 20px);width:calc(100% - var(--mdc-switch-handle-width,20px))}.mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon{fill:#ffffff;fill:var(--mdc-switch-selected-icon-color,var(--mdc-theme-on-primary,#ffffff))}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icon{fill:#ffffff;fill:var(--mdc-switch-disabled-selected-icon-color,var(--mdc-theme-on-primary,#ffffff))}.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon{fill:#ffffff;fill:var(--mdc-switch-unselected-icon-color,var(--mdc-theme-on-primary,#ffffff))}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icon{fill:#ffffff;fill:var(--mdc-switch-disabled-unselected-icon-color,var(--mdc-theme-on-primary,#ffffff))}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons{opacity:.54;opacity:var(--mdc-switch-disabled-selected-icon-opacity, .54)}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:.54;opacity:var(--mdc-switch-disabled-unselected-icon-opacity, .54)}.mdc-switch.mdc-switch--selected .mdc-switch__icon{width:18px;width:var(--mdc-switch-selected-icon-size,18px);height:18px;height:var(--mdc-switch-selected-icon-size,18px)}.mdc-switch.mdc-switch--unselected .mdc-switch__icon{width:18px;width:var(--mdc-switch-unselected-icon-size,18px);height:18px;height:var(--mdc-switch-unselected-icon-size,18px)}.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::after,.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::before{background-color:#3d5afe;background-color:var(--mdc-switch-selected-hover-state-layer-color,#3d5afe)}.mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::after,.mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::before{background-color:#3d5afe;background-color:var(--mdc-switch-selected-focus-state-layer-color,#3d5afe)}.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::after,.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::before{background-color:#3d5afe;background-color:var(--mdc-switch-selected-pressed-state-layer-color,#3d5afe)}.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::after,.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::before{background-color:#424242;background-color:var(--mdc-switch-unselected-hover-state-layer-color,#424242)}.mdc-switch.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::after,.mdc-switch.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::before{background-color:#424242;background-color:var(--mdc-switch-unselected-focus-state-layer-color,#424242)}.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__ripple::after,.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__ripple::before{background-color:#424242;background-color:var(--mdc-switch-unselected-pressed-state-layer-color,#424242)}.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus).mdc-ripple-surface--hover .mdc-switch__ripple::before,.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):hover .mdc-switch__ripple::before{opacity:.04;opacity:var(--mdc-switch-selected-hover-state-layer-opacity, .04)}.mdc-switch.mdc-switch--selected:enabled:focus.mdc-ripple-upgraded--background-focused .mdc-switch__ripple::before,.mdc-switch.mdc-switch--selected:enabled:focus:not(.mdc-ripple-upgraded):focus .mdc-switch__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-switch-selected-focus-state-layer-opacity, .12)}.mdc-switch.mdc-switch--selected:enabled:active:not(.mdc-ripple-upgraded) .mdc-switch__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-switch.mdc-switch--selected:enabled:active:not(.mdc-ripple-upgraded):active .mdc-switch__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.1;opacity:var(--mdc-switch-selected-pressed-state-layer-opacity, .1)}.mdc-switch.mdc-switch--selected:enabled:active.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-switch-selected-pressed-state-layer-opacity, 0.1)}.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus).mdc-ripple-surface--hover .mdc-switch__ripple::before,.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):hover .mdc-switch__ripple::before{opacity:.04;opacity:var(--mdc-switch-unselected-hover-state-layer-opacity, .04)}.mdc-switch.mdc-switch--unselected:enabled:focus.mdc-ripple-upgraded--background-focused .mdc-switch__ripple::before,.mdc-switch.mdc-switch--unselected:enabled:focus:not(.mdc-ripple-upgraded):focus .mdc-switch__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-switch-unselected-focus-state-layer-opacity, .12)}.mdc-switch.mdc-switch--unselected:enabled:active:not(.mdc-ripple-upgraded) .mdc-switch__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-switch.mdc-switch--unselected:enabled:active:not(.mdc-ripple-upgraded):active .mdc-switch__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.1;opacity:var(--mdc-switch-unselected-pressed-state-layer-opacity, .1)}.mdc-switch.mdc-switch--unselected:enabled:active.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-switch-unselected-pressed-state-layer-opacity, 0.1)}.mdc-switch .mdc-switch__ripple{height:48px;height:var(--mdc-switch-state-layer-size,48px);width:48px;width:var(--mdc-switch-state-layer-size,48px)}.mdc-switch .mdc-switch__track{height:14px;height:var(--mdc-switch-track-height,14px)}.mdc-switch:disabled .mdc-switch__track{opacity:.12;opacity:var(--mdc-switch-disabled-track-opacity, .12)}.mdc-switch:enabled .mdc-switch__track::after{background:#cfd6ff;background:var(--mdc-switch-selected-track-color,#cfd6ff)}.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::after{background:#cfd6ff;background:var(--mdc-switch-selected-hover-track-color,#cfd6ff)}.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::after{background:#cfd6ff;background:var(--mdc-switch-selected-focus-track-color,#cfd6ff)}.mdc-switch:enabled:active .mdc-switch__track::after{background:#cfd6ff;background:var(--mdc-switch-selected-pressed-track-color,#cfd6ff)}.mdc-switch:disabled .mdc-switch__track::after{background:#3d5afe;background:var(--mdc-switch-disabled-selected-track-color,#3d5afe)}.mdc-switch:enabled .mdc-switch__track::before{background:#e0e0e0;background:var(--mdc-switch-unselected-track-color,#e0e0e0)}.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::before{background:#e0e0e0;background:var(--mdc-switch-unselected-hover-track-color,#e0e0e0)}.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::before{background:#e0e0e0;background:var(--mdc-switch-unselected-focus-track-color,#e0e0e0)}.mdc-switch:enabled:active .mdc-switch__track::before{background:#e0e0e0;background:var(--mdc-switch-unselected-pressed-track-color,#e0e0e0)}.mdc-switch:disabled .mdc-switch__track::before{background:#424242;background:var(--mdc-switch-disabled-unselected-track-color,#424242)}.mdc-switch .mdc-switch__track{border-radius:7px;border-radius:var(--mdc-switch-track-shape,7px)}@media screen and (forced-colors:active),(-ms-high-contrast:active){.mdc-switch:disabled .mdc-switch__handle::after{opacity:1;opacity:var(--mdc-switch-disabled-handle-opacity, 1)}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icon{fill:GrayText;fill:var(--mdc-switch-disabled-selected-icon-color,GrayText)}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icon{fill:GrayText;fill:var(--mdc-switch-disabled-unselected-icon-color,GrayText)}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons{opacity:1;opacity:var(--mdc-switch-disabled-selected-icon-opacity, 1)}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:1;opacity:var(--mdc-switch-disabled-unselected-icon-opacity, 1)}.mdc-switch:disabled .mdc-switch__track{opacity:1;opacity:var(--mdc-switch-disabled-track-opacity, 1)}}.forge-form-field{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;vertical-align:middle}.forge-form-field>label{-webkit-box-ordinal-group:1;order:0;margin-right:auto;padding-left:4px}.forge-form-field forge-switch~label{padding-left:8px}.forge-form-field--align-end>label{-webkit-box-ordinal-group:0;order:-1;margin-left:auto;padding-right:4px}.forge-switch__container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.forge-switch__container.forge-switch--label-position-start{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-flow:row-reverse}.forge-switch__container.forge-switch--label-position-start .forge-switch__label{margin-left:auto;padding-right:8px}:host{display:inline-block}:host *{cursor:pointer}:host .forge-switch__label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);padding-left:8px}:host([hidden]){display:none}:host([dense]) .mdc-switch__ripple{height:28px;width:28px}:host([disabled]) *{cursor:not-allowed}:host([disabled]) .forge-switch__label{color:rgba(0,0,0,.38);color:var(--forge-theme-label-disabled-on-background,rgba(0,0,0,.38))}';
-import { userInteractionListener } from '../core/utils';
 class ForgeMDCSwitch extends MDCSwitch {
     initialize() {
         // Do not call super.initialize()
@@ -20,6 +20,10 @@ class ForgeMDCSwitch extends MDCSwitch {
     }
     destroy() {
         var _a;
+        if (typeof this._destroyUserInteractionListener === 'function') {
+            this._destroyUserInteractionListener();
+            this._destroyUserInteractionListener = undefined;
+        }
         // We are not calling super.destroy() because it expects `ripple` to be set when it might not be yet
         // We instead just replicate all existing functionality, but allow for `ripple` to be undefined
         this.foundation.destroy();
@@ -27,7 +31,16 @@ class ForgeMDCSwitch extends MDCSwitch {
         this.root.removeEventListener('click', this.foundation.handleClick);
     }
     async _deferRippleInitialization() {
-        const type = await userInteractionListener(this.root);
+        if (typeof this._destroyUserInteractionListener === 'function') {
+            this._destroyUserInteractionListener();
+        }
+        const { userInteraction, destroy } = createUserInteractionListener(this.root);
+        this._destroyUserInteractionListener = destroy;
+        const { type } = await userInteraction;
+        this._destroyUserInteractionListener = undefined;
+        if (!this.root.isConnected) {
+            return;
+        }
         this.ripple = new MDCRipple(this.root, this.createRippleFoundation());
         if (type === 'focusin') {
             // eslint-disable-next-line @typescript-eslint/dot-notation

package/esm/tooltip/tooltip.d.ts

@@ -45,6 +45,7 @@ export declare class TooltipComponent extends BaseComponent implements ITooltipC
     position: `${PopupPlacement}`;
     /** Gets the open state of the tooltip. */
     open: boolean;
+    /** @readonly */
     tooltipElement: HTMLElement | null;
     /** Hides the tooltip if it's open. */
     hide(): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "2.21.1",
+  "version": "2.21.2",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,8 +17,8 @@
     "@material/button": "^14.0.0",
     "@material/card": "^14.0.0",
     "@material/checkbox": "^14.0.0",
-    "@material/circular-progress": "^14.0.0",
     "@material/chips": "^14.0.0",
+    "@material/circular-progress": "^14.0.0",
     "@material/density": "^14.0.0",
     "@material/dom": "^14.0.0",
     "@material/drawer": "^14.0.0",