@tylertech/forge 3.0.0-next.12 → 3.0.0-next.14

package/esm/app-bar/notification-button/app-bar-notification-button.d.ts

@@ -10,16 +10,28 @@ declare global {
     }
 }
 export interface IAppBarNotificationButtonComponent extends IBaseComponent {
-    count: number;
+    count: number | string;
     dot: boolean;
     showBadge: boolean;
     theme: string;
     icon: string;
 }
 /**
- * The web component class behind the `<forge-app-bar-notification-button>` custom element.
- *
  * @tag forge-app-bar-notification-button
+ *
+ * @property {number | string} count - The number to display in the badge.
+ * @property {boolean} dot - Whether to display the dot variant of the badge or not.
+ * @property {boolean} showBadge - Whether to display the badge or not.
+ * @property {string} theme - The theme to apply to the badge.
+ * @property {string} icon - The name of an alternative icon to display.
+ *
+ * @attribute {string} [count] - The number to display in the badge.
+ * @attribute {boolean} [dot] - Whether to display the dot variant of the badge or not.
+ * @attribute {boolean} [show-badge] - Whether to display the badge or not.
+ * @attribute {string} [theme] - The theme to apply to the badge.
+ * @attribute {string} [icon] - The name of an alternative icon to display.
+ * @attribute {string} [aria-label] - The aria-label to apply to the button.
+ * @attribute {string} [aria-labelledby] - The id of an element to use as the aria-labelledby attribute.
  */
 export declare class AppBarNotificationButtonComponent extends BaseComponent implements IAppBarNotificationButtonComponent {
     static get observedAttributes(): string[];
@@ -27,8 +39,9 @@ export declare class AppBarNotificationButtonComponent extends BaseComponent imp
     constructor();
     initializedCallback(): void;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    count: number;
+    count: number | string;
     dot: boolean;
     theme: string;
     icon: string;

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

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { attachLightTemplate, coerceBoolean, coerceNumber, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { attachLightTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
 import { tylIconNotifications } from '@tylertech/tyler-icons/standard';
 import { BadgeComponent } from '../../badge';
 import { BaseComponent } from '../../core/base/base-component';
@@ -14,11 +14,23 @@ import { TooltipComponent } from '../../tooltip';
 import { AppBarNotificationButtonAdapter } from './app-bar-notification-button-adapter';
 import { APP_BAR_NOTIFICATION_BUTTON_CONSTANTS } from './app-bar-notification-button-constants';
 import { AppBarNotificationButtonFoundation } from './app-bar-notification-button-foundation';
-const template = '<template><forge-icon-button class=\"forge-icon-button--with-badge\"><button type=\"button\" aria-label=\"Show notifications\"><forge-icon></forge-icon></button><forge-tooltip delay=\"500\" position=\"bottom\">Notifications</forge-tooltip><forge-badge positioned app-bar-context></forge-badge></forge-icon-button></template>';
+const template = '<template><forge-icon-button aria-label=\"Show notifications\"><forge-icon></forge-icon><forge-badge slot=\"badge\"></forge-badge></forge-icon-button><forge-tooltip delay=\"500\" position=\"bottom\">Notifications</forge-tooltip></template>';
 /**
- * The web component class behind the `<forge-app-bar-notification-button>` custom element.
- *
  * @tag forge-app-bar-notification-button
+ *
+ * @property {number | string} count - The number to display in the badge.
+ * @property {boolean} dot - Whether to display the dot variant of the badge or not.
+ * @property {boolean} showBadge - Whether to display the badge or not.
+ * @property {string} theme - The theme to apply to the badge.
+ * @property {string} icon - The name of an alternative icon to display.
+ *
+ * @attribute {string} [count] - The number to display in the badge.
+ * @attribute {boolean} [dot] - Whether to display the dot variant of the badge or not.
+ * @attribute {boolean} [show-badge] - Whether to display the badge or not.
+ * @attribute {string} [theme] - The theme to apply to the badge.
+ * @attribute {string} [icon] - The name of an alternative icon to display.
+ * @attribute {string} [aria-label] - The aria-label to apply to the button.
+ * @attribute {string} [aria-labelledby] - The id of an element to use as the aria-labelledby attribute.
  */
 let AppBarNotificationButtonComponent = class AppBarNotificationButtonComponent extends BaseComponent {
     static get observedAttributes() {
@@ -41,10 +53,13 @@ let AppBarNotificationButtonComponent = class AppBarNotificationButtonComponent
     connectedCallback() {
         this._foundation.initialize();
     }
+    disconnectedCallback() {
+        this._foundation.destroy();
+    }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
             case APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.COUNT:
-                this.count = coerceNumber(newValue);
+                this.count = newValue;
                 break;
             case APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.DOT:
                 this.dot = coerceBoolean(newValue);

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

@@ -4,10 +4,13 @@
  * License: Apache-2.0
  */
 import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
+import { IPopupComponent } from '../../popup';
 import { IAppBarProfileButtonComponent } from './app-bar-profile-button';
 import { IAppBarProfileCardConfig } from './app-bar-profile-button-constants';
 export interface IAppBarProfileButtonAdapter extends IBaseAdapter {
+    popupElement: IPopupComponent | undefined;
     initialize(): void;
+    destroy(): void;
     setClickListener(listener: (evt: MouseEvent) => void): void;
     removeClickListener(listener: (evt: MouseEvent) => void): void;
     openPopup(profileCardConfig: IAppBarProfileCardConfig, dismissListener: () => void, profileListener: () => void, signOutListener: () => void, profileCardContent?: HTMLElement): () => void;
@@ -22,11 +25,14 @@ export interface IAppBarProfileButtonAdapter extends IBaseAdapter {
 }
 export declare class AppBarProfileButtonAdapter extends BaseAdapter<IAppBarProfileButtonComponent> implements IAppBarProfileButtonAdapter {
     private _avatarElement;
-    private _buttonElement;
+    private _iconButtonElement;
     private _popupElement?;
     private _profileCardElement?;
+    private _forwardObserver?;
     constructor(component: IAppBarProfileButtonComponent);
+    get popupElement(): IPopupComponent | undefined;
     initialize(): void;
+    destroy(): void;
     setClickListener(listener: (evt: MouseEvent) => void): void;
     removeClickListener(listener: (evt: MouseEvent) => void): void;
     openPopup(profileCardConfig: IAppBarProfileCardConfig, dismissListener: () => void, profileListener: () => void, signOutListener: () => void, profileCardContent?: HTMLElement): () => void;

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

@@ -3,20 +3,42 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getLightElement, notChildEventListener, getActiveElement, removeAllChildren } from '@tylertech/forge-core';
+import { getLightElement, notChildEventListener, getActiveElement, removeAllChildren, toggleAttribute } from '@tylertech/forge-core';
 import { IconComponentDelegate } from '../../icon';
 import { AVATAR_CONSTANTS } from '../../avatar';
 import { BaseAdapter } from '../../core/base/base-adapter';
 import { PopupAnimationType, POPUP_CONSTANTS } from '../../popup';
 import { PROFILE_CARD_CONSTANTS } from '../../profile-card';
 import { APP_BAR_PROFILE_BUTTON_CONSTANTS } from './app-bar-profile-button-constants';
+import { ICON_BUTTON_CONSTANTS } from '../../icon-button';
+import { forwardAttributes } from '../../core/utils/reflect-utils';
 export class AppBarProfileButtonAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
     }
+    get popupElement() {
+        return this._popupElement;
+    }
     initialize() {
         this._avatarElement = getLightElement(this._component, AVATAR_CONSTANTS.elementName);
-        this._buttonElement = getLightElement(this._component, APP_BAR_PROFILE_BUTTON_CONSTANTS.selectors.BUTTON);
+        this._iconButtonElement = getLightElement(this._component, ICON_BUTTON_CONSTANTS.elementName);
+        const originalAriaLabel = this._iconButtonElement.getAttribute('aria-label');
+        this._forwardObserver = forwardAttributes(this._component, APP_BAR_PROFILE_BUTTON_CONSTANTS.forwardedAttributes, (name, value) => {
+            if (name === 'aria-label' && !value) {
+                value = originalAriaLabel;
+            }
+            toggleAttribute(this._iconButtonElement, !!value, name, value !== null && value !== void 0 ? value : undefined);
+        });
+    }
+    destroy() {
+        var _a;
+        (_a = this._forwardObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._forwardObserver = undefined;
+        if (this._popupElement) {
+            this._popupElement.remove();
+            this._popupElement = undefined;
+            this._profileCardElement = undefined;
+        }
     }
     setClickListener(listener) {
         this._component.addEventListener('click', listener);
@@ -47,6 +69,7 @@ export class AppBarProfileButtonAdapter extends BaseAdapter {
         this._popupElement.animationType = PopupAnimationType.Menu;
         this._popupElement.appendChild(this._profileCardElement);
         this._popupElement.open = true;
+        this._profileCardElement.focus();
         return notChildEventListener(this._popupElement, activeElement => {
             if (!this._popupElement) {
                 return;
@@ -64,7 +87,7 @@ export class AppBarProfileButtonAdapter extends BaseAdapter {
         }
     }
     requestFocus() {
-        this._buttonElement.focus();
+        this._iconButtonElement.focus();
     }
     setAvatarText(value) {
         this._avatarElement.text = value;

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

@@ -18,9 +18,7 @@ export declare const APP_BAR_PROFILE_BUTTON_CONSTANTS: {
         PROFILE_BUTTON_TEXT: string;
         OPEN: string;
     };
-    selectors: {
-        BUTTON: string;
-    };
+    forwardedAttributes: string[];
 };
 export interface IAppBarProfileCardConfig {
     fullName: string;

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

@@ -18,11 +18,9 @@ const attributes = {
     PROFILE_BUTTON_TEXT: 'profile-button-text',
     OPEN: 'open'
 };
-const selectors = {
-    BUTTON: 'button'
-};
+const forwardedAttributes = ['aria-label', 'aria-labelledby'];
 export const APP_BAR_PROFILE_BUTTON_CONSTANTS = {
     elementName,
     attributes,
-    selectors
+    forwardedAttributes
 };

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

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IPopupComponent } from '../../popup';
 import { IAppBarProfileButtonAdapter } from './app-bar-profile-button-adapter';
 import { AppBarProfileButtonProfileCardBuilder } from './app-bar-profile-button-constants';
 export interface IAppBarProfileButtonFoundation extends ICustomElementFoundation {
@@ -18,6 +19,7 @@ export interface IAppBarProfileButtonFoundation extends ICustomElementFoundation
     signOutButtonText: string;
     profileButtonText: string;
     open: boolean;
+    popupElement: IPopupComponent | undefined;
     profileCardBuilder: AppBarProfileButtonProfileCardBuilder;
 }
 export declare class AppBarProfileButtonFoundation implements IAppBarProfileButtonFoundation {
@@ -43,10 +45,10 @@ export declare class AppBarProfileButtonFoundation implements IAppBarProfileButt
     private _signOutButtonListener;
     constructor(_adapter: IAppBarProfileButtonAdapter);
     initialize(): void;
-    disconnect(): void;
+    destroy(): void;
     private _onClick;
     private _onKeydown;
-    private _onDimiss;
+    private _onDismiss;
     private _onProfileButtonClick;
     private _onSignOutButtonClick;
     private _openDropdown;
@@ -73,6 +75,7 @@ export declare class AppBarProfileButtonFoundation implements IAppBarProfileButt
     set profileButtonText(value: string);
     get open(): boolean;
     set open(value: boolean);
+    get popupElement(): IPopupComponent | undefined;
     get profileCardBuilder(): AppBarProfileButtonProfileCardBuilder;
     set profileCardBuilder(fn: AppBarProfileButtonProfileCardBuilder);
 }

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

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { isFunction, Platform } from '@tylertech/forge-core';
+import { isFunction } from '@tylertech/forge-core';
 import { AVATAR_CONSTANTS } from '../../avatar';
 import { PROFILE_CARD_CONSTANTS } from '../../profile-card';
 import { APP_BAR_PROFILE_BUTTON_CONSTANTS } from './app-bar-profile-button-constants';
@@ -18,7 +18,7 @@ export class AppBarProfileButtonFoundation {
         this._open = false;
         this._isInitialized = false;
         this._clickListener = evt => this._onClick(evt);
-        this._dismissListener = () => this._onDimiss();
+        this._dismissListener = () => this._onDismiss();
         this._keydownListener = evt => this._onKeydown(evt);
         this._profileButtonListener = () => this._onProfileButtonClick();
         this._signOutButtonListener = () => this._onSignOutButtonClick();
@@ -32,15 +32,13 @@ export class AppBarProfileButtonFoundation {
         this._adapter.setAvatarIcon(this._avatarIcon);
         this._isInitialized = true;
     }
-    disconnect() {
-        if (this._open) {
-            this._closeDropdown();
-        }
+    destroy() {
         this._adapter.removeWindowListener('keydown', this._keydownListener);
         this._adapter.removeClickListener(this._clickListener);
+        this._adapter.destroy();
         this._isInitialized = false;
     }
-    _onClick(evt) {
+    _onClick(_evt) {
         if (!this._open) {
             this._openDropdown();
         }
@@ -49,18 +47,13 @@ export class AppBarProfileButtonFoundation {
         }
     }
     _onKeydown(evt) {
-        if (evt.key === 'Escape' || evt.keyCode === 27) {
+        if (evt.key === 'Escape') {
             this._closeDropdown();
             this._adapter.requestFocus();
         }
     }
-    _onDimiss() {
-        if (Platform.WEBKIT) {
-            window.requestAnimationFrame(() => this._closeDropdown());
-        }
-        else {
-            this._closeDropdown();
-        }
+    _onDismiss() {
+        this._closeDropdown();
     }
     _onProfileButtonClick() {
         this._adapter.emitHostEvent(PROFILE_CARD_CONSTANTS.events.PROFILE);
@@ -73,12 +66,10 @@ export class AppBarProfileButtonFoundation {
         this._adapter.requestFocus();
     }
     _openDropdown() {
+        /* c8 ignore next 3 */
         if (this._open) {
             return;
         }
-        if (isFunction(this._cancelDismissListener)) {
-            this._cancelDismissListener();
-        }
         const profileCardConfig = {
             fullName: this._fullName,
             email: this._email,
@@ -95,21 +86,25 @@ export class AppBarProfileButtonFoundation {
         this._cancelDismissListener = this._adapter.openPopup(profileCardConfig, this._dismissListener, this._profileButtonListener, this._signOutButtonListener, profileCardContent);
         this._adapter.addWindowListener('keydown', this._keydownListener);
         this._open = true;
+        this._adapter.toggleHostAttribute(APP_BAR_PROFILE_BUTTON_CONSTANTS.attributes.OPEN, this._open);
         // If we aren't showing the sign out or profile buttons then leave focus on our button
         if (!profileCardConfig.signOut && !profileCardConfig.profile) {
             this._adapter.requestFocus();
         }
     }
     _closeDropdown() {
+        /* c8 ignore next 3 */
         if (!this._open) {
             return;
         }
-        if (isFunction(this._cancelDismissListener)) {
+        if (this._cancelDismissListener && isFunction(this._cancelDismissListener)) {
             this._cancelDismissListener();
+            this._cancelDismissListener = undefined;
         }
         this._open = false;
         this._adapter.removeWindowListener('keydown', this._keydownListener);
         this._adapter.closePopup();
+        this._adapter.toggleHostAttribute(APP_BAR_PROFILE_BUTTON_CONSTANTS.attributes.OPEN, this._open);
     }
     get fullName() {
         return this._fullName;
@@ -149,7 +144,7 @@ export class AppBarProfileButtonFoundation {
             this._avatarLetterCount = value;
             if (this._isInitialized) {
                 this._adapter.setAvatarLetterCount(this._avatarLetterCount);
-                this._adapter.setHostAttribute(APP_BAR_PROFILE_BUTTON_CONSTANTS.attributes.AVATAR_LETTER_COUNT, this._avatarLetterCount);
+                this._adapter.setHostAttribute(APP_BAR_PROFILE_BUTTON_CONSTANTS.attributes.AVATAR_LETTER_COUNT, String(this._avatarLetterCount));
             }
         }
     }
@@ -183,7 +178,7 @@ export class AppBarProfileButtonFoundation {
     set signOutButton(value) {
         if (this._showSignOutButton !== value) {
             this._showSignOutButton = value;
-            this._adapter.setHostAttribute(APP_BAR_PROFILE_BUTTON_CONSTANTS.attributes.SIGN_OUT_BUTTON, this._showSignOutButton);
+            this._adapter.toggleHostAttribute(APP_BAR_PROFILE_BUTTON_CONSTANTS.attributes.SIGN_OUT_BUTTON, this._showSignOutButton);
         }
     }
     get profileButton() {
@@ -192,7 +187,7 @@ export class AppBarProfileButtonFoundation {
     set profileButton(value) {
         if (this._showProfileButton !== value) {
             this._showProfileButton = value;
-            this._adapter.setHostAttribute(APP_BAR_PROFILE_BUTTON_CONSTANTS.attributes.PROFILE_BUTTON, this._showProfileButton);
+            this._adapter.toggleHostAttribute(APP_BAR_PROFILE_BUTTON_CONSTANTS.attributes.PROFILE_BUTTON, this._showProfileButton);
         }
     }
     get signOutButtonText() {
@@ -226,6 +221,9 @@ export class AppBarProfileButtonFoundation {
             }
         }
     }
+    get popupElement() {
+        return this._adapter.popupElement;
+    }
     get profileCardBuilder() {
         return this._profileCardBuilder;
     }

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

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { AppBarProfileButtonProfileCardBuilder } from './app-bar-profile-button-constants';
+import { IPopupComponent } from '../../popup';
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 export interface IAppBarProfileButtonComponent extends IBaseComponent {
     avatarImageUrl: string;
@@ -17,6 +18,7 @@ export interface IAppBarProfileButtonComponent extends IBaseComponent {
     signOutButtonText: string;
     profileButtonText: string;
     open: boolean;
+    popupElement: IPopupComponent | undefined;
     profileCardBuilder: (fn: AppBarProfileButtonProfileCardBuilder) => void;
 }
 declare global {
@@ -25,9 +27,35 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-app-bar-profile-button>` custom element.
- *
  * @tag forge-app-bar-profile-button
+ *
+ * @property {string} avatarImageUrl - The url of the avatar image to display.
+ * @property {number} avatarLetterCount - The number of letters to display in the avatar.
+ * @property {string} avatarText - The text to display in the avatar.
+ * @property {string} avatarIcon - The name of an alternative icon to display in the avatar.
+ * @property {string} fullName - The full name.
+ * @property {string} email - The email address.
+ * @property {boolean} signOutButton - Whether to display the sign out button or not. Defaults to `true`.
+ * @property {boolean} profileButton - Whether to display the profile button or not.
+ * @property {string} signOutButtonText - The text to display in the sign out button.
+ * @property {string} profileButtonText - The text to display in the profile button.
+ * @property {boolean} open - Whether the profile card is open or not.
+ * @property {IPopupComponent | undefined} popupElement - The popup element when open.
+ * @property {AppBarProfileButtonProfileCardBuilder} profileCardBuilder - Sets the profile card builder callback that will be used to add extra content to the profile card.
+ *
+ * @attribute {string} [avatar-image-url] - The url of the avatar image to display.
+ * @attribute {number} [avatar-letter-count] - The number of letters to display in the avatar.
+ * @attribute {string} [avatar-text] - The text to display in the avatar.
+ * @attribute {string} [avatar-icon] - The name of an alternative icon to display in the avatar.
+ * @attribute {string} [full-name] - The full name.
+ * @attribute {string} [email] - The email address.
+ * @attribute {boolean} [sign-out-button] - Whether to display the sign out button or not. Defaults to `true`.
+ * @attribute {boolean} [profile-button] - Whether to display the profile button or not.
+ * @attribute {string} [sign-out-button-text] - The text to display in the sign out button.
+ * @attribute {string} [profile-button-text] - The text to display in the profile button.
+ * @attribute {boolean} [open] - Whether the profile card is open or not.
+ * @attribute {string} [aria-label] - The aria-label to apply to the button.
+ * @attribute {string} [aria-labelledby] - The id of an element to use as the aria-labelledby attribute.
  */
 export declare class AppBarProfileButtonComponent extends BaseComponent implements IAppBarProfileButtonComponent {
     static get observedAttributes(): string[];
@@ -48,6 +76,7 @@ export declare class AppBarProfileButtonComponent extends BaseComponent implemen
     signOutButtonText: string;
     profileButtonText: string;
     open: boolean;
+    get popupElement(): IPopupComponent | undefined;
     /** Sets the profile card builder callback that will be used to add extra content to the profile card. */
     profileCardBuilder: AppBarProfileButtonProfileCardBuilder;
 }

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

@@ -14,12 +14,37 @@ import { AvatarComponent } from '../../avatar';
 import { PopupComponent } from '../../popup';
 import { TooltipComponent } from '../../tooltip';
 import { BaseComponent } from '../../core/base/base-component';
-import { IconComponent } from '../../icon';
-const template = '<template><forge-icon-button><button type=\"button\" aria-label=\"View profile card\"><forge-avatar aria-hidden=\"true\"></forge-avatar></button><forge-tooltip delay=\"500\" position=\"bottom\">View profile</forge-tooltip></forge-icon-button></template>';
+const template = '<template><forge-icon-button aria-label=\"View profile\"><forge-avatar aria-hidden=\"true\"></forge-avatar></forge-icon-button><forge-tooltip delay=\"500\" position=\"bottom\">View profile</forge-tooltip></template>';
 /**
- * The web component class behind the `<forge-app-bar-profile-button>` custom element.
- *
  * @tag forge-app-bar-profile-button
+ *
+ * @property {string} avatarImageUrl - The url of the avatar image to display.
+ * @property {number} avatarLetterCount - The number of letters to display in the avatar.
+ * @property {string} avatarText - The text to display in the avatar.
+ * @property {string} avatarIcon - The name of an alternative icon to display in the avatar.
+ * @property {string} fullName - The full name.
+ * @property {string} email - The email address.
+ * @property {boolean} signOutButton - Whether to display the sign out button or not. Defaults to `true`.
+ * @property {boolean} profileButton - Whether to display the profile button or not.
+ * @property {string} signOutButtonText - The text to display in the sign out button.
+ * @property {string} profileButtonText - The text to display in the profile button.
+ * @property {boolean} open - Whether the profile card is open or not.
+ * @property {IPopupComponent | undefined} popupElement - The popup element when open.
+ * @property {AppBarProfileButtonProfileCardBuilder} profileCardBuilder - Sets the profile card builder callback that will be used to add extra content to the profile card.
+ *
+ * @attribute {string} [avatar-image-url] - The url of the avatar image to display.
+ * @attribute {number} [avatar-letter-count] - The number of letters to display in the avatar.
+ * @attribute {string} [avatar-text] - The text to display in the avatar.
+ * @attribute {string} [avatar-icon] - The name of an alternative icon to display in the avatar.
+ * @attribute {string} [full-name] - The full name.
+ * @attribute {string} [email] - The email address.
+ * @attribute {boolean} [sign-out-button] - Whether to display the sign out button or not. Defaults to `true`.
+ * @attribute {boolean} [profile-button] - Whether to display the profile button or not.
+ * @attribute {string} [sign-out-button-text] - The text to display in the sign out button.
+ * @attribute {string} [profile-button-text] - The text to display in the profile button.
+ * @attribute {boolean} [open] - Whether the profile card is open or not.
+ * @attribute {string} [aria-label] - The aria-label to apply to the button.
+ * @attribute {string} [aria-labelledby] - The id of an element to use as the aria-labelledby attribute.
  */
 let AppBarProfileButtonComponent = class AppBarProfileButtonComponent extends BaseComponent {
     static get observedAttributes() {
@@ -48,7 +73,7 @@ let AppBarProfileButtonComponent = class AppBarProfileButtonComponent extends Ba
         this._foundation.initialize();
     }
     disconnectedCallback() {
-        this._foundation.disconnect();
+        this._foundation.destroy();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
@@ -87,6 +112,9 @@ let AppBarProfileButtonComponent = class AppBarProfileButtonComponent extends Ba
                 break;
         }
     }
+    get popupElement() {
+        return this._foundation.popupElement;
+    }
 };
 __decorate([
     FoundationProperty()
@@ -131,7 +159,6 @@ AppBarProfileButtonComponent = __decorate([
             PopupComponent,
             ProfileCardComponent,
             IconButtonComponent,
-            IconComponent,
             AvatarComponent,
             TooltipComponent
         ]

package/esm/autocomplete/autocomplete-foundation.js

@@ -701,13 +701,13 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation {
             values = [];
         }
         else if (Array.isArray(value)) {
-            values = JSON.parse(JSON.stringify(value));
+            values = structuredClone(value);
         }
         else if (isString(value)) {
             values = [value];
         }
         else {
-            values = [JSON.parse(JSON.stringify(value))];
+            values = [structuredClone(value)];
         }
         const hasNewValue = values.length !== this._values.length || values.some(v => !this._values.includes(v));
         if (!hasNewValue) {

package/esm/banner/banner-constants.js

@@ -12,7 +12,7 @@ const classes = {
 const selectors = {
     BANNER: '.forge-banner',
     FORGE_DISMISS_BUTTON: 'forge-icon-button.forge-banner__container-dismiss',
-    DISMISS_BUTTON: '.forge-banner__container-dismiss button',
+    DISMISS_BUTTON: '.forge-banner__container-dismiss',
     ICON: 'i',
     FORGE_BUTTON: 'forge-button'
 };

package/esm/banner/banner.js

@@ -13,8 +13,8 @@ import { TooltipComponent } from '../tooltip';
 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--body2\" 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:#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)))}';
+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--body2\" 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\" aria-label=\"Dismiss this banner\" part=\"dismiss-button\"><forge-icon name=\"cancel\" part=\"dismiss-button-icon\"></forge-icon></forge-icon-button><forge-tooltip>Dismiss</forge-tooltip></div></div></template>';
+const styles = '@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.
  *