@tylertech/forge 2.14.0 → 3.0.0-next.1

package/esm/dialog/dialog-foundation.js

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { isDefined, isNumber, isString } from '@tylertech/forge-core';
+import { isNumber, isString } from '@tylertech/forge-core';
 import { DIALOG_CONSTANTS } from './dialog-constants';
 export class DialogFoundation {
     constructor(_adapter) {
@@ -20,9 +20,6 @@ export class DialogFoundation {
         this._moveTarget = DIALOG_CONSTANTS.selectors.DFEAULT_MOVE_TARGET;
         this._isAnimating = false;
         this._isMoving = false;
-        // Event handler states
-        this._attachedDocumentKeydownHandler = false;
-        this._attachedBackdropClickHandler = false;
         this._transitionEndHandler = (evt) => this._onTransitionEnd();
         this._documentKeydownHandler = (evt) => this._onDocumentKeydown(evt);
         this._backdropClickHandler = (evt) => this._onBackdropClick(evt);
@@ -43,12 +40,8 @@ export class DialogFoundation {
         if (this._open) {
             this._removeDragHandlers();
             this._adapter.deregisterTransitionEndHandler(this._transitionEndHandler);
-            if (this._attachedDocumentKeydownHandler) {
-                this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
-            }
-            if (this._attachedBackdropClickHandler) {
-                this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
-            }
+            this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
+            this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
         }
     }
     async _applyOpen(value) {
@@ -93,6 +86,26 @@ export class DialogFoundation {
     resetPosition() {
         this._adapter.setSurfacePosition(this._positionX, this._positionY, this._positionType);
     }
+    async show(parent) {
+        if (this._open) {
+            return;
+        }
+        this._open = true;
+        if (!this._adapter.isConnected) {
+            this._adapter.attach(parent);
+        }
+        await this._openDialog();
+    }
+    async hide(remove) {
+        if (!this._open) {
+            return;
+        }
+        this._open = false;
+        await this._closeDialog();
+        if (remove) {
+            this._adapter.detach();
+        }
+    }
     _normalizePositionValue(value) {
         if (isNumber(value)) {
             return `${value}px`;
@@ -103,25 +116,24 @@ export class DialogFoundation {
         return null;
     }
     _openDialog() {
-        this._adapter.attach();
         if (!this._fullscreen) {
             if (this._moveable) {
                 this._adapter.setMoveable(this._moveable);
             }
-            if (this._positionX != null || this._positionY != null) {
+            if (this._positionX !== null || this._positionY !== null) {
                 this._adapter.setSurfacePosition(this._positionX, this._positionY, this._positionType);
             }
         }
         this._adapter.setBodyAttribute(DIALOG_CONSTANTS.attributes.OPEN, 'true');
         this._adapter.registerTransitionEndHandler(this._transitionEndHandler);
         this._setDocumentKeydownListener(this._escapeClose);
-        this._setBackdropClickListener(this._backdropClose);
         this._adapter.setAnimating(true);
         this._isAnimating = true;
         // Ensure transitions are triggered properly
         window.requestAnimationFrame(() => {
             window.requestAnimationFrame(() => {
                 this._adapter.setVisibility(true);
+                this._setBackdropClickListener(this._backdropClose); // Must come after setting visibility because the backdrop may not yet exist
                 this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.OPEN);
                 this._adapter.trySetInitialFocus();
                 if (this._adapter.isScrollable()) {
@@ -129,37 +141,46 @@ export class DialogFoundation {
                 }
             });
         });
-        // Wait for the dialog to finish animating open, then emit the ready event and attach any listeners
-        setTimeout(() => {
-            window.requestAnimationFrame(() => {
-                if (this._open && this._isAnimating) {
-                    this._onTransitionEnd();
-                }
-            });
-        }, DIALOG_CONSTANTS.numbers.ANIMATION_DURATION);
+        return new Promise(resolve => {
+            // Wait for the dialog to finish animating open, then emit the ready event and attach any listeners
+            window.setTimeout(() => {
+                window.requestAnimationFrame(() => {
+                    if (this._open && this._isAnimating) {
+                        this._onTransitionEnd();
+                        resolve();
+                    }
+                });
+            }, DIALOG_CONSTANTS.numbers.ANIMATION_DURATION);
+        });
     }
     _closeDialog() {
         if (this._moveTarget) {
             this._removeDragHandlers();
         }
         this._adapter.deregisterTransitionEndHandler(this._transitionEndHandler);
-        if (this._attachedDocumentKeydownHandler) {
+        if (this._escapeClose) {
             this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
         }
-        if (this._attachedBackdropClickHandler) {
+        if (this._backdropClose) {
             this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
         }
         this._isAnimating = false;
+        this._moveContext = undefined;
+        this._lastPosition = undefined;
         this._adapter.setAnimating(true);
         this._adapter.setVisibility(false);
-        setTimeout(() => {
-            this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.CLOSE);
-            this._adapter.detach();
-            const openDialogs = this._adapter.getOpenDialogs(DIALOG_CONSTANTS.elementName);
-            if (!openDialogs.length) {
-                this._adapter.removeBodyAttribute(DIALOG_CONSTANTS.attributes.OPEN);
-            }
-        }, DIALOG_CONSTANTS.numbers.ANIMATION_DURATION);
+        this._adapter.setSurfacePosition(null, null, null);
+        return new Promise(resolve => {
+            setTimeout(() => {
+                this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.CLOSE);
+                const openDialogs = this._adapter.getOpenDialogs(`${DIALOG_CONSTANTS.elementName}[${DIALOG_CONSTANTS.attributes.OPEN}]`);
+                if (!openDialogs.length) {
+                    this._adapter.removeBodyAttribute(DIALOG_CONSTANTS.attributes.OPEN);
+                }
+                this._adapter.setAnimating(false);
+                resolve();
+            }, DIALOG_CONSTANTS.numbers.ANIMATION_DURATION);
+        });
     }
     _onTransitionEnd() {
         if (!this._isAnimating) {
@@ -269,26 +290,22 @@ export class DialogFoundation {
         if (!this._open) {
             return;
         }
-        if (attach && !this._attachedBackdropClickHandler) {
+        if (attach && this._backdropClose) {
             this._adapter.registerBackdropClickHandler(this._backdropClickHandler);
-            this._attachedBackdropClickHandler = true;
         }
-        else if (!attach && this._attachedBackdropClickHandler) {
+        else if (!attach) {
             this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
-            this._attachedBackdropClickHandler = false;
         }
     }
     _setDocumentKeydownListener(attach) {
         if (!this._open) {
             return;
         }
-        if (attach && !this._attachedDocumentKeydownHandler) {
+        if (attach && this._escapeClose) {
             this._adapter.setDocumentListener('keydown', this._documentKeydownHandler);
-            this._attachedDocumentKeydownHandler = true;
         }
-        else if (!attach && this._attachedDocumentKeydownHandler) {
+        else if (!attach) {
             this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
-            this._attachedDocumentKeydownHandler = false;
         }
     }
     _calculateOffsetPosition(pageX, pageY, context) {
@@ -324,12 +341,7 @@ export class DialogFoundation {
         if (this._backdropClose !== value) {
             this._backdropClose = value;
             this._setBackdropClickListener(this._backdropClose);
-            if (isDefined(this._backdropClose)) {
-                this._adapter.setHostAttribute(DIALOG_CONSTANTS.attributes.BACKDROP_CLOSE, this._backdropClose.toString());
-            }
-            else {
-                this._adapter.removeHostAttribute(DIALOG_CONSTANTS.attributes.BACKDROP_CLOSE);
-            }
+            this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.BACKDROP_CLOSE, this._backdropClose);
         }
     }
     get backdropClose() {
@@ -339,14 +351,9 @@ export class DialogFoundation {
     set escapeClose(value) {
         value = Boolean(value);
         if (this._escapeClose !== value) {
-            this._escapeClose = value;
+            this._escapeClose = !!value;
             this._setDocumentKeydownListener(this._escapeClose);
-            if (isDefined(this._escapeClose)) {
-                this._adapter.setHostAttribute(DIALOG_CONSTANTS.attributes.ESCAPE_CLOSE, this._escapeClose.toString());
-            }
-            else {
-                this._adapter.removeHostAttribute(DIALOG_CONSTANTS.attributes.ESCAPE_CLOSE);
-            }
+            this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.ESCAPE_CLOSE, this._escapeClose);
         }
     }
     get escapeClose() {
@@ -370,7 +377,7 @@ export class DialogFoundation {
         if (this._fullscreen !== value) {
             this._fullscreen = !!value;
             this._adapter.setFullscreen(this._fullscreen);
-            this._adapter.setHostAttribute(DIALOG_CONSTANTS.attributes.FULLSCREEN, String(this._fullscreen));
+            this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.FULLSCREEN, this._fullscreen);
         }
     }
     get openCallback() {
@@ -429,7 +436,7 @@ export class DialogFoundation {
     }
     set moveable(value) {
         if (this._moveable !== value) {
-            this._moveable = value;
+            this._moveable = !!value;
             if (this._open) {
                 this._adapter.setMoveable(this._moveable);
                 if (this._moveable) {
@@ -440,6 +447,7 @@ export class DialogFoundation {
                     this._isMoving = false;
                 }
             }
+            this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.MOVEABLE, this._moveable);
         }
     }
     get moveTarget() {

package/esm/dialog/dialog.d.ts

@@ -20,6 +20,8 @@ export interface IDialogComponent extends IBaseComponent {
     moveTarget: string;
     initializeMoveTarget(): void;
     resetPosition(): void;
+    show(parent?: HTMLElement): Promise<void>;
+    hide(remove?: boolean): Promise<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -73,4 +75,6 @@ export declare class DialogComponent extends BaseComponent implements IDialogCom
     moveTarget: string;
     initializeMoveTarget(): void;
     resetPosition(): void;
+    show(parent?: HTMLElement): Promise<void>;
+    hide(remove?: boolean): Promise<void>;
 }

package/esm/dialog/dialog.js

@@ -10,7 +10,7 @@ import { DialogAdapter } from './dialog-adapter';
 import { DIALOG_CONSTANTS } from './dialog-constants';
 import { BackdropComponent } from '../backdrop';
 import { BaseComponent } from '../core/base/base-component';
-const template = '<template><div class=\"forge-dialog\" part=\"root\"><forge-backdrop part=\"scrim\"></forge-backdrop><div class=\"forge-dialog__surface\" part=\"surface\"><slot></slot></div></div></template>';
+const template = '<template><div class=\"forge-dialog\" part=\"root\"><div class=\"forge-dialog__surface\" part=\"surface\"><slot></slot></div></div></template>';
 const styles = '.forge-dialog{position:fixed;top:0;bottom:0;left:0;right:0;z-index:8;z-index:var(--forge-z-index-dialog,8);-webkit-box-align:center;align-items:center;-webkit-box-align:var(--forge-dialog-align-items,center);align-items:var(--forge-dialog-align-items,center);top:0;top:var(--forge-dialog-top,0);padding:24px;padding:var(--forge-dialog-padding,24px);display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;visibility:hidden}@media (max-width:599px){.forge-dialog{padding:0}}.forge-dialog--moveable:not(.forge-dialog--fullscreen) ::slotted([forge-dialog-move-target]){cursor:move}.forge-dialog--animating{visibility:visible}.forge-dialog--animating .forge-dialog--open .forge-dialog__surface{-webkit-transition:-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 150ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1)}.forge-dialog--animating .forge-dialog__surface{-webkit-transition:-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 150ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1)}.forge-dialog--scrollable .forge-dialog__footer,.forge-dialog--scrollable .forge-dialog__title{border-color:rgba(0,0,0,.12)}.forge-dialog--open{visibility:visible!important}.forge-dialog--open .forge-dialog__surface{-webkit-transform:scale(1);transform:scale(1);opacity:1}.forge-dialog__surface{-webkit-box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);background-color:#fff;background-color:var(--mdc-theme-surface,#fff);width:auto;width:var(--forge-dialog-width,auto);height:auto;height:var(--forge-dialog-height,auto);min-width:280px;min-width:var(--forge-dialog-min-width,280px);max-width:100%;max-width:var(--forge-dialog-max-width,100%);max-height:100%;max-height:var(--forge-dialog-max-height,100%);border-radius:4px;border-radius:var(--forge-dialog-border-radius,var(--mdc-shape-medium,4px));display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform:scale(.8);transform:scale(.8);opacity:0;overflow:hidden;z-index:inherit}.forge-dialog__header{margin:0;padding:0 24px 9px;border-bottom:1px solid transparent}.forge-dialog__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1.25rem;font-size:var(--forge-typography-title-font-size, 1.25rem);line-height:2rem;line-height:var(--forge-typography-title-line-height, 2rem);font-weight:400;font-weight:var(--forge-typography-title-font-weight,400);letter-spacing:.0125em;letter-spacing:var(--forge-typography-title-letter-spacing, .0125em);text-decoration:inherit;-webkit-text-decoration:var(--forge-typography-title-text-decoration,inherit);text-decoration:var(--forge-typography-title-text-decoration,inherit);text-transform:inherit;text-transform:var(--forge-typography-title-text-transform,inherit);-webkit-box-sizing:border-box;box-sizing:border-box;margin:0}.forge-dialog__title::before{display:inline-block;width:0;height:40px;content:\"\";vertical-align:0}.forge-dialog__body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-body1-font-size, 1rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);padding-top:20px;padding:0 24px 24px;overflow:auto}.forge-dialog__body--scrollable{max-height:195px;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);overflow-x:auto;overflow-y:scroll;-webkit-overflow-scrolling:touch}.forge-dialog__footer{display:-webkit-box;display:flex;position:relative;flex-shrink:0;flex-wrap:wrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:end;justify-content:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:52px;margin:0;padding:8px;border-top:1px solid transparent}.forge-dialog--fullscreen{padding:0}.forge-dialog--fullscreen .forge-dialog__surface{height:100%;width:100%;min-width:auto;max-width:100%;border-radius:0}:host{display:block}:host([hidden]){display:none}';
 /**
  * The web component class behind the `<forge-dialog>` custom element.
@@ -79,6 +79,12 @@ let DialogComponent = class DialogComponent extends BaseComponent {
     resetPosition() {
         this._foundation.resetPosition();
     }
+    show(parent) {
+        return this._foundation.show(parent);
+    }
+    hide(remove) {
+        return this._foundation.hide(remove);
+    }
 };
 __decorate([
     FoundationProperty()

package/esm/profile-card/profile-card-adapter.d.ts

@@ -9,6 +9,7 @@ export interface IProfileCardAdapter extends IBaseAdapter {
     setFullName(value: string): void;
     setEmail(value: string): void;
     setAvatarText(value: string): void;
+    setAvatarIcon(value: string): void;
     setAvatarImageUrl(value: string): void;
     setAvatarLetterCount(count: number): void;
     setActionToolbarVisibility(isVisible: boolean): void;
@@ -34,6 +35,7 @@ export declare class ProfileCardAdapter extends BaseAdapter<IProfileCardComponen
     setFullName(value: string): void;
     setEmail(value: string): void;
     setAvatarText(value: string): void;
+    setAvatarIcon(value: string): void;
     setAvatarImageUrl(value: string): void;
     setAvatarLetterCount(count: number): void;
     setActionToolbarVisibility(isVisible: boolean): void;

package/esm/profile-card/profile-card-adapter.js

@@ -3,8 +3,9 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement } from '@tylertech/forge-core';
+import { getShadowElement, removeAllChildren } from '@tylertech/forge-core';
 import { BaseAdapter } from '../core/base/base-adapter';
+import { IconComponentDelegate } from '../icon';
 import { PROFILE_CARD_CONSTANTS } from './profile-card-constants';
 export class ProfileCardAdapter extends BaseAdapter {
     constructor(component) {
@@ -27,6 +28,16 @@ export class ProfileCardAdapter extends BaseAdapter {
     setAvatarText(value) {
         this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_TEXT, value);
         this._avatarElement.text = value;
+        removeAllChildren(this._avatarElement);
+    }
+    setAvatarIcon(value) {
+        if (value) {
+            const iconDelegate = new IconComponentDelegate({ props: { name: value } });
+            this._avatarElement.replaceChildren(iconDelegate.element);
+        }
+        else {
+            removeAllChildren(this._avatarElement);
+        }
     }
     setAvatarImageUrl(value) {
         this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_IMAGE_URL, value);

package/esm/profile-card/profile-card-constants.d.ts

@@ -13,6 +13,7 @@ export declare const PROFILE_CARD_CONSTANTS: {
         SIGN_OUT_TEXT: string;
         PROFILE_TEXT: string;
         AVATAR_TEXT: string;
+        AVATAR_ICON: string;
         AVATAR_IMAGE_URL: string;
         AVATAR_LETTER_COUNT: string;
     };

package/esm/profile-card/profile-card-constants.js

@@ -13,6 +13,7 @@ const attributes = {
     SIGN_OUT_TEXT: 'sign-out-text',
     PROFILE_TEXT: 'profile-text',
     AVATAR_TEXT: 'avatar-text',
+    AVATAR_ICON: 'avatar-icon',
     AVATAR_IMAGE_URL: 'avatar-image-url',
     AVATAR_LETTER_COUNT: 'avatar-letter-count'
 };

package/esm/profile-card/profile-card-foundation.d.ts

@@ -11,6 +11,7 @@ export interface IProfileCardFoundation extends ICustomElementFoundation {
     signOut: boolean;
     profile: boolean;
     avatarText: string;
+    avatarIcon: string;
     avatarImageUrl: string;
     avatarLetterCount: number;
 }
@@ -19,6 +20,7 @@ export declare class ProfileCardFoundation implements IProfileCardFoundation {
     private _fullName;
     private _email;
     private _avatarText;
+    private _avatarIcon;
     private _avatarImageUrl;
     private _avatarLetterCount;
     private _showSignOutButton;
@@ -39,6 +41,8 @@ export declare class ProfileCardFoundation implements IProfileCardFoundation {
     set email(value: string);
     get avatarText(): string;
     set avatarText(value: string);
+    get avatarIcon(): string;
+    set avatarIcon(value: string);
     get avatarImageUrl(): string;
     set avatarImageUrl(value: string);
     get avatarLetterCount(): number;

package/esm/profile-card/profile-card-foundation.js

@@ -73,6 +73,15 @@ export class ProfileCardFoundation {
             this._adapter.setAvatarText(this._avatarText);
         }
     }
+    get avatarIcon() {
+        return this._avatarIcon;
+    }
+    set avatarIcon(value) {
+        if (this._avatarIcon !== value) {
+            this._avatarIcon = value;
+            this._adapter.setAvatarIcon(this._avatarIcon);
+        }
+    }
     get avatarImageUrl() {
         return this._avatarImageUrl;
     }

package/esm/profile-card/profile-card.d.ts

@@ -12,6 +12,7 @@ export interface IProfileCardComponent extends IBaseComponent {
     signOutText: string;
     profileText: string;
     avatarText: string;
+    avatarIcon: string;
     avatarImageUrl: string;
     avatarLetterCount: number;
 }
@@ -42,6 +43,7 @@ export declare class ProfileCardComponent extends BaseComponent implements IProf
     signOutText: string;
     profileText: string;
     avatarText: string;
+    avatarIcon: string;
     avatarImageUrl: string;
     avatarLetterCount: number;
 }

package/esm/profile-card/profile-card.js

@@ -34,6 +34,7 @@ let ProfileCardComponent = class ProfileCardComponent extends BaseComponent {
             PROFILE_CARD_CONSTANTS.attributes.SIGN_OUT_TEXT,
             PROFILE_CARD_CONSTANTS.attributes.PROFILE_TEXT,
             PROFILE_CARD_CONSTANTS.attributes.AVATAR_TEXT,
+            PROFILE_CARD_CONSTANTS.attributes.AVATAR_ICON,
             PROFILE_CARD_CONSTANTS.attributes.AVATAR_IMAGE_URL,
             PROFILE_CARD_CONSTANTS.attributes.AVATAR_LETTER_COUNT
         ];
@@ -64,6 +65,9 @@ let ProfileCardComponent = class ProfileCardComponent extends BaseComponent {
             case PROFILE_CARD_CONSTANTS.attributes.AVATAR_TEXT:
                 this.avatarText = newValue;
                 break;
+            case PROFILE_CARD_CONSTANTS.attributes.AVATAR_ICON:
+                this.avatarIcon = newValue;
+                break;
             case PROFILE_CARD_CONSTANTS.attributes.AVATAR_IMAGE_URL:
                 this.avatarImageUrl = newValue;
                 break;
@@ -94,6 +98,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], ProfileCardComponent.prototype, "avatarText", void 0);
+__decorate([
+    FoundationProperty()
+], ProfileCardComponent.prototype, "avatarIcon", void 0);
 __decorate([
     FoundationProperty()
 ], ProfileCardComponent.prototype, "avatarImageUrl", void 0);

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-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:udzy8qi;animation-name:udzy8qi;-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 udzy8qi{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes udzy8qi{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:udzy8qq;animation-name:udzy8qq;-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 udzy8qq{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes udzy8qq{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:udzy8r2;animation-name:udzy8r2;-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 udzy8r2{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes udzy8r2{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:udzy8rw;animation-name:udzy8rw;-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 udzy8rw{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes udzy8rw{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:udzy8sk;animation-name:udzy8sk;-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 udzy8sk{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes udzy8sk{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:udzy8sn;animation-name:udzy8sn;-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 udzy8sn{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes udzy8sn{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:udzy8t5;animation-name:udzy8t5;-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 udzy8t5{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes udzy8t5{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:udzy8ts;animation-name:udzy8ts;-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 udzy8ts{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes udzy8ts{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:ukq4pci;animation-name:ukq4pci;-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 ukq4pci{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes ukq4pci{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:ukq4pd4;animation-name:ukq4pd4;-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 ukq4pd4{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes ukq4pd4{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:ukq4pdj;animation-name:ukq4pdj;-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 ukq4pdj{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes ukq4pdj{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:ukq4pdr;animation-name:ukq4pdr;-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 ukq4pdr{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes ukq4pdr{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:ukq4pel;animation-name:ukq4pel;-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 ukq4pel{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes ukq4pel{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:ukq4pf4;animation-name:ukq4pf4;-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 ukq4pf4{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes ukq4pf4{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:ukq4pfe;animation-name:ukq4pfe;-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 ukq4pfe{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes ukq4pfe{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:ukq4pg8;animation-name:ukq4pg8;-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 ukq4pg8{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes ukq4pg8{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);
 }

package/esm/stack/stack-foundation.js

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { STACK_CONSTANTS, StackAlignMode } from './stack-constants';
+import { STACK_CONSTANTS } from './stack-constants';
 export class StackFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
@@ -11,7 +11,7 @@ export class StackFoundation {
         this._wrap = false;
         this._stretch = false;
         this._gap = STACK_CONSTANTS.strings.DEFAULT_GAP;
-        this._alignment = StackAlignMode.Start;
+        this._alignment = 'start';
     }
     /** Controls the direction of the stack. */
     get inline() {

package/esm/stack/stack.d.ts

@@ -4,14 +4,14 @@
  * License: Apache-2.0
  */
 import { ICustomElement } from '@tylertech/forge-core';
-import { StackAlignMode } from './stack-constants';
+import { StackAlignMode, StackAlignment } from './stack-constants';
 import { BaseComponent } from '../core/base/base-component';
 export interface IStackComponent extends ICustomElement {
     inline: boolean;
     wrap: boolean;
     stretch: boolean;
     gap: string;
-    alignment: StackAlignMode;
+    alignment: StackAlignMode | StackAlignment;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -37,5 +37,5 @@ export declare class StackComponent extends BaseComponent implements IStackCompo
     /** Controls the gap between the children within the stack */
     gap: string;
     /** Controls if stack items are at the end of the row or column */
-    alignment: StackAlignMode;
+    alignment: StackAlignMode | StackAlignment;
 }

package/esm/stack/stack.js

@@ -10,7 +10,7 @@ import { StackFoundation } from './stack-foundation';
 import { STACK_CONSTANTS } from './stack-constants';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-stack\" part=\"root\"><slot></slot></div></template>';
-const styles = '.forge-stack{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;width:100%;gap:16px;gap:var(--forge-stack-gap,16px);height:100%;height:var(--forge-stack-height,100%)}.forge-stack ::slotted(*){-webkit-box-flex:var(--forge-stack-stretch,0);flex-grow:var(--forge-stack-stretch,0)}:host{display:block;height:100%}:host([inline]) .forge-stack{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;--forge-stack-height:auto}:host([inline][wrap]) .forge-stack{flex-wrap:wrap}:host([stretch]){--forge-stack-stretch:1}:host([alignment=start]) .forge-stack{-webkit-box-pack:start;justify-content:start}:host([alignment=center]) .forge-stack{-webkit-box-pack:center;justify-content:center}:host([alignment=end]) .forge-stack{-webkit-box-pack:end;justify-content:end}';
+const styles = '.forge-stack{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;width:100%;gap:16px;gap:var(--forge-stack-gap,16px);height:100%;height:var(--forge-stack-height,100%)}.forge-stack ::slotted(*){-webkit-box-flex:var(--forge-stack-stretch,initial);flex:var(--forge-stack-stretch,initial)}:host{display:block}:host([inline]) .forge-stack{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;--forge-stack-height:auto}:host([inline][wrap]) .forge-stack{flex-wrap:wrap}:host([stretch]:not([inline])){height:100%}:host([stretch]){--forge-stack-stretch:1}:host([alignment=start]) .forge-stack{-webkit-box-pack:start;justify-content:start}:host([alignment=center]) .forge-stack{-webkit-box-pack:center;justify-content:center}:host([alignment=end]) .forge-stack{-webkit-box-pack:end;justify-content:end}';
 /**
  * The custom element class behind the `<forge-stack>` component.
  *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "2.14.0",
+  "version": "3.0.0-next.1",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {