@tylertech/forge 3.0.0-next.17 → 3.0.0-next.19

package/esm/banner/banner-constants.js

@@ -5,37 +5,35 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}banner`;
+const observedAttributes = {
+    DISMISSED: 'dismissed',
+    PERSISTENT: 'persistent',
+    CAN_DISMISS: 'can-dismiss',
+    THEME: 'theme'
+};
+const attributes = Object.assign({}, observedAttributes);
 const classes = {
-    BANNER: 'forge-banner',
-    DISMISSED: 'forge-banner--dismissed'
+    HAS_ICON: 'has-icon',
+    HAS_BUTTON: 'has-button'
 };
 const selectors = {
-    BANNER: '.forge-banner',
-    FORGE_DISMISS_BUTTON: 'forge-icon-button.forge-banner__container-dismiss',
-    DISMISS_BUTTON: '.forge-banner__container-dismiss',
-    ICON: 'i',
-    FORGE_BUTTON: 'forge-button'
-};
-const attributes = {
-    SLOT: 'slot',
-    DISMISSED: 'dismissed',
-    CAN_DISMISS: 'can-dismiss',
-    HIDDEN: 'hidden'
+    DISMISS_BUTTON: '[part=dismiss-button]',
+    ICON_SLOT: 'slot[name=icon]',
+    BUTTON_SLOT: 'slot[name=button]'
 };
-const slots = {
-    ICON: 'icon',
-    TEXT: 'text',
-    BUTTON: 'button'
+const defaults = {
+    THEME: 'info'
 };
 const events = {
-    DISMISSED: `${elementName}-dismissed`,
-    UNDISMISSED: `${elementName}-undismissed`
+    BEFORE_DISMISS: `${elementName}-before-dismiss`,
+    DISMISSED: `${elementName}-dismissed`
 };
 export const BANNER_CONSTANTS = {
     elementName,
+    observedAttributes,
+    attributes,
     classes,
     selectors,
-    attributes,
-    slots,
+    defaults,
     events
 };

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

@@ -5,27 +5,28 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IBannerAdapter } from './banner-adapter';
+import { BannerTheme } from './banner-constants';
 export interface IBannerFoundation extends ICustomElementFoundation {
     dismissed: boolean;
-    canDismiss: boolean;
+    persistent: boolean;
+    theme: BannerTheme;
 }
 export declare class BannerFoundation implements IBannerFoundation {
     private _adapter;
     private _dismissed;
-    private _canDismiss;
-    private _dismissBanner;
+    private _persistent;
+    private _theme;
+    private _dismissListener;
     constructor(_adapter: IBannerAdapter);
-    connect(): void;
-    disconnect(): void;
-    private _dismiss;
-    private _syncDismissedState;
-    private _setUndissmissedClass;
-    private _setDismissedClass;
-    private _syncCanDismissState;
-    private _addDismissEventListener;
+    initialize(): void;
+    private _onDismiss;
+    private _addDismissListener;
     private _removeDismissEventListener;
+    private _applyPersistent;
     get dismissed(): boolean;
-    set dismissed(val: boolean);
-    get canDismiss(): boolean;
-    set canDismiss(val: boolean);
+    set dismissed(value: boolean);
+    get persistent(): boolean;
+    set persistent(value: boolean);
+    get theme(): BannerTheme;
+    set theme(value: BannerTheme);
 }

package/esm/banner/banner-foundation.js

@@ -8,66 +8,77 @@ export class BannerFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
         this._dismissed = false;
-        this._canDismiss = true;
-        this._dismissBanner = () => this._dismiss();
+        this._persistent = false;
+        this._theme = BANNER_CONSTANTS.defaults.THEME;
+        this._dismissListener = this._onDismiss.bind(this);
     }
-    connect() {
-        this._addDismissEventListener();
-    }
-    disconnect() {
-        this._removeDismissEventListener();
-    }
-    _dismiss() {
-        this.dismissed = true;
+    initialize() {
+        this._adapter.initialize();
+        if (!this._persistent) {
+            this._addDismissListener();
+        }
     }
-    _syncDismissedState() {
-        if (this.dismissed) {
-            this._setDismissedClass();
-            this._adapter.emitHostEvent(BANNER_CONSTANTS.events.DISMISSED);
+    async _onDismiss() {
+        if (this._dismissed || this._persistent) {
+            return;
         }
-        else {
-            this._setUndissmissedClass();
-            this._adapter.emitHostEvent(BANNER_CONSTANTS.events.UNDISMISSED);
+        const originalDismissed = this._dismissed;
+        this._dismissed = !this._dismissed;
+        const evt = new CustomEvent(BANNER_CONSTANTS.events.BEFORE_DISMISS, { bubbles: true, composed: true, cancelable: true });
+        this._adapter.dispatchHostEvent(evt);
+        this._dismissed = originalDismissed;
+        if (evt.defaultPrevented) {
+            return;
         }
+        const dismissComplete = this._adapter.startDismissCompleteListener();
+        this.dismissed = !this._dismissed;
+        await dismissComplete;
+        this._adapter.dispatchHostEvent(new CustomEvent(BANNER_CONSTANTS.events.DISMISSED, { bubbles: true, composed: true }));
     }
-    _setUndissmissedClass() {
-        this._adapter.removeRootClass(BANNER_CONSTANTS.classes.DISMISSED);
+    _addDismissListener() {
+        this._adapter.addDismissListener(this._dismissListener);
     }
-    _setDismissedClass() {
-        this._adapter.addRootClass(BANNER_CONSTANTS.classes.DISMISSED);
+    _removeDismissEventListener() {
+        this._adapter.removeDismissListener(this._dismissListener);
     }
-    _syncCanDismissState() {
-        if (this.canDismiss) {
-            this._adapter.removeDismissButtonAttribute(BANNER_CONSTANTS.attributes.HIDDEN);
+    _applyPersistent() {
+        this._adapter.setDismissButtonVisibility(!this._persistent);
+        if (this._persistent) {
+            this._removeDismissEventListener();
         }
         else {
-            this._adapter.addDismissButtonAttribute(BANNER_CONSTANTS.attributes.HIDDEN);
+            this._addDismissListener();
         }
     }
-    _addDismissEventListener() {
-        this._adapter.addDismissEventListener('click', this._dismissBanner);
+    get dismissed() {
+        return this._dismissed;
     }
-    _removeDismissEventListener() {
-        this._adapter.removeDismissEventListener('click', this._dismissBanner);
+    set dismissed(value) {
+        value = Boolean(value);
+        if (this.dismissed !== value) {
+            this._dismissed = value;
+            this._adapter.setDismissed(this._dismissed);
+            this._adapter.toggleHostAttribute(BANNER_CONSTANTS.attributes.DISMISSED, this.dismissed);
+        }
     }
-    get dismissed() {
-        return !!this._dismissed;
+    get persistent() {
+        return this._persistent;
     }
-    set dismissed(val) {
-        if (this.dismissed === !!val) {
-            return;
+    set persistent(value) {
+        value = Boolean(value);
+        if (this._persistent !== value) {
+            this._persistent = value;
+            this._applyPersistent();
+            this._adapter.toggleHostAttribute(BANNER_CONSTANTS.attributes.PERSISTENT, this._persistent);
         }
-        this._dismissed = !!val;
-        this._syncDismissedState();
     }
-    get canDismiss() {
-        return !!this._canDismiss;
+    get theme() {
+        return this._theme;
     }
-    set canDismiss(val) {
-        if (this._canDismiss === !!val) {
-            return;
+    set theme(value) {
+        if (this._theme !== value) {
+            this._theme = value !== null && value !== void 0 ? value : BANNER_CONSTANTS.defaults.THEME;
+            this._adapter.setHostAttribute(BANNER_CONSTANTS.attributes.THEME, this._theme);
         }
-        this._canDismiss = !!val;
-        this._syncCanDismissState();
     }
 }

package/esm/banner/banner.d.ts

@@ -4,9 +4,13 @@
  * License: Apache-2.0
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { BannerTheme } from './banner-constants';
 import { BannerFoundation } from './banner-foundation';
 export interface IBannerComponent extends IBaseComponent {
     dismissed: boolean;
+    persistent: boolean;
+    theme: BannerTheme;
+    /** @deprecated Use `persistent` instead. */
     canDismiss: boolean;
 }
 declare global {
@@ -14,24 +18,49 @@ declare global {
         'forge-banner': IBannerComponent;
     }
     interface HTMLElementEventMap {
+        'forge-banner-before-dismiss': CustomEvent<void>;
         'forge-banner-dismissed': CustomEvent<void>;
-        'forge-banner-undismissed': CustomEvent<void>;
     }
 }
 /**
- * The custom element class behind the `<forge-banner>` element.
- *
  * @tag forge-banner
+ *
+ * @summary Banners are used to inform users of important information, such as errors, warnings, or success messages.
+ *
+ * @property {boolean} dismissed - Controls the visibility of the banner.
+ * @property {boolean} persistent - Controls the visibility of the built-in dismiss button.
+ * @property {BannerTheme} theme - The theme of the banner.
+ *
+ * @attribute {boolean} dismissed - Controls the visibility of the banner.
+ * @attribute {boolean} persistent - Controls the visibility of the built-in dismiss button.
+ * @attribute {BannerTheme} theme - The theme of the banner.
+ *
+ * @event {CustomEvent} forge-banner-before-dismiss - Dispatched before the banner is dismissed. Cancelable to prevent dismissal.
+ * @event {CustomEvent} forge-banner-dismissed - Dispatched when the banner is dismissed.
+ *
+ * @cssproperty --forge-banner-background - The background color of the banner.
+ * @cssproperty --forge-banner-color - The text color of the banner.
+ * @cssproperty --forge-banner-icon-color - The color of the icon.
+ * @cssproperty --forge-banner-gap - The gap between the contents.
+ * @cssproperty --forge-banner-padding-inline - The inline padding.
+ * @cssproperty --forge-banner-padding-block - The block padding.
+ * @cssproperty --forge-banner-transition-duration - The transition duration.
+ * @cssproperty --forge-banner-transition-easing - The transition easing function.
+ *
+ * @slot - The content of the banner.
+ * @slot icon - The icon to display.
+ * @slot button - The optional button to display.
  */
 export declare class BannerComponent extends BaseComponent implements IBannerComponent {
     static get observedAttributes(): string[];
     protected _foundation: BannerFoundation;
     constructor();
     connectedCallback(): void;
-    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** Controls whether the component is dismissed (hidden) or not.  */
     dismissed: boolean;
-    /** Controls the visibility of the dismiss button. */
-    canDismiss: boolean;
+    persistent: boolean;
+    theme: BannerTheme;
+    /** @deprecated Use `persistent` instead. */
+    get canDismiss(): boolean;
+    set canDismiss(value: boolean);
 }

package/esm/banner/banner.js

@@ -7,25 +7,46 @@ import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
 import { tylIconCancel } from '@tylertech/tyler-icons/standard';
 import { BaseComponent } from '../core/base/base-component';
-import { IconComponent, IconRegistry } from '../icon';
+import { IconRegistry } from '../icon';
 import { IconButtonComponent } from '../icon-button';
 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\" part=\"dismiss-button\"><forge-icon name=\"cancel\" part=\"dismiss-button-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\">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)))}';
+const template = '<template><div class=\"forge-banner\" part=\"root\"><div class=\"inner\"><div class=\"container\"><slot name=\"icon\"></slot><slot></slot><div class=\"button-container\"><slot name=\"button\"></slot></div></div><div class=\"dismiss-button-container\"><slot name=\"dismiss-button\"><forge-icon-button part=\"dismiss-button\"><forge-icon name=\"cancel\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"bottom\"><slot name=\"dismiss-tooltip\">Dismiss</slot></forge-tooltip></slot></div></div></div></template>';
+const styles = ':host{display:block;container-type:inline-size}:host([hidden]){display:none}.forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-info-container, #c7daf0));--_banner-color:var(--forge-banner-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_banner-icon-color:var(--forge-banner-icon-color, var(--forge-theme-on-info-container, #0b3768));--_banner-gap:var(--forge-banner-gap, var(--forge-spacing-small, 12px));--_banner-padding-inline:var(--forge-banner-padding-inline, var(--forge-spacing-large, 24px));--_banner-padding-block:var(--forge-banner-padding-block, var(--forge-spacing-small, 12px));--_banner-transition-duration:var(--forge-banner-transition-duration, var(--forge-animation-duration-short4, 200ms));--_banner-transition-easing:var(--forge-banner-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-banner{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition-property:opacity,grid-template-rows,min-height;transition-property:opacity,grid-template-rows,min-height;transition-property:opacity,grid-template-rows,min-height,-ms-grid-rows;-webkit-transition-duration:var(--_banner-transition-duration);transition-duration:var(--_banner-transition-duration);-webkit-transition-timing-function:var(--_banner-transition-easing);transition-timing-function:var(--_banner-transition-easing);background:var(--_banner-background);color:var(--_banner-color);opacity:1}.forge-banner .inner{display:grid;grid-template-columns:1fr auto;place-items:center;gap:var(--_banner-gap);overflow:hidden;padding-inline:var(--_banner-padding-inline)}.forge-banner .container{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;gap:var(--_banner-gap);-webkit-box-flex:1;flex:1 1 auto;padding-block:var(--_banner-padding-block)}.forge-banner .dismiss-button-container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;gap:var(--_banner-gap)}.forge-banner ::slotted(forge-button[slot=dismiss-button]){--forge-button-primary-color:var(--_banner-color)}.forge-banner ::slotted(forge-icon-button[slot=dismiss-button]),.forge-banner forge-icon-button[part=dismiss-button]{color:var(--_banner-icon-color);--forge-icon-button-focus-indicator-color:var(--_banner-color)}::slotted(forge-button[slot=button]){--forge-button-primary-color:var(--_banner-color)}::slotted([slot=icon]){color:var(--_banner-icon-color)}:host([dismissed]) .forge-banner{grid-template-rows:0fr;opacity:0}:host([theme=primary]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-primary-container, #d1d5ed));--_banner-icon-color:var(--forge-banner-icon-color, var(--forge-theme-on-primary-container, #222c62))}:host([theme=secondary]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-secondary-container, #fff0c3));--_banner-icon-color:var(--forge-banner-icon-color, var(--forge-theme-on-secondary-container, #8a6804))}:host([theme=tertiary]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-tertiary-container, #d0d7ff));--_banner-icon-color:var(--forge-banner-icon-color, var(--forge-theme-on-tertiary-container, #213189))}:host([theme=success]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-success-container, #cde0ce));--_banner-icon-color:var(--forge-banner-icon-color, var(--forge-theme-on-success-container, #19441b))}:host([theme=error]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-error-container, #ecc2c9));--_banner-icon-color:var(--forge-banner-icon-color, var(--forge-theme-on-error-container, #5f0011))}:host([theme=warning]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-warning-container, #f4d3c2));--_banner-icon-color:var(--forge-banner-icon-color, var(--forge-theme-on-warning-container, #712700))}:host([theme=danger]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-error-container, #ecc2c9));--_banner-icon-color:var(--forge-banner-icon-color, var(--forge-theme-on-error-container, #5f0011))}:host([theme=info-secondary]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-surface-container, #e0e0e0));--_banner-icon-color:var(--forge-banner-icon-color, var(--forge-theme-on-surface-container, #000000))}@container (max-width:600px){.forge-banner.has-button .container{display:grid;grid-template-rows:[content] 1fr [button] auto;grid-template-columns:[content] 1fr;place-items:normal}.forge-banner.has-button.has-icon .container{grid-template-columns:[icon] auto [content] 1fr}.forge-banner.has-button .inner{place-items:normal}.forge-banner.has-button .button-container{grid-row:button;grid-column:content}.forge-banner.has-button .dismiss-button-container{-webkit-box-align:start;align-items:flex-start}}';
 /**
- * The custom element class behind the `<forge-banner>` element.
- *
  * @tag forge-banner
+ *
+ * @summary Banners are used to inform users of important information, such as errors, warnings, or success messages.
+ *
+ * @property {boolean} dismissed - Controls the visibility of the banner.
+ * @property {boolean} persistent - Controls the visibility of the built-in dismiss button.
+ * @property {BannerTheme} theme - The theme of the banner.
+ *
+ * @attribute {boolean} dismissed - Controls the visibility of the banner.
+ * @attribute {boolean} persistent - Controls the visibility of the built-in dismiss button.
+ * @attribute {BannerTheme} theme - The theme of the banner.
+ *
+ * @event {CustomEvent} forge-banner-before-dismiss - Dispatched before the banner is dismissed. Cancelable to prevent dismissal.
+ * @event {CustomEvent} forge-banner-dismissed - Dispatched when the banner is dismissed.
+ *
+ * @cssproperty --forge-banner-background - The background color of the banner.
+ * @cssproperty --forge-banner-color - The text color of the banner.
+ * @cssproperty --forge-banner-icon-color - The color of the icon.
+ * @cssproperty --forge-banner-gap - The gap between the contents.
+ * @cssproperty --forge-banner-padding-inline - The inline padding.
+ * @cssproperty --forge-banner-padding-block - The block padding.
+ * @cssproperty --forge-banner-transition-duration - The transition duration.
+ * @cssproperty --forge-banner-transition-easing - The transition easing function.
+ *
+ * @slot - The content of the banner.
+ * @slot icon - The icon to display.
+ * @slot button - The optional button to display.
  */
 let BannerComponent = class BannerComponent extends BaseComponent {
     static get observedAttributes() {
-        return [
-            BANNER_CONSTANTS.attributes.DISMISSED,
-            BANNER_CONSTANTS.attributes.CAN_DISMISS
-        ];
+        return Object.values(BANNER_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
@@ -34,34 +55,46 @@ let BannerComponent = class BannerComponent extends BaseComponent {
         this._foundation = new BannerFoundation(new BannerAdapter(this));
     }
     connectedCallback() {
-        this._foundation.connect();
-    }
-    disconnectedCallback() {
-        this._foundation.disconnect();
+        this._foundation.initialize();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case BANNER_CONSTANTS.attributes.DISMISSED:
+            case BANNER_CONSTANTS.observedAttributes.DISMISSED:
                 this.dismissed = coerceBoolean(newValue);
                 break;
-            case BANNER_CONSTANTS.attributes.CAN_DISMISS:
-                this.canDismiss = coerceBoolean(newValue);
+            case BANNER_CONSTANTS.observedAttributes.PERSISTENT:
+                this.persistent = coerceBoolean(newValue);
+                break;
+            case BANNER_CONSTANTS.observedAttributes.CAN_DISMISS:
+                this.persistent = coerceBoolean(newValue) === false;
+                break;
+            case BANNER_CONSTANTS.observedAttributes.THEME:
+                this.theme = newValue;
                 break;
         }
     }
+    /** @deprecated Use `persistent` instead. */
+    get canDismiss() {
+        return !this.persistent;
+    }
+    set canDismiss(value) {
+        this.persistent = !value;
+    }
 };
 __decorate([
     FoundationProperty()
 ], BannerComponent.prototype, "dismissed", void 0);
 __decorate([
     FoundationProperty()
-], BannerComponent.prototype, "canDismiss", void 0);
+], BannerComponent.prototype, "persistent", void 0);
+__decorate([
+    FoundationProperty()
+], BannerComponent.prototype, "theme", void 0);
 BannerComponent = __decorate([
     CustomElement({
         name: BANNER_CONSTANTS.elementName,
         dependencies: [
             IconButtonComponent,
-            IconComponent,
             TooltipComponent
         ]
     })

package/esm/core/utils/position-utils.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { FlipOptions, ShiftOptions, AutoPlacementOptions, HideOptions, Middleware, Placement, Strategy, OffsetOptions, MiddlewareData, ArrowOptions } from '@floating-ui/dom';
+import { FlipOptions, ShiftOptions, HideOptions, Middleware, Placement, Strategy, OffsetOptions, MiddlewareData, ArrowOptions } from '@floating-ui/dom';
 export type PositionPlacement = Placement;
 export type PositionStrategy = Strategy;
 export declare const DEFAULT_FALLBACK_PLACEMENTS: PositionPlacement[];
@@ -45,10 +45,6 @@ export interface IPositionElementConfig {
     hide?: boolean;
     /** Options to provide to the hide middleware. */
     hideOptions?: Partial<HideOptions>;
-    /** Should the element automatically attempt to locate the best placement, */
-    auto?: boolean;
-    /** Options to provide to the autoPlacement middleware. */
-    autoOptions?: Partial<AutoPlacementOptions>;
     /** Should any offset values be applied to the element. */
     offset?: boolean;
     /** The options provide to the offset middleware. */
@@ -61,17 +57,13 @@ export interface IPositionElementConfig {
     topLayer?: boolean;
     /** The positioning strategy. */
     strategy?: PositionStrategy;
-    /** Should positioning be applied using a `transform` style. */
-    transform?: boolean;
-    /** The CSS `translate` function to apply to the `transform`. Only applied when `transform` is `true`. */
-    translateFunction?: 'translate3d' | 'translate';
 }
 /**
  * Calculates an elements position relative to another element.
  * @param {IPositionElementConfig} config Configuration to provide when positioning the element.
  * @returns {IPositionElementResult} The result of the positioning logic.
  */
-export declare function positionElementAsync({ element, anchorElement, placement, offset, offsetOptions, strategy, apply, flip, flipOptions, auto, autoOptions, shift, shiftOptions, hide, hideOptions, arrowElement, arrowOptions, topLayer, transform, translateFunction }: IPositionElementConfig): Promise<IPositionElementResult>;
+export declare function positionElementAsync({ element, anchorElement, placement, offset, offsetOptions, strategy, apply, flip, flipOptions, shift, shiftOptions, hide, hideOptions, arrowElement, arrowOptions, topLayer }: IPositionElementConfig): Promise<IPositionElementResult>;
 /**
  * Custom middleware to handle positioning when the element is on the top layer AND within a containing block.
  */

package/esm/core/utils/position-utils.js

@@ -3,8 +3,9 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { computePosition, flip as flipMiddleware, hide as hideMiddleware, shift as shiftMiddleware, offset as offsetMiddleware, arrow as arrowMiddleware, autoPlacement as autoPlacementMiddleware } from '@floating-ui/dom';
+import { computePosition, flip as flipMiddleware, hide as hideMiddleware, shift as shiftMiddleware, offset as offsetMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';
 import { getContainingBlock, isContainingBlock, getWindow } from '@floating-ui/utils/dom';
+import { roundByDPR } from './utils';
 export const DEFAULT_FALLBACK_PLACEMENTS = ['top-start', 'top', 'top-end', 'left-start', 'left', 'left-end', 'right-start', 'right', 'right-end'];
 export class VirtualElement {
     constructor(x, y, height = 0, width = 0) {
@@ -47,10 +48,10 @@ export class VirtualElement {
  * @param {IPositionElementConfig} config Configuration to provide when positioning the element.
  * @returns {IPositionElementResult} The result of the positioning logic.
  */
-export async function positionElementAsync({ element, anchorElement, placement = 'bottom', offset = false, offsetOptions, strategy = 'absolute', apply = true, flip = true, flipOptions = {
+export async function positionElementAsync({ element, anchorElement, placement = 'bottom', offset = false, offsetOptions, strategy = 'fixed', apply = true, flip = true, flipOptions = {
     fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS,
     fallbackStrategy: 'initialPlacement'
-}, auto = false, autoOptions, shift = true, shiftOptions, hide = false, hideOptions, arrowElement, arrowOptions = {}, topLayer = false, transform = true, translateFunction = 'translate3d' }) {
+}, shift = true, shiftOptions, hide = false, hideOptions, arrowElement, arrowOptions = {}, topLayer = false }) {
     var _a, _b, _c;
     const middleware = [];
     //
@@ -62,12 +63,9 @@ export async function positionElementAsync({ element, anchorElement, placement =
     if (shift) {
         middleware.push(shiftMiddleware(shiftOptions));
     }
-    if (flip && !auto) { // flip and auto placement middleware cannot be used together
+    if (flip) {
         middleware.push(flipMiddleware(flipOptions));
     }
-    if (auto) {
-        middleware.push(autoPlacementMiddleware(autoOptions));
-    }
     if (hide) {
         middleware.push(hideMiddleware(hideOptions));
     }
@@ -81,17 +79,10 @@ export async function positionElementAsync({ element, anchorElement, placement =
     // Should we apply the position information to the element?
     if (apply) {
         const styles = {
-            left: transform ? '0' : `${x}px`,
-            top: transform ? '0' : `${y}px`
+            left: '0',
+            top: '0',
+            translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`
         };
