@tylertech/forge 3.0.0-next.12 → 3.0.0-next.14

package/esm/split-button/split-button-adapter.js

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BUTTON_CONSTANTS } from '../button';
+import { BaseAdapter } from '../core/base/base-adapter';
+export class SplitButtonAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+    }
+    startButtonObserver() {
+        // This observer is used to keep the buttons in sync with the split button state when they are added to DOM
+        this._buttonChangeObserver = new MutationObserver(mutations => {
+            // Find all `<forge-button>` elements that are contained within the added nodes
+            const addedButtons = mutations.reduce((buttons, { addedNodes }) => {
+                const addedButtonNodes = Array.from(addedNodes)
+                    .filter(node => node.nodeType === Node.ELEMENT_NODE)
+                    .map((node) => {
+                    if (node.nodeName.toLowerCase() === BUTTON_CONSTANTS.elementName) {
+                        return node;
+                    }
+                    return node.querySelector(BUTTON_CONSTANTS.elementName);
+                })
+                    .filter(node => !!node);
+                return buttons.concat(addedButtonNodes);
+            }, []);
+            if (!addedButtons.length) {
+                return;
+            }
+            addedButtons.forEach(button => {
+                button.variant = this._component.variant;
+                button.theme = this._component.theme;
+                button.disabled = this._component.disabled;
+                button.dense = this._component.dense;
+            });
+            this.setPill(this._component.pill);
+        });
+        this._buttonChangeObserver.observe(this._component, { childList: true, subtree: true });
+    }
+    destroyButtonObserver() {
+        var _a;
+        (_a = this._buttonChangeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._buttonChangeObserver = undefined;
+    }
+    setVariant(variant) {
+        const buttons = this._getButtons();
+        buttons.forEach(button => button.variant = variant);
+    }
+    setTheme(theme) {
+        const buttons = this._getButtons();
+        buttons.forEach(button => button.theme = theme);
+    }
+    setDisabled(value) {
+        const buttons = this._getButtons();
+        buttons.forEach(button => button.disabled = value);
+    }
+    setDense(value) {
+        const buttons = this._getButtons();
+        buttons.forEach(button => button.dense = value);
+    }
+    setPill(value) {
+        const buttons = this._getButtons();
+        // First we reset all the middle buttons to not be pill buttons
+        if (buttons.length > 2) {
+            Array.from(buttons)
+                .slice(1, buttons.length - 1)
+                .filter(({ pill }) => pill)
+                .forEach(button => button.pill = false);
+        }
+        // Only the first and last buttons need to be pill shaped
+        const firstButton = buttons[0];
+        if (firstButton) {
+            firstButton.pill = value;
+        }
+        const lastButton = buttons[buttons.length - 1];
+        if (lastButton) {
+            lastButton.pill = value;
+        }
+    }
+    _getButtons() {
+        return this._component.querySelectorAll(BUTTON_CONSTANTS.elementName);
+    }
+}

package/esm/split-button/split-button-constants.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ButtonVariant } from '../button';
+export declare const SPLIT_BUTTON_CONSTANTS: {
+    elementName: "forge-split-button";
+    attributes: {
+        VARIANT: string;
+        THEME: string;
+        DISABLED: string;
+        DENSE: string;
+        PILL: string;
+    };
+    defaults: {
+        DEFAULT_VARIANT: SplitButtonVariant;
+        DEFAULT_THEME: import("../constants").Theme;
+    };
+};
+export type SplitButtonVariant = Extract<ButtonVariant, 'text' | 'outlined' | 'tonal' | 'filled' | 'raised'>;

