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

package/esm/inline-message/inline-message.d.ts

@@ -4,7 +4,9 @@
  * License: Apache-2.0
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { InlineMessageTheme } from './inline-message-constants';
 export interface IInlineMessageComponent extends IBaseComponent {
+    theme: InlineMessageTheme;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -12,10 +14,37 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-inline-message>` custom element.
- *
  * @tag forge-inline-message
+ *
+ * @summary Inline messages are used to provide feedback to the user about a specific action or state.
+ *
+ * @property {InlineMessageTheme} theme - The theme to apply. Defaults to `"info"`.
+ *
+ * @attribute {InlineMessageTheme} theme - The theme to apply. Defaults to `"info"`.
+ *
+ * @cssproperty --forge-inline-message-background - The background color.
+ * @cssproperty --forge-inline-message-color - The text color.
+ * @cssproperty --forge-inline-message-shape - The shape (border) radius.
+ * @cssproperty --forge-inline-message-padding - The padding around the content.
+ * @cssproperty --forge-inline-message-padding-inline - The inline padding around the content.
+ * @cssproperty --forge-inline-message-padding-block - The block padding around the content.
+ * @cssproperty --forge-inline-message-border-width - The border width.
+ * @cssproperty --forge-inline-message-border-style - The border style. Defaults to `none`.
+ * @cssproperty --forge-inline-message-border-color - The border color.
+ * @cssproperty --forge-inline-message-gap - The gap/space between the content elements.
+ * @cssproperty --forge-inline-message-icon-gap - The gap/space between the icon and the content.
+ * @cssproperty --forge-inline-message-content-gap - The gap/space between the title and the message.
+ * @cssproperty --forge-inline-message-icon-color - The icon color.
+ *
+ * @csspart root - The root layout element.
+ * @csspart container - The container element for the title and message content.
+ *
+ * @slot - The message text.
+ * @slot title - The title of the inline message.
+ * @slot icon - The icon to display.
  */
 export declare class InlineMessageComponent extends BaseComponent implements IInlineMessageComponent {
     constructor();
+    get theme(): InlineMessageTheme;
+    set theme(value: InlineMessageTheme);
 }

package/esm/inline-message/inline-message.js

@@ -4,21 +4,53 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, attachShadowTemplate } from '@tylertech/forge-core';
+import { CustomElement, attachShadowTemplate, toggleAttribute } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
 import { INLINE_MESSAGE_CONSTANTS } from './inline-message-constants';
-const template = '<template><div class=\"forge-inline-message\" part=\"root\"><slot name=\"icon\"></slot><div class=\"forge-inline-message__container\" part=\"container\"><slot name=\"title\"></slot><slot></slot></div></div></template>';
-const styles = '.forge-inline-message{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);border-radius:0;border-radius:var(--forge-inline-message-border-radius,0);display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;padding:8px 16px 8px 12px}.forge-inline-message ::slotted([slot=icon]){align-self:start;margin-right:12px}.forge-inline-message__container{align-self:center}.forge-inline-message__container ::slotted([slot=title]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);font-weight:500;line-height:1rem;margin-bottom:8px}:host .forge-inline-message{background:rgba(187,222,251,.3);background:var(--forge-inline-message-theme-background,var(--forge-inline-message-theme-info-primary-background,rgba(187,222,251,.3)));color:rgba(0,0,0,.87);color:var(--forge-inline-message-theme-on-background,var(--forge-inline-message-theme-info-primary-font-color,rgba(0,0,0,.87)))}:host .forge-inline-message ::slotted([slot=icon]){color:#1a237e;color:var(--forge-inline-message-theme-icon,var(--forge-inline-message-theme-info-primary-icon-color,#1a237e))}:host([theme=danger]) .forge-inline-message{background:rgba(255,205,210,.3);background:var(--forge-inline-message-theme-background,var(--forge-inline-message-theme-danger-background,rgba(255,205,210,.3)));color:rgba(0,0,0,.87);color:var(--forge-inline-message-theme-on-background,var(--forge-inline-message-theme-danger-font-color,rgba(0,0,0,.87)))}:host([theme=danger]) .forge-inline-message ::slotted([slot=icon]){color:#a22d0e;color:var(--forge-inline-message-theme-icon,var(--forge-inline-message-theme-danger-icon-color,#a22d0e))}:host([theme=warning]) .forge-inline-message{background:rgba(255,219,166,.3);background:var(--forge-inline-message-theme-background,var(--forge-inline-message-theme-warning-background,rgba(255,219,166,.3)));color:rgba(0,0,0,.87);color:var(--forge-inline-message-theme-on-background,var(--forge-inline-message-theme-warning-font-color,rgba(0,0,0,.87)))}:host([theme=warning]) .forge-inline-message ::slotted([slot=icon]){color:#a03a03;color:var(--forge-inline-message-theme-icon,var(--forge-inline-message-theme-warning-icon-color,#a03a03))}:host([theme=success]) .forge-inline-message{background:rgba(165,214,167,.3);background:var(--forge-inline-message-theme-background,var(--forge-inline-message-theme-success-background,rgba(165,214,167,.3)));color:rgba(0,0,0,.87);color:var(--forge-inline-message-theme-on-background,var(--forge-inline-message-theme-success-font-color,rgba(0,0,0,.87)))}:host([theme=success]) .forge-inline-message ::slotted([slot=icon]){color:#1b5e20;color:var(--forge-inline-message-theme-icon,var(--forge-inline-message-theme-success-icon-color,#1b5e20))}:host([theme=info-primary]) .forge-inline-message{background:rgba(187,222,251,.3);background:var(--forge-inline-message-theme-background,var(--forge-inline-message-theme-info-primary-background,rgba(187,222,251,.3)));color:rgba(0,0,0,.87);color:var(--forge-inline-message-theme-on-background,var(--forge-inline-message-theme-info-primary-font-color,rgba(0,0,0,.87)))}:host([theme=info-primary]) .forge-inline-message ::slotted([slot=icon]){color:#1a237e;color:var(--forge-inline-message-theme-icon,var(--forge-inline-message-theme-info-primary-icon-color,#1a237e))}:host([theme=info-secondary]) .forge-inline-message{background:rgba(224,224,224,.4);background:var(--forge-inline-message-theme-background,var(--forge-inline-message-theme-info-secondary-background,rgba(224,224,224,.4)));color:rgba(0,0,0,.87);color:var(--forge-inline-message-theme-on-background,var(--forge-inline-message-theme-info-secondary-font-color,rgba(0,0,0,.87)))}:host([theme=info-secondary]) .forge-inline-message ::slotted([slot=icon]){color:#000;color:var(--forge-inline-message-theme-icon,var(--forge-inline-message-theme-info-secondary-icon-color,#000))}:host{display:block}:host([hidden]){display:none}';
+const template = '<template><div class=\"forge-inline-message\" part=\"root\"><slot name=\"icon\"></slot><div class=\"container\" part=\"container\"><slot name=\"title\"></slot><slot></slot></div></div></template>';
+const styles = ':host{display:-webkit-box;display:flex}:host([hidden]){display:none}.forge-inline-message{--_inline-message-background:var(--forge-inline-message-background, var(--forge-theme-info-container-low, #e3edf7));--_inline-message-color:var(--forge-inline-message-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_inline-message-shape:var(--forge-inline-message-shape, var(--forge-shape-medium, 4px));--_inline-message-padding:var(--forge-inline-message-padding, var(--forge-spacing-small, 12px));--_inline-message-padding-inline:var(--forge-inline-message-padding-inline, var(--_inline-message-padding));--_inline-message-padding-block:var(--forge-inline-message-padding-block, var(--_inline-message-padding));--_inline-message-border-width:var(--forge-inline-message-border-width, var(--forge-border-thin, 1px));--_inline-message-border-style:var(--forge-inline-message-border-style, none);--_inline-message-border-color:var(--forge-inline-message-border-color, var(--forge-theme-info-container, #c7daf0));--_inline-message-gap:var(--forge-inline-message-gap, var(--forge-spacing-small, 12px));--_inline-message-icon-gap:var(--forge-inline-message-icon-gap, var(--_inline-message-gap));--_inline-message-content-gap:var(--forge-inline-message-content-gap, var(--_inline-message-gap));--_inline-message-icon-color:var(--forge-inline-message-icon-color, var(--forge-theme-on-info-container-low, #0b3768))}.forge-inline-message{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body1-text-decoration,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);background:var(--_inline-message-background);color:var(--_inline-message-color);border-radius:var(--_inline-message-shape);border-width:var(--_inline-message-border-width);border-style:var(--_inline-message-border-style);border-color:var(--_inline-message-border-color);display:-webkit-box;display:flex;gap:var(--_inline-message-icon-gap);-webkit-box-sizing:border-box;box-sizing:border-box;padding-inline:var(--_inline-message-padding-inline);padding-block:var(--_inline-message-padding-block)}.forge-inline-message .container{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;gap:var(--_inline-message-content-gap)}::slotted([slot=title]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-heading1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-heading1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-font-size-scale, .875)));font-weight:var(--forge-typography-heading1-font-weight,500);line-height:var(--forge-typography-heading1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-heading1-letter-spacing, .0178571429em);text-transform:var(--forge-typography-heading1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-heading1-text-decoration,inherit);text-decoration:var(--forge-typography-heading1-text-decoration,inherit)}::slotted([slot=icon]){color:var(--_inline-message-icon-color)}:host([theme=primary]) .forge-inline-message{--_inline-message-background:var(--forge-inline-message-background, var(--forge-theme-primary-container-low, #e8eaf6));--_inline-message-icon-color:var(--forge-inline-message-icon-color, var(--forge-theme-on-primary-container-low, #222c62));--_inline-message-border-color:var(--forge-inline-message-border-color, var(--forge-theme-primary-container, #d1d5ed))}:host([theme=secondary]) .forge-inline-message{--_inline-message-background:var(--forge-inline-message-background, var(--forge-theme-secondary-container, #fff0c3));--_inline-message-icon-color:var(--forge-inline-message-icon-color, var(--forge-theme-on-secondary-container, #8a6804));--_inline-message-border-color:var(--forge-inline-message-border-color, var(--forge-theme-secondary, #ffc107))}:host([theme=tertiary]) .forge-inline-message{--_inline-message-background:var(--forge-inline-message-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_inline-message-icon-color:var(--forge-inline-message-icon-color, var(--forge-theme-on-tertiary-container-low, #213189));--_inline-message-border-color:var(--forge-inline-message-border-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([theme=success]) .forge-inline-message{--_inline-message-background:var(--forge-inline-message-background, var(--forge-theme-success-container-low, #e6efe6));--_inline-message-icon-color:var(--forge-inline-message-icon-color, var(--forge-theme-on-success-container-low, #19441b));--_inline-message-border-color:var(--forge-inline-message-border-color, var(--forge-theme-success-container, #cde0ce))}:host([theme=warning]) .forge-inline-message{--_inline-message-background:var(--forge-inline-message-background, var(--forge-theme-warning-container-low, #f9e9e0));--_inline-message-icon-color:var(--forge-inline-message-icon-color, var(--forge-theme-on-warning-container-low, #712700));--_inline-message-border-color:var(--forge-inline-message-border-color, var(--forge-theme-warning-container, #f4d3c2))}:host(:is([theme=error],[theme=danger])) .forge-inline-message{--_inline-message-background:var(--forge-inline-message-background, var(--forge-theme-error-container-low, #f6e0e4));--_inline-message-icon-color:var(--forge-inline-message-icon-color, var(--forge-theme-on-error-container-low, #5f0011));--_inline-message-border-color:var(--forge-inline-message-border-color, var(--forge-theme-error-container, #ecc2c9))}:host([theme=info-secondary]) .forge-inline-message{--_inline-message-background:var(--forge-inline-message-background, var(--forge-theme-surface-container-low, #ebebeb));--_inline-message-icon-color:var(--forge-inline-message-icon-color, var(--forge-theme-on-surface-container-low, #000000));--_inline-message-border-color:var(--forge-inline-message-border-color, var(--forge-theme-surface-container, #e0e0e0))}';
 /**
- * The web component class behind the `<forge-inline-message>` custom element.
- *
  * @tag forge-inline-message
+ *
+ * @summary Inline messages are used to provide feedback to the user about a specific action or state.
+ *
+ * @property {InlineMessageTheme} theme - The theme to apply. Defaults to `"info"`.
+ *
+ * @attribute {InlineMessageTheme} theme - The theme to apply. Defaults to `"info"`.
+ *
+ * @cssproperty --forge-inline-message-background - The background color.
+ * @cssproperty --forge-inline-message-color - The text color.
+ * @cssproperty --forge-inline-message-shape - The shape (border) radius.
+ * @cssproperty --forge-inline-message-padding - The padding around the content.
+ * @cssproperty --forge-inline-message-padding-inline - The inline padding around the content.
+ * @cssproperty --forge-inline-message-padding-block - The block padding around the content.
+ * @cssproperty --forge-inline-message-border-width - The border width.
+ * @cssproperty --forge-inline-message-border-style - The border style. Defaults to `none`.
+ * @cssproperty --forge-inline-message-border-color - The border color.
+ * @cssproperty --forge-inline-message-gap - The gap/space between the content elements.
+ * @cssproperty --forge-inline-message-icon-gap - The gap/space between the icon and the content.
+ * @cssproperty --forge-inline-message-content-gap - The gap/space between the title and the message.
+ * @cssproperty --forge-inline-message-icon-color - The icon color.
+ *
+ * @csspart root - The root layout element.
+ * @csspart container - The container element for the title and message content.
+ *
+ * @slot - The message text.
+ * @slot title - The title of the inline message.
+ * @slot icon - The icon to display.
  */
 let InlineMessageComponent = class InlineMessageComponent extends BaseComponent {
     constructor() {
         super();
         attachShadowTemplate(this, template, styles);
     }
+    get theme() {
+        var _a;
+        return (_a = this.getAttribute(INLINE_MESSAGE_CONSTANTS.attributes.THEME)) !== null && _a !== void 0 ? _a : INLINE_MESSAGE_CONSTANTS.defaults.THEME;
+    }
+    set theme(value) {
+        toggleAttribute(this, value !== INLINE_MESSAGE_CONSTANTS.defaults.THEME, INLINE_MESSAGE_CONSTANTS.attributes.THEME, value);
+    }
 };
 InlineMessageComponent = __decorate([
     CustomElement({

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:uix4jxq;animation-name:uix4jxq;-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 uix4jxq{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uix4jxq{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:uix4jyk;animation-name:uix4jyk;-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 uix4jyk{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uix4jyk{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:uix4jzd;animation-name:uix4jzd;-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 uix4jzd{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uix4jzd{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:uix4jzt;animation-name:uix4jzt;-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 uix4jzt{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uix4jzt{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:uix4k06;animation-name:uix4k06;-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 uix4k06{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uix4k06{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:uix4k0g;animation-name:uix4k0g;-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 uix4k0g{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uix4k0g{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:uix4k0s;animation-name:uix4k0s;-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 uix4k0s{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uix4k0s{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:uix4k0t;animation-name:uix4k0t;-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 uix4k0t{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uix4k0t{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/esm/state-layer/state-layer-foundation.js

@@ -71,6 +71,9 @@ export class StateLayerFoundation {
         this._attached = false;
     }
     _onDeferredInitialize(evt) {
+        if (!this._adapter.isConnected) {
+            return;
+        }
         this._applyListeners();
         if ((evt === null || evt === void 0 ? void 0 : evt.type) === 'pointerenter') {
             // Manually trigger the pointerenter listener since this is in response to a pointerenter event already

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.0.0-next.16",
+  "version": "3.0.0-next.18",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,7 +13,7 @@
   "typings": "esm/index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@floating-ui/dom": "^1.5.3",
+    "@floating-ui/dom": "~1.5.3",
     "@material/animation": "^14.0.0",
     "@material/button": "^14.0.0",
     "@material/card": "^14.0.0",

package/styles/avatar/_core.scss

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/typography';
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host() {
+  contain: content;
+
+  display: inline-block;
+}
+
+@mixin base() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  overflow: hidden;
+
+  transition: height #{token(transition-duration)} #{token(transition-timing)}, 
+              width #{token(transition-duration)} #{token(transition-timing)};
+
+  border-radius: #{token(shape)};
+  box-sizing: border-box;
+  width: #{token(size)};
+  height: #{token(size)};
+
+  background-color: #{token(background)};
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  @include typography.style(subheading2);
+  color: #{token(color)};
+}
+
+@mixin base-with-image() {
+  background-color: inherit;
+}

package/styles/avatar/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/avatar/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: avatar;
+$_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/avatar/avatar.scss

@@ -3,14 +3,32 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
+
+//
+// Host
+//
 
 :host {
-  @include mixins.host;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
 
-@include mixins.core-styles;
+//
+// Base
+//
+
+.forge-avatar {
+  @include tokens;
+}
+
+.forge-avatar {
+  @include base;
+
+  &--image {
+    @include base-with-image;
+  }
+}

package/styles/badge/_core.scss

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+@use '../core/styles/typography';
+
+@forward './token-utils';
+
+@mixin host {
+  display: flex;
+  box-sizing: border-box;
+}
+
+@mixin base {
+  @include typography.style(label);
+
+  background: #{token(background)};
+  color: #{token(color)};
+
+  height: #{token(height)};
+  min-width: #{token(min-width)};
+  max-width: #{token(max-width)};
+
+  border-width: #{token(border-width)};
+  border-style: #{token(border-style)};
+  border-color: #{token(border-color)};
+
+  display: inline-flex;
+  align-items: center;
+  gap: #{token(gap)};
+  border-radius: #{token(shape)};
+  padding-inline: #{token(padding-inline)};
+  padding-block: #{token(padding-block)};
+  overflow: hidden;
+  box-sizing: border-box;
+  
+  pointer-events: none;
+  
+  transition: transform #{token(transition-duration)} #{token(transition-easing)};
+  
+  font-weight: #{token(font-weight)};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin dot {
+  @include override(height, dot-height);
+  @include override(min-width, auto, value);
+
+  padding: #{token(dot-padding)};
+  width: #{token(dot-width)};
+}
+
+@mixin hide {
+  transform: scale(0);
+}

package/styles/badge/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/badge/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: badge;
+$_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/badge/badge.scss

@@ -3,38 +3,124 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../theme';
-@use './mixins';
+@use './core' as *;
+@use '../core/styles/theme';
 
-@include mixins.core-styles;
+//
+// Host
+//
 
 :host {
-  @include mixins.host;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
 
-:host([positioned]) {
-  @include mixins.host-positioned;
+//
+// Base
+//
+
+.forge-badge {
+  @include tokens;
+}
+
+.forge-badge {
+  @include base;
+}
+
+//
+// Start/End slots
+//
+
+::slotted(:is([slot=start],[slot=end])) {
+  font-size: inherit;
 }
 
+//
+// Hide
+//
+
+:host([hide]) {
+  .forge-badge {
+    @include hide;
+  }
+}
+
+//
+// Dot
+//
+
 :host([dot]) {
-  top: 0.5rem;
+  .forge-badge {
+    @include dot;
+  }
   
   .forge-badge > slot {
     display: none;
   }
 }
 
-:host([static]) {
-  @include mixins.static;
+//
+// Themes
+//
+
+// General theme overrides
+@each $theme in [primary secondary tertiary success warning] {
+  :host([theme=#{$theme}]) {
+    .forge-badge {
+      @include override(background, theme.variable(#{$theme}-container), value);
+      @include override(color, theme.variable(on-#{$theme}-container), value);
+    }
+  }
+  
+  :host([strong][theme=#{$theme}]) {
+    .forge-badge {
+      @include override(background, theme.variable($theme), value);
+      @include override(color, theme.variable(on-#{$theme}), value);
+    }
+  }
+}
+
+// Map both "error" and "danger" for backwards compatibility with legacy "danger" theme
+:host(:not([strong]):is([theme=error],[theme=danger])) {
+  .forge-badge {
+    @include override(background, theme.variable(error-container), value);
+    @include override(color, theme.variable(error), value);
+  }
+}
+:host([strong]:is([theme=error],[theme=danger])) {
+  .forge-badge {
+    @include override(background, theme.variable(error), value);
+    @include override(color, theme.variable(on-error), value);
+  }
 }
 
-@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');
+// Map both "info" and "info-primary" for backwards compatibility with "info" theme
+:host(:not([strong]):is([theme=info],[theme=info-primary])) {
+  .forge-badge {
+    @include override(background, theme.variable(info-container), value);
+    @include override(color, theme.variable(on-info-container), value);
+  }
+}
+:host([strong]:is([theme=info],[theme=info-primary])) {
+  .forge-badge {
+    @include override(background, theme.variable(info), value);
+    @include override(color, theme.variable(on-info), value);
+  }
+}
+
+// Support "info-secondary" separately since it is not a core theme
+:host(:not([strong])[theme=info-secondary]) {
+  .forge-badge {
+    @include override(background, theme.variable(surface-container-low), value);
+    @include override(color, theme.variable(on-surface-container-low), value);
+  }
+}
+:host([strong][theme=info-secondary]) {
+  .forge-badge {
+    @include override(background, theme.variable(surface-inverse), value);
+    @include override(color, theme.variable(on-surface-inverse), value);
+  }
+}

package/styles/badge/index.scss

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

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;
+}