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

package/esm/radio/radio/radio.js

@@ -0,0 +1,204 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, FoundationProperty, attachShadowTemplate, coerceBoolean } from '@tylertech/forge-core';
+import { getFormState, getFormValue, inputType, internals, setDefaultAria } from '../../constants';
+import { BaseComponent } from '../../core/base/base-component';
+import { WithFocusable } from '../../core/mixins/focus/with-focusable';
+import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { WithFormAssociation } from '../../core/mixins/form/with-form-associated';
+import { WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
+import { FocusIndicatorComponent } from '../../focus-indicator';
+import { StateLayerComponent } from '../../state-layer';
+import { RadioGroupManager } from '../core/radio-group-manager';
+import { RadioAdapter } from './radio-adapter';
+import { RADIO_CONSTANTS, tryCheck } from './radio-constants';
+import { RadioFoundation } from './radio-foundation';
+import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+const template = '<template><div id=\"radio\" class=\"forge-radio\" part=\"radio\"><div id=\"container\" class=\"container\" aria-hidden=\"true\"><div id=\"background\" class=\"background\" part=\"background\"></div><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer exportparts=\"surface:state-layer\"></forge-state-layer></div><span id=\"label\" class=\"label\" for=\"input\" part=\"label\"><slot></slot></span></div></template>';
+const style = ':host{display:inline-block;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host(:focus){outline:0}.forge-radio{--_radio-primary-color:var(--forge-radio-primary-color, var(--forge-theme-tertiary, #3d5afe));--_radio-inactive-color:var(--forge-radio-inactive-color, var(--forge-theme-surface-container-high, #9e9e9e));--_radio-size:var(--forge-radio-size, 20px);--_radio-mark-size:var(--forge-radio-mark-size, 12px);--_radio-state-layer-size:var(--forge-radio-state-layer-size, 40px);--_radio-state-layer-dense-size:var(--forge-radio-state-layer-dense-size, 24px);--_radio-width:var(--forge-radio-width, var(--_radio-size));--_radio-height:var(--forge-radio-height, var(--_radio-size));--_radio-border-width:var(--forge-radio-border-width, var(--forge-border-medium, 2px));--_radio-unchecked-border-color:var(--forge-radio-unchecked-border-color, var(--_radio-inactive-color));--_radio-checked-border-color:var(--forge-radio-checked-border-color, var(--_radio-primary-color));--_radio-background:var(--forge-radio-background, transparent);--_radio-shape:var(--forge-radio-shape, var(--forge-shape-round, 50%));--_radio-mark-width:var(--forge-radio-mark-width, var(--_radio-mark-size));--_radio-mark-height:var(--forge-radio-mark-height, var(--_radio-mark-size));--_radio-mark-unchecked-color:var(--forge-radio-mark-unchecked-color, var(--_radio-inactive-color));--_radio-mark-checked-color:var(--forge-radio-mark-checked-color, var(--_radio-primary-color));--_radio-mark-unchecked-background:var(--forge-radio-mark-unchecked-background, transparent);--_radio-mark-checked-background:var(--forge-radio-mark-checked-background, transparent);--_radio-gap:var(--forge-radio-gap, 0);--_radio-justify:var(--forge-radio-justify, space-between);--_radio-direction:var(--forge-radio-direction, initial);--_radio-state-layer-width:var(--forge-radio-state-layer-width, var(--_radio-state-layer-size));--_radio-state-layer-height:var(--forge-radio-state-layer-height, var(--_radio-state-layer-size));--_radio-state-layer-unchecked-color:var(--forge-radio-state-layer-unchecked-color, var(--_radio-color));--_radio-state-layer-checked-color:var(--forge-radio-state-layer-checked-color, var(--_radio-primary-color));--_radio-state-layer-shape:var(--forge-radio-state-layer-shape, var(--_radio-shape));--_radio-state-layer-dense-width:var(--forge-radio-state-layer-dense-width, var(--_radio-state-layer-dense-size));--_radio-state-layer-dense-height:var(--forge-radio-state-layer-dense-height, var(--_radio-state-layer-dense-size));--_radio-disabled-opacity:var(--forge-radio-disabled-opacity, 0.38);--_radio-animation-duration:var(--forge-radio-animation-duration, var(--forge-animation-duration-short4, 200ms));--_radio-animation-timing-function:var(--forge-radio-animation-timing-function, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_radio-animation-delay:var(--forge-radio-animation-delay, 0ms)}.forge-radio{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_radio-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_radio-justify);justify-content:var(--_radio-justify);gap:var(--_radio-gap);display:-webkit-box;display:flex}.forge-radio .container{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;border-radius:var(--_radio-shape);inline-size:var(--_radio-state-layer-width);block-size:var(--_radio-state-layer-height);cursor:pointer}.forge-radio .background{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;overflow:hidden;-webkit-transition-duration:var(--_radio-animation-duration);transition-duration:var(--_radio-animation-duration);-webkit-transition-delay:var(--_radio-animation-delay);transition-delay:var(--_radio-animation-delay);-webkit-transition-timing-function:var(--_radio-animation-timing-function);transition-timing-function:var(--_radio-animation-timing-function);-webkit-transition-property:border-color;transition-property:border-color;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--_radio-shape);border-width:var(--_radio-border-width);border-style:solid;border-color:var(--_radio-unchecked-border-color);inline-size:var(--_radio-width);block-size:var(--_radio-height);background:var(--_radio-background)}.forge-radio .background::after{content:\"\";position:absolute;contain:strict;-webkit-transition-duration:var(--_radio-animation-duration);transition-duration:var(--_radio-animation-duration);-webkit-transition-delay:var(--_radio-animation-delay);transition-delay:var(--_radio-animation-delay);-webkit-transition-timing-function:var(--_radio-animation-timing-function);transition-timing-function:var(--_radio-animation-timing-function);-webkit-transition-property:inline-size,block-size,border-color;transition-property:inline-size,block-size,border-color;border-radius:var(--_radio-shape);border-width:calc(var(--_radio-mark-height)/ 2) calc(var(--_radio-mark-width)/ 2);border-color:var(--_radio-mark-unchecked-color);border-style:solid;inline-size:calc(var(--_radio-width) - 2 * var(--_radio-border-width));block-size:calc(var(--_radio-height) - 2 * var(--_radio-border-width));background:var(--_radio-mark-unchecked-background)}.forge-radio .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label-font-weight,400);line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-text-decoration,inherit);cursor:default}.forge-radio .label:empty{display:none}:host([checked]) .forge-radio .background{border-color:var(--_radio-checked-border-color)}:host([checked]) .forge-radio .background::after{border-color:var(--_radio-mark-checked-color);inline-size:0px;block-size:0px;background:var(--_radio-mark-checked-background)}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_radio-state-layer-checked-color)}:host([dense]) .forge-radio .container{inline-size:var(--_radio-state-layer-dense-width);block-size:var(--_radio-state-layer-dense-height)}:host([disabled]) .forge-radio{opacity:var(--_radio-disabled-opacity)}:host([disabled]) .forge-radio .container{cursor:not-allowed}:host([readonly]) .forge-radio .container{cursor:not-allowed}forge-focus-indicator{--forge-focus-indicator-color:var(--_radio-primary-color);--forge-focus-indicator-outward-offset:0px;--forge-focus-indicator-shape:var(--_radio-state-layer-shape)}forge-state-layer{--forge-state-layer-color:var(--_radio-state-layer-unchecked-color)}';
+const BaseRadioClass = WithFormAssociation(WithLabelAwareness(WithFocusable(WithDefaultAria(WithElementInternals(BaseComponent)))));
+/**
+ * @tag forge-radio
+ *
+ * @summary The Forge Radio component is used to create a form input where only one out of a set of
+ * values should be selected.
+ *
+ * @property {boolean} checked - Indicates whether the radio button is checked.
+ * @property {boolean} defaultChecked - Indicates whether the radio button is checked by default.
+ * @property {string} value - The value of the radio button when submitted.
+ * @property {boolean} dense - Indicates whether the radio button should be displayed in a dense layout.
+ * @property {boolean} disabled - Indicates whether the radio button is disabled.
+ * @property {boolean} required - Indicates whether the radio button is required.
+ * @property {boolean} readonly - Indicates whether the radio button is read-only.
+ * @property {RadioLabelPosition} labelPosition - The position of the radio button's label.
+ *
+ * @attribute {boolean} checked - Indicates whether the radio button is checked.
+ * @attribute {boolean} default-checked - Indicates whether the radio button is checked by default.
+ * @attribute {string} value - The value of the radio button when submitted.
+ * @attribute {boolean} dense - Indicates whether the radio button should be displayed in a dense layout.
+ * @attribute {boolean} disabled - Indicates whether the radio button is disabled.
+ * @attribute {boolean} required - Indicates whether the radio button is required.
+ * @attribute {boolean} readonly - Indicates whether the radio button is read-only.
+ * @attribute {RadioLabelPosition} label-position - The position of the radio button's label.
+ *
+ * @cssproperty --forge-radio-primary-color - The primary color of the radio button when checked.
+ * @cssproperty --forge-radio-inactive-color - The color of the radio button when unchecked.
+ * @cssproperty --forge-radio-size - The size of the radio button in the inline and block directions.
+ * @cssproperty --forge-radio-width - The width of the radio button.
+ * @cssproperty --forge-radio-height - The height of the radio button.
+ * @cssproperty --forge-radio-border-width - The width of the radio button's border.
+ * @cssproperty --forge-radio-unchecked-border-color - The color of the radio button's border when unchecked.
+ * @cssproperty --forge-radio-checked-border-color - The color of the radio button's border when checked.
+ * @cssproperty --forge-radio-background - The background of the radio button.
+ * @cssproperty --forge-radio-shape - The shape of the radio button.
+ * @cssproperty --forge-radio-mark-size - The size of the radio button's mark in the inline and block directions.
+ * @cssproperty --forge-radio-mark-width - The width of the radio button's mark.
+ * @cssproperty --forge-radio-mark-height - The height of the radio button's mark.
+ * @cssproperty --forge-radio-mark-unchecked-color - The color of the radio button's mark when unchecked.
+ * @cssproperty --forge-radio-mark-checked-color - The color of the radio button's mark when checked.
+ * @cssproperty --forge-radio-mark-unchecked-background - The background of the radio button's mark when unchecked.
+ * @cssproperty --forge-radio-mark-checked-background - The background of the radio button's mark when checked.
+ * @cssproperty --forge-radio-gap - The gap between the radio button and its label.
+ * @cssproperty --forge-radio-justify - The alignment of the radio button and its label in the inline direction.
+ * @cssproperty --forge-radio-direction - The direction of the radio button and its label.
+ * @cssproperty --forge-radio-state-layer-size - The size of the radio button's state layer in the inline and block directions.
+ * @cssproperty --forge-radio-state-layer-width - The width of the radio button's state layer.
+ * @cssproperty --forge-radio-state-layer-height - The height of the radio button's state layer.
+ * @cssproperty --forge-radio-state-layer-unchecked-color - The color of the radio button's state layer when unchecked.
+ * @cssproperty --forge-radio-state-layer-checked-color - The color of the radio button's state layer when checked.
+ * @cssproperty --forge-radio-state-layer-shape - The shape of the radio button's state layer.
+ * @cssproperty --forge-radio-state-layer-dense-size - The size of the radio button's state layer when dense.
+ * @cssproperty --forge-radio-state-layer-dense-width - The width of the radio button's state layer when dense.
+ * @cssproperty --forge-radio-state-layer-dense-height - The height of the radio button's state layer when dense.
+ * @cssproperty --forge-radio-disabled-opacity - The opacity of the radio button when disabled.
+ * @cssproperty --forge-radio-animation-duration - The duration of the radio button's animations.
+ * @cssproperty --forge-radio-animation-timing-function - The timing function of the radio button's animations.
+ * @cssproperty --forge-radio-animation-delay - The delay of the radio button's animations.
+ *
+ * @csspart radio - Styles the radio's root element.
+ * @csspart background - Styles the border and background of the radio.
+ * @csspart focus-indicator - Styles the focus indicator of the radio.
+ * @csspart state-layer - Styles the state layer of the radio.
+ *
+ * @slot - This is a default/unnamed slot for the label text.
+ */
+let RadioComponent = class RadioComponent extends BaseRadioClass {
+    static get observedAttributes() {
+        return [
+            RADIO_CONSTANTS.attributes.CHECKED,
+            RADIO_CONSTANTS.attributes.DEFAULT_CHECKED,
+            RADIO_CONSTANTS.attributes.VALUE,
+            RADIO_CONSTANTS.attributes.DENSE,
+            RADIO_CONSTANTS.attributes.DISABLED,
+            RADIO_CONSTANTS.attributes.REQUIRED,
+            RADIO_CONSTANTS.attributes.READONLY,
+            RADIO_CONSTANTS.attributes.LABEL_POSITION,
+            RADIO_CONSTANTS.attributes.TABINDEX
+        ];
+    }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, style);
+        this[inputType] = 'radio';
+        this._foundation = new RadioFoundation(new RadioAdapter(this));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this[setDefaultAria]({
+            role: 'radio',
+            ariaChecked: this.checked ? 'true' : 'false',
+            ariaDisabled: this.disabled ? 'true' : 'false',
+            ariaInvalid: this[internals].validity.valid ? 'false' : 'true',
+            ariaRequired: this.required ? 'true' : 'false'
+        });
+        this._foundation.initialize();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case RADIO_CONSTANTS.attributes.CHECKED:
+                this._foundation.checked = coerceBoolean(newValue);
+                break;
+            case RADIO_CONSTANTS.attributes.DEFAULT_CHECKED:
+                this._foundation.defaultChecked = coerceBoolean(newValue);
+                break;
+            case RADIO_CONSTANTS.attributes.VALUE:
+                this.value = newValue;
+                break;
+            case RADIO_CONSTANTS.attributes.DENSE:
+                this.dense = coerceBoolean(newValue);
+                break;
+            case RADIO_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+            case RADIO_CONSTANTS.attributes.REQUIRED:
+                this.required = coerceBoolean(newValue);
+                break;
+            case RADIO_CONSTANTS.attributes.READONLY:
+                this.readonly = coerceBoolean(newValue);
+                break;
+            case RADIO_CONSTANTS.attributes.LABEL_POSITION:
+                this.labelPosition = newValue;
+                break;
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    [getFormValue]() {
+        return this.checked ? this.value : null;
+    }
+    [getFormState]() {
+        return this.checked ? 'checked' : 'unchecked';
+    }
+    formResetCallback() {
+        RadioGroupManager.requestRadioGroupReset(this);
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === 'checked';
+    }
+    labelClickedCallback() {
+        this.click();
+    }
+    labelChangedCallback(value) {
+        this[setDefaultAria]({ ariaLabel: value });
+    }
+    [tryCheck]() {
+        return this._foundation.tryCheck();
+    }
+};
+__decorate([
+    FoundationProperty()
+], RadioComponent.prototype, "checked", void 0);
+__decorate([
+    FoundationProperty()
+], RadioComponent.prototype, "defaultChecked", void 0);
+__decorate([
+    FoundationProperty()
+], RadioComponent.prototype, "value", void 0);
+__decorate([
+    FoundationProperty()
+], RadioComponent.prototype, "dense", void 0);
+__decorate([
+    FoundationProperty()
+], RadioComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], RadioComponent.prototype, "required", void 0);
+__decorate([
+    FoundationProperty()
+], RadioComponent.prototype, "readonly", void 0);
+__decorate([
+    FoundationProperty()
+], RadioComponent.prototype, "labelPosition", void 0);
+RadioComponent = __decorate([
+    CustomElement({
+        name: RADIO_CONSTANTS.elementName,
+        dependencies: [
+            FocusIndicatorComponent,
+            StateLayerComponent
+        ]
+    })
+], RadioComponent);
+export { RadioComponent };

