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

package/esm/app-bar/{app-bar-constants.d.ts → app-bar/app-bar-constants.d.ts}

@@ -9,25 +9,21 @@ export declare const APP_BAR_CONSTANTS: {
     selectors: {
         ROOT: string;
         TITLE: string;
-        BOTTOM: string;
-        BOTTOM_SLOT: string;
+        LOGO_TITLE_CONTAINER: string;
         CENTER_SLOT: string;
         CENTER_SECTION: string;
-        FIXED: string;
-        RAISED: string;
     };
     attributes: {
         TITLE_TEXT: string;
-        FIXED: string;
-        RAISED: string;
+        ELEVATION: string;
         THEME: string;
+        HREF: string;
+        TARGET: string;
     };
     classes: {
-        DENSE: string;
-        FIXED: string;
-        RAISED: string;
-        ROW: string;
-        TITLE_INTERACTABLE: string;
         NO_CENTER: string;
+        LOGO_TITLE_CONTAINER: string;
     };
 };
+export type AppBarElevation = 'none' | 'raised';
+export type AppBarTheme = 'white' | '';

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

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+export const elementName = `${COMPONENT_NAME_PREFIX}app-bar`;
+const observedAttributes = {
+    TITLE_TEXT: 'title-text',
+    ELEVATION: 'elevation',
+    THEME: 'theme',
+    HREF: 'href',
+    TARGET: 'target'
+};
+const attributes = Object.assign({}, observedAttributes);
+const classes = {
+    NO_CENTER: 'no-center',
+    LOGO_TITLE_CONTAINER: 'logo-title-container'
+};
+const selectors = {
+    ROOT: '.forge-app-bar',
+    TITLE: '.title',
+    LOGO_TITLE_CONTAINER: '.logo-title-container',
+    CENTER_SLOT: 'slot[name=center]',
+    CENTER_SECTION: '#center-section'
+};
+export const APP_BAR_CONSTANTS = {
+    elementName,
+    selectors,
+    attributes,
+    classes
+};

package/esm/app-bar/{app-bar-foundation.d.ts → app-bar/app-bar-foundation.d.ts}

@@ -5,31 +5,32 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IAppBarAdapter } from './app-bar-adapter';
+import { AppBarElevation, AppBarTheme } from './app-bar-constants';
 export interface IAppBarFoundation extends ICustomElementFoundation {
     titleText: string;
-    fixed: boolean;
-    raised: boolean;
+    elevation: AppBarElevation;
+    theme: string;
+    href: string;
+    target: string;
 }
