@tylertech/forge 3.0.0-next.16 → 3.0.0-next.18

package/esm/badge/badge.js

@@ -4,50 +4,73 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { attachShadowTemplate, CustomElement } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
-import { BadgeAdapter } from './badge-adapter';
 import { BADGE_CONSTANTS } from './badge-constants';
-import { BadgeFoundation } from './badge-foundation';
-const template = '<template><div class=\"forge-badge forge-badge--open\" part=\"root\"><slot name=\"leading\"></slot><slot></slot><slot name=\"trailing\"></slot></div></template>';
-const styles = '.forge-badge{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);height:1.25rem;height:var(--forge-badge-height,1.25rem);line-height:1.25rem;line-height:var(--forge-badge-line-height, 1.25rem);min-width:0;min-width:var(--forge-badge-min-width,0);max-width:auto;max-width:var(--forge-badge-max-width,auto);border:none;border:var(--forge-badge-border,none);display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;gap:4px;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;-webkit-transform:scale(0);transform:scale(0);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;border-radius:16px;padding:0 8px;font-weight:700}.forge-badge--elevated{-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.forge-badge--open{-webkit-transform:scale(1);transform:scale(1)}.forge-badge--dot{height:.5rem;width:.5rem;min-width:auto;padding:0}:host{--forge-icon-font-size:14px;display:-webkit-box;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]){display:none}:host([positioned]){position:absolute;top:0;left:100%;-webkit-transform:translateX(-1.25rem);transform:translateX(-1.25rem)}:host([dot]){top:.5rem}:host([dot]) .forge-badge>slot{display:none}:host([static]){position:static}:host(:not([theme])) .forge-badge,:host([theme=\"\"]) .forge-badge{background:#ffc107;background:var(--forge-badge-theme-default-muted-background,#ffc107);color:rgba(0,0,0,.87);color:var(--forge-badge-theme-default-muted-color,rgba(0,0,0,.87))}:host(:not([theme])[strong]) .forge-badge,:host([theme=\"\"][strong]) .forge-badge{background:#3d5afe;background:var(--forge-badge-theme-default-strong-background,#3d5afe);color:#fff;color:var(--forge-badge-theme-default-strong-color,#fff)}:host([theme=default]) .forge-badge{background:#ffc107;background:var(--forge-badge-theme-default-muted-background,#ffc107);color:rgba(0,0,0,.87);color:var(--forge-badge-theme-default-muted-color,rgba(0,0,0,.87))}:host([theme=default][strong]) .forge-badge{background:#3d5afe;background:var(--forge-badge-theme-default-strong-background,#3d5afe);color:#fff;color:var(--forge-badge-theme-default-strong-color,#fff)}:host([theme=danger]) .forge-badge{background:#ffcdd2;background:var(--forge-badge-theme-danger-muted-background,#ffcdd2);color:#a22d0e;color:var(--forge-badge-theme-danger-muted-color,#a22d0e)}:host([theme=danger][strong]) .forge-badge{background:#b00020;background:var(--forge-badge-theme-danger-strong-background,#b00020);color:#fff;color:var(--forge-badge-theme-danger-strong-color,#fff)}:host([theme=warning]) .forge-badge{background:#ffdba6;background:var(--forge-badge-theme-warning-muted-background,#ffdba6);color:#a03a03;color:var(--forge-badge-theme-warning-muted-color,#a03a03)}:host([theme=warning][strong]) .forge-badge{background:#d14900;background:var(--forge-badge-theme-warning-strong-background,#d14900);color:#fff;color:var(--forge-badge-theme-warning-strong-color,#fff)}:host([theme=success]) .forge-badge{background:#a5d6a7;background:var(--forge-badge-theme-success-muted-background,#a5d6a7);color:#1b5e20;color:var(--forge-badge-theme-success-muted-color,#1b5e20)}:host([theme=success][strong]) .forge-badge{background:#2e7d32;background:var(--forge-badge-theme-success-strong-background,#2e7d32);color:#fff;color:var(--forge-badge-theme-success-strong-color,#fff)}:host([theme=info-primary]) .forge-badge{background:#bbdefb;background:var(--forge-badge-theme-info-primary-muted-background,#bbdefb);color:#1a237e;color:var(--forge-badge-theme-info-primary-muted-color,#1a237e)}:host([theme=info-primary][strong]) .forge-badge{background:#1a237e;background:var(--forge-badge-theme-info-primary-strong-background,#1a237e);color:#fff;color:var(--forge-badge-theme-info-primary-strong-color,#fff)}:host([theme=info-secondary]) .forge-badge{background:#e0e0e0;background:var(--forge-badge-theme-info-secondary-muted-background,#e0e0e0);color:#000;color:var(--forge-badge-theme-info-secondary-muted-color,#000)}:host([theme=info-secondary][strong]) .forge-badge{background:#000;background:var(--forge-badge-theme-info-secondary-strong-background,#000);color:#fff;color:var(--forge-badge-theme-info-secondary-strong-color,#fff)}';
+const template = '<template><div class=\"forge-badge\" part=\"root\"><slot name=\"start\"></slot><slot></slot><slot name=\"end\"></slot></div></template>';
+const styles = ':host{display:-webkit-box;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]){display:none}.forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary, #ffc107));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary, #000000));--_badge-shape:var(--forge-badge-shape, var(--forge-shape-full, 9999px));--_badge-height:var(--forge-badge-height, 20px);--_badge-min-width:var(--forge-badge-min-width, 0);--_badge-max-width:var(--forge-badge-max-width, auto);--_badge-padding-inline:var(--forge-badge-padding-inline, var(--forge-spacing-xsmall, 8px));--_badge-padding-block:var(--forge-badge-padding-block, 0);--_badge-border-width:var(--forge-badge-border-width, var(--forge-border-thin, 1px));--_badge-border-style:var(--forge-badge-border-style, none);--_badge-border-color:var(--forge-badge-border-color, var(--_badge-color));--_badge-gap:var(--forge-badge-gap, var(--forge-spacing-xsmall, 8px));--_badge-font-weight:var(--forge-badge-font-weight, bold);--_badge-dot-size:var(--forge-badge-dot-size, 8px);--_badge-dot-height:var(--forge-badge-dot-height, var(--_badge-dot-size));--_badge-dot-width:var(--forge-badge-dot-width, var(--_badge-dot-size));--_badge-dot-padding:var(--forge-badge-dot-padding, 0);--_badge-transition-duration:var(--forge-badge-transition-duration, var(--forge-animation-duration-short4, 200ms));--_badge-transition-easing:var(--forge-badge-transition-easing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)))}.forge-badge{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label-font-weight,400);line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-text-decoration,inherit);background:var(--_badge-background);color:var(--_badge-color);height:var(--_badge-height);min-width:var(--_badge-min-width);max-width:var(--_badge-max-width);border-width:var(--_badge-border-width);border-style:var(--_badge-border-style);border-color:var(--_badge-border-color);display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;gap:var(--_badge-gap);border-radius:var(--_badge-shape);padding-inline:var(--_badge-padding-inline);padding-block:var(--_badge-padding-block);overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none;-webkit-transition:-webkit-transform var(--_badge-transition-duration) var(--_badge-transition-easing);transition:-webkit-transform var(--_badge-transition-duration) var(--_badge-transition-easing);transition:transform var(--_badge-transition-duration) var(--_badge-transition-easing);transition:transform var(--_badge-transition-duration) var(--_badge-transition-easing),-webkit-transform var(--_badge-transition-duration) var(--_badge-transition-easing);font-weight:var(--_badge-font-weight);text-overflow:ellipsis;white-space:nowrap}::slotted(:is([slot=start],[slot=end])){font-size:inherit}:host([hide]) .forge-badge{-webkit-transform:scale(0);transform:scale(0)}:host([dot]) .forge-badge{--_badge-height:var(--_badge-dot-height);--_badge-min-width:var(--forge-badge-min-width, auto);padding:var(--_badge-dot-padding);width:var(--_badge-dot-width)}:host([dot]) .forge-badge>slot{display:none}:host([theme=primary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-primary-container, #d1d5ed));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-primary-container, #222c62))}:host([strong][theme=primary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-primary, #3f51b5));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-primary, #ffffff))}:host([theme=secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary-container, #fff0c3));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary-container, #8a6804))}:host([strong][theme=secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary, #ffc107));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary, #000000))}:host([theme=tertiary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-tertiary-container, #d0d7ff));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-tertiary-container, #213189))}:host([strong][theme=tertiary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-tertiary, #3d5afe));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=success]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-success-container, #cde0ce));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-success-container, #19441b))}:host([strong][theme=success]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-success, #2e7d32));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-success, #ffffff))}:host([theme=warning]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-warning-container, #f4d3c2));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-warning-container, #712700))}:host([strong][theme=warning]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-warning, #d14900));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-warning, #ffffff))}:host(:not([strong]):is([theme=error],[theme=danger])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-error-container, #ecc2c9));--_badge-color:var(--forge-badge-color, var(--forge-theme-error, #b00020))}:host([strong]:is([theme=error],[theme=danger])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-error, #b00020));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-error, #ffffff))}:host(:not([strong]):is([theme=info],[theme=info-primary])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-info-container, #c7daf0));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-info-container, #0b3768))}:host([strong]:is([theme=info],[theme=info-primary])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-info, #1565c0));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-info, #ffffff))}:host(:not([strong])[theme=info-secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-surface-container-low, #ebebeb));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-surface-container-low, #000000))}:host([strong][theme=info-secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-surface-inverse, #333333));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-surface-inverse, #ffffff))}';
 /**
- * The web component class behind the `<forge-badge>` custom element.
- *
  * @tag forge-badge
+ *
+ * @summary Badges are non-interactive components used to inform status, counts, or as a descriptive label.
+ *
+ * @property {boolean} dot - Controls whether the badge will be a small dot without any content visible.
+ * @property {BadgeTheme} theme - The theme of the badge.
+ * @property {boolean} strong - Controls whether the badge will have a stronger visual appearance.
+ * @property {boolean} hide - Controls whether the badge is visible.
+ *
+ * @attribute {boolean} dot - When present, the badge will be a small dot without any content visible.
+ * @attribute {BadgeTheme} theme - The theme of the badge.
+ * @attribute {boolean} strong - Controls whether the badge will have a stronger visual appearance.
+ * @attribute {boolean} hide - Controls whether the badge is visible.
+ *
+ * @cssproperty --forge-badge-background - The background color.
+ * @cssproperty --forge-badge-color - The text color.
+ * @cssproperty --forge-badge-shape - The shape radius.
+ * @cssproperty --forge-badge-padding-inline - The inline padding.
+ * @cssproperty --forge-badge-padding-block - The block padding.
+ * @cssproperty --forge-badge-border-width - The border width.
+ * @cssproperty --forge-badge-border-color - The border color.
+ * @cssproperty --forge-badge-border-style - The border style.
+ * @cssproperty --forge-badge-gap - The spacing between the content within the badge.
+ *
+ * @slot - Default content placed inside the badge.
+ * @slot start - Content placed before the default content.
+ * @slot end - Content placed after the default content.
  */
 let BadgeComponent = class BadgeComponent extends BaseComponent {
-    static get observedAttributes() {
-        return [
-            BADGE_CONSTANTS.attributes.DOT,
-            BADGE_CONSTANTS.attributes.OPEN
-        ];
-    }
     constructor() {
         super();
         attachShadowTemplate(this, template, styles);
-        this._foundation = new BadgeFoundation(new BadgeAdapter(this));
-    }
-    connectedCallback() {
-        this._foundation.initialize();
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        switch (name) {
-            case BADGE_CONSTANTS.attributes.DOT:
-                this.dot = coerceBoolean(newValue);
-                break;
-            case BADGE_CONSTANTS.attributes.OPEN:
-                this.open = coerceBoolean(newValue);
-                break;
+    }
+    get dot() {
+        return this.hasAttribute(BADGE_CONSTANTS.attributes.DOT);
+    }
+    set dot(value) {
+        this.toggleAttribute(BADGE_CONSTANTS.attributes.DOT, value);
+    }
+    get theme() {
+        var _a;
+        return (_a = this.getAttribute(BADGE_CONSTANTS.attributes.THEME)) !== null && _a !== void 0 ? _a : BADGE_CONSTANTS.defaults.THEME;
+    }
+    set theme(value) {
+        this.setAttribute(BADGE_CONSTANTS.attributes.THEME, value);
+    }
+    get strong() {
+        return this.hasAttribute(BADGE_CONSTANTS.attributes.STRONG);
+    }
+    set strong(value) {
+        this.toggleAttribute(BADGE_CONSTANTS.attributes.STRONG, value);
+    }
+    get hide() {
+        return this.hasAttribute(BADGE_CONSTANTS.attributes.HIDE);
+    }
+    set hide(value) {
+        if (this.hasAttribute(BADGE_CONSTANTS.attributes.HIDE) !== value) {
+            this.toggleAttribute(BADGE_CONSTANTS.attributes.HIDE, value);
         }
     }
 };
-__decorate([
-    FoundationProperty()
-], BadgeComponent.prototype, "dot", void 0);
-__decorate([
-    FoundationProperty()
-], BadgeComponent.prototype, "open", void 0);
 BadgeComponent = __decorate([
     CustomElement({
         name: BADGE_CONSTANTS.elementName

package/esm/badge/index.d.ts

@@ -3,9 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export * from './badge-adapter';
 export * from './badge-constants';
-export * from './badge-foundation';
 export * from './badge';
-export * from './badge-component-delegate';
 export declare function defineBadgeComponent(): void;

package/esm/badge/index.js

@@ -5,11 +5,8 @@
  */
 import { defineCustomElement } from '@tylertech/forge-core';
 import { BadgeComponent } from './badge';
-export * from './badge-adapter';
 export * from './badge-constants';
-export * from './badge-foundation';
 export * from './badge';
-export * from './badge-component-delegate';
 export function defineBadgeComponent() {
     defineCustomElement(BadgeComponent);
 }

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

@@ -4,27 +4,23 @@
  * License: Apache-2.0
  */
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
-import { IIconButtonComponent } from '../icon-button';
-import { IBannerComponent } from './banner';
+import type { IBannerComponent } from './banner';
 export interface IBannerAdapter extends IBaseAdapter {
-    addRootClass(className: string): void;
-    removeRootClass(className: string): void;
-    addDismissButtonAttribute(name: string, value?: string): void;
-    removeDismissButtonAttribute(name: string): void;
-    addDismissEventListener(event: string, callback: (event: Event) => void): void;
-    removeDismissEventListener(event: string, callback: (event: Event) => void): void;
+    initialize(): void;
+    setDismissButtonVisibility(visible: boolean): void;
+    addDismissListener(callback: EventListener): void;
+    removeDismissListener(callback: EventListener): void;
+    setDismissed(value: boolean): void;
 }
 export declare class BannerAdapter extends BaseAdapter<IBannerComponent> implements IBannerAdapter {
     private _rootElement;
-    private _forgeIconButtonDismiss;
-    private _buttonDismiss;
+    private _dismissButtonElement;
+    private _iconSlotElement;
     constructor(component: IBannerComponent);
-    addRootClass(name: string): void;
-    removeRootClass(name: string): void;
-    addDismissButtonAttribute(name: string, value?: string): void;
-    removeDismissButtonAttribute(name: string): void;
-    addDismissEventListener(event: string, callback: (event: Event) => void): void;
-    removeDismissEventListener(event: string, callback: (event: Event) => void): void;
-    get forgeIconButtonDismiss(): IIconButtonComponent;
-    get buttonDismiss(): HTMLButtonElement;
+    initialize(): void;
+    setDismissButtonVisibility(visible: boolean): void;
+    addDismissListener(callback: EventListener): void;
+    removeDismissListener(callback: EventListener): void;
+    setDismissed(value: boolean): void;
+    private _onIconSlotChange;
 }

package/esm/banner/banner-adapter.js

@@ -9,36 +9,28 @@ import { BANNER_CONSTANTS } from './banner-constants';
 export class BannerAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
-        this._rootElement = getShadowElement(component, BANNER_CONSTANTS.selectors.BANNER);
+        this._rootElement = this._component;
+        this._rootElement = getShadowElement(component, '.forge-banner');
+        this._dismissButtonElement = getShadowElement(component, BANNER_CONSTANTS.selectors.DISMISS_BUTTON);
+        this._iconSlotElement = getShadowElement(component, BANNER_CONSTANTS.selectors.ICON_SLOT);
     }
-    addRootClass(name) {
-        this._rootElement.classList.add(name);
+    initialize() {
+        this._iconSlotElement.addEventListener('slotchange', this._onIconSlotChange.bind(this));
+        this._onIconSlotChange();
     }
-    removeRootClass(name) {
-        this._rootElement.classList.remove(name);
+    setDismissButtonVisibility(visible) {
+        this._dismissButtonElement.hidden = !visible;
     }
-    addDismissButtonAttribute(name, value = '') {
-        this.forgeIconButtonDismiss.setAttribute(name, value);
+    addDismissListener(callback) {
+        this._dismissButtonElement.addEventListener('click', callback);
     }
-    removeDismissButtonAttribute(name) {
-        this.forgeIconButtonDismiss.removeAttribute(name);
+    removeDismissListener(callback) {
+        this._dismissButtonElement.removeEventListener('click', callback);
     }
-    addDismissEventListener(event, callback) {
-        this.buttonDismiss.addEventListener(event, callback);
+    setDismissed(value) {
+        this._rootElement.inert = value;
     }
-    removeDismissEventListener(event, callback) {
-        this.buttonDismiss.removeEventListener(event, callback);
-    }
-    get forgeIconButtonDismiss() {
-        if (!this._forgeIconButtonDismiss) {
-            this._forgeIconButtonDismiss = getShadowElement(this._component, BANNER_CONSTANTS.selectors.FORGE_DISMISS_BUTTON);
-        }
-        return this._forgeIconButtonDismiss;
-    }
-    get buttonDismiss() {
-        if (!this._buttonDismiss) {
-            this._buttonDismiss = getShadowElement(this._component, BANNER_CONSTANTS.selectors.DISMISS_BUTTON);
-        }
-        return this._buttonDismiss;
+    _onIconSlotChange() {
+        this._rootElement.classList.toggle(BANNER_CONSTANTS.classes.HAS_ICON, this._iconSlotElement.assignedNodes().length > 0);
     }
 }

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

@@ -3,32 +3,33 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Theme } from '../constants';
 export declare const BANNER_CONSTANTS: {
     elementName: "forge-banner";
-    classes: {
-        BANNER: string;
+    observedAttributes: {
         DISMISSED: string;
-    };
-    selectors: {
-        BANNER: string;
-        FORGE_DISMISS_BUTTON: string;
-        DISMISS_BUTTON: string;
-        ICON: string;
-        FORGE_BUTTON: string;
+        PERSISTENT: string;
+        CAN_DISMISS: string;
+        THEME: string;
     };
     attributes: {
-        SLOT: string;
         DISMISSED: string;
+        PERSISTENT: string;
         CAN_DISMISS: string;
-        HIDDEN: string;
+        THEME: string;
+    };
+    classes: {
+        HAS_ICON: string;
+    };
+    selectors: {
+        DISMISS_BUTTON: string;
+        ICON_SLOT: string;
     };
-    slots: {
-        ICON: string;
-        TEXT: string;
-        BUTTON: string;
+    defaults: {
+        THEME: BannerTheme;
     };
     events: {
         DISMISSED: string;
-        UNDISMISSED: string;
     };
 };
+export type BannerTheme = Theme | 'danger' | 'info-secondary';

package/esm/banner/banner-constants.js

@@ -5,37 +5,32 @@
  */
 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'
 };
 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]'
 };
-const slots = {
-    ICON: 'icon',
-    TEXT: 'text',
-    BUTTON: 'button'
+const defaults = {
+    THEME: 'info'
 };
 const events = {
-    DISMISSED: `${elementName}-dismissed`,
-    UNDISMISSED: `${elementName}-undismissed`
+    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,71 @@ 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;
-    }
-    _syncDismissedState() {
-        if (this.dismissed) {
-            this._setDismissedClass();
-            this._adapter.emitHostEvent(BANNER_CONSTANTS.events.DISMISSED);
+    initialize() {
+        this._adapter.initialize();
+        if (!this._persistent) {
+            this._addDismissListener();
         }
-        else {
-            this._setUndissmissedClass();
-            this._adapter.emitHostEvent(BANNER_CONSTANTS.events.UNDISMISSED);
+    }
+    async _onDismiss() {
+        const originalDismissed = this._dismissed;
+        this._dismissed = !this._dismissed;
+        const evt = new CustomEvent(BANNER_CONSTANTS.events.DISMISSED, { bubbles: true, composed: true, cancelable: true });
+        this._adapter.dispatchHostEvent(evt);
+        this._dismissed = originalDismissed;
+        if (evt.defaultPrevented) {
+            return;
         }
+        this.dismissed = !this._dismissed;
     }
-    _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 {
@@ -15,23 +19,45 @@ declare global {
     }
     interface HTMLElementEventMap {
         '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-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-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);
 }