@tylertech/forge 3.0.0-next.1 → 3.0.0-next.10

package/esm/app-bar/app-bar.js

@@ -10,18 +10,13 @@ import { AppBarFoundation } from './app-bar-foundation';
 import { APP_BAR_CONSTANTS } from './app-bar-constants';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><header class=\"forge-app-bar\" part=\"root\"><div class=\"forge-app-bar__row\" part=\"row\"><section class=\"forge-app-bar__section forge-app-bar__section--align-start\" part=\"section-start\"><slot name=\"start\"></slot><slot name=\"logo\"></slot><slot name=\"title\"><h1 class=\"forge-app-bar__title\" part=\"title\"></h1></slot></section><section id=\"center-section\" class=\"forge-app-bar__section forge-app-bar__section--align-center\" part=\"section-center\"><slot name=\"center\"></slot></section><section class=\"forge-app-bar__section forge-app-bar__section--align-end\" part=\"section-end\"><slot name=\"end\"></slot></section></div><div class=\"forge-app-bar__bottom\" part=\"bottom\"><slot name=\"bottom\"></slot></div></header></template>';
-const styles = '.forge-app-bar{color:#fff;color:var(--forge-app-bar-theme-on-background,#fff);background-color:#283593;background-color:var(--forge-app-bar-theme-background,#283593);z-index:4;z-index:var(--forge-z-index-header,4);background-size:cover;background-position:center;display:grid;grid-template-rows:1fr auto;grid-template-columns:minmax(0,1fr);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;-webkit-transition:-webkit-box-shadow .2s linear;transition:-webkit-box-shadow .2s linear;transition:box-shadow .2s linear;transition:box-shadow .2s linear,-webkit-box-shadow .2s linear}.forge-app-bar__row{display:grid;grid-template-columns:1fr 1fr 1fr;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:56px}.forge-app-bar--no-center .forge-app-bar__row{grid-template-columns:1fr auto}.forge-app-bar__section{display:-webkit-inline-box;display:inline-flex;-webkit-box-flex:1;flex:1 1 auto;-webkit-box-align:center;align-items:center;min-width:0;padding:0 4px;height:56px;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-app-bar__section--align-start{-webkit-box-pack:start;justify-content:flex-start;-webkit-box-ordinal-group:0;order:-1;grid-column:1}.forge-app-bar__section--align-center{grid-column:2;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.forge-app-bar__section--align-end{-webkit-box-pack:end;justify-content:flex-end;-webkit-box-ordinal-group:2;order:1;grid-column:3}.forge-app-bar--no-center .forge-app-bar__section--align-end{grid-column:2}.forge-app-bar ::slotted([slot=logo]){color:#fff;color:var(--forge-app-bar-theme-on-background,#fff);display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;margin:0 8px;font-size:3rem;overflow:visible}.forge-app-bar ::slotted([slot=profile]){margin-left:4px}.forge-app-bar ::slotted([slot=title]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline5-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1.5rem;font-size:var(--mdc-typography-headline5-font-size, 1.5rem);line-height:2rem;line-height:var(--mdc-typography-headline5-line-height, 2rem);font-weight:400;font-weight:var(--mdc-typography-headline5-font-weight,400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline5-letter-spacing, normal);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline5-text-decoration,inherit);text-decoration:var(--mdc-typography-headline5-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline5-text-transform,inherit);color:#fff;color:var(--forge-app-bar-theme-on-background,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:8px;padding-right:8px}.forge-app-bar slot[name=user-action]{display:-webkit-inline-box;display:inline-flex;margin-right:24px}.forge-app-bar__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline5-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1.5rem;font-size:var(--mdc-typography-headline5-font-size, 1.5rem);line-height:2rem;line-height:var(--mdc-typography-headline5-line-height, 2rem);font-weight:400;font-weight:var(--mdc-typography-headline5-font-weight,400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline5-letter-spacing, normal);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline5-text-decoration,inherit);text-decoration:var(--mdc-typography-headline5-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline5-text-transform,inherit);color:#fff;color:var(--forge-app-bar-theme-on-background,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:8px;padding-right:8px}.forge-app-bar__title--interactable:hover{background-color:rgba(255,255,255,.12);border-radius:4px;cursor:pointer}.forge-app-bar__title--interactable:active{background-color:rgba(255,255,255,.24)}.forge-app-bar__bottom{padding:0 4px;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;height:auto!important;overflow:hidden;grid-row:2}.forge-app-bar--fixed{-webkit-transition:-webkit-box-shadow .2s linear;transition:-webkit-box-shadow .2s linear;transition:box-shadow .2s linear;transition:box-shadow .2s linear,-webkit-box-shadow .2s linear}.forge-app-bar--raised{-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)}:host{z-index:4;z-index:var(--forge-z-index-header,4);position:relative;display:block;contain:layout style;--mdc-theme-text-secondary-on-background:var(--forge-app-bar-theme-secondary-on-background, rgba(255, 255, 255, 0.54));--mdc-theme-text-secondary-on-light:var(--forge-app-bar-theme-secondary-on-background, rgba(255, 255, 255, 0.54));--mdc-theme-text-disabled-on-background:var(--forge-app-bar-theme-disabled-on-background, rgba(255, 255, 255, 0.38));--mdc-theme-text-disabled-on-light:var(--forge-app-bar-theme-disabled-on-light, rgba(255, 255, 255, 0.12))}:host ::slotted(:not(forge-button)){--mdc-theme-on-primary:var(--forge-app-bar-theme-on-background, #ffffff);--mdc-theme-on-surface:var(--forge-app-bar-theme-on-background, #ffffff)}:host ::slotted(forge-tab-bar){--mdc-theme-primary:var(--forge-app-bar-theme-on-background, #ffffff)}:host ::slotted(forge-button:not([type])),:host ::slotted(forge-button[type=outlined]){--mdc-theme-primary:var(--forge-app-bar-theme-on-background, rgba(255, 255, 255, 0.87))}:host([hidden]){display:none}:host([theme=white]){--forge-app-bar-theme-background:#ffffff;--forge-app-bar-theme-on-background:rgba(0, 0, 0, 0.87);--forge-app-bar-theme-secondary-on-background:rgba(0, 0, 0, 0.54);--forge-app-bar-theme-disabled-on-background:rgba(0, 0, 0, 0.38);--forge-app-bar-theme-disabled-on-light:rgba(0, 0, 0, 0.12)}';
+const styles = '.forge-app-bar{color:#fff;color:var(--forge-app-bar-theme-on-background,#fff);background-color:#283593;background-color:var(--forge-app-bar-theme-background,#283593);z-index:4;z-index:var(--forge-z-index-header,4);background-size:cover;background-position:center;display:grid;grid-template-rows:1fr auto;grid-template-columns:minmax(0,1fr);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;-webkit-transition:-webkit-box-shadow .2s linear;transition:-webkit-box-shadow .2s linear;transition:box-shadow .2s linear;transition:box-shadow .2s linear,-webkit-box-shadow .2s linear}.forge-app-bar__row{display:grid;grid-template-columns:1fr 1fr 1fr;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:56px}.forge-app-bar--no-center .forge-app-bar__row{grid-template-columns:1fr auto}.forge-app-bar__section{display:-webkit-inline-box;display:inline-flex;-webkit-box-flex:1;flex:1 1 auto;-webkit-box-align:center;align-items:center;min-width:0;padding:0 4px;height:56px;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-app-bar__section--align-start{-webkit-box-pack:start;justify-content:flex-start;-webkit-box-ordinal-group:0;order:-1;grid-column:1}.forge-app-bar__section--align-center{grid-column:2;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.forge-app-bar__section--align-end{-webkit-box-pack:end;justify-content:flex-end;-webkit-box-ordinal-group:2;order:1;grid-column:3}.forge-app-bar--no-center .forge-app-bar__section--align-end{grid-column:2}.forge-app-bar ::slotted([slot=logo]){color:#fff;color:var(--forge-app-bar-theme-on-background,#fff);display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;margin:0 8px;font-size:3rem;overflow:visible}.forge-app-bar ::slotted([slot=profile]){margin-left:4px}.forge-app-bar ::slotted([slot=title]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline5-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1.5rem;font-size:var(--mdc-typography-headline5-font-size, 1.5rem);line-height:2rem;line-height:var(--mdc-typography-headline5-line-height, 2rem);font-weight:400;font-weight:var(--mdc-typography-headline5-font-weight,400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline5-letter-spacing, normal);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline5-text-decoration,inherit);text-decoration:var(--mdc-typography-headline5-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline5-text-transform,inherit);color:#fff;color:var(--forge-app-bar-theme-on-background,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:8px;padding-right:8px}.forge-app-bar slot[name=user-action]{display:-webkit-inline-box;display:inline-flex;margin-right:24px}.forge-app-bar__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline5-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1.5rem;font-size:var(--mdc-typography-headline5-font-size, 1.5rem);line-height:2rem;line-height:var(--mdc-typography-headline5-line-height, 2rem);font-weight:400;font-weight:var(--mdc-typography-headline5-font-weight,400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline5-letter-spacing, normal);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline5-text-decoration,inherit);text-decoration:var(--mdc-typography-headline5-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline5-text-transform,inherit);color:#fff;color:var(--forge-app-bar-theme-on-background,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:8px;padding-right:8px}.forge-app-bar__title--interactable:hover{background-color:rgba(255,255,255,.12);border-radius:4px;cursor:pointer}.forge-app-bar__title--interactable:active{background-color:rgba(255,255,255,.24)}.forge-app-bar__bottom{padding:0 4px;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;height:auto!important;overflow:hidden;grid-row:2}.forge-app-bar--fixed{-webkit-transition:-webkit-box-shadow .2s linear;transition:-webkit-box-shadow .2s linear;transition:box-shadow .2s linear;transition:box-shadow .2s linear,-webkit-box-shadow .2s linear}.forge-app-bar--raised{-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)}:host{z-index:4;z-index:var(--forge-z-index-header,4);position:relative;display:block;contain:layout style;--mdc-theme-text-secondary-on-background:var(--forge-app-bar-theme-secondary-on-background, rgba(255, 255, 255, 0.54));--mdc-theme-text-secondary-on-light:var(--forge-app-bar-theme-secondary-on-background, rgba(255, 255, 255, 0.54));--mdc-theme-text-disabled-on-background:var(--forge-app-bar-theme-disabled-on-background, rgba(255, 255, 255, 0.38));--mdc-theme-text-disabled-on-light:var(--forge-app-bar-theme-disabled-on-light, rgba(255, 255, 255, 0.12))}:host ::slotted(:not(forge-button)){--mdc-theme-on-primary:var(--forge-app-bar-theme-on-background, #ffffff);--mdc-theme-on-surface:var(--forge-app-bar-theme-on-background, #ffffff)}:host ::slotted(forge-tab-bar){--forge-tab-bar-divider-thickness:0;--forge-tab-active-color:var(--forge-app-bar-theme-on-background, #ffffff);--forge-tab-inactive-color:var(--forge-app-bar-theme-secondary-on-background, rgba(255, 255, 255, 0.54))}:host ::slotted(forge-button:not([type])),:host ::slotted(forge-button[type=outlined]){--mdc-theme-primary:var(--forge-app-bar-theme-on-background, rgba(255, 255, 255, 0.87))}:host([hidden]){display:none}:host([theme=white]){--forge-app-bar-theme-background:#ffffff;--forge-app-bar-theme-on-background:rgba(0, 0, 0, 0.87);--forge-app-bar-theme-secondary-on-background:rgba(0, 0, 0, 0.54);--forge-app-bar-theme-disabled-on-background:rgba(0, 0, 0, 0.38);--forge-app-bar-theme-disabled-on-light:rgba(0, 0, 0, 0.12)}';
 /**
  * The web component class behind the `<forge-app-bar>` custom element.
  *
  * @tag forge-app-bar
  */
 let AppBarComponent = class AppBarComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new AppBarFoundation(new AppBarAdapter(this));