-/**
- * Provides facilities and helper methods for creating an app-bar component.
- */
 export declare class AppBarFoundation implements IAppBarFoundation {
     private _adapter;
     private _titleText;
-    private _fixed;
-    private _raised;
-    private _bottomSlotListener;
+    private _elevation;
+    private _theme;
+    private _href;
+    private _target;
     private _centerSlotListener;
     constructor(_adapter: IAppBarAdapter);
     initialize(): void;
-    private _onBottomSlotChanged;
-    private _onCenterSlotChanged;
-    /** Gets/sets the title text. */
     get titleText(): string;
     set titleText(value: string);
-    /** Gets/sets the fixed state. */
-    get fixed(): boolean;
-    set fixed(value: boolean);
-    get raised(): boolean;
-    set raised(value: boolean);
+    get elevation(): AppBarElevation;
+    set elevation(value: AppBarElevation);
+    get theme(): AppBarTheme;
+    set theme(value: AppBarTheme);
+    get href(): string;
+    set href(value: string);
+    get target(): string;
+    set target(value: string);
 }

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

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { APP_BAR_CONSTANTS } from './app-bar-constants';
+export class AppBarFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._titleText = '';
+        this._elevation = 'raised';
+        this._href = '';
+        this._target = '';
+        this._centerSlotListener = (_evt) => this._adapter.setCenterSlotVisibility();
+    }
+    initialize() {
+        this._adapter.initialize();
+        this._adapter.addCenterSlotListener(this._centerSlotListener);
+        this._adapter.setCenterSlotVisibility();
+    }
+    get titleText() {
+        return this._titleText;
+    }
+    set titleText(value) {
+        if (this._titleText !== value) {
+            this._titleText = value !== null && value !== void 0 ? value : '';
+            this._adapter.setTitleText(this._titleText);
+            this._adapter.setHostAttribute(APP_BAR_CONSTANTS.attributes.TITLE_TEXT, value);
+        }
+    }
+    get elevation() {
+        return this._elevation;
+    }
+    set elevation(value) {
+        if (this._elevation !== value) {
+            this._elevation = value;
+            this._adapter.setHostAttribute(APP_BAR_CONSTANTS.attributes.ELEVATION, value);
+        }
+    }
+    get theme() {
+        return this._theme;
+    }
+    set theme(value) {
+        if (this._theme !== value) {
+            this._theme = value !== null && value !== void 0 ? value : '';
+            this._adapter.toggleHostAttribute(APP_BAR_CONSTANTS.attributes.THEME, !!this._theme, this._theme);
+        }
+    }
+    get href() {
+        var _a;
+        return (_a = this._href) !== null && _a !== void 0 ? _a : '';
+    }
+    set href(value) {
+        if (this._href !== value) {
+            this._href = (value === null || value === void 0 ? void 0 : value.trim().length) ? value.trim() : '';
+            this._adapter.setHref(this._href);
+            this._adapter.toggleHostAttribute(APP_BAR_CONSTANTS.attributes.HREF, !!this._href, this._href);
+        }
+    }
+    get target() {
+        var _a;
+        return (_a = this._target) !== null && _a !== void 0 ? _a : '';
+    }
+    set target(value) {
+        if (this._target !== value) {
+            this._target = (value === null || value === void 0 ? void 0 : value.trim().length) ? value.trim() : '';
+            this._adapter.setTarget(this._target);
+            this._adapter.toggleHostAttribute(APP_BAR_CONSTANTS.attributes.TARGET, !!this._target, this._target);
+        }
+    }
+}

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

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { AppBarElevation, AppBarTheme } from './app-bar-constants';
+import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+export interface IAppBarComponent extends IBaseComponent {
+    titleText: string;
+    elevation: AppBarElevation;
+    theme: AppBarTheme;
+    href: string;
+    target: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-app-bar': IAppBarComponent;
+    }
+}
+/**
+ * @tag forge-app-bar
+ *
+ * @description App bars are a collection of components placed as a horizontal bar at the top of the screen. They typically contain a logo, title, and optional application-wide actions.
+ *
+ * @property {string} titleText - The text to display in the title.
+ * @property {AppBarElevation} elevation - The elevation of the app bar.
+ * @property {AppBarTheme} theme - The theme of the app bar.
+ * @property {string} href - The href that will be used to make the logo and title area a clickable link.
+ *
+ * @attribute {string} title-text - The text to display in the title.
+ * @attribute {string} elevation - The elevation of the app bar.
+ * @attribute {string} theme - The theme of the app bar.
+ * @attribute {string} href - The href that will be used to make the logo and title area a clickable link
+ *
+ * @cssproperty --forge-app-bar-background - The background color of the app bar.
+ * @cssproperty --forge-app-bar-foreground - The text color of the app bar.
+ * @cssproperty --forge-app-bar-z-index - The `z-index` of the app bar.
+ * @cssproperty --forge-app-bar-elevation - The elevation of the app bar.
+ * @cssproperty --forge-app-bar-height - The height of the app bar.
+ * @cssproperty --forge-app-bar-row-padding - The inline padding of the app bar.
+ * @cssproperty --forge-app-bar-logo-gap - The space between the logo and title.
+ * @cssproperty --forge-app-bar-title-padding - The padding around the title element.
+ * @cssproperty --forge-app-bar-transition-duration - The transition duration for animations.
+ * @cssproperty --forge-app-bar-transition-timing - The transition timing function for animations.
+ *
+ * @csspart root - The root container element.
+ * @csspart title - The title element.
+ *
+ * @slot logo - Reserved for the brand logo.
+ * @slot title - Reserved for the application title. This will overwrite the `titleText` property/attribute.
+ * @slot start - Places content at the beginning of the app bar.
+ * @slot center - Places content in the center of the app bar.
+ * @slot end - Places content at the end of the app bar.
+ */
+export declare class AppBarComponent extends BaseComponent implements IAppBarComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    titleText: string;
+    elevation: AppBarElevation;
+    theme: AppBarTheme;
+    href: string;
+    target: string;
+}

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

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate, FoundationProperty } from '@tylertech/forge-core';
+import { AppBarAdapter } from './app-bar-adapter';
+import { AppBarFoundation } from './app-bar-foundation';
+import { APP_BAR_CONSTANTS } from './app-bar-constants';
+import { BaseComponent } from '../../core/base/base-component';
+const template = '<template><div class=\"forge-app-bar\" part=\"root\"><div class=\"row\"><div class=\"section\"><slot name=\"start\"></slot><div class=\"logo-title-container\"><slot name=\"logo\"></slot><slot name=\"title\"><h1 class=\"title\" part=\"title\"></h1></slot></div></div><div id=\"center-section\" class=\"section\"><slot name=\"center\"></slot></div><div class=\"section\"><slot name=\"end\"></slot></div></div><div><slot name=\"bottom\"></slot></div></div></template>';
+const styles = ':host{--_app-bar-background:var(--forge-app-bar-background, var(--forge-theme-brand, #283593));--_app-bar-foreground:var(--forge-app-bar-foreground, var(--forge-theme-on-brand, #ffffff))}:host{display:block}:host([hidden]){display:none}:host(:not(theme)){--forge-theme-primary:var(--_app-bar-foreground);--forge-theme-on-primary:rgba(0, 0, 0, 0.87);--forge-theme-text-medium:rgba(255, 255, 255, 0.54)}.forge-app-bar{--_app-bar-z-index:var(--forge-app-bar-z-index, var(--forge-z-index-header, 4));--_app-bar-elevation:var(--forge-app-bar-elevation, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_app-bar-height:var(--forge-app-bar-height, 56px);--_app-bar-row-padding:var(--forge-app-bar-row-padding, var(--forge-spacing-xxsmall, 4px));--_app-bar-logo-gap:var(--forge-app-bar-logo-gap, var(--forge-spacing-medium, 16px));--_app-bar-logo-font-size:var(--forge-app-bar-logo-font-size, calc(var(--forge-typography-font-size, 1rem) * 2.5));--_app-bar-title-padding:var(--forge-app-bar-title-padding, var(--forge-spacing-xsmall, 8px));--_app-bar-transition-duration:var(--forge-app-bar-transition-duration, var(--forge-animation-duration-short4, 200ms));--_app-bar-transition-timing:var(--forge-app-bar-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-app-bar{background:var(--_app-bar-background);color:var(--_app-bar-foreground);position:relative;z-index:var(--_app-bar-z-index);display:grid;grid-template-rows:1fr auto;-webkit-transition-property:background-color,-webkit-box-shadow;transition-property:background-color,-webkit-box-shadow;transition-property:box-shadow,background-color;transition-property:box-shadow,background-color,-webkit-box-shadow;-webkit-transition-duration:var(--_app-bar-transition-duration);transition-duration:var(--_app-bar-transition-duration);-webkit-transition-timing-function:var(--_app-bar-transition-timing);transition-timing-function:var(--_app-bar-transition-timing);-webkit-box-sizing:border-box;box-sizing:border-box;width:100%}.forge-app-bar .row{display:grid;-webkit-box-align:center;align-items:center;grid-template-columns:1fr 1fr 1fr;height:var(--_app-bar-height);padding-inline:var(--_app-bar-row-padding)}.forge-app-bar.no-center .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;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:0;height:100%}.forge-app-bar .section:last-child{justify-self:end}.forge-app-bar h1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-heading4-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-heading4-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-font-size-scale, 1.25)));font-weight:var(--forge-typography-heading4-font-weight,500);line-height:var(--forge-typography-heading4-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-line-height-scale, 1.5)));letter-spacing:var(--forge-typography-heading4-letter-spacing, .005em);text-transform:var(--forge-typography-heading4-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-heading4-text-decoration,inherit);text-decoration:var(--forge-typography-heading4-text-decoration,inherit);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.forge-app-bar a{outline:0;text-decoration:none;color:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}.forge-app-bar a forge-state-layer{--forge-state-layer-color:var(--_app-bar-foreground)}.forge-app-bar a forge-focus-indicator{--forge-focus-indicator-color:var(--_app-bar-foreground);--forge-focus-indicator-shape:4px;--forge-focus-indicator-offset-block:4px}.forge-app-bar .logo-title-container{position:relative;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;gap:var(--_app-bar-logo-gap);min-width:0;padding-inline:var(--_app-bar-title-padding)}:host(:is(:not([elevation]),[elevation=raised])) .forge-app-bar{-webkit-box-shadow:var(--_app-bar-elevation);box-shadow:var(--_app-bar-elevation)}::slotted(forge-tab-bar){--forge-tab-bar-divider-thickness:0}::slotted([slot=logo]){font-size:var(--_app-bar-logo-font-size);height:1em;width:1em}:host([theme=white]){--forge-theme-primary:black;--forge-theme-on-primary:rgba(255, 255, 255, 0.87);--forge-theme-text-medium:rgba(0, 0, 0, 0.54)}:host([theme=white]) .forge-app-bar{--_app-bar-background:var(--forge-app-bar-background, white);--_app-bar-foreground:var(--forge-app-bar-foreground, black)}';
+/**
+ * @tag forge-app-bar
+ *
+ * @description App bars are a collection of components placed as a horizontal bar at the top of the screen. They typically contain a logo, title, and optional application-wide actions.
+ *
+ * @property {string} titleText - The text to display in the title.
+ * @property {AppBarElevation} elevation - The elevation of the app bar.
+ * @property {AppBarTheme} theme - The theme of the app bar.
+ * @property {string} href - The href that will be used to make the logo and title area a clickable link.
+ *
+ * @attribute {string} title-text - The text to display in the title.
+ * @attribute {string} elevation - The elevation of the app bar.
+ * @attribute {string} theme - The theme of the app bar.
+ * @attribute {string} href - The href that will be used to make the logo and title area a clickable link
+ *
+ * @cssproperty --forge-app-bar-background - The background color of the app bar.
+ * @cssproperty --forge-app-bar-foreground - The text color of the app bar.
+ * @cssproperty --forge-app-bar-z-index - The `z-index` of the app bar.
+ * @cssproperty --forge-app-bar-elevation - The elevation of the app bar.
+ * @cssproperty --forge-app-bar-height - The height of the app bar.
+ * @cssproperty --forge-app-bar-row-padding - The inline padding of the app bar.
+ * @cssproperty --forge-app-bar-logo-gap - The space between the logo and title.
+ * @cssproperty --forge-app-bar-title-padding - The padding around the title element.
+ * @cssproperty --forge-app-bar-transition-duration - The transition duration for animations.
+ * @cssproperty --forge-app-bar-transition-timing - The transition timing function for animations.
+ *
+ * @csspart root - The root container element.
+ * @csspart title - The title element.
+ *
+ * @slot logo - Reserved for the brand logo.
+ * @slot title - Reserved for the application title. This will overwrite the `titleText` property/attribute.
+ * @slot start - Places content at the beginning of the app bar.
+ * @slot center - Places content in the center of the app bar.
+ * @slot end - Places content at the end of the app bar.
+ */
+let AppBarComponent = class AppBarComponent extends BaseComponent {
+    static get observedAttributes() {
+        return [
+            APP_BAR_CONSTANTS.attributes.TITLE_TEXT,
+            APP_BAR_CONSTANTS.attributes.ELEVATION,
+            APP_BAR_CONSTANTS.attributes.THEME,
+            APP_BAR_CONSTANTS.attributes.HREF,
+            APP_BAR_CONSTANTS.attributes.TARGET
+        ];
+    }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new AppBarFoundation(new AppBarAdapter(this));
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case APP_BAR_CONSTANTS.attributes.TITLE_TEXT:
+                this.titleText = newValue;
+                break;
+            case APP_BAR_CONSTANTS.attributes.ELEVATION:
+                this.elevation = newValue;
+                break;
+            case APP_BAR_CONSTANTS.attributes.THEME:
+                this.theme = newValue;
+                break;
+            case APP_BAR_CONSTANTS.attributes.HREF:
+                this.href = newValue;
+                break;
+            case APP_BAR_CONSTANTS.attributes.TARGET:
+                this.target = newValue;
+                break;
+        }
+    }
+};
+__decorate([
+    FoundationProperty()
+], AppBarComponent.prototype, "titleText", void 0);
+__decorate([
+    FoundationProperty()
+], AppBarComponent.prototype, "elevation", void 0);
+__decorate([
+    FoundationProperty()
+], AppBarComponent.prototype, "theme", void 0);
+__decorate([
+    FoundationProperty()
+], AppBarComponent.prototype, "href", void 0);
+__decorate([
+    FoundationProperty()
+], AppBarComponent.prototype, "target", void 0);
+AppBarComponent = __decorate([
+    CustomElement({
+        name: APP_BAR_CONSTANTS.elementName
+    })
+], AppBarComponent);
+export { AppBarComponent };