package/esm/radio/radio-group/index.d.ts

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

package/esm/radio/radio-group/index.js

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

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

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../../core/base/';
+import { LabelComponent } from '../../label';
+import { IRadioGroupComponent } from './radio-group';
+export interface IRadioGroupAdapter extends IBaseAdapter {
+    attachLabel(label: LabelComponent): void;
+    setDisabled(value: boolean): void;
+}
+export declare class RadioGroupAdapter extends BaseAdapter<IRadioGroupComponent> implements IRadioGroupAdapter {
+    constructor(component: IRadioGroupComponent);
+    attachLabel(label: LabelComponent): void;
+    setDisabled(value: boolean): void;
+    private _disableRadios;
+}

package/esm/radio/radio-group/radio-group-adapter.js

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { setDefaultAria } from '../../constants';
+import { BaseAdapter } from '../../core/base/';
+import { RADIO_CONSTANTS } from '../radio/radio-constants';
+export class RadioGroupAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+    }
+    attachLabel(label) {
+        label.static = true;
+        label.forElement = this._component;
+    }
+    setDisabled(value) {
+        this._component[setDefaultAria]({ ariaDisabled: value ? 'true' : null });
+        this._disableRadios(value);
+    }
+    _disableRadios(value) {
+        this._component.querySelectorAll(RADIO_CONSTANTS.elementName).forEach(radio => {
+            radio.disabled = value;
+        });
+    }
+}

