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

package/esm/banner/banner.js

@@ -7,25 +7,44 @@ 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><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></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-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 forge-icon-button{--forge-icon-button-focus-indicator-color:var(--_banner-color)}::slotted(forge-button[slot=button]){--forge-button-primary-color:var(--_banner-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))}:host([theme=secondary]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-secondary-container, #fff0c3))}:host([theme=tertiary]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-tertiary-container, #d0d7ff))}:host([theme=success]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-success-container, #cde0ce))}:host([theme=error]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-error-container, #ecc2c9))}:host([theme=warning]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-warning-container, #f4d3c2))}:host([theme=danger]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-error-container, #ecc2c9))}:host([theme=info-secondary]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-surface-container, #e0e0e0))}@container (max-width:600px){.forge-banner .container{display:grid;grid-template-rows:[content] 1fr [button] auto;grid-template-columns:[content] 1fr;place-items:normal}.forge-banner.has-icon .container{grid-template-columns:[icon] auto [content] 1fr}.forge-banner .inner{place-items:normal}.forge-banner .button-container{grid-row:button;grid-column:content}}';
 /**
- * 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.
  */
 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 +53,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/split-view/split-view-panel/split-view-panel.js

@@ -14,7 +14,7 @@ import { SplitViewPanelAdapter } from './split-view-panel-adapter';
 import { IconComponent, IconRegistry } from '../../icon';
 import { RippleComponent } from '../../ripple';
 const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-ripple id=\"ripple\" part=\"ripple\"></forge-ripple></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
-const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-split-view-panel{display:-webkit-box;display:flex;width:100%;height:100%;overflow:hidden;contain:paint size}.forge-split-view-panel__handle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));background-color:#e0e0e0;background-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;outline:0}.forge-split-view-panel__content{-webkit-box-flex:1;flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:8px;min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:8px;width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:u6ateim;animation-name:u6ateim;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes u6ateim{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes u6ateim{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:u6atej7;animation-name:u6atej7;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes u6atej7{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes u6atej7{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:u6atejh;animation-name:u6atejh;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes u6atejh{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes u6atejh{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:u6atejm;animation-name:u6atejm;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes u6atejm{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes u6atejm{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:8px;min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:8px;height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:u6atejz;animation-name:u6atejz;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes u6atejz{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes u6atejz{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:u6atekl;animation-name:u6atekl;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes u6atekl{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes u6atekl{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:u6atekp;animation-name:u6atekp;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes u6atekp{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes u6atekp{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:u6atel9;animation-name:u6atel9;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes u6atel9{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes u6atel9{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;-webkit-box-flex:0;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){-webkit-box-flex:1;flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}';
+const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-split-view-panel{display:-webkit-box;display:flex;width:100%;height:100%;overflow:hidden;contain:paint size}.forge-split-view-panel__handle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));background-color:#e0e0e0;background-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;outline:0}.forge-split-view-panel__content{-webkit-box-flex:1;flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:8px;min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:8px;width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:u2356m5;animation-name:u2356m5;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes u2356m5{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes u2356m5{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:u2356n4;animation-name:u2356n4;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes u2356n4{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes u2356n4{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:u2356nm;animation-name:u2356nm;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes u2356nm{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes u2356nm{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:u2356o3;animation-name:u2356o3;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes u2356o3{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes u2356o3{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:8px;min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:8px;height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:u2356or;animation-name:u2356or;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes u2356or{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes u2356or{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:u2356pg;animation-name:u2356pg;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes u2356pg{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes u2356pg{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:u2356pn;animation-name:u2356pn;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes u2356pn{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes u2356pn{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:u2356py;animation-name:u2356py;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes u2356py{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes u2356py{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;-webkit-box-flex:0;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){-webkit-box-flex:1;flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}';
 /**
  * The custom element class behind the `<forge-split-view-panel>` element.
  *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.0.0-next.17",
+  "version": "3.0.0-next.18",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {

package/styles/banner/_core.scss

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: block;
+  container-type: inline-size;
+}
+
+@mixin base {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  overflow: hidden;
+  box-sizing: border-box;
+  
+  transition-property: opacity, grid-template-rows, min-height;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-easing)};
+  
+  background: #{token(background)};
+  color: #{token(color)};
+  
+  opacity: 1;
+}
+
+@mixin inner {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  place-items: center;
+  gap: #{token(gap)};
+  overflow: hidden;
+  padding-inline: #{token(padding-inline)};
+}
+
+@mixin container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: #{token(gap)};
+  flex: 1 1 auto;
+  padding-block: #{token(padding-block)};
+}
+
+@mixin dismissed {
+  grid-template-rows: 0fr;
+  opacity: 0;
+}

package/styles/banner/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/banner/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: banner;
+$_tokens: tokens.$tokens;
+
+@mixin provide-theme($theme) {
+  @include token-utils.provide-theme($_module, $_tokens, $theme);
+}
+
+@function token($name, $type: token) {
+  @return token-utils.token($_module, $_tokens, $name, $type);
+}
+
+@function declare($token) {
+  @return token-utils.declare($_module, $token);
+}
+
+@mixin override($token, $token-or-value, $type: token) {
+  @include token-utils.override($_module, $_tokens, $token, $token-or-value, $type);
+}
+
+@mixin tokens($includes: null, $excludes: null) {
+  @include token-utils.tokens($_module, $_tokens, $includes, $excludes);
+}

package/styles/banner/banner.scss

@@ -3,21 +3,121 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
+@use '../button';
+@use '../icon-button';
+@use '../core/styles/theme';
 
-@include mixins.core-styles;
+//
+// Host
+//
 
 :host {
-  display: block;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
 
-@include mixins.default-theme();
-@include mixins.theme('danger');
-@include mixins.theme('warning');
-@include mixins.theme('success');
-@include mixins.theme('info-primary');
-@include mixins.theme('info-secondary');
+//
+// Base
+//
+
+.forge-banner {
+  @include tokens;
+}
+
+.forge-banner {
+  @include base;
+
+  .inner {
+    @include inner;
+  }
+
+  .container {
+    @include container;
+  }
+
+  forge-icon-button {
+    @include icon-button.provide-theme((
+      focus-indicator-color: #{token(color)}
+    ));
+  }
+}
+
+//
+// Slotted - button
+//
+
+::slotted(forge-button[slot=button]) {
+  @include button.provide-theme((
+    primary-color: #{token(color)}
+  ));
+}
+
+//
+// Dismissed
+//
+
+:host([dismissed]) {
+  .forge-banner {
+    @include dismissed;
+  }
+}
+
+//
+// Theme
+//
+
+@each $theme in [primary secondary tertiary success error warning] {
+  :host([theme=#{$theme}]) {
+    .forge-banner {
+      @include override(background, theme.variable(#{$theme}-container), value);
+    }
+  }
+}
+
+// Backwards compatibility with the new error theme
+:host([theme=danger]) {
+  .forge-banner {
+    @include override(background, theme.variable(error-container), value);
+  }
+}
+
+// Use surface theme for info-secondary
+:host([theme=info-secondary]) {
+  .forge-banner {
+    @include override(background, theme.variable(surface-container), value);
+  }
+}
+
+//
+// Responsive
+//
+
+@container (max-width: 600px) {
+  .forge-banner {
+    .container {
+      display: grid;
+      grid-template-rows: [content] 1fr [button] auto;
+      grid-template-columns: [content] 1fr;
+      place-items: normal;
+    }
+
+    &.has-icon {
+      .container {
+        grid-template-columns: [icon] auto [content] 1fr;
+      }
+    }
+
+    .inner {
+      place-items: normal;
+    }
+
+    .button-container {
+      grid-row: button;
+      grid-column: content;
+    }
+  }
+}

package/styles/banner/index.scss

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './core';

package/styles/core/styles/tokens/banner/_tokens.scss

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../animation';
+@use '../../spacing';
+@use '../../theme';
+@use '../../border';
+@use '../../utils';
+
+$tokens: (
+  background: utils.module-val(banner, background, theme.variable(info-container)),
+  color: utils.module-val(banner, color, theme.variable(text-high)),
+  gap: utils.module-val(banner, gap, spacing.variable(small)),
+  padding-inline: utils.module-val(banner, padding-inline, spacing.variable(large)),
+  padding-block: utils.module-val(banner, padding-block, spacing.variable(small)),
+  transition-duration: utils.module-val(banner, transition-duration, animation.variable(duration-short4)),
+  transition-easing: utils.module-val(banner, transition-easing, animation.variable(easing-standard))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/theme/_theme-dark.scss

@@ -15,10 +15,6 @@
 @use '../skeleton/variables' as skeleton-variables;
 @use '../toast/mixins' as toast-mixins;
 @use '../toast/variables' as toast-variables;
-@use '../badge/mixins' as badge-mixins;
-@use '../badge/variables' as badge-variables;
-@use '../banner/mixins' as banner-mixins;
-@use '../banner/variables' as banner-variables;
 @use '../table/mixins' as table-mixins;
 @use '../table/variables' as table-variables;
 
@@ -45,6 +41,4 @@
   @include skeleton-mixins.provide-theme(skeleton-variables.$theme-values-dark);
   @include toast-mixins.provide-theme(toast-variables.$theme-values-dark);
   @include table-mixins.provide-theme(table-variables.$theme-values-dark);
-  @include badge-mixins.provide-theme(badge-variables.$theme-values-dark);
-  @include banner-mixins.provide-theme(banner-variables.$theme-values-dark);
 }

package/dist/esm/chunks/chunk.DFRD7A2Y.js

@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import{c as k}from"./chunk.MTZOQQXR.js";import{d as I}from"./chunk.NPCUVYWP.js";import{f as x}from"./chunk.EWT2PBEP.js";import{d as D,l as w}from"./chunk.L7BSLZCB.js";import{a as v}from"./chunk.ZY3ETQ3D.js";import{a as m}from"./chunk.NVUMRW44.js";import{a as h,b as _}from"./chunk.UVXKHQQZ.js";import{a as f,e as p,f as a,k as u}from"./chunk.TPXXHX5J.js";import{k as b}from"./chunk.J2M2MXP2.js";import{d as i}from"./chunk.M3QDAYD2.js";var d=`${_}banner`,S={BANNER:"forge-banner",DISMISSED:"forge-banner--dismissed"},E={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"},B={SLOT:"slot",DISMISSED:"dismissed",CAN_DISMISS:"can-dismiss",HIDDEN:"hidden"},y={ICON:"icon",TEXT:"text",BUTTON:"button"},N={DISMISSED:`${d}-dismissed`,UNDISMISSED:`${d}-undismissed`},e={elementName:d,classes:S,selectors:E,attributes:B,slots:y,events:N};var s=class extends v{constructor(o){super(o);this._rootElement=a(o,e.selectors.BANNER)}addRootClass(o){this._rootElement.classList.add(o)}removeRootClass(o){this._rootElement.classList.remove(o)}addDismissButtonAttribute(o,t=""){this.forgeIconButtonDismiss.setAttribute(o,t)}removeDismissButtonAttribute(o){this.forgeIconButtonDismiss.removeAttribute(o)}addDismissEventListener(o,t){this.buttonDismiss.addEventListener(o,t)}removeDismissEventListener(o,t){this.buttonDismiss.removeEventListener(o,t)}get forgeIconButtonDismiss(){return this._forgeIconButtonDismiss||(this._forgeIconButtonDismiss=a(this._component,e.selectors.FORGE_DISMISS_BUTTON)),this._forgeIconButtonDismiss}get buttonDismiss(){return this._buttonDismiss||(this._buttonDismiss=a(this._component,e.selectors.DISMISS_BUTTON)),this._buttonDismiss}};var c=class{constructor(n){this._adapter=n;this._dismissed=!1;this._canDismiss=!0;this._dismissBanner=()=>this._dismiss()}connect(){this._addDismissEventListener()}disconnect(){this._removeDismissEventListener()}_dismiss(){this.dismissed=!0}_syncDismissedState(){this.dismissed?(this._setDismissedClass(),this._adapter.emitHostEvent(e.events.DISMISSED)):(this._setUndissmissedClass(),this._adapter.emitHostEvent(e.events.UNDISMISSED))}_setUndissmissedClass(){this._adapter.removeRootClass(e.classes.DISMISSED)}_setDismissedClass(){this._adapter.addRootClass(e.classes.DISMISSED)}_syncCanDismissState(){this.canDismiss?this._adapter.removeDismissButtonAttribute(e.attributes.HIDDEN):this._adapter.addDismissButtonAttribute(e.attributes.HIDDEN)}_addDismissEventListener(){this._adapter.addDismissEventListener("click",this._dismissBanner)}_removeDismissEventListener(){this._adapter.removeDismissEventListener("click",this._dismissBanner)}get dismissed(){return!!this._dismissed}set dismissed(n){this.dismissed!==!!n&&(this._dismissed=!!n,this._syncDismissedState())}get canDismiss(){return!!this._canDismiss}set canDismiss(n){this._canDismiss!==!!n&&(this._canDismiss=!!n,this._syncCanDismissState())}};var C='<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>',T='@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)))}',r=class extends u{constructor(){super();D.define(x),p(this,C,T),this._foundation=new c(new s(this))}static get observedAttributes(){return[e.attributes.DISMISSED,e.attributes.CAN_DISMISS]}connectedCallback(){this._foundation.connect()}disconnectedCallback(){this._foundation.disconnect()}attributeChangedCallback(o,t,l){switch(o){case e.attributes.DISMISSED:this.dismissed=b(l);break;case e.attributes.CAN_DISMISS:this.canDismiss=b(l);break}}};i([m()],r.prototype,"dismissed",2),i([m()],r.prototype,"canDismiss",2),r=i([h({name:e.elementName,dependencies:[I,w,k]})],r);function oe(){f(r)}export{e as a,s as b,c,r as d,oe as e};
-//# sourceMappingURL=chunk.DFRD7A2Y.js.map

package/dist/esm/chunks/chunk.DFRD7A2Y.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/banner/banner-constants.ts", "../../src/banner/banner-adapter.ts", "../../src/banner/banner-foundation.ts", "../../src/banner/banner.ts", "../../src/banner/index.ts"],
-  "sourcesContent": ["import { COMPONENT_NAME_PREFIX } from '../constants';\n\nconst elementName: keyof HTMLElementTagNameMap = `${COMPONENT_NAME_PREFIX}banner`;\n\nconst classes = {\n  BANNER: 'forge-banner',\n  DISMISSED: 'forge-banner--dismissed'\n};\n\nconst selectors = {\n  BANNER: '.forge-banner',\n  FORGE_DISMISS_BUTTON: 'forge-icon-button.forge-banner__container-dismiss',\n  DISMISS_BUTTON: '.forge-banner__container-dismiss',\n  ICON: 'i',\n  FORGE_BUTTON: 'forge-button'\n};\n\nconst attributes = {\n  SLOT: 'slot',\n  DISMISSED: 'dismissed',\n  CAN_DISMISS: 'can-dismiss',\n  HIDDEN: 'hidden'\n};\n\nconst slots = {\n  ICON: 'icon',\n  TEXT: 'text',\n  BUTTON: 'button'\n};\n\nconst events = {\n  DISMISSED: `${elementName}-dismissed`,\n  UNDISMISSED: `${elementName}-undismissed`\n};\n\nexport const BANNER_CONSTANTS = {\n  elementName,\n  classes,\n  selectors,\n  attributes,\n  slots,\n  events\n};\n", "import { getShadowElement } from '@tylertech/forge-core';\n\nimport { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';\nimport { IIconButtonComponent } from '../icon-button';\nimport { IBannerComponent } from './banner';\nimport { BANNER_CONSTANTS } from './banner-constants';\n\nexport interface IBannerAdapter extends IBaseAdapter {\n  addRootClass(className: string): void;\n  removeRootClass(className: string): void;\n  addDismissButtonAttribute(name: string, value?: string): void;\n  removeDismissButtonAttribute(name: string): void;\n  addDismissEventListener(event: string, callback: (event: Event) => void): void;\n  removeDismissEventListener(event: string, callback: (event: Event) => void): void;\n}\n\nexport class BannerAdapter extends BaseAdapter<IBannerComponent> implements IBannerAdapter {\n  private _rootElement: HTMLElement;\n  private _forgeIconButtonDismiss: IIconButtonComponent;\n  private _buttonDismiss: HTMLButtonElement;\n\n  constructor(component: IBannerComponent) {\n    super(component);\n    this._rootElement = getShadowElement(component, BANNER_CONSTANTS.selectors.BANNER);\n  }\n\n  public addRootClass(name: string): void {\n    this._rootElement.classList.add(name);\n  }\n\n  public removeRootClass(name: string): void {\n    this._rootElement.classList.remove(name);\n  }\n\n  public addDismissButtonAttribute(name: string, value = ''): void {\n    this.forgeIconButtonDismiss.setAttribute(name, value);\n  }\n\n  public removeDismissButtonAttribute(name: string): void {\n    this.forgeIconButtonDismiss.removeAttribute(name);\n  }\n\n  public addDismissEventListener(event: string, callback: (event: Event) => void): void {\n    this.buttonDismiss.addEventListener(event, callback);\n  }\n\n  public removeDismissEventListener(event: string, callback: (event: Event) => void): void {\n    this.buttonDismiss.removeEventListener(event, callback);\n  }\n\n  public get forgeIconButtonDismiss(): IIconButtonComponent {\n    if (!this._forgeIconButtonDismiss) {\n      this._forgeIconButtonDismiss = getShadowElement(this._component, BANNER_CONSTANTS.selectors.FORGE_DISMISS_BUTTON) as IIconButtonComponent;\n    }\n\n    return this._forgeIconButtonDismiss;\n  }\n\n  public get buttonDismiss(): HTMLButtonElement {\n    if (!this._buttonDismiss) {\n      this._buttonDismiss = getShadowElement(this._component, BANNER_CONSTANTS.selectors.DISMISS_BUTTON) as HTMLButtonElement;\n    }\n\n    return this._buttonDismiss;\n  }\n}\n", "import { ICustomElementFoundation } from '@tylertech/forge-core';\n\nimport { IBannerAdapter } from './banner-adapter';\nimport { BANNER_CONSTANTS } from './banner-constants';\n\nexport interface IBannerFoundation extends ICustomElementFoundation {\n  dismissed: boolean;\n  canDismiss: boolean;\n}\n\nexport class BannerFoundation implements IBannerFoundation {\n  private _dismissed = false;\n  private _canDismiss = true;\n  private _dismissBanner: () => void;\n\n  constructor(private _adapter: IBannerAdapter) {\n    this._dismissBanner = () => this._dismiss();\n  }\n\n  public connect(): void {\n    this._addDismissEventListener();\n  }\n\n  public disconnect(): void {\n    this._removeDismissEventListener();\n  }\n\n  private _dismiss(): void {\n    this.dismissed = true;\n  }\n\n  private _syncDismissedState(): void {\n    if (this.dismissed) {\n      this._setDismissedClass();\n      this._adapter.emitHostEvent(BANNER_CONSTANTS.events.DISMISSED);\n    } else {\n      this._setUndissmissedClass();\n      this._adapter.emitHostEvent(BANNER_CONSTANTS.events.UNDISMISSED);\n    }\n  }\n\n  private _setUndissmissedClass(): void {\n    this._adapter.removeRootClass(BANNER_CONSTANTS.classes.DISMISSED);\n  }\n\n  private _setDismissedClass(): void {\n    this._adapter.addRootClass(BANNER_CONSTANTS.classes.DISMISSED);\n  }\n\n  private _syncCanDismissState(): void {\n    if (this.canDismiss) {\n      this._adapter.removeDismissButtonAttribute(BANNER_CONSTANTS.attributes.HIDDEN);\n    } else {\n      this._adapter.addDismissButtonAttribute(BANNER_CONSTANTS.attributes.HIDDEN);\n    }\n  }\n\n  private _addDismissEventListener(): void {\n    this._adapter.addDismissEventListener('click', this._dismissBanner);\n  }\n\n  private _removeDismissEventListener(): void {\n    this._adapter.removeDismissEventListener('click', this._dismissBanner);\n  }\n\n  public get dismissed(): boolean {\n    return !!this._dismissed;\n  }\n  public set dismissed(val: boolean) {\n    if (this.dismissed === !!val) {\n      return;\n    }\n\n    this._dismissed = !!val;\n    this._syncDismissedState();\n  }\n\n  public get canDismiss(): boolean {\n    return !!this._canDismiss;\n  }\n  public set canDismiss(val: boolean) {\n    if (this._canDismiss === !!val) {\n      return;\n    }\n\n    this._canDismiss = !!val;\n    this._syncCanDismissState();\n  }\n}\n", "import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';\nimport { tylIconCancel } from '@tylertech/tyler-icons/standard';\nimport { BaseComponent, IBaseComponent } from '../core/base/base-component';\nimport { IconComponent, IconRegistry } from '../icon';\nimport { IconButtonComponent } from '../icon-button';\nimport { TooltipComponent } from '../tooltip';\nimport { BannerAdapter } from './banner-adapter';\nimport { BANNER_CONSTANTS } from './banner-constants';\nimport { BannerFoundation } from './banner-foundation';\n\nconst 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>';\nconst 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)))}';\n\nexport interface IBannerComponent extends IBaseComponent {\n  dismissed: boolean;\n  canDismiss: boolean;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'forge-banner': IBannerComponent;\n  }\n\n  interface HTMLElementEventMap {\n    'forge-banner-dismissed': CustomEvent<void>;\n    'forge-banner-undismissed': CustomEvent<void>;\n  }\n}\n\n/**\n * The custom element class behind the `<forge-banner>` element.\n * \n * @tag forge-banner\n */\n@CustomElement({\n  name: BANNER_CONSTANTS.elementName,\n  dependencies: [\n    IconButtonComponent,\n    IconComponent,\n    TooltipComponent\n  ]\n})\nexport class BannerComponent extends BaseComponent implements IBannerComponent {\n  public static get observedAttributes(): string[] {\n    return [\n      BANNER_CONSTANTS.attributes.DISMISSED,\n      BANNER_CONSTANTS.attributes.CAN_DISMISS\n    ];\n  }\n\n  protected _foundation: BannerFoundation;\n\n  constructor() {\n    super();\n    IconRegistry.define(tylIconCancel);\n    attachShadowTemplate(this, template, styles);\n    this._foundation = new BannerFoundation(new BannerAdapter(this));\n  }\n\n  public connectedCallback(): void {\n    this._foundation.connect();\n  }\n\n  public disconnectedCallback(): void {\n    this._foundation.disconnect();\n  }\n\n  public attributeChangedCallback(name: string, oldValue: string, newValue: string): void {\n    switch (name) {\n      case BANNER_CONSTANTS.attributes.DISMISSED:\n        this.dismissed = coerceBoolean(newValue);\n        break;\n      case BANNER_CONSTANTS.attributes.CAN_DISMISS:\n        this.canDismiss = coerceBoolean(newValue);\n        break;\n    }\n  }\n\n  /** Controls whether the component is dismissed (hidden) or not.  */\n  @FoundationProperty()\n  public declare dismissed: boolean;\n\n  /** Controls the visibility of the dismiss button. */\n  @FoundationProperty()\n  public declare canDismiss: boolean;\n}\n", "import { defineCustomElement } from '@tylertech/forge-core';\n\nimport { BannerComponent } from './banner';\n\nexport * from './banner-adapter';\nexport * from './banner-constants';\nexport * from './banner-foundation';\nexport * from './banner';\n\nexport function defineBannerComponent(): void {\n  defineCustomElement(BannerComponent);\n}\n"],
-  "mappings": "mbAEA,IAAMA,EAA2C,GAAGC,UAE9CC,EAAU,CACd,OAAQ,eACR,UAAW,yBACb,EAEMC,EAAY,CAChB,OAAQ,gBACR,qBAAsB,oDACtB,eAAgB,mCAChB,KAAM,IACN,aAAc,cAChB,EAEMC,EAAa,CACjB,KAAM,OACN,UAAW,YACX,YAAa,cACb,OAAQ,QACV,EAEMC,EAAQ,CACZ,KAAM,OACN,KAAM,OACN,OAAQ,QACV,EAEMC,EAAS,CACb,UAAW,GAAGN,cACd,YAAa,GAAGA,eAClB,EAEaO,EAAmB,CAC9B,YAAAP,EACA,QAAAE,EACA,UAAAC,EACA,WAAAC,EACA,MAAAC,EACA,OAAAC,CACF,EC1BO,IAAME,EAAN,cAA4BC,CAAwD,CAKzF,YAAYC,EAA6B,CACvC,MAAMA,CAAS,EACf,KAAK,aAAeC,EAAiBD,EAAWE,EAAiB,UAAU,MAAM,CACnF,CAEO,aAAaC,EAAoB,CACtC,KAAK,aAAa,UAAU,IAAIA,CAAI,CACtC,CAEO,gBAAgBA,EAAoB,CACzC,KAAK,aAAa,UAAU,OAAOA,CAAI,CACzC,CAEO,0BAA0BA,EAAcC,EAAQ,GAAU,CAC/D,KAAK,uBAAuB,aAAaD,EAAMC,CAAK,CACtD,CAEO,6BAA6BD,EAAoB,CACtD,KAAK,uBAAuB,gBAAgBA,CAAI,CAClD,CAEO,wBAAwBE,EAAeC,EAAwC,CACpF,KAAK,cAAc,iBAAiBD,EAAOC,CAAQ,CACrD,CAEO,2BAA2BD,EAAeC,EAAwC,CACvF,KAAK,cAAc,oBAAoBD,EAAOC,CAAQ,CACxD,CAEA,IAAW,wBAA+C,CACxD,OAAK,KAAK,0BACR,KAAK,wBAA0BL,EAAiB,KAAK,WAAYC,EAAiB,UAAU,oBAAoB,GAG3G,KAAK,uBACd,CAEA,IAAW,eAAmC,CAC5C,OAAK,KAAK,iBACR,KAAK,eAAiBD,EAAiB,KAAK,WAAYC,EAAiB,UAAU,cAAc,GAG5F,KAAK,cACd,CACF,ECvDO,IAAMK,EAAN,KAAoD,CAKzD,YAAoBC,EAA0B,CAA1B,cAAAA,EAJpB,KAAQ,WAAa,GACrB,KAAQ,YAAc,GAIpB,KAAK,eAAiB,IAAM,KAAK,SAAS,CAC5C,CAEO,SAAgB,CACrB,KAAK,yBAAyB,CAChC,CAEO,YAAmB,CACxB,KAAK,4BAA4B,CACnC,CAEQ,UAAiB,CACvB,KAAK,UAAY,EACnB,CAEQ,qBAA4B,CAC9B,KAAK,WACP,KAAK,mBAAmB,EACxB,KAAK,SAAS,cAAcC,EAAiB,OAAO,SAAS,IAE7D,KAAK,sBAAsB,EAC3B,KAAK,SAAS,cAAcA,EAAiB,OAAO,WAAW,EAEnE,CAEQ,uBAA8B,CACpC,KAAK,SAAS,gBAAgBA,EAAiB,QAAQ,SAAS,CAClE,CAEQ,oBAA2B,CACjC,KAAK,SAAS,aAAaA,EAAiB,QAAQ,SAAS,CAC/D,CAEQ,sBAA6B,CAC/B,KAAK,WACP,KAAK,SAAS,6BAA6BA,EAAiB,WAAW,MAAM,EAE7E,KAAK,SAAS,0BAA0BA,EAAiB,WAAW,MAAM,CAE9E,CAEQ,0BAAiC,CACvC,KAAK,SAAS,wBAAwB,QAAS,KAAK,cAAc,CACpE,CAEQ,6BAAoC,CAC1C,KAAK,SAAS,2BAA2B,QAAS,KAAK,cAAc,CACvE,CAEA,IAAW,WAAqB,CAC9B,MAAO,CAAC,CAAC,KAAK,UAChB,CACA,IAAW,UAAUC,EAAc,CAC7B,KAAK,YAAc,CAAC,CAACA,IAIzB,KAAK,WAAa,CAAC,CAACA,EACpB,KAAK,oBAAoB,EAC3B,CAEA,IAAW,YAAsB,CAC/B,MAAO,CAAC,CAAC,KAAK,WAChB,CACA,IAAW,WAAWA,EAAc,CAC9B,KAAK,cAAgB,CAAC,CAACA,IAI3B,KAAK,YAAc,CAAC,CAACA,EACrB,KAAK,qBAAqB,EAC5B,CACF,EC9EA,IAAMC,EAAW,82BACXC,EAAS,8mOA+BFC,EAAN,cAA8BC,CAA0C,CAU7E,aAAc,CACZ,MAAM,EACNC,EAAa,OAAOC,CAAa,EACjCC,EAAqB,KAAMN,EAAUC,CAAM,EAC3C,KAAK,YAAc,IAAIM,EAAiB,IAAIC,EAAc,IAAI,CAAC,CACjE,CAdA,WAAkB,oBAA+B,CAC/C,MAAO,CACLC,EAAiB,WAAW,UAC5BA,EAAiB,WAAW,WAC9B,CACF,CAWO,mBAA0B,CAC/B,KAAK,YAAY,QAAQ,CAC3B,CAEO,sBAA6B,CAClC,KAAK,YAAY,WAAW,CAC9B,CAEO,yBAAyBC,EAAcC,EAAkBC,EAAwB,CACtF,OAAQF,EAAM,CACZ,KAAKD,EAAiB,WAAW,UAC/B,KAAK,UAAYI,EAAcD,CAAQ,EACvC,MACF,KAAKH,EAAiB,WAAW,YAC/B,KAAK,WAAaI,EAAcD,CAAQ,EACxC,KACJ,CACF,CASF,EALiBE,EAAA,CADdC,EAAmB,GArCTb,EAsCI,yBAIAY,EAAA,CADdC,EAAmB,GAzCTb,EA0CI,0BA1CJA,EAANY,EAAA,CARNE,EAAc,CACb,KAAMP,EAAiB,YACvB,aAAc,CACZQ,EACAC,EACAC,CACF,CACF,CAAC,GACYjB,GCjCN,SAASkB,IAA8B,CAC5CC,EAAoBC,CAAe,CACrC",
-  "names": ["elementName", "COMPONENT_NAME_PREFIX", "classes", "selectors", "attributes", "slots", "events", "BANNER_CONSTANTS", "BannerAdapter", "BaseAdapter", "component", "getShadowElement", "BANNER_CONSTANTS", "name", "value", "event", "callback", "BannerFoundation", "_adapter", "BANNER_CONSTANTS", "val", "template", "styles", "BannerComponent", "BaseComponent", "IconRegistry", "tylIconCancel", "attachShadowTemplate", "BannerFoundation", "BannerAdapter", "BANNER_CONSTANTS", "name", "oldValue", "newValue", "coerceBoolean", "__decorateClass", "FoundationProperty", "CustomElement", "IconButtonComponent", "IconComponent", "TooltipComponent", "defineBannerComponent", "defineCustomElement", "BannerComponent"]
-}