package/esm/app-bar/app-bar/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './app-bar-adapter';
+export * from './app-bar-constants';
+export * from './app-bar-foundation';
+export * from './app-bar';
+export declare function defineAppBarComponent(): void;

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * 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 function defineAppBarComponent() {
+    defineCustomElement(AppBarComponent);
+}

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

@@ -5,14 +5,21 @@
  */
 import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
 import { IMenuOption } from '../../menu';
-import { IAppBarHelpButtonComponent } from './app-bar-help-button';
+import type { IAppBarHelpButtonComponent } from './app-bar-help-button';
 export interface IAppBarHelpButtonAdapter extends IBaseAdapter {
     initialize(): void;
+    destroy(): void;
     setMenuOptions(options: IMenuOption[]): void;
+    setIcon(icon: string): void;
 }
 export declare class AppBarHelpButtonAdapter extends BaseAdapter<IAppBarHelpButtonComponent> implements IAppBarHelpButtonAdapter {
     private _menuElement;
+    private _iconButtonElement;
+    private _iconElement;
+    private _forwardObserver?;
     constructor(component: IAppBarHelpButtonComponent);
     initialize(): void;
+    destroy(): void;
     setMenuOptions(options: IMenuOption[]): void;
+    setIcon(icon: string): void;
 }

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