package/esm/radio/radio-group/radio-group-constants.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const RADIO_GROUP_CONSTANTS: {
+    elementName: "forge-radio-group";
+    attributes: {
+        DISABLED: string;
+    };
+};

package/esm/radio/radio-group/radio-group-constants.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}radio-group`;
+const attributes = {
+    DISABLED: 'disabled'
+};
+export const RADIO_GROUP_CONSTANTS = {
+    elementName,
+    attributes
+};

package/esm/radio/radio-group/radio-group-foundation.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IRadioGroupAdapter } from './radio-group-adapter';
+export interface IRadioGroupFoundation extends ICustomElementFoundation {
+    disabled: boolean;
+}
+export declare class RadioGroupFoundation implements IRadioGroupFoundation {
+    private _adapter;
+    private _disabled;
+    private readonly _labelConnectedListener;
+    constructor(_adapter: IRadioGroupAdapter);
+    initialize(): void;
+    private _handleLabelConnected;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+}

package/esm/radio/radio-group/radio-group-foundation.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { LABEL_CONSTANTS } from '../../label';
+import { RADIO_GROUP_CONSTANTS } from './radio-group-constants';
+export class RadioGroupFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._disabled = false;
+        this._labelConnectedListener = (evt) => this._handleLabelConnected(evt);
+    }
+    initialize() {
+        this._adapter.addHostListener(LABEL_CONSTANTS.events.CONNECTED, this._labelConnectedListener);
+    }
+    _handleLabelConnected(evt) {
+        // Stop the label from being seen by any ancestor elements that might try to connect to it
+        evt.stopPropagation();
+        this._adapter.attachLabel(evt.target);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (this._disabled !== value) {
+            this._disabled = value;
+            this._adapter.setDisabled(value);
+            this._adapter.toggleHostAttribute(RADIO_GROUP_CONSTANTS.attributes.DISABLED, value);
+        }
+    }
+}

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

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent } from '../../core/base/base-component';
+import { IWithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+import { IWithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { IWithLabelAwareness } from '../../core/mixins/label/with-label-aware';
+export interface IRadioGroupComponent extends IWithLabelAwareness, IWithElementInternals, IWithDefaultAria {
+    readonly form: HTMLFormElement | null;
+    readonly labels: NodeList;
+    name: string;
+    disabled: boolean;
+    formDisabledCallback(disabled: boolean): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-radio-group': IRadioGroupComponent;
+    }
+}
+declare const BaseRadioGroupClass: import("../../constants").AbstractConstructor<import("../../core/mixins/label/with-label-aware").WithLabelAwarenessContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-element-internals").WithElementInternalsContract> & typeof BaseComponent;
+/**
+ * @tag forge-radio-group
+ *
+ * @summary The Forge Radio Group component groups a set of radio buttons together.
+ *
+ * @property {boolean} disabled - Whether or not the radio group is disabled.
+ *
+ * @attribute {boolean} disabled - Whether or not the radio group is disabled.
+ */
+export declare class RadioGroupComponent extends BaseRadioGroupClass implements IRadioGroupComponent {
+    static readonly formAssociated = true;
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get name(): string;
+    set name(value: string);
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    formDisabledCallback(isDisabled: boolean): void;
+    labelChangedCallback(value: string | null): void;
+    disabled: boolean;
+}
+export {};

package/esm/radio/radio-group/radio-group.js

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, FoundationProperty, attachShadowTemplate, coerceBoolean, toggleAttribute } from '@tylertech/forge-core';
+import { internals, setDefaultAria } from '../../constants';
+import { BaseComponent } from '../../core/base/base-component';
+import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
+import { RadioGroupAdapter } from './radio-group-adapter';
+import { RADIO_GROUP_CONSTANTS } from './radio-group-constants';
+import { RadioGroupFoundation } from './radio-group-foundation';
+const template = '<template><slot></slot></template>';
+const BaseRadioGroupClass = WithLabelAwareness(WithDefaultAria(WithElementInternals(BaseComponent)));
+/**
+ * @tag forge-radio-group
+ *
+ * @summary The Forge Radio Group component groups a set of radio buttons together.
+ *
+ * @property {boolean} disabled - Whether or not the radio group is disabled.
+ *
+ * @attribute {boolean} disabled - Whether or not the radio group is disabled.
+ */
+let RadioGroupComponent = class RadioGroupComponent extends BaseRadioGroupClass {
+    get form() {
+        return this[internals].form;
+    }
+    get labels() {
+        return this[internals].labels;
+    }
+    get name() {
+        var _a;
+        return (_a = this.getAttribute('name')) !== null && _a !== void 0 ? _a : '';
+    }
+    set name(value) {
+        toggleAttribute(this, !!value, 'name', value);
+    }
+    static get observedAttributes() {
+        return [
+            RADIO_GROUP_CONSTANTS.attributes.DISABLED
+        ];
+    }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template);
+        this._foundation = new RadioGroupFoundation(new RadioGroupAdapter(this));
+    }
+    connectedCallback() {
+        this[setDefaultAria]({
+            role: 'radiogroup',
+            ariaDisabled: this.disabled ? 'true' : null
+        });
+        this._foundation.initialize();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case RADIO_GROUP_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+        }
+    }
+    formDisabledCallback(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    labelChangedCallback(value) {
+        this[setDefaultAria]({
+            ariaLabel: value !== null && value !== void 0 ? value : null
+        });
+    }
+};
+RadioGroupComponent.formAssociated = true;
+__decorate([
+    FoundationProperty()
+], RadioGroupComponent.prototype, "disabled", void 0);
+RadioGroupComponent = __decorate([
+    CustomElement({
+        name: RADIO_GROUP_CONSTANTS.elementName
+    })
+], RadioGroupComponent);
+export { RadioGroupComponent };

package/esm/slider/slider.d.ts

@@ -75,8 +75,8 @@ declare global {
  * @attribute {string} name-start - Controls the form control name for the start handle in range mode.
  * @attribute {string} name-end - Controls the form control name for the end handle in range mode.
  *
- * @event forge-slider-input {CustomEvent} - Dispatches when the slider value changes.
- * @event forge-slider-change {CustomEvent} - Dispatches when the slider value changes and the value has been committed.
+ * @event {CustomEvent} forge-slider-input - Dispatches when the slider value changes.
+ * @event {CustomEvent} forge-slider-change - Dispatches when the slider value changes and the value has been committed.
  *
  * @cssproperty --mdc-theme-primary - The primary color of the slider.
  * @cssproperty --mdc-theme-on-primary - The color of elements placed on top of the primary color (the label text for example).

package/esm/slider/slider.js

@@ -58,8 +58,8 @@ const styles = ':host{display:-webkit-inline-box;display:inline-flex;vertical-al
  * @attribute {string} name-start - Controls the form control name for the start handle in range mode.
  * @attribute {string} name-end - Controls the form control name for the end handle in range mode.
  *
- * @event forge-slider-input {CustomEvent} - Dispatches when the slider value changes.
- * @event forge-slider-change {CustomEvent} - Dispatches when the slider value changes and the value has been committed.
+ * @event {CustomEvent} forge-slider-input - Dispatches when the slider value changes.
+ * @event {CustomEvent} forge-slider-change - Dispatches when the slider value changes and the value has been committed.
  *
  * @cssproperty --mdc-theme-primary - The primary color of the slider.
  * @cssproperty --mdc-theme-on-primary - The color of elements placed on top of the primary color (the label text for example).

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: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}';
+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:uix4jxq;animation-name:uix4jxq;-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 uix4jxq{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uix4jxq{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:uix4jyk;animation-name:uix4jyk;-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 uix4jyk{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uix4jyk{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:uix4jzd;animation-name:uix4jzd;-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 uix4jzd{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uix4jzd{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:uix4jzt;animation-name:uix4jzt;-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 uix4jzt{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uix4jzt{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:uix4k06;animation-name:uix4k06;-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 uix4k06{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uix4k06{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:uix4k0g;animation-name:uix4k0g;-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 uix4k0g{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uix4k0g{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:uix4k0s;animation-name:uix4k0s;-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 uix4k0s{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uix4k0s{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:uix4k0t;animation-name:uix4k0t;-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 uix4k0t{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uix4k0t{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-foundation.js

@@ -24,6 +24,9 @@ export class StateLayerFoundation {
     }
     initialize() {
         this._adapter.trySetTarget(this._target);
+        // Clicks could be triggered programmatically so we need to listen for them regardless
+        // of deferred initialization status
+        this._adapter.addTargetListener('click', this._clickListener);
         // We defer initialization until the first pointerenter event is received.
         //
         // This is a performance optimization to avoid attaching many listeners to the target element
@@ -54,7 +57,6 @@ export class StateLayerFoundation {
         this._adapter.addTargetListener('pointerdown', this._pointerDownListener);
         this._adapter.addTargetListener('pointerup', this._pointerUpListener);
         this._adapter.addTargetListener('pointercancel', this._pointerCancelListener);
-        this._adapter.addTargetListener('click', this._clickListener);
         this._adapter.addTargetListener('contextmenu', this._contextmenuListener);
         this._attached = true;
     }
@@ -189,11 +191,9 @@ export class StateLayerFoundation {
     }
     set targetElement(el) {
         // Always remove the listeners from the previous target element
-        if (this._attached) {
-            this._removeListeners();
-        }
-        else {
-            // If unattached destroy the defer listener to recreate on the new target element
+        this._removeListeners();
+        // If unattached destroy the defer listener to recreate on the new target element
+        if (!this._attached) {
             this._adapter.destroy();
             this._deferred = false;
         }
@@ -210,10 +210,9 @@ export class StateLayerFoundation {
         if (this._target !== value) {
             this._target = value;
             if (this._adapter.isConnected) {
-                if (this._attached) {
-                    this._removeListeners();
-                }
-                else {
+                // Always remove the listeners from the previous target element
+                this._removeListeners();
+                if (!this._attached) {
                     this._adapter.destroy();
                     this._deferred = false;
                 }