@tylertech/forge 2.15.0 → 2.16.1

package/esm/chip-field/chip-field-foundation.d.ts

@@ -17,7 +17,7 @@ export declare class ChipFieldFoundation extends FieldFoundation implements IChi
     initialize(): void;
     disconnect(): void;
     private _onInputContainerMouseDown;
-    protected _onBlur(event: Event): void;
+    protected _onBlur(event: FocusEvent): void;
     private _onRootKeyDown;
     private _onKeyDown;
     private _focusNextMember;

package/esm/date-picker/base/base-date-picker-adapter.d.ts

@@ -24,7 +24,7 @@ export interface IBaseDatePickerAdapter extends IBaseAdapter {
     tryFocusInput(): void;
     tryBlurInput(): void;
     isInputDisabled(): boolean;
-    isInputFocused(): boolean;
+    isInputFocused(target?: EventTarget | null): boolean;
     setDisabled(value: boolean): void;
     getInputValue(): string;
     setInputValue(value: string, emitEvents: boolean): void;
@@ -63,7 +63,7 @@ export declare abstract class BaseDatePickerAdapter<T extends BaseComponent> ext
     abstract tryFocusInput(): void;
     abstract tryBlurInput(): void;
     abstract isInputDisabled(): boolean;
-    abstract isInputFocused(): boolean;
+    abstract isInputFocused(target?: EventTarget | null): boolean;
     abstract setDisabled(value: boolean): void;
     abstract addInputListener(type: string, listener: (event: Event) => void, capture?: boolean): void;
     abstract removeInputListener(type: string, listener: (event: Event) => void, capture?: boolean): void;

package/esm/date-picker/base/base-date-picker-foundation.d.ts

@@ -88,8 +88,8 @@ export declare abstract class BaseDatePickerFoundation<TAdapter extends IBaseDat
     protected _removeInputChangeListeners(): void;
     protected _destroyListeners(): void;
     protected _onInput(evt: Event): void;
-    protected _onInputFocus(evt: Event): void;
-    protected _onInputBlur(evt: Event): void;
+    protected _onInputFocus(evt: FocusEvent): void;
+    protected _onInputBlur(evt: FocusEvent): void;
     protected _openCalendar(emitOpenEvent?: boolean): void;
     protected _closeCalendar(emitCloseEvent?: boolean): void;
     protected _onInputKeydown(evt: KeyboardEvent): void;

package/esm/date-picker/base/base-date-picker-foundation.js

@@ -93,8 +93,14 @@ export class BaseDatePickerFoundation {
     }
     _onInputFocus(evt) {
         this._adapter.selectInputText();
+        if (this.masked && this.showMaskFormat) {
+            this._applyMask();
+        }
     }
     _onInputBlur(evt) {
+        if (this.masked && this.showMaskFormat) {
+            this._applyMask();
+        }
         this._formatInputValue();
         if (this._open && !this._adapter.isInputFocused()) {
             this._closeCalendar(true);
@@ -326,7 +332,7 @@ export class BaseDatePickerFoundation {
         }
     }
     _isDateValueAcceptable(value) {
-        if (!value) {
+        if (!value || this._allowInvalidDate) {
             return true;
         }
         const passesMinDate = () => this._min && !this._allowInvalidDate ? this._min.getTime() <= value.getTime() : true;
@@ -339,7 +345,7 @@ export class BaseDatePickerFoundation {
     }
     _initializeMask() {
         const options = {
-            showMaskFormat: this._showMaskFormat,
+            showMaskFormat: this._showMaskFormat && this._adapter.isInputFocused(),
             pattern: this._maskFormat,
             onChange: (value) => this._handleInput(value)
         };
@@ -515,9 +521,6 @@ export class BaseDatePickerFoundation {
     set showMaskFormat(value) {
         if (this._showMaskFormat !== value) {
             this._showMaskFormat = value;
-            if (this._isInitialized) {
-                this._applyMask();
-            }
         }
     }
     get notifyInputValueChanges() {

package/esm/date-picker/date-picker-adapter.js

@@ -21,16 +21,14 @@ export class DatePickerAdapter extends BaseDatePickerAdapter {
         this._calendarDropdown = new CalendarDropdown(targetElement, this._dropdownIdentifier);
     }
     initializeMask(options) {
-        if (this._inputMask) {
-            this._inputMask.destroy();
-        }
+        var _a;
+        (_a = this._inputMask) === null || _a === void 0 ? void 0 : _a.destroy();
         this._inputMask = new DateInputMask(this._inputElement, options);
     }
     destroyMask() {
-        if (this._inputMask) {
-            this._inputMask.destroy();
-            this._inputMask = undefined;
-        }
+        var _a;
+        (_a = this._inputMask) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._inputMask = undefined;
     }
     initializeAccessibility() {
         this._inputElement.setAttribute('autocomplete', 'off');

package/esm/date-range-picker/date-range-picker-adapter.d.ts

@@ -20,6 +20,7 @@ export interface IDateRangePickerAdapter extends IBaseDatePickerAdapter {
     tryFocusInput(): void;
     tryBlurInput(): void;
     selectToInputText(): void;
+    destroyToMask(): void;
 }
 export declare class DateRangePickerAdapter extends BaseDatePickerAdapter<IDateRangePickerComponent> implements IDateRangePickerAdapter {
     private _fromInputElement;
@@ -32,9 +33,10 @@ export declare class DateRangePickerAdapter extends BaseDatePickerAdapter<IDateR
     protected _initializeInput(): void;
     protected _initializeCalendarDropdown(): void;
     initializeMask(fromOptions: IDateInputMaskOptions): void;
+    destroyMask(): void;
     initializeToMask(toOptions: IDateInputMaskOptions): void;
+    destroyToMask(): void;
     destroy(): void;
-    destroyMask(): void;
     private _destroyToValueChangeListener;
     initializeAccessibility(): void;
     addInputListener(type: string, listener: (event: Event) => void, capture?: boolean): void;
@@ -50,7 +52,7 @@ export declare class DateRangePickerAdapter extends BaseDatePickerAdapter<IDateR
     setInputValue(value: string, emitEvents: boolean): void;
     setToInputValue(value: string, emitEvents: boolean): void;
     isInputDisabled(): boolean;
-    isInputFocused(): boolean;
+    isInputFocused(target?: EventTarget | null): boolean;
     getInputValue(): string;
     getToInputValue(): string;
     setDisabled(isDisabled: boolean): void;

package/esm/date-range-picker/date-range-picker-adapter.js

@@ -26,31 +26,29 @@ export class DateRangePickerAdapter extends BaseDatePickerAdapter {
         this._calendarDropdown = new CalendarDropdown(targetElement, this._dropdownIdentifier);
     }
     initializeMask(fromOptions) {
-        if (this._fromInputMask) {
-            this._fromInputMask.destroy();
-        }
+        var _a;
+        (_a = this._fromInputMask) === null || _a === void 0 ? void 0 : _a.destroy();
         this._fromInputMask = new DateInputMask(this._fromInputElement, fromOptions);
     }
+    destroyMask() {
+        var _a;
+        (_a = this._fromInputMask) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._fromInputMask = undefined;
+    }
     initializeToMask(toOptions) {
-        if (this._toInputMask) {
-            this._toInputMask.destroy();
-        }
+        var _a;
+        (_a = this._toInputMask) === null || _a === void 0 ? void 0 : _a.destroy();
         this._toInputMask = new DateInputMask(this._toInputElement, toOptions);
     }
+    destroyToMask() {
+        var _a;
+        (_a = this._toInputMask) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._toInputMask = undefined;
+    }
     destroy() {
         super.destroy();
         this._destroyToValueChangeListener();
     }
-    destroyMask() {
-        if (this._fromInputMask) {
-            this._fromInputMask.destroy();
-            this._fromInputMask = undefined;
-        }
-        if (this._toInputMask) {
-            this._toInputMask.destroy();
-            this._toInputMask = undefined;
-        }
-    }
     _destroyToValueChangeListener() {
         if (typeof this._toValueChangeListener === 'function') {
             this._toValueChangeListener();
@@ -142,8 +140,12 @@ export class DateRangePickerAdapter extends BaseDatePickerAdapter {
     isInputDisabled() {
         return this._fromInputElement.disabled;
     }
-    isInputFocused() {
-        return this._toInputElement === getActiveElement() || this._fromInputElement === getActiveElement();
+    isInputFocused(target) {
+        if (target && this._toInputElement === target || this._fromInputElement === target) {
+            return true;
+        }
+        const activeEl = getActiveElement();
+        return this._toInputElement === activeEl || this._fromInputElement === activeEl;
     }
     getInputValue() {
         return this._fromInputElement.value;

package/esm/date-range-picker/date-range-picker-foundation.d.ts

@@ -33,6 +33,7 @@ export declare class DateRangePickerFoundation extends BaseDatePickerFoundation<
     protected _onToday(): void;
     protected _onClear(): void;
     protected _getCurrentValue(): IDatePickerRange | null | undefined;
+    private _applyToMask;
     private _formatToInputValue;
     protected _setFormattedInputValue(suppressValueChanges?: boolean): void;
     private _setFormattedToInputValue;
@@ -42,7 +43,7 @@ export declare class DateRangePickerFoundation extends BaseDatePickerFoundation<
     protected _onDateSelected(event: ICalendarDateSelectEventData): void;
     protected _applyMin(): void;
     protected _applyMax(): void;
-    protected _initializeMask(): void;
+    protected _initializeToMask(): void;
     protected _applyDisabledDates(): void;
     protected _applyDisabledDaysOfWeek(): void;
     private _onToInput;
@@ -50,6 +51,8 @@ export declare class DateRangePickerFoundation extends BaseDatePickerFoundation<
     private _handleToInput;
     private _onToInputFocus;
     private _onToInputBlur;
+    protected _onInputFocus(evt: FocusEvent): void;
+    protected _onInputBlur(evt: FocusEvent): void;
     protected _onInputValueChanged(value: string): void;
     private _onToInputValueChanged;
     get value(): IDatePickerRange | null | undefined;

package/esm/date-range-picker/date-range-picker-foundation.js

@@ -21,6 +21,7 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
         this._toInputBlurListener = evt => this._onToInputBlur(evt);
     }
     _initializeState() {
+        this._applyToMask();
         if (!this._from) {
             this._from = this._coerceDateValue(this._adapter.getInputValue());
         }
@@ -92,6 +93,15 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
     _getCurrentValue() {
         return this._value;
     }
+    _applyToMask() {
+        if (this._masked) {
+            this._initializeToMask();
+        }
+        else {
+            this._adapter.destroyToMask();
+            this._formatToInputValue();
+        }
+    }
     _formatToInputValue() {
         const inputValue = this._adapter.getToInputValue();
         if (inputValue) {
@@ -201,22 +211,21 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
         }
         super._applyMax();
     }
-    _initializeMask() {
-        super._initializeMask();
-        // We also need to initialize our mask for the "to" input
-        if (this._masked) {
-            const options = {
-                showMaskFormat: this._showMaskFormat,
-                pattern: this._maskFormat,
-                onChange: (value) => this._handleToInput(value)
+    _initializeToMask() {
+        if (!this._masked) {
+            return;
+        }
+        const options = {
+            showMaskFormat: this._showMaskFormat && this._adapter.isInputFocused(),
+            pattern: this._maskFormat,
+            onChange: (value) => this._handleToInput(value)
+        };
+        if (this._prepareMaskCallback) {
+            options.prepareCallback = (value, masked, flags, maskInstance) => {
+                return this._prepareMaskCallback.call(null, value, masked, flags, maskInstance);
             };
-            if (this._prepareMaskCallback) {
-                options.prepareCallback = (value, masked, flags, maskInstance) => {
-                    return this._prepareMaskCallback.call(null, value, masked, flags, maskInstance);
-                };
-            }
-            this._adapter.initializeToMask(options);
         }
+        this._adapter.initializeToMask(options);
     }
     _applyDisabledDates() {
         if (this._from && !this._isDateValueAcceptable(this._from)) {
@@ -263,13 +272,38 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
     }
     _onToInputFocus() {
         this._adapter.selectToInputText();
+        if (this.masked && this._showMaskFormat) {
+            this._initializeMask();
+            this._initializeToMask();
+        }
     }
     _onToInputBlur(evt) {
+        if (this._masked && !this._adapter.isInputFocused(evt.relatedTarget)) {
+            this._initializeMask();
+            this._initializeToMask();
+        }
         this._formatToInputValue();
         if (this._open) {
             this._closeCalendar(true);
         }
     }
+    _onInputFocus(evt) {
+        this._adapter.selectInputText();
+        if (this.masked && this._showMaskFormat) {
+            this._initializeMask();
+            this._initializeToMask();
+        }
+    }
+    _onInputBlur(evt) {
+        if (this.masked && !this._adapter.isInputFocused(evt.relatedTarget)) {
+            this._initializeMask();
+            this._initializeToMask();
+        }
+        this._formatInputValue();
+        if (this._open && !this._adapter.isInputFocused(evt.relatedTarget)) {
+            this._closeCalendar(true);
+        }
+    }
     _onInputValueChanged(value) {
         if (this._masked) {
             return;

package/esm/expansion-panel/expansion-panel-constants.d.ts

@@ -24,6 +24,8 @@ export declare const EXPANSION_PANEL_CONSTANTS: {
         OPEN: string;
         ORIENTATION: string;
         USE_ANIMATIONS: string;
+        IGNORE: string;
+        IGNORE_ALT: string;
     };
     numbers: {
         COLLAPSE_ANIMATION_DURATION: number;

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

@@ -24,7 +24,9 @@ const events = {
 const attributes = {
     OPEN: 'open',
     ORIENTATION: 'orientation',
-    USE_ANIMATIONS: 'use-animations'
+    USE_ANIMATIONS: 'use-animations',
+    IGNORE: 'data-forge-ignore',
+    IGNORE_ALT: 'forge-ignore'
 };
 const numbers = {
     COLLAPSE_ANIMATION_DURATION: 400,

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

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { debounce } from '@tylertech/forge-core';
+import { debounce, getEventPath } from '@tylertech/forge-core';
 import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
 export class ExpansionPanelFoundation {
     constructor(_adapter) {
@@ -115,6 +115,9 @@ export class ExpansionPanelFoundation {
      * @param {MouseEvent} evt The click event.
      */
     _onClick(evt) {
+        if (getEventPath(evt).find(p => p.nodeType === 1 && (p.hasAttribute(EXPANSION_PANEL_CONSTANTS.attributes.IGNORE) || p.hasAttribute(EXPANSION_PANEL_CONSTANTS.attributes.IGNORE_ALT)))) {
+            return;
+        }
         evt.stopPropagation();
         this._toggle();
         this._emitEvent();

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

@@ -9,7 +9,7 @@ import { BaseComponent } from '../core/base/base-component';
 import { ExpansionPanelAdapter } from './expansion-panel-adapter';
 import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
 import { ExpansionPanelFoundation } from './expansion-panel-foundation';
-const template = '<template><div class=\"forge-expansion-panel\" part=\"root\"><div class=\"forge-expansion-panel__header\" role=\"button\" aria-controls=\"content\" aria-expanded=\"false\" part=\"header\"><slot name=\"header\"></slot></div><div id=\"content\" role=\"group\" class=\"forge-expansion-panel__content\" style=\"height: 0; opacity: 0; visibility: hidden;\" part=\"content\"><slot></slot></div></div></template>';
+const template = '<template><div class=\"forge-expansion-panel\" part=\"root\"><div class=\"forge-expansion-panel__header\" part=\"header\"><slot name=\"header\"></slot></div><div class=\"forge-expansion-panel__content\" style=\"height: 0; opacity: 0; visibility: hidden;\" part=\"content\"><slot></slot></div></div></template>';
 const styles = '.forge-expansion-panel{display:block;display:var(--forge-expansion-panel-display,block);height:auto;height:var(--forge-expansion-panel-height,auto)}.forge-expansion-panel__header{outline:0}.forge-expansion-panel__header:hover{cursor:pointer}.forge-expansion-panel__header forge-open-icon{margin-left:auto}.forge-expansion-panel__content{overflow:hidden;overflow:var(--forge-expansion-panel-content-overflow,hidden);max-height:none;max-height:var(--forge-expansion-panel-content-max-height,none)}.forge-expansion-panel__content::-webkit-scrollbar{width:16px;width:var(--forge-scrollbar-width,16px);height:16px;height:var(--forge-scrollbar-height,16px)}.forge-expansion-panel__content::-webkit-scrollbar-corner{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-expansion-panel__content::-webkit-scrollbar-track{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-expansion-panel__content::-webkit-scrollbar-track:hover{background-color:#ececec;background-color:var(--forge-theme-scrollbar-track-hover,#ececec)}.forge-expansion-panel__content::-webkit-scrollbar-thumb{background-color:#bdbdbd;background-color:var(--forge-theme-scrollbar-thumb,#bdbdbd);height:32px;height:var(--forge-scrollbar-min-height,32px);width:32px;width:var(--forge-scrollbar-min-width,32px);border-radius:10px;border-radius:var(--forge-scrollbar-border-radius,10px);border-width:3px;border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-clip:content-box}.forge-expansion-panel__content::-webkit-scrollbar-thumb:hover{background-color:#9e9e9e;background-color:var(--forge-theme-scrollbar-thumb-hover,#9e9e9e)}:host{display:block}:host([hidden]){display:none}';
 /**
  * A web component that encapsulates the functionality of expanding/collapsing content when clicked.

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

@@ -18,6 +18,7 @@ export interface IFieldAdapter extends IBaseAdapter {
     removeLabelSlotListener(listener: (evt: Event) => void): void;
     setLabelClass(name: string): void;
     removeLabelClass(name: string): void;
+    isLabelFloating(): boolean;
     addLeadingSlotListener(listener: (evt: Event) => void): void;
     removeLeadingSlotListener(listener: (evt: Event) => void): void;
     addTrailingSlotListener(listener: (evt: Event) => void): void;
@@ -29,7 +30,7 @@ export interface IFieldAdapter extends IBaseAdapter {
     hasLeadingNodes(): boolean;
     hasPlaceholder(): boolean;
     hasTrailingNodes(): boolean;
-    inputHasFocus(): boolean;
+    inputHasFocus(target?: EventTarget | null): boolean;
     inputHasValue(): boolean;
     fieldHasValue(): boolean;
     isDisabled(): boolean;
@@ -81,9 +82,10 @@ export declare class FieldAdapter extends BaseAdapter<IFieldComponent> implement
     inputHasValue(): boolean;
     fieldHasValue(): boolean;
     hasPlaceholder(): boolean;
-    inputHasFocus(): boolean;
+    inputHasFocus(target?: EventTarget | null): boolean;
     setLabelClass(name: string): void;
     removeLabelClass(name: string): void;
+    isLabelFloating(): boolean;
     setRoomy(isRoomy: boolean): void;
     setDense(isDense: boolean): void;
     hasLeadingNodes(): boolean;

package/esm/field/field-adapter.js

@@ -104,8 +104,8 @@ export class FieldAdapter extends BaseAdapter {
     hasPlaceholder() {
         return this._inputElement.placeholder ? this._inputElement.placeholder.trim().length > 0 : false;
     }
-    inputHasFocus() {
-        return this._inputElement === getActiveElement();
+    inputHasFocus(target) {
+        return this._inputElement === target || this._inputElement === getActiveElement();
     }
     setLabelClass(name) {
         if (this._labelElement) {
@@ -117,6 +117,9 @@ export class FieldAdapter extends BaseAdapter {
             this._labelElement.classList.remove(name);
         }
     }
+    isLabelFloating() {
+        return this._component.hasAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
+    }
     setRoomy(isRoomy) {
         toggleClass(this._rootElement, isRoomy, FIELD_CONSTANTS.classes.ROOMY);
     }

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

@@ -55,8 +55,8 @@ export declare class FieldFoundation {
     protected _detectTrailingContent(): void;
     protected _detectAddonEndContent(): void;
     protected _detectSlottedContent(): void;
-    protected _onFocus(event: Event): void;
-    protected _onBlur(event: Event): void;
+    protected _onFocus(evt: FocusEvent): void;
+    protected _onBlur(evt: FocusEvent): void;
     protected _onValueChanged(value: any): void;
     protected _onInputAttributeChanged(name: string, value: string | null): void;
     protected _setShapeType(): void;

package/esm/field/field-foundation.js

@@ -144,14 +144,12 @@ export class FieldFoundation {
         }
     }
     floatLabel(value) {
-        var _a;
-        if (((_a = this._floatingLabel) === null || _a === void 0 ? void 0 : _a.isFloating) === value) {
+        var _a, _b;
+        if (((_a = this._floatingLabel) === null || _a === void 0 ? void 0 : _a.isFloating) === value || this._adapter.isLabelFloating() === value) {
             return;
         }
         if (!value && this._floatLabelType === 'always') {
-            if (this._floatingLabel) {
-                this._floatingLabel.float(true, true);
-            }
+            (_b = this._floatingLabel) === null || _b === void 0 ? void 0 : _b.float(true, true);
             this._adapter.setHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING, '');
             return;
         }
@@ -228,20 +226,20 @@ export class FieldFoundation {
         this._detectTrailingContent();
         this._detectAddonEndContent();
     }
-    _onFocus(event) {
+    _onFocus(evt) {
         this._adapter.setRootClass(FIELD_CONSTANTS.classes.FOCUSED);
         this._adapter.setLabelClass(FIELD_CONSTANTS.classes.LABEL_FOCUSED);
         this.floatLabel(true);
     }
-    _onBlur(event) {
-        if (this._adapter.inputHasFocus()) {
+    _onBlur(evt) {
+        if (this._adapter.inputHasFocus(evt.relatedTarget)) {
             return;
         }
         this._adapter.removeRootClass(FIELD_CONSTANTS.classes.FOCUSED);
         this._adapter.removeLabelClass(FIELD_CONSTANTS.classes.LABEL_FOCUSED);
         if (!this._adapter.fieldHasValue() && !this._adapter.hasPlaceholder()) {
-            this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
             this.floatLabel(false);
+            this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
         }
     }
     _onValueChanged(value) {

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

@@ -291,7 +291,12 @@ export class BaseSelectFoundation extends ListDropdownAwareFoundation {
         }
         if (this._multiple) {
             if (this._selectedLabels.length) {
-                return `${this._selectedLabels.length} ${this._selectedLabels.length === 1 ? 'option' : 'options'} selected`;
+                if (this._selectedLabels.length === 1) {
+                    return this._selectedLabels[0];
+                }
+                else {
+                    return `${this._selectedLabels.length} options selected`;
+                }
             }
             else {
                 return '';
@@ -439,8 +444,8 @@ export class BaseSelectFoundation extends ListDropdownAwareFoundation {
             this._filterTimeout = undefined;
         }, 300);
         this._options = this._adapter.getOptions();
-        // TODO(kieran.nichols): Enhance this to cycle through closest matches (see the native select)
-        const matchedOption = this._flatOptions.find(option => !option.disabled && option.label.toLowerCase().startsWith(this._filterString));
+        // TODO: Enhance this to cycle through closest matches (see the native select)
+        const matchedOption = this._flatOptions.find(option => !option.disabled && option.label.toLowerCase().startsWith(this._filterString.toLowerCase()));
         if (matchedOption) {
             const optionIndex = this._flatOptions.indexOf(matchedOption);
             if (this._open) {

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

@@ -33,7 +33,9 @@ export class SplitViewAdapter extends BaseAdapter {
      */
     getSlottedPanels() {
         const nodeList = this._component.querySelectorAll(SPLIT_VIEW_CONSTANTS.selectors.PANEL);
-        return Array.from(nodeList);
+        const panelArray = Array.from(nodeList);
+        const immediateChildPanels = panelArray.filter(panel => panel.parentElement === this._component);
+        return immediateChildPanels;
     }
     refitSlottedPanels(orientation) {
         // Check if the combined panel size is greater than the split view size along the relevant axis

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:utlyfvf;animation-name:utlyfvf;-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 utlyfvf{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes utlyfvf{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:utlyfw4;animation-name:utlyfw4;-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 utlyfw4{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes utlyfw4{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:utlyfwc;animation-name:utlyfwc;-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 utlyfwc{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes utlyfwc{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:utlyfwy;animation-name:utlyfwy;-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 utlyfwy{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes utlyfwy{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:utlyfx9;animation-name:utlyfx9;-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 utlyfx9{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes utlyfx9{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:utlyfxr;animation-name:utlyfxr;-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 utlyfxr{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes utlyfxr{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:utlyfxw;animation-name:utlyfxw;-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 utlyfxw{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes utlyfxw{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:utlyfys;animation-name:utlyfys;-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 utlyfys{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes utlyfys{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:un5krnz;animation-name:un5krnz;-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 un5krnz{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes un5krnz{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:un5kror;animation-name:un5kror;-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 un5kror{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes un5kror{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:un5kroy;animation-name:un5kroy;-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 un5kroy{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes un5kroy{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:un5krpx;animation-name:un5krpx;-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 un5krpx{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes un5krpx{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:un5krqv;animation-name:un5krqv;-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 un5krqv{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes un5krqv{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:un5krqx;animation-name:un5krqx;-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 un5krqx{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes un5krqx{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:un5krru;animation-name:un5krru;-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 un5krru{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes un5krru{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:un5krs8;animation-name:un5krs8;-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 un5krs8{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes un5krs8{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/stack/stack-constants.d.ts

@@ -22,6 +22,8 @@ export declare const STACK_CONSTANTS: {
         DEFAULT_GAP: string;
     };
 };
+export declare type StackAlignment = 'start' | 'center' | 'end';
+/** @deprecated Use `StackAlignment` instead. */
 export declare enum StackAlignMode {
     Start = "start",
     Center = "center",

package/esm/stack/stack-constants.js

@@ -28,6 +28,7 @@ export const STACK_CONSTANTS = {
     selectors,
     strings
 };
+/** @deprecated Use `StackAlignment` instead. */
 export var StackAlignMode;
 (function (StackAlignMode) {
     StackAlignMode["Start"] = "start";

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

@@ -5,13 +5,13 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IStackAdapter } from './stack-adapter';
-import { StackAlignMode } from './stack-constants';
+import { StackAlignment } from './stack-constants';
 export interface IStackFoundation extends ICustomElementFoundation {
     inline: boolean;
     wrap: boolean;
     stretch: boolean;
     gap: string;
-    alignment: StackAlignMode;
+    alignment: StackAlignment;
 }
 export declare class StackFoundation implements IStackFoundation {
     private _adapter;
@@ -34,6 +34,6 @@ export declare class StackFoundation implements IStackFoundation {
     get gap(): string;
     set gap(value: string);
     /** Controls the alignment of children */
-    get alignment(): StackAlignMode;
-    set alignment(value: StackAlignMode);
+    get alignment(): StackAlignment;
+    set alignment(value: StackAlignment);
 }