@@ -3,17 +3,38 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getLightElement } from '@tylertech/forge-core';
+import { getLightElement, toggleAttribute } from '@tylertech/forge-core';
+import { forwardAttributes } from '../../core/utils/reflect-utils';
 import { BaseAdapter } from '../../core/base/base-adapter';
 import { MENU_CONSTANTS } from '../../menu';
+import { ICON_BUTTON_CONSTANTS } from '../../icon-button/icon-button-constants';
+import { APP_BAR_HELP_BUTTON_CONSTANTS } from './app-bar-help-button-constants';
+import { ICON_CONSTANTS } from '../../icon';
 export class AppBarHelpButtonAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
     }
     initialize() {
         this._menuElement = getLightElement(this._component, MENU_CONSTANTS.elementName);
+        this._iconButtonElement = getLightElement(this._component, ICON_BUTTON_CONSTANTS.elementName);
+        this._iconElement = getLightElement(this._component, ICON_CONSTANTS.elementName);
+        const originalAriaLabel = this._iconButtonElement.getAttribute('aria-label');
+        this._forwardObserver = forwardAttributes(this._component, APP_BAR_HELP_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;
     }
     setMenuOptions(options) {
         this._menuElement.options = options;
     }
+    setIcon(icon) {
+        this._iconElement.name = icon;
+    }
 }

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

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

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

