@tylertech/forge 2.10.1 → 2.12.0

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

@@ -43,6 +43,7 @@ export interface IAutocompleteAdapter extends IBaseAdapter {
     getActiveOptionIndex(): number | null;
     clearActiveOption(): void;
     setSelectedOptions(options: IOption[]): void;
+    queueDropdownPositionUpdate(): void;
 }
 /**
  * The DOM adapter for the `<forge-autocomplete>` element.
@@ -86,6 +87,7 @@ export declare class AutocompleteAdapter extends BaseAdapter<IAutocompleteCompon
     getActiveOptionIndex(): number | null;
     clearActiveOption(): void;
     setSelectedOptions(options: IOption[]): void;
+    queueDropdownPositionUpdate(): void;
     private _getTargetElement;
     private _getDefaultTargetElement;
     private _tryToggleDropdownIconRotation;

package/esm/autocomplete/autocomplete-adapter.js

@@ -195,6 +195,16 @@ export class AutocompleteAdapter extends BaseAdapter {
             this._listDropdown.setSelectedValues(values);
         }
     }
+    queueDropdownPositionUpdate() {
+        if (!this.getPopupElement()) {
+            return;
+        }
+        // We need to wait for the next animation frame to ensure that the layout has been updated
+        window.requestAnimationFrame(() => {
+            const dropdownEl = this.getPopupElement();
+            dropdownEl === null || dropdownEl === void 0 ? void 0 : dropdownEl.position();
+        });
+    }
     _getTargetElement(selector) {
         return selector ? this._component.querySelector(selector) || this._getDefaultTargetElement() : this._getDefaultTargetElement();
     }

package/esm/autocomplete/autocomplete-constants.js

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { COMPONENT_NAME_PREFIX, KEYSTROKE_DEBOUNCE_THRESHOLD } from '../constants';
+import { FIELD_CONSTANTS } from '../field/field-constants';
 const elementName = `${COMPONENT_NAME_PREFIX}autocomplete`;
 const attributes = {
     MODE: 'mode',
@@ -22,7 +23,7 @@ const attributes = {
     DROPDOWN_ICON_OPEN: 'data-forge-dropdown-icon-open'
 };
 const selectors = {
-    INPUT: 'input,textarea',
+    INPUT: FIELD_CONSTANTS.selectors.INPUT,
     DROPDOWN_ICON: '[data-forge-dropdown-icon],[data-forge-dropdown-icon],[forge-dropdown-icon],.forge-dropdown-icon',
     CLEAR_BUTTON: '[data-forge-autocomplete-clear],[forge-autocomplete-clear]'
 };

package/esm/autocomplete/autocomplete-foundation.d.ts

@@ -97,6 +97,7 @@ export declare class AutocompleteFoundation extends ListDropdownAwareFoundation
     private _onSelect;
     private _selectActiveOption;
     private _emitChangeEvent;
+    private _tryUpdateDropdownPosition;
     /**
      * Retrieves the current value(s) from the selected options array based on whether
      * we are in multi-select mode or not.

package/esm/autocomplete/autocomplete-foundation.js

@@ -490,6 +490,7 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation {
                 this._adapter.toggleOptionMultiple(index, isSelected);
             }
             this._emitChangeEvent();
+            this._tryUpdateDropdownPosition();
         };
         // We close the dropdown immediately if in single selection mode
         if (this._isDropdownOpen && !this._multiple) {
@@ -501,6 +502,9 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation {
             if (shouldContinue) {
                 select();
             }
+            else {
+                this._tryUpdateDropdownPosition();
+            }
             this._valueChanging = undefined;
         }
         else {
@@ -519,6 +523,11 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation {
     _emitChangeEvent() {
         this._adapter.emitHostEvent(AUTOCOMPLETE_CONSTANTS.events.CHANGE, this._getValue(), true);
     }
+    _tryUpdateDropdownPosition() {
+        if (this._isDropdownOpen) {
+            this._adapter.queueDropdownPositionUpdate();
+        }
+    }
     /**
      * Retrieves the current value(s) from the selected options array based on whether
      * we are in multi-select mode or not.

package/esm/badge/badge.js

@@ -9,8 +9,8 @@ import { BaseComponent } from '../core/base/base-component';
 import { BadgeAdapter } from './badge-adapter';
 import { BADGE_CONSTANTS } from './badge-constants';
 import { BadgeFoundation } from './badge-foundation';
-const template = '<template><div class=\"forge-badge forge-badge--open\" part=\"root\"><slot></slot></div></template>';
-const styles = '.forge-badge{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);height:1.25rem;height:var(--forge-badge-height,1.25rem);line-height:1.25rem;line-height:var(--forge-badge-line-height, 1.25rem);min-width:0;min-width:var(--forge-badge-min-width,0);max-width:auto;max-width:var(--forge-badge-max-width,auto);border:none;border:var(--forge-badge-border,none);display:inline-block;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;-webkit-transform:scale(0);transform:scale(0);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;border-radius:16px;padding:0 8px;font-weight:700}.forge-badge--elevated{box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.forge-badge--open{-webkit-transform:scale(1);transform:scale(1)}.forge-badge--dot{height:.5rem;width:.5rem;min-width:auto;padding:0}:host{display:-webkit-box;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]){display:none}:host([positioned]){position:absolute;top:0;left:100%;-webkit-transform:translateX(-1.25rem);transform:translateX(-1.25rem)}:host([dot]){top:.5rem}:host([dot]) .forge-badge>slot{display:none}:host([static]){position:static}:host(:not([theme])) .forge-badge,:host([theme=\"\"]) .forge-badge{background:#ffc107;background:var(--forge-badge-theme-default-muted-background,#ffc107);color:rgba(0,0,0,.87);color:var(--forge-badge-theme-default-muted-color,rgba(0,0,0,.87))}:host(:not([theme])[strong]) .forge-badge,:host([theme=\"\"][strong]) .forge-badge{background:#3d5afe;background:var(--forge-badge-theme-default-strong-background,#3d5afe);color:#fff;color:var(--forge-badge-theme-default-strong-color,#fff)}:host([theme=default]) .forge-badge{background:#ffc107;background:var(--forge-badge-theme-default-muted-background,#ffc107);color:rgba(0,0,0,.87);color:var(--forge-badge-theme-default-muted-color,rgba(0,0,0,.87))}:host([theme=default][strong]) .forge-badge{background:#3d5afe;background:var(--forge-badge-theme-default-strong-background,#3d5afe);color:#fff;color:var(--forge-badge-theme-default-strong-color,#fff)}:host([theme=danger]) .forge-badge{background:#ffcdd2;background:var(--forge-badge-theme-danger-muted-background,#ffcdd2);color:#a22d0e;color:var(--forge-badge-theme-danger-muted-color,#a22d0e)}:host([theme=danger][strong]) .forge-badge{background:#b00020;background:var(--forge-badge-theme-danger-strong-background,#b00020);color:#fff;color:var(--forge-badge-theme-danger-strong-color,#fff)}:host([theme=warning]) .forge-badge{background:#ffdba6;background:var(--forge-badge-theme-warning-muted-background,#ffdba6);color:#a03a03;color:var(--forge-badge-theme-warning-muted-color,#a03a03)}:host([theme=warning][strong]) .forge-badge{background:#d14900;background:var(--forge-badge-theme-warning-strong-background,#d14900);color:#fff;color:var(--forge-badge-theme-warning-strong-color,#fff)}:host([theme=success]) .forge-badge{background:#a5d6a7;background:var(--forge-badge-theme-success-muted-background,#a5d6a7);color:#1b5e20;color:var(--forge-badge-theme-success-muted-color,#1b5e20)}:host([theme=success][strong]) .forge-badge{background:#2e7d32;background:var(--forge-badge-theme-success-strong-background,#2e7d32);color:#fff;color:var(--forge-badge-theme-success-strong-color,#fff)}:host([theme=info-primary]) .forge-badge{background:#bbdefb;background:var(--forge-badge-theme-info-primary-muted-background,#bbdefb);color:#1a237e;color:var(--forge-badge-theme-info-primary-muted-color,#1a237e)}:host([theme=info-primary][strong]) .forge-badge{background:#1a237e;background:var(--forge-badge-theme-info-primary-strong-background,#1a237e);color:#fff;color:var(--forge-badge-theme-info-primary-strong-color,#fff)}:host([theme=info-secondary]) .forge-badge{background:#e0e0e0;background:var(--forge-badge-theme-info-secondary-muted-background,#e0e0e0);color:#000;color:var(--forge-badge-theme-info-secondary-muted-color,#000)}:host([theme=info-secondary][strong]) .forge-badge{background:#000;background:var(--forge-badge-theme-info-secondary-strong-background,#000);color:#fff;color:var(--forge-badge-theme-info-secondary-strong-color,#fff)}';
+const template = '<template><div class=\"forge-badge forge-badge--open\" part=\"root\"><slot name=\"leading\"></slot><slot></slot><slot name=\"trailing\"></slot></div></template>';
+const styles = '.forge-badge{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);height:1.25rem;height:var(--forge-badge-height,1.25rem);line-height:1.25rem;line-height:var(--forge-badge-line-height, 1.25rem);min-width:0;min-width:var(--forge-badge-min-width,0);max-width:auto;max-width:var(--forge-badge-max-width,auto);border:none;border:var(--forge-badge-border,none);display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;gap:4px;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;-webkit-transform:scale(0);transform:scale(0);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;border-radius:16px;padding:0 8px;font-weight:700}.forge-badge--elevated{box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.forge-badge--open{-webkit-transform:scale(1);transform:scale(1)}.forge-badge--dot{height:.5rem;width:.5rem;min-width:auto;padding:0}:host{--forge-icon-font-size:14px;display:-webkit-box;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]){display:none}:host([positioned]){position:absolute;top:0;left:100%;-webkit-transform:translateX(-1.25rem);transform:translateX(-1.25rem)}:host([dot]){top:.5rem}:host([dot]) .forge-badge>slot{display:none}:host([static]){position:static}:host(:not([theme])) .forge-badge,:host([theme=\"\"]) .forge-badge{background:#ffc107;background:var(--forge-badge-theme-default-muted-background,#ffc107);color:rgba(0,0,0,.87);color:var(--forge-badge-theme-default-muted-color,rgba(0,0,0,.87))}:host(:not([theme])[strong]) .forge-badge,:host([theme=\"\"][strong]) .forge-badge{background:#3d5afe;background:var(--forge-badge-theme-default-strong-background,#3d5afe);color:#fff;color:var(--forge-badge-theme-default-strong-color,#fff)}:host([theme=default]) .forge-badge{background:#ffc107;background:var(--forge-badge-theme-default-muted-background,#ffc107);color:rgba(0,0,0,.87);color:var(--forge-badge-theme-default-muted-color,rgba(0,0,0,.87))}:host([theme=default][strong]) .forge-badge{background:#3d5afe;background:var(--forge-badge-theme-default-strong-background,#3d5afe);color:#fff;color:var(--forge-badge-theme-default-strong-color,#fff)}:host([theme=danger]) .forge-badge{background:#ffcdd2;background:var(--forge-badge-theme-danger-muted-background,#ffcdd2);color:#a22d0e;color:var(--forge-badge-theme-danger-muted-color,#a22d0e)}:host([theme=danger][strong]) .forge-badge{background:#b00020;background:var(--forge-badge-theme-danger-strong-background,#b00020);color:#fff;color:var(--forge-badge-theme-danger-strong-color,#fff)}:host([theme=warning]) .forge-badge{background:#ffdba6;background:var(--forge-badge-theme-warning-muted-background,#ffdba6);color:#a03a03;color:var(--forge-badge-theme-warning-muted-color,#a03a03)}:host([theme=warning][strong]) .forge-badge{background:#d14900;background:var(--forge-badge-theme-warning-strong-background,#d14900);color:#fff;color:var(--forge-badge-theme-warning-strong-color,#fff)}:host([theme=success]) .forge-badge{background:#a5d6a7;background:var(--forge-badge-theme-success-muted-background,#a5d6a7);color:#1b5e20;color:var(--forge-badge-theme-success-muted-color,#1b5e20)}:host([theme=success][strong]) .forge-badge{background:#2e7d32;background:var(--forge-badge-theme-success-strong-background,#2e7d32);color:#fff;color:var(--forge-badge-theme-success-strong-color,#fff)}:host([theme=info-primary]) .forge-badge{background:#bbdefb;background:var(--forge-badge-theme-info-primary-muted-background,#bbdefb);color:#1a237e;color:var(--forge-badge-theme-info-primary-muted-color,#1a237e)}:host([theme=info-primary][strong]) .forge-badge{background:#1a237e;background:var(--forge-badge-theme-info-primary-strong-background,#1a237e);color:#fff;color:var(--forge-badge-theme-info-primary-strong-color,#fff)}:host([theme=info-secondary]) .forge-badge{background:#e0e0e0;background:var(--forge-badge-theme-info-secondary-muted-background,#e0e0e0);color:#000;color:var(--forge-badge-theme-info-secondary-muted-color,#000)}:host([theme=info-secondary][strong]) .forge-badge{background:#000;background:var(--forge-badge-theme-info-secondary-strong-background,#000);color:#fff;color:var(--forge-badge-theme-info-secondary-strong-color,#fff)}';
 /**
  * The web component class behind the `<forge-badge>` custom element.
  *

package/esm/button-toggle/button-toggle-group/button-toggle-group-constants.d.ts

@@ -25,7 +25,7 @@ export declare const BUTTON_TOGGLE_GROUP_CONSTANTS: {
         CHANGE: string;
     };
 };
-export declare type IButtonToggleGroupChangeEventData<T> = T;
+export declare type IButtonToggleGroupChangeEventData<T = any> = T;
 export interface IButtonToggleOption {
     label?: string;
     icon?: string;

package/esm/button-toggle/button-toggle-group/button-toggle-group.d.ts

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
-import { IButtonToggleOption } from './button-toggle-group-constants';
+import { IButtonToggleGroupChangeEventData, IButtonToggleOption } from './button-toggle-group-constants';
 export interface IButtonToggleGroupComponent extends IBaseComponent {
     value: any;
     multiple: boolean;
@@ -19,6 +19,9 @@ declare global {
     interface HTMLElementTagNameMap {
         'forge-button-toggle-group': IButtonToggleGroupComponent;
     }
+    interface HTMLElementEventMap {
+        'forge-button-toggle-group-change': CustomEvent<IButtonToggleGroupChangeEventData>;
+    }
 }
 /**
  * The web component class behind the `<forge-button-toggle-group>` custom element.

package/esm/core/utils/utils.d.ts

@@ -59,3 +59,9 @@ export declare function safeMin(...args: (number | undefined)[]): number;
  * @returns The max value or `Number.NEGATIVE_INFINITY` if all values are `undefined`.
  */
 export declare function safeMax(...args: (number | undefined)[]): number;