package/esm/split-button/split-button-constants.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}split-button`;
+const attributes = {
+    VARIANT: 'variant',
+    THEME: 'theme',
+    DISABLED: 'disabled',
+    DENSE: 'dense',
+    PILL: 'pill'
+};
+const defaults = {
+    DEFAULT_VARIANT: 'text',
+    DEFAULT_THEME: 'primary'
+};
+export const SPLIT_BUTTON_CONSTANTS = {
+    elementName,
+    attributes,
+    defaults
+};

package/esm/split-button/split-button-foundation.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { ButtonTheme } from '../button/button-constants';
+import { ISplitButtonAdapter } from './split-button-adapter';
+import { SplitButtonVariant } from './split-button-constants';
+export interface ISplitButtonFoundation extends ICustomElementFoundation {
+    variant: SplitButtonVariant;
+    theme: ButtonTheme;
+    disabled: boolean;
+    dense: boolean;
+    pill: boolean;
+}
+export declare class SplitButtonFoundation implements ISplitButtonFoundation {
+    private readonly _adapter;
+    private _variant;
+    _theme: ButtonTheme;
+    private _disabled;
+    private _dense;
+    private _pill;
+    constructor(_adapter: ISplitButtonAdapter);
+    initialize(): void;
+    destroy(): void;
+    get variant(): SplitButtonVariant;
+    set variant(value: SplitButtonVariant);
+    get theme(): ButtonTheme;
+    set theme(value: ButtonTheme);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get dense(): boolean;
+    set dense(value: boolean);
+    get pill(): boolean;
+    set pill(value: boolean);
+}

package/esm/split-button/split-button-foundation.js

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { SPLIT_BUTTON_CONSTANTS } from './split-button-constants';
+export class SplitButtonFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._variant = SPLIT_BUTTON_CONSTANTS.defaults.DEFAULT_VARIANT;
+        this._theme = SPLIT_BUTTON_CONSTANTS.defaults.DEFAULT_THEME;
+        this._disabled = false;
+        this._dense = false;
+        this._pill = false;
+    }
+    initialize() {
+        this._adapter.startButtonObserver();
+        this._adapter.setVariant(this._variant);
+        this._adapter.setTheme(this._theme);
+        this._adapter.setDisabled(this._disabled);
+        this._adapter.setDense(this._dense);
+        this._adapter.setPill(this._pill);
+    }
+    destroy() {
+        this._adapter.destroyButtonObserver();
+    }
+    get variant() {
+        return this._variant;
+    }
+    set variant(value) {
+        if (this._variant !== value) {
+            this._variant = value !== null && value !== void 0 ? value : SPLIT_BUTTON_CONSTANTS.defaults.DEFAULT_VARIANT;
+            this._adapter.setVariant(value);
+            this._adapter.setHostAttribute(SPLIT_BUTTON_CONSTANTS.attributes.VARIANT, this._variant);
+        }
+    }
+    get theme() {
+        return this._theme;
+    }
+    set theme(value) {
+        if (this._theme !== value) {
+            this._theme = value !== null && value !== void 0 ? value : SPLIT_BUTTON_CONSTANTS.defaults.DEFAULT_THEME;
+            this._adapter.setTheme(this._theme);
+            this._adapter.setHostAttribute(SPLIT_BUTTON_CONSTANTS.attributes.THEME, this._theme);
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (this._disabled !== value) {
+            this._disabled = value;
+            this._adapter.setDisabled(this._disabled);
+            this._adapter.toggleHostAttribute(SPLIT_BUTTON_CONSTANTS.attributes.DISABLED, this._disabled);
+        }
+    }
+    get dense() {
+        return this._dense;
+    }
+    set dense(value) {
+        if (this._dense !== value) {
+            this._dense = value;
+            this._adapter.setDense(this._dense);
+            this._adapter.toggleHostAttribute(SPLIT_BUTTON_CONSTANTS.attributes.DENSE, this._dense);
+        }
+    }
+    get pill() {
+        return this._pill;
+    }
+    set pill(value) {
+        if (this._pill !== value) {
+            this._pill = value;
+            this._adapter.setPill(this._pill);
+            this._adapter.toggleHostAttribute(SPLIT_BUTTON_CONSTANTS.attributes.PILL, this._pill);
+        }
+    }
+}

package/esm/split-button/split-button.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ButtonTheme } from '../button';
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { SplitButtonVariant } from './split-button-constants';
+export interface ISplitButtonComponent extends IBaseComponent {
+    variant: SplitButtonVariant;
+    theme: ButtonTheme;
+    disabled: boolean;
+    dense: boolean;
+    pill: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-split-button': ISplitButtonComponent;
+    }
+}
+/**
+ * @tag forge-split-button
+ *
+ * @summary Split buttons are used for splitting an action into two parts.
+ *
+ * @property {SplitButtonVariant} variant - The variant of the buttons. Valid values are `text`, `outlined`, `tonal`, `filled`, and `raised`.
+ * @property {ButtonTheme} theme - The theme of the buttons. Valid values are `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
+ * @property {boolean} disabled - Whether or not the buttons are disabled.
+ * @property {boolean} dense - Whether or not the buttons are dense.
+ * @property {boolean} pill - Whether or not the buttons are pill-shaped.
+ *
+ * @attribute {SplitButtonVariant} variant - The variant of the buttons. Valid values are `text`, `outlined`, `tonal`, `filled`, and `raised`.
+ * @attribute {ButtonTheme} theme - The theme of the buttons. Valid values are `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
+ * @attribute {boolean} disabled - Whether or not the buttons are disabled.
+ * @attribute {boolean} dense - Whether or not the buttons are dense.
+ * @attribute {boolean} pill - Whether or not the buttons are pill-shaped.
+ *
+ * @cssproperty --forge-split-button-min-width - The minimum width of the slotted buttons.
+ * @cssproperty --forge-split-button-gap - The gap between the slotted buttons.
+ * @cssproperty --forge-split-button-focus-indicator-offset - The offset of the focus indicator around the buttons.
+ * @cssproperty --forge-split-button-focus-indicator-divider-offset - The offset of the focus indicator divider when using outlined buttons.
+ *
+ * @slot - This is a default/unnamed slot.
+ */
+export declare class SplitButtonComponent extends BaseComponent implements ISplitButtonComponent {
+    static get observedAttributes(): string[];
+    private readonly _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    variant: SplitButtonVariant;
+    theme: ButtonTheme;
+    disabled: boolean;
+    dense: boolean;
+    pill: boolean;
+}

package/esm/split-button/split-button.js

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { ButtonComponent } from '../button';
+import { BaseComponent } from '../core/base/base-component';
+import { SplitButtonAdapter } from './split-button-adapter';
+import { SPLIT_BUTTON_CONSTANTS } from './split-button-constants';
+import { SplitButtonFoundation } from './split-button-foundation';
+const template = '<template><slot></slot></template>';
+const styles = ':host{--_split-button-min-width:var(--forge-split-button-min-width, 0);--_split-button-gap:var(--forge-split-button-gap, var(--forge-border-thin, 1px));--_split-button-focus-indicator-offset:var(--forge-split-button-focus-indicator-offset, var(--forge-button-focus-indicator-offset, 4px));--_split-button-focus-indicator-divider-offset:var(--forge-split-button-focus-indicator-divider-offset, var(--_split-button-gap));--_split-button-focus-indicator-offset-adjusted:calc(var(--_split-button-focus-indicator-offset) + var(--_split-button-focus-indicator-divider-offset) * 2)}:host{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}:host([hidden]){display:none}::slotted(*){--forge-button-min-width:var(--_split-button-min-width);--forge-button-focus-indicator-offset:var(--_split-button-focus-indicator-offset)}::slotted(:first-child){--forge-button-shape-start-end-radius:0;--forge-button-shape-end-end-radius:0;--forge-focus-indicator-shape-start-end:0;--forge-focus-indicator-shape-end-end:0;--forge-focus-indicator-offset-inline:0 var(--_split-button-focus-indicator-offset-adjusted)}::slotted(:not(:first-child):not(:last-child)){--forge-button-shape:0;--forge-focus-indicator-shape:0;--forge-focus-indicator-offset-inline:var(--_split-button-focus-indicator-offset-adjusted)}::slotted(:last-child){--forge-button-shape-start-start-radius:0;--forge-button-shape-end-start-radius:0;--forge-focus-indicator-shape-start-start:0;--forge-focus-indicator-shape-end-start:0;--forge-focus-indicator-offset-inline:var(--_split-button-focus-indicator-offset-adjusted) 0}:host([variant=outlined]){--_split-button-focus-indicator-divider-offset:var(--forge-split-button-focus-indicator-divider-offset, 0px)}:host([variant=outlined]) ::slotted(:not(:first-child)){-webkit-margin-start:calc(-1 * var(--_split-button-gap));margin-inline-start:calc(-1 * var(--_split-button-gap))}:host(:is([variant=tonal],[variant=filled],[variant=raised],:not([variant]))) ::slotted(:not(:last-child)){-webkit-margin-end:var(--_split-button-gap);margin-inline-end:var(--_split-button-gap)}';
+/**
+ * @tag forge-split-button
+ *
+ * @summary Split buttons are used for splitting an action into two parts.
+ *
+ * @property {SplitButtonVariant} variant - The variant of the buttons. Valid values are `text`, `outlined`, `tonal`, `filled`, and `raised`.
+ * @property {ButtonTheme} theme - The theme of the buttons. Valid values are `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
+ * @property {boolean} disabled - Whether or not the buttons are disabled.
+ * @property {boolean} dense - Whether or not the buttons are dense.
+ * @property {boolean} pill - Whether or not the buttons are pill-shaped.
+ *
+ * @attribute {SplitButtonVariant} variant - The variant of the buttons. Valid values are `text`, `outlined`, `tonal`, `filled`, and `raised`.
+ * @attribute {ButtonTheme} theme - The theme of the buttons. Valid values are `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
+ * @attribute {boolean} disabled - Whether or not the buttons are disabled.
+ * @attribute {boolean} dense - Whether or not the buttons are dense.
+ * @attribute {boolean} pill - Whether or not the buttons are pill-shaped.
+ *
+ * @cssproperty --forge-split-button-min-width - The minimum width of the slotted buttons.
+ * @cssproperty --forge-split-button-gap - The gap between the slotted buttons.
+ * @cssproperty --forge-split-button-focus-indicator-offset - The offset of the focus indicator around the buttons.
+ * @cssproperty --forge-split-button-focus-indicator-divider-offset - The offset of the focus indicator divider when using outlined buttons.
+ *
+ * @slot - This is a default/unnamed slot.
+ */
+let SplitButtonComponent = class SplitButtonComponent extends BaseComponent {
+    static get observedAttributes() {
+        return [
+            SPLIT_BUTTON_CONSTANTS.attributes.VARIANT,
+            SPLIT_BUTTON_CONSTANTS.attributes.THEME,
+            SPLIT_BUTTON_CONSTANTS.attributes.DISABLED,
+            SPLIT_BUTTON_CONSTANTS.attributes.DENSE,
+            SPLIT_BUTTON_CONSTANTS.attributes.PILL
+        ];
+    }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new SplitButtonFoundation(new SplitButtonAdapter(this));
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.destroy();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case SPLIT_BUTTON_CONSTANTS.attributes.VARIANT:
+                this.variant = newValue;
+                break;
+            case SPLIT_BUTTON_CONSTANTS.attributes.THEME:
+                this.theme = newValue;
+                break;
+            case SPLIT_BUTTON_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+            case SPLIT_BUTTON_CONSTANTS.attributes.DENSE:
+                this.dense = coerceBoolean(newValue);
+                break;
+            case SPLIT_BUTTON_CONSTANTS.attributes.PILL:
+                this.pill = coerceBoolean(newValue);
+                break;
+        }
+    }
+};
+__decorate([
+    FoundationProperty()
+], SplitButtonComponent.prototype, "variant", void 0);
+__decorate([
+    FoundationProperty()
+], SplitButtonComponent.prototype, "theme", void 0);
+__decorate([
+    FoundationProperty()
+], SplitButtonComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], SplitButtonComponent.prototype, "dense", void 0);
+__decorate([
+    FoundationProperty()
+], SplitButtonComponent.prototype, "pill", void 0);
+SplitButtonComponent = __decorate([
+    CustomElement({
+        name: SPLIT_BUTTON_CONSTANTS.elementName,
+        dependencies: [
+            ButtonComponent
+        ]
+    })
+], SplitButtonComponent);
+export { SplitButtonComponent };

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:uli5rp8;animation-name:uli5rp8;-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 uli5rp8{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uli5rp8{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:uli5rpf;animation-name:uli5rpf;-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 uli5rpf{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uli5rpf{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:uli5rqd;animation-name:uli5rqd;-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 uli5rqd{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uli5rqd{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:uli5rr2;animation-name:uli5rr2;-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 uli5rr2{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uli5rr2{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:uli5rrz;animation-name:uli5rrz;-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 uli5rrz{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uli5rrz{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:uli5rsw;animation-name:uli5rsw;-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 uli5rsw{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uli5rsw{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:uli5rt7;animation-name:uli5rt7;-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 uli5rt7{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uli5rt7{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:uli5rto;animation-name:uli5rto;-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 uli5rto{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uli5rto{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:uwzp5n0;animation-name:uwzp5n0;-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 uwzp5n0{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uwzp5n0{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:uwzp5np;animation-name:uwzp5np;-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 uwzp5np{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uwzp5np{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:uwzp5ob;animation-name:uwzp5ob;-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 uwzp5ob{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uwzp5ob{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:uwzp5oh;animation-name:uwzp5oh;-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 uwzp5oh{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uwzp5oh{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:uwzp5ou;animation-name:uwzp5ou;-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 uwzp5ou{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uwzp5ou{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:uwzp5ox;animation-name:uwzp5ox;-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 uwzp5ox{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uwzp5ox{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:uwzp5p7;animation-name:uwzp5p7;-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 uwzp5p7{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uwzp5p7{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:uwzp5ph;animation-name:uwzp5ph;-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 uwzp5ph{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uwzp5ph{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/state-layer/state-layer-adapter.js

@@ -19,6 +19,7 @@ export class StateLayerAdapter extends BaseAdapter {
             this._destroyDeferListener();
             this._destroyDeferListener = undefined;
         }
+        this._targetElement = null;
     }
     async deferInitialization(listener) {
         if (!this._targetElement) {

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

@@ -35,8 +35,8 @@ export class StateLayerFoundation {
         this._pointerState = PointerState.INACTIVE;
         this._adapter.setHovered(false);
         this._adapter.setPressed(false);
+        this._removeListeners(); // Must be called before destroying adapter
         this._adapter.destroy();
-        this._removeListeners();
     }
     playAnimation(coords) {
         this._adapter.startAnimation(coords);
@@ -192,6 +192,11 @@ export class StateLayerFoundation {
         if (this._attached) {
             this._removeListeners();
         }
+        else {
+            // If unattached destroy the defer listener to recreate on the new target element
+            this._adapter.destroy();
+            this._deferred = false;
+        }
         this._adapter.setTargetElement(el);
         // If we are not already deferring attaching the listeners, then do that now
         if (!this._deferred) {
@@ -208,6 +213,10 @@ export class StateLayerFoundation {
                 if (this._attached) {
                     this._removeListeners();
                 }
+                else {
+                    this._adapter.destroy();
+                    this._deferred = false;
+                }
                 this._adapter.trySetTarget(value);
                 if (!this._deferred) {
                     this._deferInitialization();

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

@@ -10,7 +10,7 @@ import { StateLayerFoundation } from './state-layer-foundation';
 import { STATE_LAYER_CONSTANTS } from './state-layer-constants';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-state-layer\" part=\"surface\"></div></template>';
-const styles = ':host{border-radius:inherit;position:absolute;inset:0;overflow:hidden;display:-webkit-box;display:flex;margin:auto;pointer-events:none;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host([disabled]){display:none}.forge-state-layer{--_color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));--_hover-color:var(--forge-state-layer-hover-color, var(--_color));--_hover-opacity:var(--forge-state-layer-hover-opacity, 0.08);--_pressed-color:var(--forge-state-layer-pressed-color, var(--_color));--_pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.12);--_hover-duration:var(--forge-state-layer-hover-duration, 15ms);--_pressed-duration:var(--forge-state-layer-pressed-duration, 105ms);--_animation-duration:var(--forge-state-layer-animation-duration, 375ms)}.forge-state-layer::after,.forge-state-layer::before{content:\"\";opacity:0;position:absolute}.forge-state-layer::before{background-color:var(--_hover-color);inset:0;-webkit-transition:opacity var(--_hover-duration) linear,background-color var(--_hover-duration) linear;transition:opacity var(--_hover-duration) linear,background-color var(--_hover-duration) linear}.forge-state-layer::after{background:radial-gradient(closest-side,var(--_pressed-color) max(100% - 70px,65%),transparent 100%);-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition:opacity var(--_animation-duration) linear;transition:opacity var(--_animation-duration) linear}.forge-state-layer--hovered::before{background-color:var(--_hover-color);opacity:var(--_hover-opacity)}.forge-state-layer--pressed::after{opacity:var(--_pressed-opacity);-webkit-transition-duration:var(--_pressed-duration);transition-duration:var(--_pressed-duration)}@media screen and (forced-colors:active){:host{display:none}}';
+const styles = ':host{border-radius:inherit;position:absolute;inset:0;overflow:hidden;display:-webkit-box;display:flex;margin:auto;pointer-events:none;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host([disabled]){display:none}.forge-state-layer{--_state-layer-color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));--_state-layer-hover-color:var(--forge-state-layer-hover-color, var(--_state-layer-color));--_state-layer-hover-opacity:var(--forge-state-layer-hover-opacity, 0.08);--_state-layer-pressed-color:var(--forge-state-layer-pressed-color, var(--_state-layer-color));--_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.12);--_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 15ms);--_state-layer-pressed-duration:var(--forge-state-layer-pressed-duration, 105ms);--_state-layer-animation-duration:var(--forge-state-layer-animation-duration, 375ms)}.forge-state-layer::after,.forge-state-layer::before{content:\"\";opacity:0;position:absolute}.forge-state-layer::before{background-color:var(--_state-layer-hover-color);inset:0;-webkit-transition:opacity var(--_state-layer-hover-duration) linear,background-color var(--_state-layer-hover-duration) linear;transition:opacity var(--_state-layer-hover-duration) linear,background-color var(--_state-layer-hover-duration) linear}.forge-state-layer::after{background:radial-gradient(closest-side,var(--_state-layer-pressed-color) max(100% - 70px,65%),transparent 100%);-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition:opacity var(--_state-layer-animation-duration) linear;transition:opacity var(--_state-layer-animation-duration) linear}.forge-state-layer--hovered::before{background-color:var(--_state-layer-hover-color);opacity:var(--_state-layer-hover-opacity)}.forge-state-layer--pressed::after{opacity:var(--_state-layer-pressed-opacity);-webkit-transition-duration:var(--_state-layer-pressed-duration);transition-duration:var(--_state-layer-pressed-duration)}@media screen and (forced-colors:active){:host{display:none}}';
 /**
  * @tag forge-state-layer
  *

package/esm/stepper/stepper/stepper-foundation.js

@@ -55,7 +55,7 @@ export class StepperFoundation {
     }
     /** The step configurations. */
     get steps() {
-        return JSON.parse(JSON.stringify(this._steps));
+        return this._steps.map(s => (Object.assign({}, s))); // Shallow clone
     }
     set steps(value) {
         if (Array.isArray(value) && value.length > 0) {

package/esm/switch/index.d.ts

@@ -3,7 +3,9 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+export * from './switch-adapter';
 export * from './switch-constants';
+export * from './switch-foundation';
 export * from './switch';
 export * from './switch-component-delegate';
 export declare function defineSwitchComponent(): void;

package/esm/switch/index.js

@@ -5,7 +5,9 @@
  */
 import { defineCustomElement } from '@tylertech/forge-core';
 import { SwitchComponent } from './switch';
+export * from './switch-adapter';
 export * from './switch-constants';
+export * from './switch-foundation';
 export * from './switch';
 export * from './switch-component-delegate';
 export function defineSwitchComponent() {

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

@@ -9,12 +9,19 @@ import { SwitchIconVisibility, SwitchLabelPosition } from './switch-constants';
 export interface ISwitchAdapter extends IBaseAdapter {
     initialize(): void;
     setOn(value: boolean): void;
+    setDefaultOn(value: boolean): void;
+    setValue(value: string): void;
     setDisabled(value: boolean): void;
     setRequired(value: boolean): void;
+    setReadonly(value: boolean): void;
     setIconVisibility(value: SwitchIconVisibility): void;
     setLabelPosition(value: SwitchLabelPosition): void;
-    addInputListener(event: string, callback: EventListener): void;
-    syncValue(value: boolean): void;
+    addRootListener(event: string, callback: EventListener): void;
+    addInputSlotListener(callback: EventListener): void;
+    detectInputElement(): void;
+    proxyClick(): void;
+    proxyLabel(value: string | null): void;
+    syncValue(value: string | null): void;
     syncValidity(hasCustomValidityError: boolean): void;
     setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
 }
@@ -24,15 +31,34 @@ export declare class SwitchAdapter extends BaseAdapter<ISwitchComponent> impleme
     private readonly _labelElement;
     private readonly _iconOnElement;
     private readonly _iconOffElement;
+    private readonly _inputSlotElement;
+    private readonly _stateLayerElement;
+    private readonly _inputAdapter;
+    private _forwardObserver?;
+    private _forwardedAriaLabel?;
+    private _labelElementText?;
+    private get _activeInputElement();
     constructor(component: ISwitchComponent);
     initialize(): void;
     setOn(value: boolean): void;
+    setDefaultOn(value: boolean): void;
+    setValue(value: string): void;
     setDisabled(value: boolean): void;
     setRequired(value: boolean): void;
+    setReadonly(value: boolean): void;
     setIconVisibility(value: SwitchIconVisibility): void;
     setLabelPosition(value: SwitchLabelPosition): void;
-    addInputListener(event: string, callback: EventListener): void;
-    syncValue(value: boolean): void;
+    addRootListener(event: string, callback: EventListener): void;
+    addInputSlotListener(callback: EventListener): void;
+    detectInputElement(): void;
+    proxyClick(): void;
+    proxyLabel(value: string | null): void;
+    syncValue(value: string | null): void;
     syncValidity(hasCustomValidityError: boolean): void;
     setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
+    private _initializeInput;
+    private _initializeForwardObserver;
+    private _setAriaLabel;
+    private _switchInput;
+    private _observeInput;
 }