@@ -5,6 +5,16 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}app-bar-help-button`;
+const attributes = {
+    ICON: 'icon'
+};
+const defaults = {
+    ICON: 'help'
+};
+const forwardedAttributes = ['aria-label', 'aria-labelledby'];
 export const APP_BAR_HELP_BUTTON_CONSTANTS = {
-    elementName
+    elementName,
+    attributes,
+    forwardedAttributes,
+    defaults
 };

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

@@ -8,14 +8,18 @@ import { IMenuOption } from '../../menu';
 import { IAppBarHelpButtonAdapter } from './app-bar-help-button-adapter';
 export interface IAppBarHelpButtonFoundation extends ICustomElementFoundation {
     options: IMenuOption[];
+    icon: string;
 }
 export declare class AppBarHelpButtonFoundation implements IAppBarHelpButtonFoundation {
     private _adapter;
     private _options;
+    private _icon;
     private _isInitialized;
     constructor(_adapter: IAppBarHelpButtonAdapter);
     initialize(): void;
     disconnect(): void;
     get options(): IMenuOption[];
     set options(value: IMenuOption[]);
+    get icon(): string;
+    set icon(value: string);
 }

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

@@ -3,18 +3,22 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { APP_BAR_HELP_BUTTON_CONSTANTS } from './app-bar-help-button-constants';
 export class AppBarHelpButtonFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
         this._options = [];
+        this._icon = APP_BAR_HELP_BUTTON_CONSTANTS.defaults.ICON;
         this._isInitialized = false;
     }
     initialize() {
         this._adapter.initialize();
         this._adapter.setMenuOptions(this._options);
+        this._adapter.setIcon(this._icon);
         this._isInitialized = true;
     }
     disconnect() {
+        this._adapter.destroy();
         this._isInitialized = false;
     }
     get options() {
@@ -26,4 +30,16 @@ export class AppBarHelpButtonFoundation {
             this._adapter.setMenuOptions(value);
         }
     }
+    get icon() {
+        return this._icon;
+    }
+    set icon(value) {
+        if (this._icon !== value) {
+            this._icon = value || APP_BAR_HELP_BUTTON_CONSTANTS.defaults.ICON;
+            if (this._isInitialized) {
+                this._adapter.setIcon(value);
+            }
+            this._adapter.setHostAttribute(APP_BAR_HELP_BUTTON_CONSTANTS.attributes.ICON, this._icon);
+        }
+    }
 }

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

@@ -7,6 +7,7 @@ import { IMenuOption } from '../../menu';
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 export interface IAppBarHelpButtonComponent extends IBaseComponent {
     options: IMenuOption[];
+    icon: string;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -14,15 +15,25 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-app-bar-help-button>` custom element.
- *
  * @tag forge-app-bar-help-button