-        if (transform) {
-            if (translateFunction === 'translate') {
-                styles.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
-            }
-            else {
-                styles.transform = `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`;
-            }
-        }
         Object.assign(element.style, styles);
         // We use `display` here to ensure that any child overlays are also hidden
         if ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) {

package/esm/core/utils/utils.d.ts

@@ -112,3 +112,9 @@ export declare function replaceElement<T extends HTMLElement>(oldElement: HTMLEl
  * @returns An array of strings.
  */
 export declare function coerceStringToArray<T extends string>(value: string, separator?: string): T[];
+/**
+ * Rounds a value to the nearest pixel based on the device pixel ratio.
+ * @param {number} value The value to round.
+ * @returns {number} The rounded value.
+ */
+export declare function roundByDPR(value: number): number;

package/esm/core/utils/utils.js

@@ -214,3 +214,12 @@ export function replaceElement(oldElement, newElement, preserveChildren = true)
 export function coerceStringToArray(value, separator = ',') {
     return value.split(separator).map(p => p.trim());
 }
+/**
+ * Rounds a value to the nearest pixel based on the device pixel ratio.
+ * @param {number} value The value to round.
+ * @returns {number} The rounded value.
+ */
+export function roundByDPR(value) {
+    const dpr = window.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
+}

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

@@ -22,7 +22,6 @@ export interface IPositionElementConfig {
     anchorElement: HTMLElement | VirtualElement;
     strategy: OverlayPositionStrategy;
     placement: PositionPlacement;
-    auto: boolean;
     hide: OverlayHideState;
     offset: IOverlayOffset;
     shift: boolean;
@@ -41,7 +40,7 @@ export declare class OverlayAdapter extends BaseAdapter<IOverlayComponent> imple
     hide(): void;
     tryHideDescendantOverlays(): void;
     locateAnchorElement(id: string | null): HTMLElement | null;
-    positionElement({ anchorElement, strategy, placement, auto, hide, offset, shift, flip, boundary, boundaryElement, fallbackPlacements }: IPositionElementConfig): void;
+    positionElement({ anchorElement, strategy, placement, hide, offset, shift, flip, boundary, boundaryElement, fallbackPlacements }: IPositionElementConfig): void;
     tryCleanupAutoUpdate(): void;
     isMostRecentOpenOverlay(): boolean;
     addLightDismissListener(listener: (reason: OverlayLightDismissReason) => void): void;

package/esm/overlay/overlay-adapter.js

@@ -6,10 +6,10 @@
 import { autoUpdate } from '@floating-ui/dom';
 import { getShadowElement } from '@tylertech/forge-core';
 import { BaseAdapter } from '../core/base/base-adapter';
-import { positionElementAsync, VirtualElement } from '../core/utils/position-utils';
+import { DEFAULT_FALLBACK_PLACEMENTS, positionElementAsync, VirtualElement } from '../core/utils/position-utils';
 import { locateElementById } from '../core/utils/utils';
 import { OverlayComponent } from './overlay';
-import { overlayStack, OVERLAY_CONSTANTS, SUPPORTS_POPOVER } from './overlay-constants';
+import { overlayStack, OVERLAY_CONSTANTS, OVERLAY_FALLBACK_PLACEMENT_MAP, SUPPORTS_POPOVER } from './overlay-constants';
 export class OverlayAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
@@ -52,12 +52,13 @@ export class OverlayAdapter extends BaseAdapter {
     locateAnchorElement(id) {
         return locateElementById(this._component, id);
     }
-    positionElement({ anchorElement, strategy, placement, auto, hide, offset, shift, flip, boundary, boundaryElement, fallbackPlacements }) {
+    positionElement({ anchorElement, strategy, placement, hide, offset, shift, flip, boundary, boundaryElement, fallbackPlacements }) {
         var _a;
         this.tryCleanupAutoUpdate();
         const originalOffset = Object.assign({}, offset);
         const boundaryEl = (_a = (boundaryElement ? boundaryElement : boundary ? this._component.closest(`#${boundary}`) : null)) !== null && _a !== void 0 ? _a : 'clippingAncestors';
         this._autoUpdateCleanup = autoUpdate(anchorElement, this._rootElement, async () => {
+            var _a;
             const offsetOptions = Object.assign({}, originalOffset);
             // If we have an arrow element and an offset, we need to adjust the current offset to account for the arrow length
             if (this._component.arrowElement) {
@@ -77,23 +78,18 @@ export class OverlayAdapter extends BaseAdapter {
                 shiftOptions: {
                     boundary: boundaryEl
                 },
-                auto,
-                autoOptions: {
-                    boundary: boundaryEl
-                },
-                flip: !auto && flip !== 'never',
+                flip: flip !== 'never',
                 flipOptions: {
-                    boundary: boundaryEl,
-                    fallbackAxisSideDirection: flip === 'auto' ? 'start' : undefined,
-                    fallbackPlacements,
+                    boundary: SUPPORTS_POPOVER ? document.body : 'clippingAncestors',
+                    fallbackStrategy: 'initialPlacement',
+                    fallbackPlacements: (_a = fallbackPlacements !== null && fallbackPlacements !== void 0 ? fallbackPlacements : OVERLAY_FALLBACK_PLACEMENT_MAP[placement]) !== null && _a !== void 0 ? _a : DEFAULT_FALLBACK_PLACEMENTS,
                     crossAxis: flip === 'cross' || flip === 'auto',
                     mainAxis: flip === 'main' || flip === 'auto'
                 },
                 arrowElement: this._component.arrowElement,
                 topLayer: !this._component.inline && SUPPORTS_POPOVER,
                 offset: Boolean(offsetOptions),
-                offsetOptions,
-                transform: false
+                offsetOptions
             });
             const side = result.placement.split('-')[0];
             const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[side];