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

package/esm/app-bar/index.js

@@ -3,11 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { defineCustomElement } from '@tylertech/forge-core';
-import { AppBarComponent } from './app-bar';
-export * from './app-bar-adapter';
-export * from './app-bar-constants';
-export * from './app-bar-foundation';
 export * from './app-bar';
 export * from './search';
 export * from './menu-button';
@@ -15,6 +10,3 @@ export * from './notification-button';
 export * from './help-button';
 export * from '../profile-card';
 export * from './profile-button';
-export function defineAppBarComponent() {
-    defineCustomElement(AppBarComponent);
-}

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

@@ -5,4 +5,11 @@
  */
 export declare const APP_BAR_MENU_BUTTON_CONSTANTS: {
     elementName: "forge-app-bar-menu-button";
+    observedAttributes: {
+        ICON: string;
+    };
+    attributes: {
+        ICON: string;
+    };
+    forwardedAttributes: string[];
 };

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

@@ -5,6 +5,14 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}app-bar-menu-button`;
+const observedAttributes = {
+    ICON: 'icon'
+};
+const attributes = Object.assign({}, observedAttributes);
+const forwardedAttributes = ['aria-label', 'aria-labelledby'];
 export const APP_BAR_MENU_BUTTON_CONSTANTS = {
-    elementName
+    elementName,
+    observedAttributes,
+    attributes,
+    forwardedAttributes
 };

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

@@ -5,6 +5,7 @@
  */
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 export interface IAppBarMenuButtonComponent extends IBaseComponent {
+    icon: string;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -12,11 +13,27 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-app-bar-menu-button>` custom element.
- *
  * @tag forge-app-bar-menu-button
+ *
+ * @description A utility component with predefined icon and descriptions for use in an app bar `start` slot.
+ *
+ * @property {string} icon - The name of an alternative icon to display.
+ *
+ * @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 AppBarMenuButtonComponent extends BaseComponent implements IAppBarMenuButtonComponent {
+    static get observedAttributes(): string[];
+    private _iconButtonElement;
+    private _iconElement;
+    private _forwardObserver?;
+    private _iconName;
     constructor();
     initializedCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    get icon(): string;
+    set icon(value: string);
 }

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

@@ -4,35 +4,84 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, attachLightTemplate } from '@tylertech/forge-core';
+import { CustomElement, attachLightTemplate, toggleAttribute, getLightElement } from '@tylertech/forge-core';
 import { APP_BAR_MENU_BUTTON_CONSTANTS } from './app-bar-menu-button-constants';
-import { IconButtonComponent } from '../../icon-button';
+import { IconButtonComponent, ICON_BUTTON_CONSTANTS } from '../../icon-button';
 import { TooltipComponent } from '../../tooltip';
-import { IconComponent, IconRegistry } from '../../icon';
+import { IconRegistry, ICON_CONSTANTS } from '../../icon';
 import { tylIconMenu } from '@tylertech/tyler-icons/standard';
 import { BaseComponent } from '../../core/base/base-component';