+ *
+ * @description A utility component with predefined icon and descriptions for use in an app bar `end` slot.
+ *
+ * @property {IMenuOption[]} options - The menu options to display when the button is clicked
+ * @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 AppBarHelpButtonComponent extends BaseComponent implements IAppBarHelpButtonComponent {
+    static get observedAttributes(): string[];
     private _foundation;
     constructor();
     initializedCallback(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     options: IMenuOption[];
+    icon: string;
 }

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

@@ -12,15 +12,27 @@ import { AppBarHelpButtonFoundation } from './app-bar-help-button-foundation';
 import { APP_BAR_HELP_BUTTON_CONSTANTS } from './app-bar-help-button-constants';
 import { IconButtonComponent } from '../../icon-button';
 import { TooltipComponent } from '../../tooltip';
-import { IconComponent, IconRegistry } from '../../icon';
+import { IconRegistry } from '../../icon';
 import { BaseComponent } from '../../core/base/base-component';
 const template = '<template><forge-menu placement=\"bottom-end\"><forge-icon-button aria-label=\"Open help menu\"><forge-icon name=\"help\"></forge-icon></forge-icon-button><forge-tooltip delay=\"500\" position=\"bottom\">Help</forge-tooltip></forge-menu></template>';
 /**
- * The web component class behind the `<forge-app-bar-help-button>` custom element.
- *
  * @tag forge-app-bar-help-button
+ *
+ * @description A utility component with predefined icon and descriptions for use in an app bar `end` slot.
+ *
+ * @property {IMenuOption[]} options - The menu options to display when the button is clicked
+ * @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 AppBarHelpButtonComponent = class AppBarHelpButtonComponent extends BaseComponent {
+    static get observedAttributes() {
+        return [
+            APP_BAR_HELP_BUTTON_CONSTANTS.attributes.ICON
+        ];
+    }
     constructor() {
         super();
         IconRegistry.define(tylIconHelp);
@@ -35,18 +47,27 @@ let AppBarHelpButtonComponent = class AppBarHelpButtonComponent extends BaseComp
     disconnectedCallback() {
         this._foundation.disconnect();
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case APP_BAR_HELP_BUTTON_CONSTANTS.attributes.ICON:
+                this.icon = newValue;
+                break;
+        }
+    }
 };
 __decorate([
     FoundationProperty()
 ], AppBarHelpButtonComponent.prototype, "options", void 0);
+__decorate([
+    FoundationProperty()
+], AppBarHelpButtonComponent.prototype, "icon", void 0);
 AppBarHelpButtonComponent = __decorate([
     CustomElement({
         name: APP_BAR_HELP_BUTTON_CONSTANTS.elementName,
         dependencies: [
             MenuComponent,
             IconButtonComponent,
-            TooltipComponent,
-            IconComponent
+            TooltipComponent
         ]
     })
 ], AppBarHelpButtonComponent);

package/esm/app-bar/index.d.ts

@@ -3,9 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-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';
@@ -13,4 +10,3 @@ export * from './notification-button';
 export * from './help-button';
 export * from '../profile-card';
 export * from './profile-button';
-export declare function defineAppBarComponent(): void;