-    }
     static get observedAttributes() {
         return [
             APP_BAR_CONSTANTS.attributes.TITLE_TEXT,
@@ -29,6 +24,11 @@ let AppBarComponent = class AppBarComponent extends BaseComponent {
             APP_BAR_CONSTANTS.attributes.RAISED
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new AppBarFoundation(new AppBarAdapter(this));
+    }
     initializedCallback() {
         this._foundation.initialize();
     }

package/esm/app-bar/notification-button/app-bar-notification-button.js

@@ -21,11 +21,6 @@ const template = '<template><forge-icon-button class=\"forge-icon-button--with-b
  * @tag forge-app-bar-notification-button
  */
 let AppBarNotificationButtonComponent = class AppBarNotificationButtonComponent extends BaseComponent {
-    constructor() {
-        super();
-        IconRegistry.define(tylIconNotifications);
-        this._foundation = new AppBarNotificationButtonFoundation(new AppBarNotificationButtonAdapter(this));
-    }
     static get observedAttributes() {
         return [
             APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.COUNT,
@@ -35,6 +30,11 @@ let AppBarNotificationButtonComponent = class AppBarNotificationButtonComponent
             APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.ICON
         ];
     }
+    constructor() {
+        super();
+        IconRegistry.define(tylIconNotifications);
+        this._foundation = new AppBarNotificationButtonFoundation(new AppBarNotificationButtonAdapter(this));
+    }
     initializedCallback() {
         attachLightTemplate(this, template);
     }

package/esm/app-bar/profile-button/app-bar-profile-button-constants.d.ts

@@ -34,4 +34,4 @@ export interface IAppBarProfileCardConfig {
     avatarImageUrl: string;
     avatarLetterCount: number;
 }
-export declare type AppBarProfileButtonProfileCardBuilder = () => HTMLElement;
+export type AppBarProfileButtonProfileCardBuilder = () => HTMLElement;

package/esm/app-bar/profile-button/app-bar-profile-button.js

@@ -22,10 +22,6 @@ const template = '<template><forge-icon-button><button type=\"button\" aria-labe
  * @tag forge-app-bar-profile-button
  */
 let AppBarProfileButtonComponent = class AppBarProfileButtonComponent extends BaseComponent {
-    constructor() {
-        super();
-        this._foundation = new AppBarProfileButtonFoundation(new AppBarProfileButtonAdapter(this));
-    }
     static get observedAttributes() {
         return [
             APP_BAR_PROFILE_BUTTON_CONSTANTS.attributes.FULL_NAME,
@@ -41,6 +37,10 @@ let AppBarProfileButtonComponent = class AppBarProfileButtonComponent extends Ba
             APP_BAR_PROFILE_BUTTON_CONSTANTS.attributes.OPEN
         ];
     }
+    constructor() {
+        super();
+        this._foundation = new AppBarProfileButtonFoundation(new AppBarProfileButtonAdapter(this));
+    }
     initializedCallback() {
         attachLightTemplate(this, template);
     }

package/esm/app-bar/search/app-bar-search.js

@@ -44,12 +44,6 @@ const styles = '::slotted([slot=action]){margin-left:8px}.forge-app-bar-search{d
  * @cssproperty --forge-app-bar-search-theme-disabled-opacity - Controls the disabled opacity of the component.
  */
 let AppBarSearchComponent = class AppBarSearchComponent extends BaseComponent {
-    constructor() {
-        super();
-        IconRegistry.define([tylIconSearch, tylIconArrowDropDown, tylIconLanguage]);
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new AppBarSearchFoundation(new AppBarSearchAdapter(this));
-    }
     static get observedAttributes() {
         return [
             APP_BAR_SEARCH_CONSTANTS.attributes.DISABLED,
@@ -59,6 +53,12 @@ let AppBarSearchComponent = class AppBarSearchComponent extends BaseComponent {
             APP_BAR_SEARCH_CONSTANTS.attributes.GLOBAL
         ];
     }
+    constructor() {
+        super();
+        IconRegistry.define([tylIconSearch, tylIconArrowDropDown, tylIconLanguage]);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new AppBarSearchFoundation(new AppBarSearchAdapter(this));
+    }
     connectedCallback() {
         if (this.children.length) {
             this._initialize();

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

@@ -24,7 +24,6 @@ export interface IAutocompleteAdapter extends IBaseAdapter {
     setInputValue(value: string): void;
     selectInputValue(): void;
     setDismissListener(listener: () => void): void;
-    toggleOptionMultiple(index: number, selected: boolean): void;
     isFocusWithinPopup(target: HTMLElement): boolean;
     hasFocus(): boolean;
     hasInputElement(): boolean;
@@ -62,7 +61,6 @@ export declare class AutocompleteAdapter extends BaseAdapter<IAutocompleteCompon
     show(config: IListDropdownConfig, popupTarget: string): void;
     hide(listener: () => void): void;
     setBusyVisibility(isVisible: boolean): void;
-    toggleOptionMultiple(index: number, selected: boolean): void;
     setDismissListener(listener: () => void): void;
     focus(): void;
     setOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;

package/esm/autocomplete/autocomplete-adapter.js

@@ -75,10 +75,6 @@ export class AutocompleteAdapter extends BaseAdapter {
         var _a;
         (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.setBusyVisibility(isVisible);
     }
-    toggleOptionMultiple(index, selected) {
-        var _a;
-        (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.toggleOptionMultiple(index, selected);
-    }
     setDismissListener(listener) {
         if (!this._listDropdown || !this._listDropdown.dropdownElement) {
             return;

package/esm/autocomplete/autocomplete-component-delegate.d.ts

@@ -8,7 +8,7 @@ import { TextFieldComponentDelegate } from '../text-field';
 import { IAutocompleteComponent } from './autocomplete';
 import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
 import { ITextFieldComponentDelegateConfig } from '../text-field/text-field-component-delegate';
-export declare type AutocompleteComponentDelegateProps = Partial<IAutocompleteComponent>;
+export type AutocompleteComponentDelegateProps = Partial<IAutocompleteComponent>;
 export interface IAutocompleteComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
     useDropdownIcon?: boolean;
     textFieldDelegateConfig?: ITextFieldComponentDelegateConfig;

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

@@ -13,6 +13,7 @@ export declare const AUTOCOMPLETE_CONSTANTS: {
         MULTIPLE: string;
         DEBOUNCE: string;
         FILTER_ON_FOCUS: string;
+        FILTER_FOCUS_FIRST: string;
         ALLOW_UNMATCHED: string;
         POPUP_TARGET: string;
         POPUP_CLASSES: string;
@@ -40,10 +41,10 @@ export declare const AUTOCOMPLETE_CONSTANTS: {
         SCROLLED_BOTTOM: string;
     };
 };
-export declare type AutocompleteOptionBuilder<T = any> = (option: IAutocompleteOption<T>, filterText: string, parentElement: IListItemComponent) => HTMLElement;
-export declare type AutocompleteOptionGroupBuilder<T = any> = ListDropdownOptionGroupBuilder<T>;
-export declare type AutocompleteFilterCallback<T = any> = (filterText: string, value: T | null) => IAutocompleteOption<T>[] | IAutocompleteOptionGroup<T>[] | Promise<IAutocompleteOption<T>[] | IAutocompleteOptionGroup<T>[]>;
-export declare type AutocompleteSelectedTextBuilder<T = any> = (selectedOptions: Array<IAutocompleteOption<T>>) => string;
+export type AutocompleteOptionBuilder<T = any> = (option: IAutocompleteOption<T>, filterText: string, parentElement: IListItemComponent) => HTMLElement;
+export type AutocompleteOptionGroupBuilder<T = any> = ListDropdownOptionGroupBuilder<T>;
+export type AutocompleteFilterCallback<T = any> = (filterText: string, value: T | null) => IAutocompleteOption<T>[] | IAutocompleteOptionGroup<T>[] | Promise<IAutocompleteOption<T>[] | IAutocompleteOptionGroup<T>[]>;
+export type AutocompleteSelectedTextBuilder<T = any> = (selectedOptions: Array<IAutocompleteOption<T>>) => string;
 export declare enum AutocompleteMode {
     Default = "default",
     Stateless = "stateless"

package/esm/autocomplete/autocomplete-constants.js

@@ -11,6 +11,7 @@ const attributes = {
     MULTIPLE: 'multiple',
     DEBOUNCE: 'debounce',
     FILTER_ON_FOCUS: 'filter-on-focus',
+    FILTER_FOCUS_FIRST: 'filter-focus-first',
     ALLOW_UNMATCHED: 'allow-unmatched',
     POPUP_TARGET: 'popup-target',
     POPUP_CLASSES: 'popup-classes',

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

@@ -13,6 +13,7 @@ export interface IAutocompleteFoundation extends IListDropdownAwareFoundation {
     value: string | string[] | IAutocompleteOption | IAutocompleteOption[] | null | undefined;
     debounce: number;
     filterOnFocus: boolean;
+    filterFocusFirst: boolean;
     allowUnmatched: boolean;
     popupTarget: string;
     filterText: string;
@@ -38,6 +39,7 @@ export declare class AutocompleteFoundation extends ListDropdownAwareFoundation
     private _allowUnmatched;
     private _popupTarget;
     private _filterOnFocus;
+    private _filterFocusFirst;
     private _optionBuilder?;
     private _filter?;
     private _selectedTextBuilder;
@@ -127,6 +129,9 @@ export declare class AutocompleteFoundation extends ListDropdownAwareFoundation
     /** Gets/sets filter on focus settings which controls whether the dropdown displays automatically when focused. */
     get filterOnFocus(): boolean;
     set filterOnFocus(value: boolean);
+    /** Gets/sets whether the first option in the dropdown will be focused automatically when opened or not. */
+    get filterFocusFirst(): boolean;
+    set filterFocusFirst(value: boolean);
     /** Controls whether unmatched text entered by the user will stay visible an option in the dropdown is not found. */
     get allowUnmatched(): boolean;
     set allowUnmatched(value: boolean);

package/esm/autocomplete/autocomplete-foundation.js

@@ -23,6 +23,7 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation {
         this._debounce = AUTOCOMPLETE_CONSTANTS.numbers.DEFAULT_DEBOUNCE_TIME;
         this._allowUnmatched = false;
         this._filterOnFocus = true;
+        this._filterFocusFirst = true;
         this._options = [];
         this._filterText = '';
         this._selectedOptions = [];
@@ -303,7 +304,7 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation {
         if (this._options.length) {
             const sendFilterText = this._allowUnmatched && !this._selectedOptions.length;
             this._dropdownReady({ userTriggered: sendFilterText });
-            if (this._filterText) {
+            if (this._filterFocusFirst && this._filterText) {
                 this._adapter.activateFirstOption();
             }
         }
@@ -450,11 +451,6 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation {
             const value = option ? option.value : '';
             const label = option ? option.label : '';
             if (this._multiple) {
-                const optionIndex = flatOptions.findIndex(o => optionEqualPredicate(o, selectedValue, this._matchKey));
-                if (optionIndex >= 0) {
-                    const selected = this._selectedOptions.some(o => optionEqualPredicate(o, selectedValue, this._matchKey));
-                    this._adapter.toggleOptionMultiple(optionIndex, selected);
-                }
                 const selectedOption = getSelectedOption(this._selectedOptions, value);
                 if (selectedOption) {
                     const index = this._selectedOptions.indexOf(selectedOption);
@@ -486,12 +482,6 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation {
             if (!Platform.isMobile && keepFocus) {
                 this._adapter.selectInputValue();
             }
-            if (this._multiple) {
-                // If we're in multiselect mode, we need to toggle the selected option
-                const index = flatOptions.findIndex(o => optionEqualPredicate(o, selectedValue, this._matchKey));
-                const isSelected = this._values.includes(selectedValue);
-                this._adapter.toggleOptionMultiple(index, isSelected);
-            }
             this._emitChangeEvent();
             this._tryUpdateDropdownPosition();
         };
@@ -722,6 +712,16 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation {
             this._adapter.setHostAttribute(AUTOCOMPLETE_CONSTANTS.attributes.FILTER_ON_FOCUS, isDefined(this._filterOnFocus) ? this._filterOnFocus.toString() : '');
         }
     }
+    /** Gets/sets whether the first option in the dropdown will be focused automatically when opened or not. */
+    get filterFocusFirst() {
+        return this._filterFocusFirst;
+    }
+    set filterFocusFirst(value) {
+        if (this._filterFocusFirst !== value) {
+            this._filterFocusFirst = value;
+            this._adapter.toggleHostAttribute(AUTOCOMPLETE_CONSTANTS.attributes.FILTER_FOCUS_FIRST, this._filterFocusFirst);
+        }
+    }
     /** Controls whether unmatched text entered by the user will stay visible an option in the dropdown is not found. */
     get allowUnmatched() {
         return this._allowUnmatched;

package/esm/autocomplete/autocomplete.d.ts

@@ -11,6 +11,7 @@ export interface IAutocompleteComponent extends IListDropdownAware {
     value: any;
     debounce: number;
     filterOnFocus: boolean;
+    filterFocusFirst: boolean;
     allowUnmatched: boolean;
     matchKey: string | null | undefined;
     popupTarget: string;
@@ -58,6 +59,8 @@ export declare class AutocompleteComponent extends ListDropdownAware implements
     debounce: number;
     /** Gets/sets filter on focus settings which controls whether the dropdown displays automatically when focused. */
     filterOnFocus: boolean;
+    /** Gets/sets whether the first option in the dropdown will be focused automatically when opened or not. */
+    filterFocusFirst: boolean;
     /** Controls whether unmatched text entered by the user will stay visible an option in the dropdown is not found. */
     allowUnmatched: boolean;
     /** Gets/sets the selector that will be used to find an element to attach the popup to. Defaults to the input element. */

package/esm/autocomplete/autocomplete.js

@@ -25,18 +25,13 @@ const styles = ':host{display:block}:host([hidden]){display:none}';
  * @tag forge-autocomplete
  */
 let AutocompleteComponent = class AutocompleteComponent extends ListDropdownAware {
-    constructor() {
-        super();
-        IconRegistry.define([tylIconArrowDropDown, tylIconCheckBox, tylIconCheckBoxOutlineBlank]);
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new AutocompleteFoundation(new AutocompleteAdapter(this));
-    }
     static get observedAttributes() {
         return [
             AUTOCOMPLETE_CONSTANTS.attributes.MODE,
             AUTOCOMPLETE_CONSTANTS.attributes.MULTIPLE,
             AUTOCOMPLETE_CONSTANTS.attributes.DEBOUNCE,
             AUTOCOMPLETE_CONSTANTS.attributes.FILTER_ON_FOCUS,
+            AUTOCOMPLETE_CONSTANTS.attributes.FILTER_FOCUS_FIRST,
             AUTOCOMPLETE_CONSTANTS.attributes.ALLOW_UNMATCHED,
             AUTOCOMPLETE_CONSTANTS.attributes.POPUP_TARGET,
             AUTOCOMPLETE_CONSTANTS.attributes.POPUP_CLASSES,
@@ -49,6 +44,12 @@ let AutocompleteComponent = class AutocompleteComponent extends ListDropdownAwar
             AUTOCOMPLETE_CONSTANTS.attributes.FILTER_TEXT
         ];
     }
+    constructor() {
+        super();
+        IconRegistry.define([tylIconArrowDropDown, tylIconCheckBox, tylIconCheckBoxOutlineBlank]);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new AutocompleteFoundation(new AutocompleteAdapter(this));
+    }
     connectedCallback() {
         if (this.querySelector(AUTOCOMPLETE_CONSTANTS.selectors.INPUT)) {
             this._foundation.initialize();
@@ -75,6 +76,9 @@ let AutocompleteComponent = class AutocompleteComponent extends ListDropdownAwar
             case AUTOCOMPLETE_CONSTANTS.attributes.FILTER_ON_FOCUS:
                 this.filterOnFocus = coerceBoolean(newValue);
                 break;
+            case AUTOCOMPLETE_CONSTANTS.attributes.FILTER_FOCUS_FIRST:
+                this.filterFocusFirst = coerceBoolean(newValue);
+                break;
             case AUTOCOMPLETE_CONSTANTS.attributes.ALLOW_UNMATCHED:
                 this.allowUnmatched = coerceBoolean(newValue);
                 break;
@@ -120,6 +124,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], AutocompleteComponent.prototype, "filterOnFocus", void 0);
+__decorate([
+    FoundationProperty()
+], AutocompleteComponent.prototype, "filterFocusFirst", void 0);
 __decorate([
     FoundationProperty()
 ], AutocompleteComponent.prototype, "allowUnmatched", void 0);

package/esm/avatar/avatar-component-delegate.d.ts

@@ -5,7 +5,7 @@
  */
 import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
 import { IAvatarComponent } from './avatar';
-export declare type AvatarComponentDelegateProps = Partial<IAvatarComponent>;
+export type AvatarComponentDelegateProps = Partial<IAvatarComponent>;
 export interface IAvatarComponentDelegateOptions extends IBaseComponentDelegateOptions {
 }
 export interface IAvatarComponentDelegateConfig extends IBaseComponentDelegateConfig<IAvatarComponent, IAvatarComponentDelegateOptions> {

package/esm/avatar/avatar.js

@@ -17,11 +17,6 @@ const styles = ':host{display:inline-block;contain:content}:host([hidden]){displ
  * @tag forge-avatar
  */
 let AvatarComponent = class AvatarComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new AvatarFoundation(new AvatarAdapter(this));
-    }
     static get observedAttributes() {
         return [
             AVATAR_CONSTANTS.attributes.TEXT,
@@ -30,6 +25,11 @@ let AvatarComponent = class AvatarComponent extends BaseComponent {
             AVATAR_CONSTANTS.attributes.AUTO_COLOR
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new AvatarFoundation(new AvatarAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

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

@@ -23,4 +23,4 @@ export declare const BACKDROP_CONSTANTS: {
         BACKDROP_CLICK: string;
     };
 };
-export declare type BackdropAppearance = 'light' | 'dark' | undefined;
+export type BackdropAppearance = 'light' | 'dark' | undefined;

package/esm/backdrop/backdrop.js

@@ -17,17 +17,17 @@ const styles = '.forge-backdrop{z-index:7;z-index:var(--forge-z-index-backdrop,7
  * @tag forge-backdrop
  */
 let BackdropComponent = class BackdropComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new BackdropFoundation(new BackdropAdapter(this));
-    }
     static get observedAttributes() {
         return [
             BACKDROP_CONSTANTS.attributes.DELAY,
             BACKDROP_CONSTANTS.attributes.MAX_OPACITY
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new BackdropFoundation(new BackdropAdapter(this));
+    }
     connectedCallback() {
         if (this.hasAttribute(BACKDROP_CONSTANTS.attributes.DELAY) && this.getAttribute(BACKDROP_CONSTANTS.attributes.DELAY)) {
             const inDelay = Number(this.getAttribute(BACKDROP_CONSTANTS.attributes.DELAY));

package/esm/badge/badge-component-delegate.d.ts

@@ -5,7 +5,7 @@
  */
 import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
 import { IBadgeComponent } from './badge';
-export declare type BadgeComponentDelegateProps = Partial<IBadgeComponent>;
+export type BadgeComponentDelegateProps = Partial<IBadgeComponent>;
 export interface IBadgeComponentDelegateOptions extends IBaseComponentDelegateOptions {
 }
 export interface IBadgeComponentDelegateConfig extends IBaseComponentDelegateConfig<IBadgeComponent, IBadgeComponentDelegateOptions> {

package/esm/badge/badge.js

@@ -17,17 +17,17 @@ const styles = '.forge-badge{-moz-osx-font-smoothing:grayscale;-webkit-font-smoo
  * @tag forge-badge
  */
 let BadgeComponent = class BadgeComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new BadgeFoundation(new BadgeAdapter(this));
-    }
     static get observedAttributes() {
         return [
             BADGE_CONSTANTS.attributes.DOT,
             BADGE_CONSTANTS.attributes.OPEN
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new BadgeFoundation(new BadgeAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

package/esm/banner/banner.js

@@ -14,25 +14,25 @@ import { BannerAdapter } from './banner-adapter';
 import { BANNER_CONSTANTS } from './banner-constants';
 import { BannerFoundation } from './banner-foundation';
 const template = '<template><div class=\"forge-banner\" part=\"root\"><div class=\"forge-banner__container\" part=\"container\"><div class=\"forge-banner__container-wrapper\" part=\"wrapper\"><div class=\"forge-banner__container-wrapper-icon\" part=\"icon-container\"><slot name=\"icon\"></slot></div><div class=\"forge-banner__container-wrapper-subsection\" part=\"subsection-wrapper\"><div class=\"forge-banner__container-wrapper-subsection-text forge-typography--body1\" part=\"subsection-text\"><slot></slot></div><div class=\"forge-banner__container-wrapper-subsection-action\" part=\"action-subsection\"><slot name=\"button\"></slot></div></div></div><forge-icon-button class=\"forge-banner__container-dismiss\" part=\"dismiss-icon-button\"><button type=\"button\" aria-label=\"Dismiss this banner\" part=\"dismiss-button\"><forge-icon name=\"cancel\" part=\"dismiss-button-icon\"></forge-icon></button><forge-tooltip>Dismiss</forge-tooltip></forge-icon-button></div></div></template>';
-const styles = '.forge-icon-button{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.forge-icon-button forge-icon,.forge-icon-button img,.forge-icon-button svg{width:24px;height:24px}.forge-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-icon-button:disabled{cursor:default;pointer-events:none}.forge-icon-button__icon{display:inline-block}.forge-icon-button__icon.forge-icon-button__icon--on{display:none}.forge-icon-button--on .forge-icon-button__icon{display:none}.forge-icon-button--on .forge-icon-button__icon.forge-icon-button__icon--on{display:inline-block}@-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}}.forge-icon-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-icon-button::after,.forge-icon-button::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-icon-button::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-icon-button::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-icon-button.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-icon-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-icon-button.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}.forge-icon-button.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))}.forge-icon-button::after,.forge-icon-button::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.forge-icon-button.mdc-ripple-upgraded::after,.forge-icon-button.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%)}.forge-icon-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button::after,.forge-icon-button::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-icon-button.mdc-ripple-surface--hover::before,.forge-icon-button:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button.mdc-ripple-upgraded--background-focused::before,.forge-icon-button:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}forge-icon-button{position:relative;display:inline-block;overflow:visible}.forge-icon-button--on{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-icon-button--on::after,.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-icon-button--on.mdc-ripple-surface--hover::before,.forge-icon-button--on:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button--on.mdc-ripple-upgraded--background-focused::before,.forge-icon-button--on:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button--on:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button--on:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button--on.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);opacity:.08}.forge-icon-button--dense{width:28px;height:28px;padding:2px;padding:0}.forge-icon-button--dense-1{width:44px;height:44px;padding:10px}.forge-icon-button--dense-2{width:40px;height:40px;padding:8px}.forge-icon-button--dense-3{width:36px;height:36px;padding:6px}.forge-icon-button--dense-4{width:32px;height:32px;padding:4px}.forge-icon-button--dense-5{width:28px;height:28px;padding:2px}.forge-icon-button--dense-6{width:24px;height:24px;padding:0}.forge-icon-button--with-badge forge-badge{z-index:1;z-index:var(--forge-z-index-surface,1);pointer-events:none;--forge-badge-max-width:32px;--forge-badge-border:1px solid transparent}.forge-icon-button--with-badge forge-badge[app-bar-context]{--forge-badge-border:2px solid var(--forge-app-bar-theme-background)}@media (min-width:600px){.forge-banner{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:600px;max-height:600px}.forge-banner.forge-banner--dismissed{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:0}.forge-banner__container{border-bottom-color:#e0e0e0;border-bottom-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom-width:1px;border-bottom-style:solid;min-height:48px;-webkit-box-align:center;align-items:center;padding:0 24px 0 24px}.forge-banner__container-wrapper{-webkit-box-flex:1;flex:1 1 auto;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.forge-banner__container-wrapper-icon{margin-right:16px}.forge-banner__container-wrapper-subsection{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center}.forge-banner__container-wrapper-subsection-text{padding:14px 0 14px 0;margin-right:24px}.forge-banner__container-wrapper-subsection-action ::slotted(forge-button){margin-right:16px}.forge-banner__container-dismiss[hidden]{display:none}}@media (max-width:599px){.forge-banner{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:600px;max-height:600px}.forge-banner.forge-banner--dismissed{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:0}.forge-banner__container{border-bottom-color:#e0e0e0;border-bottom-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom-width:1px;border-bottom-style:solid;min-height:48px;padding:16px 12px 16px 12px}.forge-banner__container-wrapper{-webkit-box-flex:1;flex:1 1 auto;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-banner__container-wrapper-icon{margin-right:16px}.forge-banner__container-wrapper-subsection{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-banner__container-wrapper-subsection-action ::slotted(forge-button){margin-top:12px}.forge-banner__container-dismiss{margin-top:-12px;margin-right:-12px}.forge-banner__container-dismiss[hidden]{display:none}}:host{display:block}:host([hidden]){display:none}:host(:not([theme])) .forge-banner,:host([theme=\"\"]) .forge-banner,:host([theme=default]) .forge-banner{background:#e8eaf6;background:var(--forge-banner-theme-background,var(--forge-banner-theme-default-background,#e8eaf6));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-default-font-color,rgba(0,0,0,.87)))}:host(:not([theme])) .forge-banner .forge-banner__container-wrapper-icon,:host([theme=\"\"]) .forge-banner .forge-banner__container-wrapper-icon,:host([theme=default]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-default-icon-color,rgba(0,0,0,.54)))}:host(:not([theme])) .forge-banner .forge-banner__container-dismiss,:host([theme=\"\"]) .forge-banner .forge-banner__container-dismiss,:host([theme=default]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-default-icon-color,rgba(0,0,0,.54)))}:host([theme=danger]) .forge-banner{background:#ffcdd2;background:var(--forge-banner-theme-background,var(--forge-banner-theme-danger-background,#ffcdd2));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-danger-font-color,rgba(0,0,0,.87)))}:host([theme=danger]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-danger-icon-color,rgba(0,0,0,.54)))}:host([theme=danger]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-danger-icon-color,rgba(0,0,0,.54)))}:host([theme=warning]) .forge-banner{background:#ffdba6;background:var(--forge-banner-theme-background,var(--forge-banner-theme-warning-background,#ffdba6));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-warning-font-color,rgba(0,0,0,.87)))}:host([theme=warning]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-warning-icon-color,rgba(0,0,0,.54)))}:host([theme=warning]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-warning-icon-color,rgba(0,0,0,.54)))}:host([theme=success]) .forge-banner{background:#a5d6a7;background:var(--forge-banner-theme-background,var(--forge-banner-theme-success-background,#a5d6a7));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-success-font-color,rgba(0,0,0,.87)))}:host([theme=success]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-success-icon-color,rgba(0,0,0,.54)))}:host([theme=success]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-success-icon-color,rgba(0,0,0,.54)))}:host([theme=info-primary]) .forge-banner{background:#bbdefb;background:var(--forge-banner-theme-background,var(--forge-banner-theme-info-primary-background,#bbdefb));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-info-primary-font-color,rgba(0,0,0,.87)))}:host([theme=info-primary]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-primary-icon-color,rgba(0,0,0,.54)))}:host([theme=info-primary]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-primary-icon-color,rgba(0,0,0,.54)))}:host([theme=info-secondary]) .forge-banner{background:#e0e0e0;background:var(--forge-banner-theme-background,var(--forge-banner-theme-info-secondary-background,#e0e0e0));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-info-secondary-font-color,rgba(0,0,0,.87)))}:host([theme=info-secondary]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-secondary-icon-color,rgba(0,0,0,.54)))}:host([theme=info-secondary]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-secondary-icon-color,rgba(0,0,0,.54)))}';
+const styles = '.forge-icon-button{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.forge-icon-button forge-icon,.forge-icon-button img,.forge-icon-button svg{width:24px;height:24px}.forge-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-icon-button:disabled{cursor:default;pointer-events:none}.forge-icon-button__icon{display:inline-block}.forge-icon-button__icon.forge-icon-button__icon--on{display:none}.forge-icon-button--on .forge-icon-button__icon{display:none}.forge-icon-button--on .forge-icon-button__icon.forge-icon-button__icon--on{display:inline-block}@-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}}.forge-icon-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-icon-button::after,.forge-icon-button::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-icon-button::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-icon-button::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-icon-button.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-icon-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-icon-button.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}.forge-icon-button.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))}.forge-icon-button::after,.forge-icon-button::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.forge-icon-button.mdc-ripple-upgraded::after,.forge-icon-button.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%)}.forge-icon-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button::after,.forge-icon-button::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-icon-button.mdc-ripple-surface--hover::before,.forge-icon-button:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button.mdc-ripple-upgraded--background-focused::before,.forge-icon-button:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}forge-icon-button{position:relative;display:inline-block;overflow:visible}.forge-icon-button--on{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-icon-button--on::after,.forge-icon-button--on::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-icon-button--on.mdc-ripple-surface--hover::before,.forge-icon-button--on:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button--on.mdc-ripple-upgraded--background-focused::before,.forge-icon-button--on:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button--on:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button--on:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button--on.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-icon-button--on::before{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.08}.forge-icon-button--dense{width:28px;height:28px;padding:2px;padding:0}.forge-icon-button--dense-1{width:44px;height:44px;padding:10px}.forge-icon-button--dense-2{width:40px;height:40px;padding:8px}.forge-icon-button--dense-3{width:36px;height:36px;padding:6px}.forge-icon-button--dense-4{width:32px;height:32px;padding:4px}.forge-icon-button--dense-5{width:28px;height:28px;padding:2px}.forge-icon-button--dense-6{width:24px;height:24px;padding:0}.forge-icon-button--with-badge forge-badge{z-index:1;z-index:var(--forge-z-index-surface,1);pointer-events:none;--forge-badge-max-width:32px;--forge-badge-border:1px solid transparent}.forge-icon-button--with-badge forge-badge[app-bar-context]{--forge-badge-border:2px solid var(--forge-app-bar-theme-background)}@media (min-width:600px){.forge-banner{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:600px;max-height:600px}.forge-banner.forge-banner--dismissed{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:0}.forge-banner__container{border-bottom-color:#e0e0e0;border-bottom-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom-width:1px;border-bottom-style:solid;min-height:48px;-webkit-box-align:center;align-items:center;padding:0 24px 0 24px}.forge-banner__container-wrapper{-webkit-box-flex:1;flex:1 1 auto;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.forge-banner__container-wrapper-icon{margin-right:16px}.forge-banner__container-wrapper-subsection{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center}.forge-banner__container-wrapper-subsection-text{padding:14px 0 14px 0;margin-right:24px}.forge-banner__container-wrapper-subsection-action ::slotted(forge-button){margin-right:16px}.forge-banner__container-dismiss[hidden]{display:none}}@media (max-width:599px){.forge-banner{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:600px;max-height:600px}.forge-banner.forge-banner--dismissed{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:0}.forge-banner__container{border-bottom-color:#e0e0e0;border-bottom-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom-width:1px;border-bottom-style:solid;min-height:48px;padding:16px 12px 16px 12px}.forge-banner__container-wrapper{-webkit-box-flex:1;flex:1 1 auto;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-banner__container-wrapper-icon{margin-right:16px}.forge-banner__container-wrapper-subsection{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-banner__container-wrapper-subsection-action ::slotted(forge-button){margin-top:12px}.forge-banner__container-dismiss{margin-top:-12px;margin-right:-12px}.forge-banner__container-dismiss[hidden]{display:none}}:host{display:block}:host([hidden]){display:none}:host(:not([theme])) .forge-banner,:host([theme=\"\"]) .forge-banner,:host([theme=default]) .forge-banner{background:#e8eaf6;background:var(--forge-banner-theme-background,var(--forge-banner-theme-default-background,#e8eaf6));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-default-font-color,rgba(0,0,0,.87)))}:host(:not([theme])) .forge-banner .forge-banner__container-wrapper-icon,:host([theme=\"\"]) .forge-banner .forge-banner__container-wrapper-icon,:host([theme=default]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-default-icon-color,rgba(0,0,0,.54)))}:host(:not([theme])) .forge-banner .forge-banner__container-dismiss,:host([theme=\"\"]) .forge-banner .forge-banner__container-dismiss,:host([theme=default]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-default-icon-color,rgba(0,0,0,.54)))}:host([theme=danger]) .forge-banner{background:#ffcdd2;background:var(--forge-banner-theme-background,var(--forge-banner-theme-danger-background,#ffcdd2));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-danger-font-color,rgba(0,0,0,.87)))}:host([theme=danger]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-danger-icon-color,rgba(0,0,0,.54)))}:host([theme=danger]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-danger-icon-color,rgba(0,0,0,.54)))}:host([theme=warning]) .forge-banner{background:#ffdba6;background:var(--forge-banner-theme-background,var(--forge-banner-theme-warning-background,#ffdba6));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-warning-font-color,rgba(0,0,0,.87)))}:host([theme=warning]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-warning-icon-color,rgba(0,0,0,.54)))}:host([theme=warning]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-warning-icon-color,rgba(0,0,0,.54)))}:host([theme=success]) .forge-banner{background:#a5d6a7;background:var(--forge-banner-theme-background,var(--forge-banner-theme-success-background,#a5d6a7));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-success-font-color,rgba(0,0,0,.87)))}:host([theme=success]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-success-icon-color,rgba(0,0,0,.54)))}:host([theme=success]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-success-icon-color,rgba(0,0,0,.54)))}:host([theme=info-primary]) .forge-banner{background:#bbdefb;background:var(--forge-banner-theme-background,var(--forge-banner-theme-info-primary-background,#bbdefb));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-info-primary-font-color,rgba(0,0,0,.87)))}:host([theme=info-primary]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-primary-icon-color,rgba(0,0,0,.54)))}:host([theme=info-primary]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-primary-icon-color,rgba(0,0,0,.54)))}:host([theme=info-secondary]) .forge-banner{background:#e0e0e0;background:var(--forge-banner-theme-background,var(--forge-banner-theme-info-secondary-background,#e0e0e0));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-info-secondary-font-color,rgba(0,0,0,.87)))}:host([theme=info-secondary]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-secondary-icon-color,rgba(0,0,0,.54)))}:host([theme=info-secondary]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-secondary-icon-color,rgba(0,0,0,.54)))}';
 /**
  * The custom element class behind the `<forge-banner>` element.
  *
  * @tag forge-banner
  */
 let BannerComponent = class BannerComponent extends BaseComponent {
-    constructor() {
-        super();
-        IconRegistry.define(tylIconCancel);
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new BannerFoundation(new BannerAdapter(this));
-    }
     static get observedAttributes() {
         return [
             BANNER_CONSTANTS.attributes.DISMISSED,
             BANNER_CONSTANTS.attributes.CAN_DISMISS
         ];
     }
+    constructor() {
+        super();
+        IconRegistry.define(tylIconCancel);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new BannerFoundation(new BannerAdapter(this));
+    }
     connectedCallback() {
         this._foundation.connect();
     }