-const template = '<template><forge-icon-button style=\"width: 48px; height: 48px; display: flex; justify-content: center; align-items: center;\" aria-label=\"Toggle navigation menu\"><forge-icon name=\"menu\"></forge-icon></forge-icon-button><forge-tooltip delay=\"500\" position=\"bottom\">Menu</forge-tooltip></template>';
+import { forwardAttributes } from '../../core/utils/reflect-utils';
+const template = '<template><forge-icon-button aria-label=\"Toggle menu\"><forge-icon name=\"menu\"></forge-icon></forge-icon-button><forge-tooltip delay=\"500\" position=\"bottom\">Menu</forge-tooltip></template>';
 /**
- * The web component class behind the `<forge-app-bar-menu-button>` custom element.
- *
  * @tag forge-app-bar-menu-button
+ *
+ * @description A utility component with predefined icon and descriptions for use in an app bar `start` slot.
+ *
+ * @property {string} icon - The name of an alternative icon to display.
+ *
+ * @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 AppBarMenuButtonComponent = class AppBarMenuButtonComponent extends BaseComponent {
+    static get observedAttributes() {
+        return Object.values(APP_BAR_MENU_BUTTON_CONSTANTS.observedAttributes);
+    }
+    ;
     constructor() {
         super();
+        this._iconName = tylIconMenu.name;
         IconRegistry.define(tylIconMenu);
     }
     initializedCallback() {
         attachLightTemplate(this, template);
     }
+    connectedCallback() {
+        this._iconButtonElement = getLightElement(this, ICON_BUTTON_CONSTANTS.elementName);
+        this._iconElement = this._iconButtonElement.querySelector(ICON_CONSTANTS.elementName);
+        if (this._iconElement.name !== this._iconName) {
+            this._iconElement.name = this._iconName;
+        }
+        const originalAriaLabel = this._iconButtonElement.getAttribute('aria-label');
+        this._forwardObserver = forwardAttributes(this, APP_BAR_MENU_BUTTON_CONSTANTS.forwardedAttributes, (name, value) => {
+            if (name === 'aria-label' && !value) {
+                value = originalAriaLabel;
+            }
+            toggleAttribute(this._iconButtonElement, !!value, name, value !== null && value !== void 0 ? value : undefined);
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this._forwardObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._forwardObserver = undefined;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case APP_BAR_MENU_BUTTON_CONSTANTS.attributes.ICON:
+                this.icon = newValue;
+                break;
+        }
+    }
+    get icon() {
+        return this._iconName;
+    }
+    set icon(value) {
+        if (this._iconName !== value) {
+            this._iconName = value !== null && value !== void 0 ? value : tylIconMenu.name;
+            if (this._iconElement) {
+                this._iconElement.name = this._iconName;
+            }
+            this.setAttribute(APP_BAR_MENU_BUTTON_CONSTANTS.attributes.ICON, this._iconName);
+        }
+    }
 };
 AppBarMenuButtonComponent = __decorate([
     CustomElement({
         name: APP_BAR_MENU_BUTTON_CONSTANTS.elementName,
         dependencies: [
             IconButtonComponent,
-            TooltipComponent,
-            IconComponent
+            TooltipComponent
         ]
     })
 ], AppBarMenuButtonComponent);

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

@@ -7,19 +7,23 @@ import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
 import { IAppBarNotificationButtonComponent } from './app-bar-notification-button';
 export interface IAppBarNotificationButtonAdapter extends IBaseAdapter {
     initialize(): void;
+    destroy(): void;
     setIcon(icon: string): void;
-    setCount(value: number): void;
+    setCount(value: number | string): void;
     setBadgeType(dot: boolean): void;
     setBadgeTheme(theme: string): void;
     setBadgeVisible(isVisible: boolean): void;
 }
 export declare class AppBarNotificationButtonAdapter extends BaseAdapter<IAppBarNotificationButtonComponent> implements IAppBarNotificationButtonAdapter {
+    private _iconButtonElement;
     private _badgeElement;
     private _iconElement;
+    private _forwardObserver?;
     constructor(component: IAppBarNotificationButtonComponent);
     setIcon(icon: string): void;
     initialize(): void;
-    setCount(value: number): void;
+    destroy(): void;
+    setCount(value: number | string): void;
     setBadgeType(dot: boolean): void;
     setBadgeTheme(theme: string): void;
     setBadgeVisible(isVisible: boolean): void;

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

@@ -7,6 +7,9 @@ import { getLightElement, toggleAttribute } from '@tylertech/forge-core';
 import { BADGE_CONSTANTS } from '../../badge';
 import { BaseAdapter } from '../../core/base/base-adapter';
 import { ICON_CONSTANTS } from '../../icon';
+import { APP_BAR_NOTIFICATION_BUTTON_CONSTANTS } from './app-bar-notification-button-constants';
+import { forwardAttributes } from '../../core/utils/reflect-utils';
+import { ICON_BUTTON_CONSTANTS } from '../../icon-button/icon-button-constants';
 export class AppBarNotificationButtonAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
@@ -15,11 +18,24 @@ export class AppBarNotificationButtonAdapter extends BaseAdapter {
         this._iconElement.name = icon;
     }
     initialize() {
+        this._iconButtonElement = getLightElement(this._component, ICON_BUTTON_CONSTANTS.elementName);
         this._badgeElement = getLightElement(this._component, BADGE_CONSTANTS.elementName);
         this._iconElement = getLightElement(this._component, ICON_CONSTANTS.elementName);
+        const originalAriaLabel = this._iconButtonElement.getAttribute('aria-label');
+        this._forwardObserver = forwardAttributes(this._component, APP_BAR_NOTIFICATION_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;
     }
     setCount(value) {
-        this._badgeElement.textContent = value;
+        this._badgeElement.textContent = String(value);
     }
     setBadgeType(dot) {
         this._badgeElement.dot = dot;

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

@@ -12,4 +12,5 @@ export declare const APP_BAR_NOTIFICATION_BUTTON_CONSTANTS: {
         SHOW_BADGE: string;
         ICON: string;
     };
+    forwardedAttributes: string[];
 };

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

@@ -12,7 +12,9 @@ const attributes = {
     SHOW_BADGE: 'show-badge',
     ICON: 'icon'
 };
+const forwardedAttributes = ['aria-label', 'aria-labelledby'];
 export const APP_BAR_NOTIFICATION_BUTTON_CONSTANTS = {
     elementName,
-    attributes
+    attributes,
+    forwardedAttributes
 };

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

@@ -6,7 +6,7 @@
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IAppBarNotificationButtonAdapter } from './app-bar-notification-button-adapter';
 export interface IAppBarNotificationButtonFoundation extends ICustomElementFoundation {
-    count: number;
+    count: number | string;
     dot: boolean;
     theme: string;
     showBadge: boolean;
@@ -22,11 +22,11 @@ export declare class AppBarNotificationButtonFoundation implements IAppBarNotifi
     private _icon;
     constructor(_adapter: IAppBarNotificationButtonAdapter);
     initialize(): void;
-    disconnect(): void;
+    destroy(): void;
     get icon(): string;
     set icon(value: string);
-    get count(): number;
-    set count(value: number);
+    get count(): number | string;
+    set count(value: number | string);
     get dot(): boolean;
     set dot(value: boolean);
     get theme(): string;

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

@@ -7,7 +7,7 @@ import { APP_BAR_NOTIFICATION_BUTTON_CONSTANTS } from './app-bar-notification-bu
 export class AppBarNotificationButtonFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
-        this._count = 0;
+        this._count = '0';
         this._dot = false;
         this._showBadge = false;
         this._isInitialized = false;
@@ -22,7 +22,8 @@ export class AppBarNotificationButtonFoundation {
         this._adapter.setIcon(this._icon);
         this._isInitialized = true;
     }
-    disconnect() {
+    destroy() {
+        this._adapter.destroy();
         this._isInitialized = false;
     }
     get icon() {
@@ -33,8 +34,8 @@ export class AppBarNotificationButtonFoundation {
             this._icon = value;
             if (this._isInitialized) {
                 this._adapter.setIcon(this._icon);
-                this._adapter.setHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.ICON, this._icon);
             }
+            this._adapter.setHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.ICON, this._icon);
         }
     }
     get count() {
@@ -45,25 +46,21 @@ export class AppBarNotificationButtonFoundation {
             this._count = value;
             if (this._isInitialized) {
                 this._adapter.setCount(this._count);
-                this._adapter.setHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.COUNT, this._count);
             }
+            this._adapter.setHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.COUNT, this._count);
         }
     }
     get dot() {
         return this._dot;
     }
     set dot(value) {
+        value = Boolean(value);
         if (this._dot !== value) {
             this._dot = value;
             if (this._isInitialized) {
                 this._adapter.setBadgeType(this._dot);
-                if (this._dot) {
-                    this._adapter.setHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.DOT);
-                }
-                else {
-                    this._adapter.removeHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.DOT);
-                }
             }
+            this._adapter.toggleHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.DOT, this._dot);
         }
     }
     get theme() {
@@ -82,12 +79,13 @@ export class AppBarNotificationButtonFoundation {
         return this._showBadge;
     }
     set showBadge(value) {
+        value = Boolean(value);
         if (this._showBadge !== value) {
             this._showBadge = value;
             if (this._isInitialized) {
                 this._adapter.setBadgeVisible(this._showBadge);
-                this._adapter.setHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.SHOW_BADGE, this._showBadge);
             }
+            this._adapter.toggleHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.SHOW_BADGE, this._showBadge);
         }
     }
 }

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\" aria-label=\"Show notifications\"><forge-icon></forge-icon><forge-badge positioned app-bar-context></forge-badge></forge-icon-button><forge-tooltip delay=\"500\" position=\"bottom\">Notifications</forge-tooltip></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: 'forge-icon-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);
 }