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

package/esm/badge/badge-constants.js

@@ -7,20 +7,23 @@ import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}badge`;
 const attributes = {
     DOT: 'dot',
-    OPEN: 'open',
+    HIDE: 'hide',
     THEME: 'theme',
     STRONG: 'strong'
 };
 const classes = {
-    DOT: 'forge-badge--dot',
-    OPEN: 'forge-badge--open'
+    OPEN: 'open'
 };
 const selectors = {
     ROOT: '.forge-badge'
 };
+const defaults = {
+    THEME: 'default'
+};
 export const BADGE_CONSTANTS = {
     elementName,
     attributes,
+    selectors,
     classes,
-    selectors
+    defaults
 };

package/esm/badge/badge.d.ts

@@ -4,9 +4,12 @@
  * License: Apache-2.0
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { BadgeTheme } from './badge-constants';
 export interface IBadgeComponent extends IBaseComponent {
     dot: boolean;
-    open: boolean;
+    theme: BadgeTheme;
+    strong: boolean;
+    hide: boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -14,18 +17,42 @@ declare global {
     }
 }
 /**
- * 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.
  */
 export declare class BadgeComponent extends BaseComponent implements IBadgeComponent {
-    static get observedAttributes(): string[];
-    private _foundation;
     constructor();
-    connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** Controls whether the component renders a simple dot/circle, or allows for content. */
-    dot: boolean;
-    /** Controls the visibility state. */
-    open: boolean;
+    get dot(): boolean;
+    set dot(value: boolean);
+    get theme(): BadgeTheme;
+    set theme(value: BadgeTheme);
+    get strong(): boolean;
+    set strong(value: boolean);
+    get hide(): boolean;
+    set hide(value: boolean);
 }

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.js

@@ -13,7 +13,7 @@ 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\" aria-label=\"Dismiss this banner\" part=\"dismiss-button\"><forge-icon name=\"cancel\" part=\"dismiss-button-icon\"></forge-icon></forge-icon-button><forge-tooltip>Dismiss</forge-tooltip></div></div></template>';
+const 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)))}';
 /**
  * The custom element class behind the `<forge-banner>` element.

package/esm/button/base/base-button-adapter.d.ts

@@ -23,7 +23,6 @@ export interface IBaseButtonAdapter extends IBaseAdapter {
     managePopover(): boolean;
     toggleDefaultPopoverIcon(value: boolean): void;
     animateStateLayer(): void;
-    proxyLabel(value: string | null): void;
 }
 export declare abstract class BaseButtonAdapter extends BaseAdapter<IBaseButton> implements IBaseButtonAdapter {
     protected _rootElement: HTMLElement;
@@ -31,7 +30,6 @@ export declare abstract class BaseButtonAdapter extends BaseAdapter<IBaseButton>
     protected _focusIndicatorElement: IFocusIndicatorComponent;
     protected _stateLayerElement: IStateLayerComponent;
     protected _endSlotElement: HTMLSlotElement;
-    private _labelAwareText?;
     constructor(component: IBaseButton);
     initialize(): void;
     initializeAnchor(): void;
@@ -53,7 +51,6 @@ export declare abstract class BaseButtonAdapter extends BaseAdapter<IBaseButton>
     managePopover(): boolean;
     toggleDefaultPopoverIcon(value: boolean): void;
     animateStateLayer(): void;
-    proxyLabel(value: string | null): void;
     private _locatePopoverTargetElement;
     private _applyHostSemantics;
     /**

package/esm/button/base/base-button-adapter.js

@@ -3,14 +3,14 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, toggleAttribute } from '@tylertech/forge-core';
+import { getShadowElement } from '@tylertech/forge-core';
 import { tylIconArrowDropDown } from '@tylertech/tyler-icons/standard';
 import { BaseAdapter } from '../../core/base/base-adapter';
 import { FOCUS_INDICATOR_CONSTANTS } from '../../focus-indicator';
 import { STATE_LAYER_CONSTANTS } from '../../state-layer';
 import { BASE_BUTTON_CONSTANTS } from './base-button-constants';
 import { BUTTON_FORM_ATTRIBUTES, cloneAttributes } from '../../core/utils/reflect-utils';
-import { internals, isFocusable } from '../../constants';
+import { internals, isFocusable, setDefaultAria } from '../../constants';
 import { supportsPopover } from '../../core/utils/feature-detection';
 export class BaseButtonAdapter extends BaseAdapter {
     constructor(component) {
@@ -63,7 +63,7 @@ export class BaseButtonAdapter extends BaseAdapter {
             this._rootElement.append(this._focusIndicatorElement, this._stateLayerElement);
         }
         this._component[isFocusable] = !value;
-        toggleAttribute(this._component, value, 'aria-disabled', 'true');
+        this._component[setDefaultAria]({ ariaDisabled: value ? 'true' : null });
     }
     clickAnchor() {
         var _a;
@@ -192,12 +192,6 @@ export class BaseButtonAdapter extends BaseAdapter {
         }
         (_a = this._stateLayerElement) === null || _a === void 0 ? void 0 : _a.playAnimation();
     }
-    proxyLabel(value) {
-        var _a;
-        this._labelAwareText = value !== null && value !== void 0 ? value : undefined;
-        const hasAriaLabel = this._component.hasAttribute('aria-label') || !!this._labelAwareText;
-        toggleAttribute(this._component, hasAriaLabel, 'aria-label', (_a = this._component.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : this._labelAwareText);
-    }
     _locatePopoverTargetElement() {
         var _a;
         let popoverElement = (_a = this._component.popoverTargetElement) !== null && _a !== void 0 ? _a : null;
@@ -213,11 +207,8 @@ export class BaseButtonAdapter extends BaseAdapter {
     }
     _applyHostSemantics() {
         const role = this._component.getAttribute('role');
-        // Allow user provided roles to override our default role
-        if (!role || ['button', 'link'].includes(role)) {
-            // Set default role based on the existence of an anchor element
-            this._component.role = this._anchorElement ? 'link' : 'button';
-        }
+        const setAttribute = !role || ['button', 'link'].includes(role);
+        this._component[setDefaultAria]({ role: this._anchorElement ? 'link' : 'button' }, { setAttribute });
         this._component[isFocusable] = !!this._anchorElement || !this._component.disabled;
     }
     /**

package/esm/button/base/base-button-constants.d.ts

@@ -4,37 +4,37 @@
  * License: Apache-2.0
  */
 export declare const BASE_BUTTON_CONSTANTS: {
-    observedAttributes: {
-        TYPE: string;
-        DISABLED: string;
-        POPOVER_ICON: string;
-        ANCHOR: string;
-        HREF: string;
-        TARGET: string;
-        DOWNLOAD: string;
-        REL: string;
-        DENSE: string;
-        TABINDEX: string;
+    readonly observedAttributes: {
+        readonly TYPE: "type";
+        readonly DISABLED: "disabled";
+        readonly POPOVER_ICON: "popover-icon";
+        readonly ANCHOR: "anchor";
+        readonly HREF: "href";
+        readonly TARGET: "target";
+        readonly DOWNLOAD: "download";
+        readonly REL: "rel";
+        readonly DENSE: "dense";
+        readonly TABINDEX: "tabindex";
     };
-    attributes: {
-        TYPE: string;
-        DISABLED: string;
-        POPOVER_ICON: string;
-        ANCHOR: string;
-        HREF: string;
-        TARGET: string;
-        DOWNLOAD: string;
-        REL: string;
-        DENSE: string;
-        TABINDEX: string;
+    readonly attributes: {
+        readonly TYPE: "type";
+        readonly DISABLED: "disabled";
+        readonly POPOVER_ICON: "popover-icon";
+        readonly ANCHOR: "anchor";
+        readonly HREF: "href";
+        readonly TARGET: "target";
+        readonly DOWNLOAD: "download";
+        readonly REL: "rel";
+        readonly DENSE: "dense";
+        readonly TABINDEX: "tabindex";
     };
-    selectors: {
-        ROOT: string;
-        END_SLOT: string;
+    readonly selectors: {
+        readonly ROOT: "[part=root]";
+        readonly END_SLOT: "slot[name=end]";
     };
-    classes: {
-        ROOT: string;
-        POPOVER_ICON: string;
+    readonly classes: {
+        readonly ROOT: "forge-button";
+        readonly POPOVER_ICON: "forge-button__popover-icon";
     };
 };
 export type ButtonType = 'button' | 'submit' | 'reset';

package/esm/button/base/base-button-foundation.d.ts

@@ -19,7 +19,6 @@ export interface IBaseButtonFoundation extends ICustomElementFoundation {
     dense: boolean;
     click(options: ButtonClickOptions): void;
     focus(options?: ExperimentalFocusOptions): void;
-    proxyLabel(label: string | null): void;
 }
 export declare abstract class BaseButtonFoundation<T extends IBaseButtonAdapter> implements IBaseButtonFoundation {
     protected _adapter: T;
@@ -42,7 +41,6 @@ export declare abstract class BaseButtonFoundation<T extends IBaseButtonAdapter>
      */
     click({ animateStateLayer }?: ButtonClickOptions): void;
     focus(options?: ExperimentalFocusOptions): void;
-    proxyLabel(label: string | null): void;
     protected _onClick(evt: MouseEvent): Promise<void>;
     /**
      * Handle keydown events on the host element to manually trigger click events.

package/esm/button/base/base-button-foundation.js

@@ -53,13 +53,10 @@ export class BaseButtonFoundation {
     }
     focus(options) {
         this._adapter.focusHost(options);
-        if (options === null || options === void 0 ? void 0 : options.focusVisible) {
+        if ((options === null || options === void 0 ? void 0 : options.focusVisible) !== false) {
             this._adapter.forceFocusVisible();
         }
     }
-    proxyLabel(label) {
-        this._adapter.proxyLabel(label);
-    }
     async _onClick(evt) {
         const isFormType = this._type === 'submit' || this._type === 'reset';
         // Custom elements do not work with the popover* attributes by default so we need to manually

package/esm/button/base/base-button.d.ts

@@ -3,14 +3,16 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { IWithFocusable } from '../../core/base/base-focusable-component';
+import { IWithFocusable } from '../../core/mixins/focus/with-focusable';
 import { BaseComponent } from '../../core/base/base-component';
-import { ExperimentalFocusOptions, internals } from '../../constants';
+import { ExperimentalFocusOptions } from '../../constants';
 import { IBaseButtonAdapter } from './base-button-adapter';
 import { ButtonType } from './base-button-constants';
 import { BaseButtonFoundation } from './base-button-foundation';
-import { IWithLabelAwareness } from '../../core/base/base-label-aware-component';
-export interface IBaseButton extends IWithFocusable, IWithLabelAwareness {
+import { IWithLabelAwareness } from '../../core/mixins/label/with-label-aware';
+import { IWithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { IWithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+export interface IBaseButton extends IWithFocusable, IWithLabelAwareness, IWithElementInternals, IWithDefaultAria {
     type: ButtonType;
     disabled: boolean;
     popoverIcon: boolean;
@@ -25,10 +27,10 @@ export interface IBaseButton extends IWithFocusable, IWithLabelAwareness {
     form: HTMLFormElement | null;
     focus(options?: ExperimentalFocusOptions): void;
 }
-declare const BaseButtonClass: import("../../constants").AbstractConstructor<import("../../core/base/base-label-aware-component").WithLabelAwarenessContract> & import("../../constants").AbstractConstructor<import("../../core/base/base-focusable-component").WithFocusableContract> & typeof BaseComponent;
+declare const BaseButtonClass: import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-element-internals").WithElementInternalsContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/label/with-label-aware").WithLabelAwarenessContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/focus/with-focusable").WithFocusableContract> & typeof BaseComponent;
 export declare abstract class BaseButton<T extends BaseButtonFoundation<IBaseButtonAdapter>> extends BaseButtonClass implements IBaseButton {
+    static get observedAttributes(): string[];
     static readonly formAssociated = true;
-    [internals]: ElementInternals;
     protected abstract _foundation: T;
     constructor();
     connectedCallback(): void;

package/esm/button/base/base-button.js

@@ -7,17 +7,21 @@ import { __decorate } from "tslib";
 import { coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
 import { tylIconArrowDropDown } from '@tylertech/tyler-icons/standard';
 import { IconRegistry } from '../../icon/icon-registry';
-import { WithFocusable } from '../../core/base/base-focusable-component';
+import { WithFocusable } from '../../core/mixins/focus/with-focusable';
 import { BaseComponent } from '../../core/base/base-component';
-import { internals } from '../../constants';
+import { internals, setDefaultAria } from '../../constants';
 import { BASE_BUTTON_CONSTANTS } from './base-button-constants';
-import { WithLabelAwareness } from '../../core/base/base-label-aware-component';
-const BaseButtonClass = WithLabelAwareness(WithFocusable(BaseComponent));
+import { WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
+import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+const BaseButtonClass = WithDefaultAria(WithElementInternals(WithLabelAwareness(WithFocusable(BaseComponent))));
 export class BaseButton extends BaseButtonClass {
+    static get observedAttributes() {
+        return Object.values(BASE_BUTTON_CONSTANTS.observedAttributes);
+    }
     constructor() {
         super();
         IconRegistry.define(tylIconArrowDropDown);
-        this[internals] = this.attachInternals();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -27,31 +31,31 @@ export class BaseButton extends BaseButtonClass {
         switch (name) {
             case BASE_BUTTON_CONSTANTS.observedAttributes.TYPE:
                 this.type = newValue;
-                break;
+                return;
             case BASE_BUTTON_CONSTANTS.observedAttributes.DISABLED:
                 this.disabled = coerceBoolean(newValue);
-                break;
+                return;
             case BASE_BUTTON_CONSTANTS.observedAttributes.POPOVER_ICON:
                 this.popoverIcon = coerceBoolean(newValue);
-                break;
+                return;
             case BASE_BUTTON_CONSTANTS.observedAttributes.ANCHOR:
                 this.anchor = coerceBoolean(newValue);
-                break;
+                return;
             case BASE_BUTTON_CONSTANTS.observedAttributes.HREF:
                 this.href = newValue;
-                break;
+                return;
             case BASE_BUTTON_CONSTANTS.observedAttributes.TARGET:
                 this.target = newValue;
-                break;
+                return;
             case BASE_BUTTON_CONSTANTS.observedAttributes.DOWNLOAD:
                 this.download = newValue;
-                break;
+                return;
             case BASE_BUTTON_CONSTANTS.observedAttributes.REL:
                 this.rel = newValue;
-                break;
+                return;
             case BASE_BUTTON_CONSTANTS.observedAttributes.DENSE:
                 this.dense = coerceBoolean(newValue);
-                break;
+                return;
         }
         super.attributeChangedCallback(name, oldValue, newValue);
     }
@@ -59,7 +63,7 @@ export class BaseButton extends BaseButtonClass {
         this._foundation.click({ animateStateLayer: true });
     }
     labelChangedCallback(value) {
-        this._foundation.proxyLabel(value);
+        this[setDefaultAria]({ ariaLabel: value }, { setAttribute: !this.hasAttribute('aria-label') });
     }
     get form() {
         return this[internals].form;