+/**
+ * Copies properties from one object to another, much like Object.assign(), but only where properties exist in both source objects.
+ * @param from The object to apply properties from.
+ * @param to The object to apply property values to.
+ */
+export declare function assignMatchingProperties(from: object, to: object): void;

package/esm/core/utils/utils.js

@@ -113,3 +113,13 @@ export function safeMin(...args) {
 export function safeMax(...args) {
     return Math.max(...args.map(arg => arg !== null && arg !== void 0 ? arg : Number.NEGATIVE_INFINITY));
 }
+/**
+ * Copies properties from one object to another, much like Object.assign(), but only where properties exist in both source objects.
+ * @param from The object to apply properties from.
+ * @param to The object to apply property values to.
+ */
+export function assignMatchingProperties(from, to) {
+    Object.keys(from)
+        .filter(prop => prop in to)
+        .forEach(prop => to[prop] = from[prop]);
+}

package/esm/expansion-panel/expansion-panel-foundation.js

@@ -124,8 +124,8 @@ export class ExpansionPanelFoundation {
      * @param {KeyboardEvent} evt The keydown event
      */
     _onKeydown(evt) {
-        evt.stopPropagation();
-        if (evt.key === 'Space' || evt.key === 'Enter' || evt.keyCode === 32 || evt.keyCode === 13) {
+        if (evt.key === ' ' || evt.key === 'Enter') {
+            evt.stopPropagation();
             evt.preventDefault();
             this._toggle();
             this._emitEvent();

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

@@ -13,6 +13,9 @@ export declare const FIELD_CONSTANTS: {
         HOST_LABEL_FLOATING: string;
     };
     observedInputAttributes: string[];
+    selectors: {
+        INPUT: string;
+    };
     classes: {
         DISABLED: string;
         READONLY: string;

package/esm/field/field-constants.js

@@ -11,6 +11,9 @@ const attributes = {
     REQUIRED: 'required',
     HOST_LABEL_FLOATING: `forge-label-floating`
 };
+const selectors = {
+    INPUT: 'input,textarea'
+};
 const observedInputAttributes = ['disabled', 'readonly', 'value', 'placeholder'];
 const classes = {
     DISABLED: 'forge-field--disabled',
@@ -32,5 +35,6 @@ const classes = {
 export const FIELD_CONSTANTS = {
     attributes,
     observedInputAttributes,
+    selectors,
     classes
 };

package/esm/field/field.js

@@ -6,7 +6,7 @@
 import { __decorate } from "tslib";
 import { FIELD_CONSTANTS } from './field-constants';
 import { BaseComponent } from '../core/base/base-component';
-import { coerceBoolean, ensureChildren, FoundationProperty } from '@tylertech/forge-core';
+import { coerceBoolean, ensureChild, FoundationProperty } from '@tylertech/forge-core';
 export class FieldComponent extends BaseComponent {
     constructor() {
         super();
@@ -21,11 +21,11 @@ export class FieldComponent extends BaseComponent {
         ];
     }
     connectedCallback() {
-        if (this.children.length) {
+        if (this.querySelector(FIELD_CONSTANTS.selectors.INPUT)) {
             this._initialize();
         }
         else {
-            ensureChildren(this).then(() => this._initialize());
+            ensureChild(this, FIELD_CONSTANTS.selectors.INPUT).then(() => this._initialize());
         }
     }
     _initialize() {

package/esm/menu/menu-foundation.d.ts

@@ -74,6 +74,7 @@ export declare class MenuFoundation extends CascadingListDropdownAwareFoundation
     protected _openDropdown(): void;
     protected _isOwnElement(element: Element): boolean;
     private _createCascadingElement;
+    private _mapIconToLeadingIcon;
     get open(): boolean;
     set open(value: boolean);
     set options(options: IMenuOption[]);

package/esm/menu/menu-foundation.js

@@ -218,9 +218,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
         if (!this._persistSelection) {
             options.forEach(o => o.selected = false);
         }
-        const flatOptions = this._flatOptions;
-        // Map the old "icon" property to the new "leadingIcon" property (if exists)
-        flatOptions.filter(o => o.icon).forEach(o => o.leadingIcon = o.icon);
+        this._mapIconToLeadingIcon();
         const selectedValues = this._persistSelection ? this._getSelectedValues() : [];
         const config = {
             id: this._identifier,
@@ -384,6 +382,10 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
         menu.iconClass = this._iconClass;
         return menu;
     }
+    _mapIconToLeadingIcon() {
+        // For backwards compatibility with old API, map the old "icon" property to the new "leadingIcon" property (if exists)
+        this._flatOptions.filter(o => o.icon).forEach(o => o.leadingIcon = o.icon);
+    }
     get open() {
         return this._open;
     }
@@ -410,6 +412,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
             //   function to the core library.
             this._options = options.map(o => (Object.assign({}, o)));
             if (this._open) {
+                this._mapIconToLeadingIcon();
                 this._adapter.setOptions(this._options);
                 if (this._persistSelection) {
                     const selectedValues = this._getSelectedValues();

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

@@ -31,6 +31,7 @@ export interface IBaseSelectAdapter extends IBaseAdapter {
     appendDropdownOptions(options: ISelectOption[] | ISelectOptionGroup[]): void;
     setMultiple(multiple: boolean): void;
     isFocusWithinPopup(target: HTMLElement): boolean;
+    queueDropdownPositionUpdate(): void;
     popupElement: HTMLElement | undefined;
 }
 export declare abstract class BaseSelectAdapter extends BaseAdapter<IBaseSelectComponent> implements IBaseSelectAdapter {
@@ -62,6 +63,7 @@ export declare abstract class BaseSelectAdapter extends BaseAdapter<IBaseSelectC
     setDropdownOptions(options: ISelectOption[] | ISelectOptionGroup[]): void;
     scrollSelectedOptionIntoView(): void;
     isFocusWithinPopup(target: HTMLElement): boolean;
+    queueDropdownPositionUpdate(): void;
     private _clearOptions;
     private _createOptionGroupElement;
     private _createOptionElement;

package/esm/select/core/base-select-adapter.js

@@ -10,6 +10,7 @@ import { OPTION_CONSTANTS } from '../option';
 import { OPTION_GROUP_CONSTANTS } from '../option-group';
 import { isOptionGroupObject } from './select-utils';
 import { POPUP_CONSTANTS } from '../../popup';
+import { assignMatchingProperties } from '../../core/utils/utils';
 export class BaseSelectAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
@@ -142,6 +143,16 @@ export class BaseSelectAdapter extends BaseAdapter {
         }
         return this._listDropdown.dropdownElement.contains(target);
     }
+    queueDropdownPositionUpdate() {
+        if (!this.popupElement) {
+            return;
+        }
+        // We need to wait for the next animation frame to ensure that the layout has been updated
+        window.requestAnimationFrame(() => {
+            const dropdownEl = this.popupElement;
+            dropdownEl === null || dropdownEl === void 0 ? void 0 : dropdownEl.position();
+        });
+    }
     _clearOptions() {
         // First we remove all option group elements
         const existingOptionGroupElements = Array.from(this._component.querySelectorAll(OPTION_GROUP_CONSTANTS.elementName));
@@ -151,17 +162,16 @@ export class BaseSelectAdapter extends BaseAdapter {
         existingOptionElements.forEach((o) => removeElement(o));
     }
     _createOptionGroupElement(group) {
-        const optionGroupElement = document.createElement(OPTION_GROUP_CONSTANTS.elementName);
-        optionGroupElement.label = group.text || '';
+        var _a;
+        const optionGroupElement = document.createElement('forge-option-group');
+        assignMatchingProperties(group, optionGroupElement);
+        optionGroupElement.label = (_a = group.text) !== null && _a !== void 0 ? _a : '';
         return optionGroupElement;
     }
     _createOptionElement(option) {
-        const optionElement = document.createElement(OPTION_CONSTANTS.elementName);
-        optionElement.value = option.value;
+        const optionElement = document.createElement('forge-option');
+        assignMatchingProperties(option, optionElement);
         optionElement.textContent = option.label;
-        if (option.disabled) {
-            optionElement.disabled = option.disabled;
-        }
         return optionElement;
     }
 }

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

@@ -79,6 +79,7 @@ export declare abstract class BaseSelectFoundation<T extends IBaseSelectAdapter>
      */
     protected _onSelect(option: ISelectOption, optionIndex: number, closeDropdown?: boolean): Promise<boolean>;
     private _selectActiveOption;
+    protected _tryUpdateDropdownPosition(): void;
     protected _reset(): void;
     protected _applyValue(value: string | string[]): void;
     /**

package/esm/select/core/base-select-foundation.js

@@ -215,6 +215,7 @@ export class BaseSelectFoundation extends ListDropdownAwareFoundation {
                 this._valueChanging = undefined;
                 if (!shouldContinue) {
                     rollbackValue();
+                    this._tryUpdateDropdownPosition();
                     return resolve(false);
                 }
             }
@@ -226,6 +227,7 @@ export class BaseSelectFoundation extends ListDropdownAwareFoundation {
             else {
                 rollbackValue();
             }
+            this._tryUpdateDropdownPosition();
             resolve(!cancelled);
         });
     }
@@ -235,6 +237,11 @@ export class BaseSelectFoundation extends ListDropdownAwareFoundation {
             this._onSelect(this._nonDividerOptions[activeOptionIndex], activeOptionIndex);
         }
     }
+    _tryUpdateDropdownPosition() {
+        if (this._open) {
+            this._adapter.queueDropdownPositionUpdate();
+        }
+    }
     _reset() {
         this._selectedValues = [];
         this._selectedLabels = [];

package/esm/split-view/split-view/split-view-adapter.d.ts

@@ -9,6 +9,8 @@ import { ISplitViewComponent } from './split-view';
 import { SplitViewOrientation } from './split-view-constants';
 export interface ISplitViewAdapter extends IBaseAdapter {
     registerSlotListener(listener: (evt: Event) => void): void;
+    registerDidOpenListener(listener: () => void): void;
+    registerDidCloseListener(listener: () => void): void;
     observeResize(callback: (entry: ResizeObserverEntry) => void): void;
     unobserveResize(): void;
     getSlottedPanels(): ISplitViewPanelComponent[];
@@ -18,6 +20,8 @@ export declare class SplitViewAdapter extends BaseAdapter<ISplitViewComponent> i
     private _root;
     constructor(component: ISplitViewComponent);
     registerSlotListener(listener: (evt: Event) => void): void;
+    registerDidOpenListener(listener: () => void): void;
+    registerDidCloseListener(listener: () => void): void;
     observeResize(callback: (entry: ResizeObserverEntry) => void): void;
     unobserveResize(): void;
     /**

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

@@ -15,6 +15,12 @@ export class SplitViewAdapter extends BaseAdapter {
     registerSlotListener(listener) {
         this._root.addEventListener('slotchange', listener);
     }
+    registerDidOpenListener(listener) {
+        this._root.addEventListener(SPLIT_VIEW_PANEL_CONSTANTS.events.DID_OPEN, listener);
+    }
+    registerDidCloseListener(listener) {
+        this._root.addEventListener(SPLIT_VIEW_PANEL_CONSTANTS.events.DID_CLOSE, listener);
+    }
     observeResize(callback) {
         ForgeResizeObserver.observe(this._root, callback);
     }
@@ -46,7 +52,7 @@ export class SplitViewAdapter extends BaseAdapter {
         // Get the size adjustment needed to fit
         let diff = combinedPanelSize - size;
         // Size down the panels as needed in reverse order, adjusting diff accordingly
-        panels.reverse().forEach(panel => {
+        panels.slice().reverse().forEach(panel => {
             if (diff <= 0) {
                 return;
             }

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

@@ -23,12 +23,16 @@ export declare class SplitViewFoundation implements ISplitViewFoundation {
     private _autoClose;
     private _autoCloseThreshold;
     private _slotListener;
+    private _didOpenListener;
+    private _didCloseListener;
     private _resizeObserverCallback;
     private _isInitialized;
     constructor(_adapter: ISplitViewAdapter);
     initialize(): void;
     disconnect(): void;
     private _onSlotChange;
+    private _onDidOpen;
+    private _onDidClose;
     private _onResize;
     /**
      * Sets the resizable value of slotted panels with no resizable value set.

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

@@ -16,10 +16,14 @@ export class SplitViewFoundation {
         this._autoCloseThreshold = 0;
         this._isInitialized = false;
         this._slotListener = evt => this._onSlotChange(evt);
+        this._didOpenListener = () => this._onDidOpen();
+        this._didCloseListener = () => this._onDidClose();
         this._resizeObserverCallback = throttle((entry) => this._onResize(entry), SPLIT_VIEW_CONSTANTS.numbers.RESIZE_THROTTLE_THRESHOLD);
     }
     initialize() {
         this._adapter.registerSlotListener(this._slotListener);
+        this._adapter.registerDidOpenListener(this._didOpenListener);
+        this._adapter.registerDidCloseListener(this._didCloseListener);
         this._adapter.observeResize(this._resizeObserverCallback);
         this._applyOrientation();
         this._isInitialized = true;
@@ -31,6 +35,14 @@ export class SplitViewFoundation {
         this._layoutSlottedPanels();
         this.update({ accessibility: true, cursor: true, orientation: this._orientation });
     }
+    _onDidOpen() {
+        this._adapter.refitSlottedPanels(this._orientation);
+        this.update({ accessibility: true, cursor: true, size: true });
+    }
+    _onDidClose() {
+        this._adapter.refitSlottedPanels(this._orientation);
+        this.update({ accessibility: true, cursor: true, size: true });
+    }
     _onResize(entry) {
         this.update({ accessibility: true, cursor: true, size: true });
     }

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

@@ -19,6 +19,11 @@ declare global {
         'forge-split-view': ISplitViewComponent;
     }
 }
+/**
+ * The custom element class behind the `<forge-split-view>` element.
+ *
+ * @tag forge-split-view
+ */
 export declare class SplitViewComponent extends BaseComponent implements ISplitViewComponent {
     static get observedAttributes(): string[];
     private _foundation;

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

@@ -12,6 +12,11 @@ import { SPLIT_VIEW_CONSTANTS } from './split-view-constants';
 import { SplitViewPanelComponent } from '../split-view-panel';
 const template = '<template><div class=\"forge-split-view\" id=\"root\" part=\"root\"><slot></slot></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{display:-webkit-box;display:flex;width:100%;height:100%}:host{--forge-split-view-handle-width:8px;display:block;height:100%;width:100%;overflow:hidden;contain:paint size}:host([hidden]){display:none}:host([orientation=horizontal]) .forge-split-view{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}:host([orientation=vertical]) .forge-split-view{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}';
+/**
+ * The custom element class behind the `<forge-split-view>` element.
+ *
+ * @tag forge-split-view
+ */
 let SplitViewComponent = class SplitViewComponent extends BaseComponent {
     constructor() {
         super();

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

@@ -638,7 +638,7 @@ export class SplitViewPanelFoundation {
             }
         }
         // Size
-        if (config.size) {
+        if (config.size && this.open) {
             const parentSize = this._adapter.getParentSize(this._orientation);
             this._pixelMin = getPixelDimension(this._min, parentSize);
             this._pixelMax = isDefined(this._max) ? getPixelDimension(this._max, parentSize) : undefined;
@@ -651,7 +651,7 @@ export class SplitViewPanelFoundation {
         const size = this._adapter.getContentSize(this._orientation);
         const availableSpace = this._adapter.getAvailableSpace(this._orientation, this._resizable);
         // Accessibility
-        if (config.accessibility) {
+        if (config.accessibility && this.open) {
             const valueNow = getValuenow(size, Object.assign(Object.assign({}, this._state), { availableSpace }));
             this._adapter.setValuenow(valueNow);
         }

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

@@ -34,6 +34,11 @@ declare global {
         'forge-split-view-panel-did-close': CustomEvent<ISplitViewPanelOpenEvent>;
     }
 }
+/**
+ * The custom element class behind the `<forge-split-view-panel>` element.
+ *
+ * @tag forge-split-view-panel
+ */
 export declare class SplitViewPanelComponent extends BaseComponent implements ISplitViewPanelComponent {
     static get observedAttributes(): string[];
     private _foundation;

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

@@ -14,7 +14,12 @@ 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:ucimscr;animation-name:ucimscr;-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 ucimscr{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes ucimscr{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:ucimsd6;animation-name:ucimsd6;-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 ucimsd6{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes ucimsd6{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:ucimse3;animation-name:ucimse3;-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 ucimse3{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes ucimse3{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:ucimser;animation-name:ucimser;-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 ucimser{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes ucimser{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:ucimsf8;animation-name:ucimsf8;-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 ucimsf8{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes ucimsf8{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:ucimsfs;animation-name:ucimsfs;-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 ucimsfs{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes ucimsfs{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:ucimsgm;animation-name:ucimsgm;-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 ucimsgm{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes ucimsgm{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:ucimshh;animation-name:ucimshh;-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 ucimshh{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes ucimshh{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:uys0ncu;animation-name:uys0ncu;-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 uys0ncu{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uys0ncu{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:uys0ndo;animation-name:uys0ndo;-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 uys0ndo{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uys0ndo{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:uys0nen;animation-name:uys0nen;-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 uys0nen{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uys0nen{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:uys0nf0;animation-name:uys0nf0;-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 uys0nf0{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uys0nf0{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:uys0nfj;animation-name:uys0nfj;-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 uys0nfj{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uys0nfj{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:uys0nfq;animation-name:uys0nfq;-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 uys0nfq{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uys0nfq{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:uys0ng5;animation-name:uys0ng5;-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 uys0ng5{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uys0ng5{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:uys0ngq;animation-name:uys0ngq;-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 uys0ngq{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uys0ngq{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;-webkit-box-flex:0;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){-webkit-box-flex:1;flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}';
+/**
+ * The custom element class behind the `<forge-split-view-panel>` element.
+ *
+ * @tag forge-split-view-panel
+ */
 let SplitViewPanelComponent = class SplitViewPanelComponent extends BaseComponent {
     constructor() {
         super();