@tylertech/forge 3.0.0-next.11 → 3.0.0-next.13

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

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
-import { IPopupComponent } from './popup';
+import { IPopupComponent, IPopupCloseEventData } from './popup';
 export interface IPopupAdapter extends IBaseAdapter {
     setAttribute(attribute: string, value: string, element?: HTMLElement): void;
     removeAttribute(attribute: string, element?: HTMLElement): void;
@@ -19,6 +19,7 @@ export interface IPopupAdapter extends IBaseAdapter {
     removeEventListener(type: string, listener: (evt: Event) => void): void;
     setBlurListener(listener: () => void): () => void;
     trySetInitialFocus(): void;
+    getCloseEventData(): IPopupCloseEventData;
 }
 export declare class PopupAdapter extends BaseAdapter<IPopupComponent> implements IPopupAdapter {
     private _windowEventCallback?;
@@ -33,6 +34,7 @@ export declare class PopupAdapter extends BaseAdapter<IPopupComponent> implement
     removePopup(manageFocus: boolean): void;
     manageWindowEvents(add?: boolean): void;
     dispatchEvent(type: string, data?: any, bubbles?: boolean, cancelable?: boolean): boolean;
+    getCloseEventData(): IPopupCloseEventData;
     addClass(classes: string | string[]): void;
     removeClass(classes: string | string[]): void;
     setAnimationEndListener(listener: (evt: TransitionEvent) => void, classes?: string | string[]): void;

package/esm/popup/popup-adapter.js

@@ -100,6 +100,9 @@ export class PopupAdapter extends BaseAdapter {
         }
         return false;
     }
+    getCloseEventData() {
+        return { popup: this._component };
+    }
     addClass(classes) {
         addClass(classes, this._rootElement);
     }

package/esm/popup/popup-foundation.js

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { isElement } from '@tylertech/forge-core';
-import { PopupAnimationType, POPUP_CONSTANTS as constants, POPUP_CONSTANTS } from './popup-constants';
+import { PopupAnimationType, POPUP_CONSTANTS } from './popup-constants';
 export class PopupFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
@@ -42,7 +42,7 @@ export class PopupFoundation {
             this._destroyBlurListener = this._adapter.setBlurListener(this._blurListener);
         }
         this._adapter.manageWindowEvents(true);
-        this._adapter.dispatchEvent(constants.events.OPEN);
+        this._adapter.dispatchEvent(POPUP_CONSTANTS.events.OPEN);
     }
     _closePopup() {
         if (this._destroyBlurListener) {
@@ -59,7 +59,9 @@ export class PopupFoundation {
     _destroyPopup() {
         this._adapter.manageWindowEvents(false);
         this._adapter.removePopup(this._manageFocus);
-        this._adapter.dispatchEvent(constants.events.CLOSE);
+        const eventData = this._adapter.getCloseEventData();
+        this._adapter.dispatchEvent(POPUP_CONSTANTS.events.CLOSE, eventData);
+        this._adapter.emitHostEvent(POPUP_CONSTANTS.events.CLOSE, eventData);
         this._adapter.removeAttribute(POPUP_CONSTANTS.attributes.OPEN);
     }
     _applyOpenAnimation() {

package/esm/popup/popup.d.ts

@@ -19,13 +19,16 @@ export interface IPopupComponent extends IBaseComponent {
     openCallback: PopupStateCallback;
     closeCallback: PopupStateCallback;
 }
+export interface IPopupCloseEventData {
+    popup: IPopupComponent;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'forge-popup': IPopupComponent;
     }
     interface HTMLElementEventMap {
         'forge-popup-open': CustomEvent<void>;
-        'forge-popup-close': CustomEvent<void>;
+        'forge-popup-close': CustomEvent<IPopupCloseEventData>;
         'forge-popup-position': CustomEvent<IPopupPositionEventData>;
         'forge-popup-blur': CustomEvent<void>;
     }

package/esm/popup/popup.js

@@ -10,7 +10,7 @@ import { PopupAdapter } from './popup-adapter';
 import { POPUP_CONSTANTS } from './popup-constants';
 import { PopupFoundation } from './popup-foundation';
 const template = '<template><div class=\"forge-popup\" part=\"root\"><slot></slot></div></template>';
-const styles = '.forge-popup{min-width:112px;min-width:var(--min-width,112px);background-color:#fff;background-color:var(--forge-theme-elevated-surface,#fff);-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-webkit-box-shadow:var(--forge-theme-popup-elevation,0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12));box-shadow:var(--forge-theme-popup-elevation,0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12));color:#000;color:var(--mdc-theme-on-surface,#000);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);display:none;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:100%;margin:0;padding:0;-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 24px 0;transform-origin:50% 24px 0;opacity:0;will-change:transform,opacity;-webkit-transition:opacity 120ms linear,-webkit-transform 120ms cubic-bezier(0, 0, .2, 1);transition:opacity 120ms linear,-webkit-transform 120ms cubic-bezier(0, 0, .2, 1);transition:opacity 120ms linear,transform 120ms cubic-bezier(0, 0, .2, 1);transition:opacity 120ms linear,transform 120ms cubic-bezier(0, 0, .2, 1),-webkit-transform 120ms cubic-bezier(0, 0, .2, 1)}.forge-popup::-webkit-scrollbar{width:16px;width:var(--forge-scrollbar-width,16px);height:16px;height:var(--forge-scrollbar-height,16px)}.forge-popup::-webkit-scrollbar-corner{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-popup::-webkit-scrollbar-track{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-popup::-webkit-scrollbar-track:hover{background-color:#ececec;background-color:var(--forge-theme-scrollbar-track-hover,#ececec)}.forge-popup::-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-popup::-webkit-scrollbar-thumb:hover{background-color:#9e9e9e;background-color:var(--forge-theme-scrollbar-thumb-hover,#9e9e9e)}.forge-popup--opening{display:block;-webkit-transform:scale(.8);transform:scale(.8);opacity:0}.forge-popup--closed{display:block;opacity:0;-webkit-transition:opacity 120ms linear;transition:opacity 120ms linear}.forge-popup--open{display:block;-webkit-transform:scale(1);transform:scale(1);opacity:1}.forge-popup--select{border-top-left-radius:0;border-top-right-radius:0;max-height:256px;overflow-y:auto}:host{z-index:10;z-index:var(--forge-z-index-popup,10);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;position:absolute;overflow:visible}:host([hidden]){display:none}:host([constrain-viewport-width]){max-width:100vw}';
+const styles = '.forge-popup{min-width:112px;min-width:var(--min-width,112px);background-color:#fff;background-color:var(--forge-theme-elevated-surface,#fff);-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-webkit-box-shadow:var(--forge-theme-popup-elevation,0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12));box-shadow:var(--forge-theme-popup-elevation,0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12));color:#000;color:var(--mdc-theme-on-surface,#000);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);display:none;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:100%;margin:0;padding:0;-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 24px 0;transform-origin:50% 24px 0;opacity:0;will-change:transform,opacity;-webkit-transition:opacity 120ms linear,-webkit-transform 120ms cubic-bezier(0, 0, .2, 1);transition:opacity 120ms linear,-webkit-transform 120ms cubic-bezier(0, 0, .2, 1);transition:opacity 120ms linear,transform 120ms cubic-bezier(0, 0, .2, 1);transition:opacity 120ms linear,transform 120ms cubic-bezier(0, 0, .2, 1),-webkit-transform 120ms cubic-bezier(0, 0, .2, 1)}.forge-popup::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-popup::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popup::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popup::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popup::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,var(--forge-shape-full,9999px));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-popup::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-popup--opening{display:block;-webkit-transform:scale(.8);transform:scale(.8);opacity:0}.forge-popup--closed{display:block;opacity:0;-webkit-transition:opacity 120ms linear;transition:opacity 120ms linear}.forge-popup--open{display:block;-webkit-transform:scale(1);transform:scale(1);opacity:1}.forge-popup--select{border-top-left-radius:0;border-top-right-radius:0;max-height:256px;overflow-y:auto}:host{z-index:10;z-index:var(--forge-z-index-popup,10);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;position:absolute;overflow:visible}:host([hidden]){display:none}:host([constrain-viewport-width]){max-width:100vw}';
 /**
  * The web component class behind the `<forge-popup>` custom element.
  *

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

@@ -12,8 +12,8 @@ import { ButtonComponent } from '../button';
 import { AvatarComponent } from '../avatar';
 import { ToolbarComponent } from '../toolbar';
 import { BaseComponent } from '../core/base/base-component';
-const template = '<template><div class=\"forge-profile-card\" part=\"root\"><div class=\"forge-profile-card__info\" part=\"info-container\"><div class=\"forge-profile-card__info-avatar\" part=\"avatar-container\"><forge-avatar part=\"avatar\"></forge-avatar></div><div class=\"forge-profile-card__info-text\" part=\"info-text\"><div class=\"forge-profile-card__full-name\" part=\"name\"></div><div class=\"forge-profile-card__email\" part=\"email\"></div></div></div><slot></slot><forge-toolbar inverted id=\"action-toolbar\" part=\"footer\"><forge-button type=\"outlined\" slot=\"end\" style=\"margin-right: 8px;\" part=\"profile-button\"><button type=\"button\" id=\"profile-button\" aria-label=\"View profile\" part=\"profile-button-element\">Profile</button></forge-button><forge-button slot=\"end\" part=\"sign-out-button\"><button type=\"button\" id=\"sign-out-button\" aria-label=\"Sign out\" part=\"sign-out-button-element\">Sign out</button></forge-button></forge-toolbar></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)}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);-webkit-transition:opacity 280ms cubic-bezier(.4, 0, .2, 1);transition:opacity 280ms cubic-bezier(.4, 0, .2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color,#fff)}.forge-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size, .875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, .0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);position:relative;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:64px;border:none;outline:0;line-height:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle}.forge-button .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.forge-button::-moz-focus-inner{padding:0;border:0}.forge-button:active{outline:0}.forge-button:hover{cursor:pointer}.forge-button:disabled{cursor:default;pointer-events:none}.forge-button .forge-button__icon{margin-left:0;margin-right:8px;display:inline-block;font-size:1.125rem;height:1.125rem;vertical-align:top;width:1.125rem}.forge-button .forge-button__icon[dir=rtl],[dir=rtl] .forge-button .forge-button__icon{margin-left:8px;margin-right:0}.forge-button__label~.forge-button__icon{margin-left:8px;margin-right:0}.forge-button__label~.forge-button__icon[dir=rtl],[dir=rtl] .forge-button__label~.forge-button__icon{margin-left:0;margin-right:8px}svg.forge-button__icon{fill:currentColor}.forge-button--outlined .forge-button__icon,.forge-button--raised .forge-button__icon,.forge-button--unelevated .forge-button__icon{margin-left:-4px;margin-right:8px}.forge-button--outlined .forge-button__icon[dir=rtl],.forge-button--raised .forge-button__icon[dir=rtl],.forge-button--unelevated .forge-button__icon[dir=rtl],[dir=rtl] .forge-button--outlined .forge-button__icon,[dir=rtl] .forge-button--raised .forge-button__icon,[dir=rtl] .forge-button--unelevated .forge-button__icon{margin-left:8px;margin-right:-4px}.forge-button--outlined .forge-button__label~.forge-button__icon,.forge-button--raised .forge-button__label~.forge-button__icon,.forge-button--unelevated .forge-button__label~.forge-button__icon{margin-left:8px;margin-right:-4px}.forge-button--outlined .forge-button__label~.forge-button__icon[dir=rtl],.forge-button--raised .forge-button__label~.forge-button__icon[dir=rtl],.forge-button--unelevated .forge-button__label~.forge-button__icon[dir=rtl],[dir=rtl] .forge-button--outlined .forge-button__label~.forge-button__icon,[dir=rtl] .forge-button--raised .forge-button__label~.forge-button__icon,[dir=rtl] .forge-button--unelevated .forge-button__label~.forge-button__icon{margin-left:-4px;margin-right:8px}.forge-button{--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}.forge-button .forge-button__ripple::after,.forge-button .forge-button__ripple::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-button .forge-button__ripple::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)}.forge-button .forge-button__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-button.mdc-ripple-upgraded .forge-button__ripple::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-button.mdc-ripple-upgraded .forge-button__ripple::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-button.mdc-ripple-upgraded--unbounded .forge-button__ripple::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-button.mdc-ripple-upgraded--foreground-activation .forge-button__ripple::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}.forge-button.mdc-ripple-upgraded--foreground-deactivation .forge-button__ripple::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))}.forge-button .forge-button__ripple::after,.forge-button .forge-button__ripple::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-button.mdc-ripple-upgraded .forge-button__ripple::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-button .forge-button__ripple{position:absolute;-webkit-box-sizing:content-box;box-sizing:content-box;width:100%;height:100%;overflow:hidden}.forge-button:not(.forge-button--outlined) .forge-button__ripple{top:0;left:0}.forge-button--raised{-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-webkit-transition:-webkit-box-shadow 280ms cubic-bezier(.4, 0, .2, 1);transition:-webkit-box-shadow 280ms cubic-bezier(.4, 0, .2, 1);transition:box-shadow 280ms cubic-bezier(.4, 0, .2, 1);transition:box-shadow 280ms cubic-bezier(.4, 0, .2, 1),-webkit-box-shadow 280ms cubic-bezier(.4, 0, .2, 1)}.forge-button--raised:focus,.forge-button--raised:hover{-webkit-box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.forge-button--raised:active{-webkit-box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.forge-button--raised:disabled{-webkit-box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12)}.forge-button--outlined{border-style:solid}.forge-button{height:36px;border-radius:4px;border-radius:var(--mdc-shape-small,4px);padding:0 8px 0 8px}.forge-button:not(:disabled){background-color:transparent}.forge-button:disabled{background-color:transparent}.forge-button:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-button .forge-button__ripple::after,.forge-button .forge-button__ripple::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-button.mdc-ripple-surface--hover .forge-button__ripple::before,.forge-button:hover .forge-button__ripple::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-button.mdc-ripple-upgraded--background-focused .forge-button__ripple::before,.forge-button:not(.mdc-ripple-upgraded):focus .forge-button__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-button:not(.mdc-ripple-upgraded) .forge-button__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button:not(.mdc-ripple-upgraded):active .forge-button__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-button .forge-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-button--unelevated{padding:0 16px 0 16px;height:36px;border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-button--unelevated:not(:disabled){background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee)}.forge-button--unelevated:disabled{background-color:rgba(0,0,0,.38);background-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.38))}.forge-button--unelevated:not(:disabled){color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-button--unelevated:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-button--unelevated .forge-button__ripple::after,.forge-button--unelevated .forge-button__ripple::before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.forge-button--unelevated.mdc-ripple-surface--hover .forge-button__ripple::before,.forge-button--unelevated:hover .forge-button__ripple::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, .08)}.forge-button--unelevated.mdc-ripple-upgraded--background-focused .forge-button__ripple::before,.forge-button--unelevated:not(.mdc-ripple-upgraded):focus .forge-button__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-button--unelevated:not(.mdc-ripple-upgraded) .forge-button__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button--unelevated:not(.mdc-ripple-upgraded):active .forge-button__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-button--unelevated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-button--unelevated .forge-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-button--raised{padding:0 16px 0 16px;height:36px;border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-button--raised:not(:disabled){background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee)}.forge-button--raised:disabled{background-color:rgba(0,0,0,.38);background-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.38))}.forge-button--raised:not(:disabled){color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-button--raised:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-button--raised .forge-button__ripple::after,.forge-button--raised .forge-button__ripple::before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.forge-button--raised.mdc-ripple-surface--hover .forge-button__ripple::before,.forge-button--raised:hover .forge-button__ripple::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, .08)}.forge-button--raised.mdc-ripple-upgraded--background-focused .forge-button__ripple::before,.forge-button--raised:not(.mdc-ripple-upgraded):focus .forge-button__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-button--raised:not(.mdc-ripple-upgraded) .forge-button__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button--raised:not(.mdc-ripple-upgraded):active .forge-button__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-button--raised.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-button--raised .forge-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-button--outlined{height:36px;border-radius:4px;border-radius:var(--mdc-shape-small,4px);padding:0 15px 0 15px;border-width:1px}.forge-button--outlined:not(:disabled){background-color:transparent}.forge-button--outlined:disabled{background-color:transparent}.forge-button--outlined:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-button--outlined:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-button--outlined .forge-button__ripple::after,.forge-button--outlined .forge-button__ripple::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-button--outlined.mdc-ripple-surface--hover .forge-button__ripple::before,.forge-button--outlined:hover .forge-button__ripple::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-button--outlined.mdc-ripple-upgraded--background-focused .forge-button__ripple::before,.forge-button--outlined:not(.mdc-ripple-upgraded):focus .forge-button__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-button--outlined:not(.mdc-ripple-upgraded) .forge-button__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button--outlined:not(.mdc-ripple-upgraded):active .forge-button__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-button--outlined.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-button--outlined .forge-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-button--outlined:not(:disabled){border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.forge-button--outlined:disabled{border-color:rgba(0,0,0,.38);border-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.38))}.forge-button--outlined .forge-button__ripple{top:-1px;left:-1px;border:1px solid transparent}.forge-button--dense{height:24px;margin-top:0;margin-bottom:0;height:1.5rem}forge-button{display:inline-block}forge-button[hidden]{display:none}forge-button[disabled]{cursor:not-allowed}a.forge-hyperlink{color:#6200ee;color:var(--mdc-theme-primary,#6200ee);text-decoration:none}a.forge-hyperlink:visited{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}a.forge-hyperlink[disabled]{pointer-events:none;cursor:default}a.forge-hyperlink:focus,a.forge-hyperlink:hover:not([disabled]){text-decoration:underline}button.forge-hyperlink{color:#6200ee;color:var(--mdc-theme-primary,#6200ee);cursor:pointer;border:none;background-color:transparent;font-size:inherit;padding:0;outline:0;text-align:left}button.forge-hyperlink[disabled]{pointer-events:none;cursor:default}button.forge-hyperlink:hover:not([disabled]){text-decoration:underline}.forge-profile-card{min-width:360px;border-radius:4px}@media (max-width:399px){.forge-profile-card{width:100vw;min-width:unset;overflow:auto}}.forge-profile-card__info{padding:8px 16px;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.forge-profile-card__info-avatar{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding:8px;margin-right:16px;--forge-avatar-size:56px}.forge-profile-card__info-text{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:start;align-items:flex-start}.forge-profile-card__full-name{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1rem;font-size:var(--forge-typography-subtitle1-secondary-font-size, 1rem);line-height:1.75rem;line-height:var(--forge-typography-subtitle1-secondary-line-height, 1.75rem);font-weight:500;font-weight:var(--forge-typography-subtitle1-secondary-font-weight,500);letter-spacing:.01em;letter-spacing:var(--forge-typography-subtitle1-secondary-letter-spacing, .01em);text-decoration:inherit;-webkit-text-decoration:var(--forge-typography-subtitle1-secondary-text-decoration,inherit);text-decoration:var(--forge-typography-subtitle1-secondary-text-decoration,inherit);text-transform:inherit;text-transform:var(--forge-typography-subtitle1-secondary-text-transform,inherit);line-height:1.25rem}.forge-profile-card__email{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size, .875rem);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height, 1.375rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing, .0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}forge-toolbar#action-toolbar::part(root){border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host{display:inline}:host([hidden]){display:none}forge-toolbar{--mdc-theme-surface:var(--forge-theme-elevated-surface)}';
+const template = '<template><div class=\"forge-profile-card\" part=\"root\"><div class=\"forge-profile-card__info\" part=\"info-container\"><div class=\"forge-profile-card__info-avatar\" part=\"avatar-container\"><forge-avatar part=\"avatar\"></forge-avatar></div><div class=\"forge-profile-card__info-text\" part=\"info-text\"><div class=\"forge-profile-card__full-name\" part=\"name\"></div><div class=\"forge-profile-card__email\" part=\"email\"></div></div></div><slot></slot><forge-toolbar inverted id=\"action-toolbar\" part=\"footer\"><forge-button variant=\"outlined\" slot=\"end\" style=\"margin-right: 8px;\" part=\"profile-button\" aria-label=\"View profile\" id=\"profile-button\">Profile</forge-button><forge-button slot=\"end\" part=\"sign-out-button\" id=\"sign-out-button\" aria-label=\"Sign out\">Sign out</forge-button></forge-toolbar></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-profile-card{min-width:360px;border-radius:4px}@media (max-width:399px){.forge-profile-card{width:100vw;min-width:unset;overflow:auto}}.forge-profile-card__info{padding:8px 16px;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.forge-profile-card__info-avatar{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding:8px;margin-right:16px;--forge-avatar-size:56px}.forge-profile-card__info-text{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:start;align-items:flex-start}.forge-profile-card__full-name{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1rem;font-size:var(--forge-typography-subtitle1-secondary-font-size, 1rem);line-height:1.75rem;line-height:var(--forge-typography-subtitle1-secondary-line-height, 1.75rem);font-weight:500;font-weight:var(--forge-typography-subtitle1-secondary-font-weight,500);letter-spacing:.01em;letter-spacing:var(--forge-typography-subtitle1-secondary-letter-spacing, .01em);text-decoration:inherit;-webkit-text-decoration:var(--forge-typography-subtitle1-secondary-text-decoration,inherit);text-decoration:var(--forge-typography-subtitle1-secondary-text-decoration,inherit);text-transform:inherit;text-transform:var(--forge-typography-subtitle1-secondary-text-transform,inherit);line-height:1.25rem}.forge-profile-card__email{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size, .875rem);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height, 1.375rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing, .0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}forge-toolbar#action-toolbar::part(root){border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host{display:inline}:host([hidden]){display:none}forge-toolbar{--mdc-theme-surface:var(--forge-theme-elevated-surface)}';
 /**
  * The web component class behind the `<forge-profile-card>` custom element.
  *

package/esm/quantity-field/quantity-field-constants.js

@@ -25,8 +25,8 @@ const selectors = {
     ROOT: `.${classes.ROOT}`,
     INCREMENT_BUTTON_SLOT: `slot[name=${slots.INCREMENT_BUTTON}]`,
     DECREMENT_BUTTON_SLOT: `slot[name=${slots.DECREMENT_BUTTON}]`,
-    INCREMENT_BUTTON: `[slot=${slots.INCREMENT_BUTTON}] button, button[slot=${slots.INCREMENT_BUTTON}]`,
-    DECREMENT_BUTTON: `[slot=${slots.DECREMENT_BUTTON}] button, button[slot=${slots.DECREMENT_BUTTON}]`,
+    INCREMENT_BUTTON: `[slot=${slots.INCREMENT_BUTTON}], button[slot=${slots.INCREMENT_BUTTON}]`,
+    DECREMENT_BUTTON: `[slot=${slots.DECREMENT_BUTTON}], button[slot=${slots.DECREMENT_BUTTON}]`,
     TEXT_FIELD: 'forge-text-field',
     INPUT: 'input[type=number]',
     LABEL: `[slot=${slots.LABEL}]`,

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

@@ -46,6 +46,7 @@ export class BaseSelectAdapter extends BaseAdapter {
             return {
                 // eslint-disable-next-line @typescript-eslint/no-extra-parens
                 label: o.hasAttribute(OPTION_CONSTANTS.attributes.LABEL) ? o.getAttribute(OPTION_CONSTANTS.attributes.LABEL) : (isDefined(o.label) ? o.label : o.innerText),
+                secondaryLabel: o.hasAttribute(OPTION_CONSTANTS.attributes.SECONDARY_LABEL) ? o.getAttribute(OPTION_CONSTANTS.attributes.SECONDARY_LABEL) : isDefined(o.secondaryLabel) ? o.secondaryLabel : undefined,
                 value: o.hasAttribute(OPTION_CONSTANTS.attributes.VALUE) ? o.getAttribute(OPTION_CONSTANTS.attributes.VALUE) : o.value,
                 disabled: o.hasAttribute(OPTION_CONSTANTS.attributes.DISABLED),
                 divider: o.hasAttribute(OPTION_CONSTANTS.attributes.DIVIDER),
@@ -53,9 +54,11 @@ export class BaseSelectAdapter extends BaseAdapter {
                 leadingIcon: o.hasAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON) ? o.getAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON) : o.leadingIcon,
                 leadingIconClass: o.hasAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_CLASS) ? o.getAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_CLASS) : o.leadingIconClass,
                 leadingIconType: o.hasAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_TYPE) ? o.getAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_TYPE) : o.leadingIconType,
+                leadingIconComponentProps: o.leadingIconComponentProps,
                 trailingIcon: o.hasAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON) ? o.getAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON) : o.trailingIcon,
                 trailingIconClass: o.hasAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_CLASS) ? o.getAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_CLASS) : o.trailingIconClass,
                 trailingIconType: o.hasAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_TYPE) ? o.getAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_TYPE) : o.trailingIconType,
+                trailingIconComponentProps: o.trailingIconComponentProps,
                 leadingBuilder: o.leadingBuilder,
                 trailingBuilder: o.trailingBuilder
             };

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

@@ -445,7 +445,9 @@ export class BaseSelectFoundation extends ListDropdownAwareFoundation {
         }, 300);
         this._options = this._adapter.getOptions();
         // 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()));
+        const matchedOption = this._flatOptions.find(({ disabled, label }) => {
+            return !disabled && label.trim().toLowerCase().startsWith(this._filterString.trim().toLowerCase());
+        });
         if (matchedOption) {
             const optionIndex = this._flatOptions.indexOf(matchedOption);
             if (this._open) {

package/esm/select/option/option-constants.d.ts

@@ -9,6 +9,7 @@ export declare const OPTION_CONSTANTS: {
         DISABLED: string;
         DIVIDER: string;
         LABEL: string;
+        SECONDARY_LABEL: string;
         LEADING_ICON_CLASS: string;
         LEADING_ICON_TYPE: string;
         LEADING_ICON: string;

package/esm/select/option/option-constants.js

@@ -9,6 +9,7 @@ const attributes = {
     DISABLED: 'disabled',
     DIVIDER: 'divider',
     LABEL: 'label',
+    SECONDARY_LABEL: 'secondary-label',
     LEADING_ICON_CLASS: 'leading-icon-class',
     LEADING_ICON_TYPE: 'leading-icon-type',
     LEADING_ICON: 'leading-icon',

package/esm/select/option/option-foundation.d.ts

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IIconComponent } from '../../icon';
 import { IBaseListDropdownOption, ListDropdownIconType } from '../../list-dropdown/list-dropdown-constants';
 import { IOptionAdapter } from './option-adapter';
 export interface IOptionFoundation extends ICustomElementFoundation, Required<IBaseListDropdownOption> {
@@ -13,15 +14,18 @@ export declare class OptionFoundation implements IOptionFoundation {
     private _adapter;
     private _value;
     private _label;
+    private _secondaryLabel;
     private _disabled;
     private _divider;
     private _optionClass;
     private _leadingIcon;
     private _leadingIconClass;
     private _leadingIconType;
+    private _leadingIconComponentProps;
     private _trailingIcon;
     private _trailingIconClass;
     private _trailingIconType;
+    private _trailingIconComponentProps;
     private _leadingBuilder;
     private _trailingBuilder;
     constructor(_adapter: IOptionAdapter);
@@ -31,6 +35,9 @@ export declare class OptionFoundation implements IOptionFoundation {
     /** Gets/sets the label of this option. */
     get label(): string;
     set label(value: string);
+    /** Gets/sets the secondary label of this option. */
+    get secondaryLabel(): string;
+    set secondaryLabel(value: string);
     /** Gets/sets the disabled status of this option. */
     get disabled(): boolean;
     set disabled(value: boolean);
@@ -49,6 +56,9 @@ export declare class OptionFoundation implements IOptionFoundation {
     /** Gets/sets the leading icon type of this option. */
     get leadingIconType(): ListDropdownIconType;
     set leadingIconType(value: ListDropdownIconType);
+    /** Gets/sets the props on the leading icon component. */
+    get leadingIconComponentProps(): Partial<IIconComponent>;
+    set leadingIconComponentProps(value: Partial<IIconComponent>);
     /** Gets/sets the trailing icon of this option. */
     get trailingIcon(): string;
     set trailingIcon(value: string);
@@ -58,6 +68,9 @@ export declare class OptionFoundation implements IOptionFoundation {
     /** Gets/sets the trailing icon type of this option. */
     get trailingIconType(): ListDropdownIconType;
     set trailingIconType(value: ListDropdownIconType);
+    /** Gets/sets the props on the trailing icon component. */
+    get trailingIconComponentProps(): Partial<IIconComponent>;
+    set trailingIconComponentProps(value: Partial<IIconComponent>);
     /** Gets/sets the leading builder of this option. */
     get leadingBuilder(): (() => HTMLElement);
     set leadingBuilder(value: (() => HTMLElement));

package/esm/select/option/option-foundation.js

@@ -32,6 +32,16 @@ export class OptionFoundation {
             this._adapter.toggleHostAttribute(OPTION_CONSTANTS.attributes.LABEL, !!this._label, this._label);
         }
     }
+    /** Gets/sets the secondary label of this option. */
+    get secondaryLabel() {
+        return this._secondaryLabel;
+    }
+    set secondaryLabel(value) {
+        if (this._secondaryLabel !== value) {
+            this._secondaryLabel = value;
+            this._adapter.toggleHostAttribute(OPTION_CONSTANTS.attributes.SECONDARY_LABEL, !!this._secondaryLabel, this._secondaryLabel);
+        }
+    }
     /** Gets/sets the disabled status of this option. */
     get disabled() {
         return this._disabled;
@@ -99,6 +109,15 @@ export class OptionFoundation {
             this._adapter.toggleHostAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_TYPE, !!this._leadingIconType, this._leadingIconType);
         }
     }
+    /** Gets/sets the props on the leading icon component. */
+    get leadingIconComponentProps() {
+        return this._leadingIconComponentProps;
+    }
+    set leadingIconComponentProps(value) {
+        if (this._leadingIconComponentProps !== value) {
+            this._leadingIconComponentProps = value;
+        }
+    }
     /** Gets/sets the trailing icon of this option. */
     get trailingIcon() {
         return this._trailingIcon;
@@ -129,6 +148,15 @@ export class OptionFoundation {
             this._adapter.toggleHostAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_TYPE, !!this._trailingIconType, this._trailingIconType);
         }
     }
+    /** Gets/sets the props on the trailing icon component. */
+    get trailingIconComponentProps() {
+        return this._trailingIconComponentProps;
+    }
+    set trailingIconComponentProps(value) {
+        if (this._trailingIconComponentProps !== value) {
+            this._trailingIconComponentProps = value;
+        }
+    }
     /** Gets/sets the leading builder of this option. */
     get leadingBuilder() {
         return this._leadingBuilder;

package/esm/select/option/option.d.ts

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { ICustomElement } from '@tylertech/forge-core';
+import { IIconComponent } from '../../icon';
 import { BaseComponent } from '../../core/base/base-component';
 import { IBaseListDropdownOption, ListDropdownIconType } from '../../list-dropdown/list-dropdown-constants';
 export interface IOptionComponent extends ICustomElement, Required<IBaseListDropdownOption> {
@@ -28,6 +29,8 @@ export declare class OptionComponent extends BaseComponent implements IOptionCom
     value: any;
     /** Gets/sets the label of this option. */
     label: string;
+    /** Gets/sets the secondary label of this option. */
+    secondaryLabel: string;
     /** Gets/sets the disabled status of this option. */
     disabled: boolean;
     /** Gets/sets the whether this option is a divider. */
@@ -40,12 +43,16 @@ export declare class OptionComponent extends BaseComponent implements IOptionCom
     leadingIconClass: string;
     /** Gets/sets the leading icon type of this option. */
     leadingIconType: ListDropdownIconType;
+    /** Gets/sets properties on leading icon component. */
+    leadingIconComponentProps: Partial<IIconComponent>;
     /** Gets/sets the trailing icon of this option. */
     trailingIcon: string;
     /** Gets/sets the trailing icon class of this option. */
     trailingIconClass: string;
     /** Gets/sets the trailing icon type of this option. */
     trailingIconType: ListDropdownIconType;
+    /** Gets/sets properties on trailing icon component. */
+    trailingIconComponentProps: Partial<IIconComponent>;
     /** Gets/sets the leading builder of this option. */
     leadingBuilder: () => HTMLElement;
     /** Gets/sets the trailing builder of this option. */

package/esm/select/option/option.js

@@ -19,6 +19,7 @@ let OptionComponent = class OptionComponent extends BaseComponent {
         return [
             OPTION_CONSTANTS.attributes.VALUE,
             OPTION_CONSTANTS.attributes.LABEL,
+            OPTION_CONSTANTS.attributes.SECONDARY_LABEL,
             OPTION_CONSTANTS.attributes.DISABLED,
             OPTION_CONSTANTS.attributes.DIVIDER,
             OPTION_CONSTANTS.attributes.OPTION_CLASS,
@@ -47,6 +48,9 @@ let OptionComponent = class OptionComponent extends BaseComponent {
             case OPTION_CONSTANTS.attributes.LABEL:
                 this.label = newValue;
                 break;
+            case OPTION_CONSTANTS.attributes.SECONDARY_LABEL:
+                this.secondaryLabel = newValue;
+                break;
             case OPTION_CONSTANTS.attributes.DISABLED:
                 this.disabled = coerceBoolean(newValue);
                 break;
@@ -83,6 +87,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], OptionComponent.prototype, "label", void 0);
+__decorate([
+    FoundationProperty()
+], OptionComponent.prototype, "secondaryLabel", void 0);
 __decorate([
     FoundationProperty()
 ], OptionComponent.prototype, "disabled", void 0);
@@ -101,6 +108,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], OptionComponent.prototype, "leadingIconType", void 0);
+__decorate([
+    FoundationProperty()
+], OptionComponent.prototype, "leadingIconComponentProps", void 0);
 __decorate([
     FoundationProperty()
 ], OptionComponent.prototype, "trailingIcon", void 0);
@@ -110,6 +120,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], OptionComponent.prototype, "trailingIconType", void 0);
+__decorate([
+    FoundationProperty()
+], OptionComponent.prototype, "trailingIconComponentProps", void 0);
 __decorate([
     FoundationProperty()
 ], OptionComponent.prototype, "leadingBuilder", void 0);

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

@@ -37,7 +37,7 @@ export interface ISliderAdapter extends IBaseAdapter {
     setStartAriaLabel(value: string | null): void;
     setEndAriaLabel(value: string | null): void;
 }
-export declare class SliderAdapter extends BaseAdapter<ISliderComponent> {
+export declare class SliderAdapter extends BaseAdapter<ISliderComponent> implements ISliderAdapter {
     private readonly _rootElement;
     private readonly _trackElement;
     private readonly _handleContainerElement;

package/esm/slider/slider-adapter.js

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { getShadowElement, toggleAttribute, toggleClass } from '@tylertech/forge-core';
+import { internals } from '../constants';
 import { BaseAdapter } from '../core/base/base-adapter';
 import { elementsOverlapping, isPointerOverElement } from '../core/utils/utils';
 import { STATE_LAYER_CONSTANTS } from '../state-layer';
@@ -87,10 +88,10 @@ export class SliderAdapter extends BaseAdapter {
             const data = new FormData();
             data.append(this._component.nameStart, String(valueStart));
             data.append(this._component.nameEnd, String(valueEnd));
-            this._component.internals.setFormValue(data);
+            this._component[internals].setFormValue(data);
         }
         else {
-            this._component.internals.setFormValue(String(valueEnd));
+            this._component[internals].setFormValue(String(valueEnd));
         }
     }
     setRange(value) {

package/esm/slider/slider-constants.js

@@ -59,9 +59,9 @@ const events = {
     CHANGE: 'forge-slider-change'
 };
 const cssCustomProperties = {
-    START_FRACTION: '--_start-fraction',
-    END_FRACTION: '--_end-fraction',
-    TICK_COUNT: '--_tick-count'
+    START_FRACTION: '--_slider-start-fraction',
+    END_FRACTION: '--_slider-end-fraction',
+    TICK_COUNT: '--_slider-tick-count'
 };
 const numbers = {
     DEFAULT_STEP: 1,

package/esm/slider/slider.d.ts

@@ -3,10 +3,10 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { internals } from '../constants';
+import { BaseFormComponent, IBaseFormComponent } from '../core/base/base-form-component';
 import { SliderLabelBuilder, ISliderRangeEventData } from './slider-constants';
-export interface ISliderComponent extends IBaseComponent {
-    value: number;
+export interface ISliderComponent extends IBaseFormComponent<number> {
     valueStart: number;
     valueEnd: number;
     label: string;
@@ -19,14 +19,8 @@ export interface ISliderComponent extends IBaseComponent {
     range: boolean;
     tickmarks: boolean;
     labeled: boolean;
-    disabled: boolean;
-    readonly: boolean;
-    form: HTMLFormElement | null;
-    name: string;
     nameStart: string;
     nameEnd: string;
-    labels: NodeList;
-    internals: ElementInternals;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -129,7 +123,7 @@ declare global {
  * @csspart handle-start-label - Styles the start handle label element.
  * @csspart handle-start-label-content - Styles the start handle label content element.
  */
-export declare class SliderComponent extends BaseComponent implements ISliderComponent {
+export declare class SliderComponent extends BaseFormComponent<number> implements ISliderComponent {
     static get observedAttributes(): string[];
     static formAssociated: boolean;
     get form(): HTMLFormElement | null;
@@ -140,13 +134,14 @@ export declare class SliderComponent extends BaseComponent implements ISliderCom
     set nameStart(value: string);
     get nameEnd(): string;
     set nameEnd(value: string);
-    readonly internals: ElementInternals;
+    readonly [internals]: ElementInternals;
     private readonly _foundation;
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: string | Array<[string, string]> | null): void;
+    formDisabledCallback(isDisabled: boolean): void;
     value: number;
     valueStart: number;
     valueEnd: number;