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

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

@@ -5,21 +5,21 @@
  */
 export declare const TOOLBAR_CONSTANTS: {
     elementName: "forge-toolbar";
+    observedAttributes: {
+        INVERTED: string;
+    };
     attributes: {
         INVERTED: string;
     };
     classes: {
-        INVERTED: string;
         TOOLBAR: string;
-        SECTION: string;
-        ALIGN_START: string;
-        ALIGN_CENTER: string;
-        ALIGN_END: string;
     };
     selectors: {
         TOOLBAR: string;
+        BEFORE_START: string;
         START_SLOT: string;
         CENTER_SLOT: string;
         END_SLOT: string;
+        AFTER_END: string;
     };
 };

package/esm/toolbar/toolbar-constants.js

@@ -5,25 +5,24 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}toolbar`;
-const attributes = {
+const observedAttributes = {
     INVERTED: 'inverted'
 };
+const attributes = Object.assign({}, observedAttributes);
 const classes = {
-    INVERTED: 'forge-toolbar--inverted',
-    TOOLBAR: 'forge-toolbar',
-    SECTION: 'forge-toolbar__section',
-    ALIGN_START: 'forge-toolbar__section--align-start',
-    ALIGN_CENTER: 'forge-toolbar__section--align-center',
-    ALIGN_END: 'forge-toolbar__section--align-end'
+    TOOLBAR: 'forge-toolbar'
 };
 const selectors = {
     TOOLBAR: `.${classes.TOOLBAR}`,
-    START_SLOT: `.${classes.SECTION}.${classes.ALIGN_START} > slot[name=start]`,
-    CENTER_SLOT: `.${classes.SECTION}.${classes.ALIGN_CENTER} > slot[name=center]`,
-    END_SLOT: `.${classes.SECTION}.${classes.ALIGN_END} > slot[name=end]`
+    BEFORE_START: `slot[name=before-start]`,
+    START_SLOT: `slot[name=start]`,
+    CENTER_SLOT: `slot[name=center]`,
+    END_SLOT: `slot[name=end]`,
+    AFTER_END: `slot[name=after-end]`
 };
 export const TOOLBAR_CONSTANTS = {
     elementName,
+    observedAttributes,
     attributes,
     classes,
     selectors

package/esm/toolbar/toolbar.d.ts

@@ -13,19 +13,48 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-toolbar>` custom element.
- *
  * @tag forge-toolbar
+ *
+ * @summary
+ * Toolbars allow you to place titles and actions within a container and align them to the start, center, or end of the toolbar.
+ * This component is useful as headers and footers within pages, dialogs, sections... etc. to ensure consistent layout and alignment.
+ *
+ * @property {boolean} inverted - Controls whether a bottom divider (default) or top divider (true) is used.
+ *
+ * @attribute {boolean} inverted - Controls whether a bottom divider (default) or top divider (true) is used.
+ * @attribute {boolean} no-divider - Hides the internal divider.
+ * @attribute {boolean} no-border - Deprecated. Use no-divider instead.
+ * @attribute {boolean} no-padding - Sets the internal padding style to 0.
+ * @attribute {boolean} auto-height - Forces the internal container to use height: auto for dynamic content that doesn't fit the static height.
+ *
+ * @cssproperty --forge-theme-height - Controls the height.
+ * @cssproperty --forge-theme-min-height - Controls the minimum height.
+ * @cssproperty --forge-theme-surface - Controls the background-color of the toolbar.
+ * @cssproperty --forge-toolbar-divider-width - Controls the divider width.
+ * @cssproperty --forge-toolbar-divider-style - Controls the divider style.
+ * @cssproperty --forge-toolbar-divider-color - Controls the divider color.
+ * @cssproperty --forge-toolbar-shape - Controls the border radius of the toolbar.
+ * @cssproperty --forge-toolbar-start-start-shape - Controls the border radius of the top left corner.
+ * @cssproperty --forge-toolbar-start-end-shape - Controls the border radius of the top right corner.
+ * @cssproperty --forge-toolbar-end-start-shape - Controls the border radius of the bottom left corner.
+ * @cssproperty --forge-toolbar-end-end-shape - Controls the border radius of the bottom right corner.
+ * @cssproperty --forge-toolbar-padding - Controls the left and right padding using the padding-inline style.
+ * @cssproperty --forge-toolbar-padding-block - Controls the top and bottom padding using the padding-block style.
+ * @cssproperty --forge-toolbar-padding-inline - Controls the left and right padding using the padding-block style.
+ *
+ * @csspart root - The root container element wrapping all slots and content.
+ * @csspart inner - The internal container element for the start, center, and end slots.
+ * @csspart before-section-start - The container element for the before-start slot.
+ * @csspart section-start - The container element for the start slot.
+ * @csspart section-center - The container element for the center slot.
+ * @csspart section-end - The container element for the end slot.
+ * @csspart after-section-end - The container element for the after-end slot.
  */
 export declare class ToolbarComponent extends BaseComponent implements IToolbarComponent {
     static get observedAttributes(): string[];
-    private _rootElement;
     private _inverted;
     constructor();
-    connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    private _initialize;
-    private _setInverted;
     get inverted(): boolean;
     set inverted(value: boolean);
 }

package/esm/toolbar/toolbar.js

@@ -4,55 +4,73 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, attachShadowTemplate, getShadowElement, coerceBoolean } from '@tylertech/forge-core';
+import { CustomElement, attachShadowTemplate, coerceBoolean } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
 import { TOOLBAR_CONSTANTS } from './toolbar-constants';
-const template = '<template><div class=\"forge-toolbar\" part=\"root\"><div class=\"forge-toolbar__section forge-toolbar__section--align-start\" part=\"section-start\"><slot name=\"start\"></slot><slot></slot></div><div class=\"forge-toolbar__section forge-toolbar__section--align-center\" part=\"section-center\"><slot name=\"center\"></slot></div><div class=\"forge-toolbar__section forge-toolbar__section--align-end\" part=\"section-end\"><slot name=\"end\"></slot></div></div></template>';
-const styles = '.forge-toolbar{min-height:56px;min-height:var(--forge-toolbar-min-height,56px);height:56px;height:var(--forge-toolbar-height,56px);padding-inline:16px;padding-inline:var(--forge-toolbar-padding,16px);border-bottom:1px solid var(--forge-theme-border-color,rgba(0,0,0,.12));border-bottom:var(--forge-toolbar-border-bottom,1px solid var(--forge-theme-border-color,rgba(0,0,0,.12)));border-top-left-radius:0;border-top-left-radius:var(--forge-toolbar-border-top-left-radius,0);border-top-right-radius:0;border-top-right-radius:var(--forge-toolbar-border-top-right-radius,0);border-bottom-left-radius:0;border-bottom-left-radius:var(--forge-toolbar-border-bottom-left-radius,0);border-bottom-right-radius:0;border-bottom-right-radius:var(--forge-toolbar-border-bottom-right-radius,0);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);background-color:var(--forge-theme-surface);display:grid;grid-template-columns:auto 1fr auto;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-toolbar__section{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-toolbar__section--align-start{grid-column:1}.forge-toolbar__section--align-center{-webkit-box-pack:center;justify-content:center;grid-column:2}.forge-toolbar__section--align-end{-webkit-box-pack:end;justify-content:flex-end;grid-column:3}.forge-toolbar--inverted{border-top:1px solid var(--forge-theme-border-color,rgba(0,0,0,.12));border-top:var(--forge-toolbar-border-top,1px solid var(--forge-theme-border-color,rgba(0,0,0,.12)));border-bottom:none}:host{display:block;contain:layout}:host([hidden]){display:none}:host([no-border]) .forge-toolbar{border:none}:host([no-padding]) .forge-toolbar{padding-inline:0;padding-inline:var(--forge-toolbar-padding,0)}:host([auto-height]) .forge-toolbar{height:auto;height:var(--forge-toolbar-height,auto)}.forge-toolbar ::slotted(h1){margin:0}.forge-toolbar ::slotted(h2){margin:0}.forge-toolbar ::slotted(h3){margin:0}.forge-toolbar ::slotted(h4){margin:0}.forge-toolbar ::slotted(h5){margin:0}.forge-toolbar ::slotted(h6){margin:0}.forge-toolbar ::slotted(p){margin:0}';
+const template = '<template><div class=\"forge-toolbar\" part=\"root\"><div class=\"section\" part=\"before-section-start\"><slot name=\"before-start\"></slot></div><div class=\"inner center\" part=\"inner\"><div class=\"section\" part=\"section-start\"><slot name=\"start\"></slot><slot></slot></div><div class=\"section center\" part=\"section-center\"><slot name=\"center\"></slot></div><div class=\"section end\" part=\"section-end\"><slot name=\"end\"></slot></div></div><div class=\"section end\" part=\"before-section-start\"><slot name=\"after-end\"></slot></div></div></template>';
+const styles = ':host{display:block;contain:layout}:host([hidden]){display:none}.forge-toolbar{--_toolbar-background:var(--forge-toolbar-background, var(--forge-theme-surface, #ffffff));--_toolbar-height:var(--forge-toolbar-height, 56px);--_toolbar-min-height:var(--forge-toolbar-min-height, var(--_toolbar-height));--_toolbar-divider-width:var(--forge-toolbar-divider-width, var(--forge-border-thin, 1px));--_toolbar-divider-style:var(--forge-toolbar-divider-style, solid);--_toolbar-divider-color:var(--forge-toolbar-divider-color, var(--forge-theme-outline, #e0e0e0));--_toolbar-shape:var(--forge-toolbar-shape, var(--forge-shape-medium, 4px));--_toolbar-start-start-shape:var(--forge-toolbar-start-start-shape, var(--_toolbar-shape));--_toolbar-start-end-shape:var(--forge-toolbar-start-end-shape, var(--_toolbar-shape));--_toolbar-end-start-shape:var(--forge-toolbar-end-start-shape, 0);--_toolbar-end-end-shape:var(--forge-toolbar-end-end-shape, 0);--_toolbar-padding:var(--forge-toolbar-padding, var(--forge-spacing-medium, 16px));--_toolbar-padding-block:var(--forge-toolbar-padding-block, 0);--_toolbar-padding-inline:var(--forge-toolbar-padding-inline, var(--_toolbar-padding))}.forge-toolbar{display:grid;grid-template-columns:auto 1fr auto;height:var(--_toolbar-height);min-height:var(--_toolbar-min-height);-webkit-box-sizing:border-box;box-sizing:border-box;padding-inline:0;border-block-end-width:var(--_toolbar-divider-width);border-block-end-style:var(--_toolbar-divider-style);border-block-end-color:var(--_toolbar-divider-color);border-start-start-radius:var(--_toolbar-start-start-shape);border-start-end-radius:var(--_toolbar-start-end-shape);border-end-start-radius:var(--_toolbar-end-start-shape);border-end-end-radius:var(--_toolbar-end-end-shape);background:var(--_toolbar-background)}.inner{display:grid;grid-template-columns:auto 1fr auto;padding-inline:var(--_toolbar-padding-inline);padding-block:var(--_toolbar-padding-block);-webkit-box-sizing:border-box;box-sizing:border-box}.section{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.section.center{-webkit-box-pack:center;justify-content:center}.section.end{-webkit-box-pack:end;justify-content:end}:host([inverted]) .forge-toolbar{--_toolbar-start-start-shape:var(--forge-toolbar-start-start-shape, 0);--_toolbar-start-end-shape:var(--forge-toolbar-start-end-shape, 0);--_toolbar-end-start-shape:var(--_toolbar-shape);--_toolbar-end-end-shape:var(--_toolbar-shape);-webkit-border-after:none;border-block-end:none;border-block-start-width:var(--_toolbar-divider-width);border-block-start-style:var(--_toolbar-divider-style);border-block-start-color:var(--_toolbar-divider-color)}:host(:is([no-divider],[no-border])) .forge-toolbar{border:none}:host([no-padding]) .forge-toolbar{--_toolbar-padding:var(--forge-toolbar-padding, 0)}:host([auto-height]) .forge-toolbar{--_toolbar-height:var(--forge-toolbar-height, auto)}::slotted(:is(h1,h2,h3,h4,h5,h6,p)){margin:0}';
 /**
- * The web component class behind the `<forge-toolbar>` custom element.
- *
  * @tag forge-toolbar
+ *
+ * @summary
+ * Toolbars allow you to place titles and actions within a container and align them to the start, center, or end of the toolbar.
+ * This component is useful as headers and footers within pages, dialogs, sections... etc. to ensure consistent layout and alignment.
+ *
+ * @property {boolean} inverted - Controls whether a bottom divider (default) or top divider (true) is used.
+ *
+ * @attribute {boolean} inverted - Controls whether a bottom divider (default) or top divider (true) is used.
+ * @attribute {boolean} no-divider - Hides the internal divider.
+ * @attribute {boolean} no-border - Deprecated. Use no-divider instead.
+ * @attribute {boolean} no-padding - Sets the internal padding style to 0.
+ * @attribute {boolean} auto-height - Forces the internal container to use height: auto for dynamic content that doesn't fit the static height.
+ *
+ * @cssproperty --forge-theme-height - Controls the height.
+ * @cssproperty --forge-theme-min-height - Controls the minimum height.
+ * @cssproperty --forge-theme-surface - Controls the background-color of the toolbar.
+ * @cssproperty --forge-toolbar-divider-width - Controls the divider width.
+ * @cssproperty --forge-toolbar-divider-style - Controls the divider style.
+ * @cssproperty --forge-toolbar-divider-color - Controls the divider color.
+ * @cssproperty --forge-toolbar-shape - Controls the border radius of the toolbar.
+ * @cssproperty --forge-toolbar-start-start-shape - Controls the border radius of the top left corner.
+ * @cssproperty --forge-toolbar-start-end-shape - Controls the border radius of the top right corner.
+ * @cssproperty --forge-toolbar-end-start-shape - Controls the border radius of the bottom left corner.
+ * @cssproperty --forge-toolbar-end-end-shape - Controls the border radius of the bottom right corner.
+ * @cssproperty --forge-toolbar-padding - Controls the left and right padding using the padding-inline style.
+ * @cssproperty --forge-toolbar-padding-block - Controls the top and bottom padding using the padding-block style.
+ * @cssproperty --forge-toolbar-padding-inline - Controls the left and right padding using the padding-block style.
+ *
+ * @csspart root - The root container element wrapping all slots and content.
+ * @csspart inner - The internal container element for the start, center, and end slots.
+ * @csspart before-section-start - The container element for the before-start slot.
+ * @csspart section-start - The container element for the start slot.
+ * @csspart section-center - The container element for the center slot.
+ * @csspart section-end - The container element for the end slot.
+ * @csspart after-section-end - The container element for the after-end slot.
  */
 let ToolbarComponent = class ToolbarComponent extends BaseComponent {
     static get observedAttributes() {
-        return [
-            TOOLBAR_CONSTANTS.attributes.INVERTED
-        ];
+        return Object.values(TOOLBAR_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
         this._inverted = false;
         attachShadowTemplate(this, template, styles);
-        this._rootElement = getShadowElement(this, TOOLBAR_CONSTANTS.selectors.TOOLBAR);
-    }
-    connectedCallback() {
-        this._initialize();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case TOOLBAR_CONSTANTS.attributes.INVERTED:
+            case TOOLBAR_CONSTANTS.observedAttributes.INVERTED:
                 this.inverted = coerceBoolean(newValue);
                 break;
         }
     }
-    _initialize() {
-        this._setInverted(this._inverted);
-    }
-    _setInverted(isInverted) {
-        if (isInverted) {
-            this._rootElement.classList.add(TOOLBAR_CONSTANTS.classes.INVERTED);
-        }
-        else {
-            this._rootElement.classList.remove(TOOLBAR_CONSTANTS.classes.INVERTED);
-        }
-    }
     get inverted() {
         return this._inverted;
     }
     set inverted(value) {
-        this._inverted = value;
-        this._setInverted(this._inverted);
+        if (this._inverted !== value) {
+            this._inverted = value;
+            this.toggleAttribute(TOOLBAR_CONSTANTS.attributes.INVERTED, this._inverted);
+        }
     }
 };
 ToolbarComponent = __decorate([

package/esm/tooltip/tooltip.js

@@ -14,7 +14,7 @@ import { coerceStringToArray } from '../core/utils/utils';
 import { WithDefaultAria } from '../core/mixins/internals/with-default-aria';
 import { WithElementInternals } from '../core/mixins/internals/with-element-internals';
 const template = '<template><div class=\"forge-tooltip\" part=\"surface\"><slot></slot><div class=\"arrow\" part=\"arrow\"></div></div></template>';
-const styles = '@-webkit-keyframes slidein{from{opacity:0;-webkit-transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y));transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@keyframes slidein{from{opacity:0;-webkit-transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y));transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}:host{display:contents;pointer-events:none}:host([hidden]){display:none}.forge-tooltip{--_tooltip-background:var(--forge-tooltip-background, var(--forge-theme-surface-inverse, #333333));--_tooltip-color:var(--forge-tooltip-color, var(--forge-theme-on-surface-inverse, #ffffff));--_tooltip-shape:var(--forge-tooltip-shape, var(--forge-shape-medium, 4px));--_tooltip-padding:var(--forge-tooltip-padding, var(--forge-spacing-xsmall, 8px));--_tooltip-padding-block:var(--forge-tooltip-padding-block, var(--_tooltip-padding));--_tooltip-padding-inline:var(--forge-tooltip-padding-inline, var(--_tooltip-padding));--_tooltip-width:var(--forge-tooltip-width, max-content);--_tooltip-max-width:var(--forge-tooltip-max-width, 320px);--_tooltip-elevation:var(--forge-tooltip-elevation, var(--forge-theme-popup-elevation, var(--forge-theme-surface-bright-shadow)));--_tooltip-content-align:var(--forge-tooltip-content-align, center);--_tooltip-border-width:var(--forge-tooltip-border-width, 0);--_tooltip-border-style:var(--forge-tooltip-border-style, solid);--_tooltip-border-color:var(--forge-tooltip-border-color, var(--forge-theme-outline, #e0e0e0));--_tooltip-animation-timing:var(--forge-tooltip-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_tooltip-animation-duration:var(--forge-tooltip-animation-duration, var(--forge-animation-duration-short3, 150ms));--_tooltip-animation-offset:var(--forge-tooltip-animation-offset, 24px);--_tooltip-arrow-size:var(--forge-tooltip-arrow-size, 8px);--_tooltip-arrow-height:var(--forge-tooltip-arrow-height, var(--_tooltip-arrow-size));--_tooltip-arrow-width:var(--forge-tooltip-arrow-width, var(--_tooltip-arrow-size));--_tooltip-arrow-shape:var(--forge-tooltip-arrow-shape, var(--forge-shape-small, 2px));--_tooltip-arrow-rotation:var(--forge-tooltip-arrow-rotation, 0deg);--_tooltip-arrow-top-rotation:var(--forge-tooltip-arrow-top-rotation, 315deg);--_tooltip-arrow-right-rotation:var(--forge-tooltip-arrow-right-rotation, 45deg);--_tooltip-arrow-bottom-rotation:var(--forge-tooltip-arrow-bottom-rotation, 135deg);--_tooltip-arrow-left-rotation:var(--forge-tooltip-arrow-left-rotation, 225deg)}.forge-tooltip{-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);position:relative;background:var(--_tooltip-background);color:var(--_tooltip-color);border-radius:var(--_tooltip-shape);border-width:var(--_tooltip-border-width);border-style:var(--_tooltip-border-style);border-color:var(--_tooltip-border-color);padding-block:var(--_tooltip-padding-block);padding-inline:var(--_tooltip-padding-inline);-webkit-box-shadow:var(--_tooltip-elevation);box-shadow:var(--_tooltip-elevation);width:var(--_tooltip-width);max-width:var(--_tooltip-max-width);pointer-events:none;text-align:var(--_tooltip-content-align);line-height:normal;-webkit-animation-duration:var(--_tooltip-animation-duration);animation-duration:var(--_tooltip-animation-duration);-webkit-animation-timing-function:var(--_tooltip-animation-timing);animation-timing-function:var(--_tooltip-animation-timing);-webkit-animation-name:slidein;animation-name:slidein;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(:not([open])) .forge-tooltip{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}.arrow{position:absolute;contain:strict;background-color:inherit;height:var(--_tooltip-arrow-height);width:var(--_tooltip-arrow-width);-webkit-box-shadow:inherit;box-shadow:inherit;border:inherit;border-end-start-radius:var(--_tooltip-arrow-shape);rotate:var(--_tooltip-arrow-rotation);-webkit-clip-path:var(--_tooltip-arrow-clip-path);clip-path:var(--_tooltip-arrow-clip-path);--_tooltip-arrow-translate-x:0;--_tooltip-arrow-translate-y:0;--_tooltip-arrow-clip-path:polygon(0 0, 0 100%, 100% 100%)}.forge-tooltip{--_tooltip-slidein-x:0;--_tooltip-slidein-y:0}forge-overlay[open][position-placement^=top] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=top] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-top-rotation);-webkit-margin-after:var(--_tooltip-border-width);margin-block-end:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=right] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=right] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-right-rotation);-webkit-margin-start:var(--_tooltip-border-width);margin-inline-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=bottom] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=bottom] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-bottom-rotation);-webkit-margin-before:var(--_tooltip-border-width);margin-block-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=left] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=left] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-left-rotation);-webkit-margin-end:var(--_tooltip-border-width);margin-inline-end:var(--_tooltip-border-width)}';
+const styles = '@-webkit-keyframes slidein{from{opacity:0;-webkit-transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y));transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@keyframes slidein{from{opacity:0;-webkit-transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y));transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}:host{display:contents;pointer-events:none}:host([hidden]){display:none}.forge-tooltip{--_tooltip-background:var(--forge-tooltip-background, var(--forge-theme-surface-inverse, #333333));--_tooltip-color:var(--forge-tooltip-color, var(--forge-theme-on-surface-inverse, #ffffff));--_tooltip-shape:var(--forge-tooltip-shape, var(--forge-shape-medium, 4px));--_tooltip-padding:var(--forge-tooltip-padding, var(--forge-spacing-xsmall, 8px));--_tooltip-padding-block:var(--forge-tooltip-padding-block, var(--_tooltip-padding));--_tooltip-padding-inline:var(--forge-tooltip-padding-inline, var(--_tooltip-padding));--_tooltip-width:var(--forge-tooltip-width, max-content);--_tooltip-max-width:var(--forge-tooltip-max-width, 320px);--_tooltip-elevation:var(--forge-tooltip-elevation, var(--forge-theme-popup-elevation, var(--forge-theme-surface-bright-shadow)));--_tooltip-content-align:var(--forge-tooltip-content-align, center);--_tooltip-border-width:var(--forge-tooltip-border-width, 0);--_tooltip-border-style:var(--forge-tooltip-border-style, solid);--_tooltip-border-color:var(--forge-tooltip-border-color, var(--forge-theme-outline, #e0e0e0));--_tooltip-animation-timing:var(--forge-tooltip-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_tooltip-animation-duration:var(--forge-tooltip-animation-duration, var(--forge-animation-duration-short3, 150ms));--_tooltip-animation-offset:var(--forge-tooltip-animation-offset, 24px);--_tooltip-arrow-size:var(--forge-tooltip-arrow-size, 8px);--_tooltip-arrow-height:var(--forge-tooltip-arrow-height, var(--_tooltip-arrow-size));--_tooltip-arrow-width:var(--forge-tooltip-arrow-width, var(--_tooltip-arrow-size));--_tooltip-arrow-shape:var(--forge-tooltip-arrow-shape, var(--forge-shape-small, 2px));--_tooltip-arrow-rotation:var(--forge-tooltip-arrow-rotation, 0deg);--_tooltip-arrow-top-rotation:var(--forge-tooltip-arrow-top-rotation, 315deg);--_tooltip-arrow-right-rotation:var(--forge-tooltip-arrow-right-rotation, 45deg);--_tooltip-arrow-bottom-rotation:var(--forge-tooltip-arrow-bottom-rotation, 135deg);--_tooltip-arrow-left-rotation:var(--forge-tooltip-arrow-left-rotation, 225deg)}.forge-tooltip{-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);position:relative;background:var(--_tooltip-background);color:var(--_tooltip-color);border-radius:var(--_tooltip-shape);border-width:var(--_tooltip-border-width);border-style:var(--_tooltip-border-style);border-color:var(--_tooltip-border-color);padding-block:var(--_tooltip-padding-block);padding-inline:var(--_tooltip-padding-inline);-webkit-box-shadow:var(--_tooltip-elevation);box-shadow:var(--_tooltip-elevation);width:var(--_tooltip-width);max-width:var(--_tooltip-max-width);pointer-events:none;text-align:var(--_tooltip-content-align);line-height:normal;white-space:normal;-webkit-animation-duration:var(--_tooltip-animation-duration);animation-duration:var(--_tooltip-animation-duration);-webkit-animation-timing-function:var(--_tooltip-animation-timing);animation-timing-function:var(--_tooltip-animation-timing);-webkit-animation-name:slidein;animation-name:slidein;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(:not([open])) .forge-tooltip{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}.arrow{position:absolute;contain:strict;background-color:inherit;height:var(--_tooltip-arrow-height);width:var(--_tooltip-arrow-width);-webkit-box-shadow:inherit;box-shadow:inherit;border:inherit;border-end-start-radius:var(--_tooltip-arrow-shape);rotate:var(--_tooltip-arrow-rotation);-webkit-clip-path:var(--_tooltip-arrow-clip-path);clip-path:var(--_tooltip-arrow-clip-path);--_tooltip-arrow-translate-x:0;--_tooltip-arrow-translate-y:0;--_tooltip-arrow-clip-path:polygon(0 0, 0 100%, 100% 100%)}.forge-tooltip{--_tooltip-slidein-x:0;--_tooltip-slidein-y:0}forge-overlay[open][position-placement^=top] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=top] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-top-rotation);-webkit-margin-after:var(--_tooltip-border-width);margin-block-end:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=right] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=right] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-right-rotation);-webkit-margin-start:var(--_tooltip-border-width);margin-inline-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=bottom] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=bottom] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-bottom-rotation);-webkit-margin-before:var(--_tooltip-border-width);margin-block-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=left] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=left] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-left-rotation);-webkit-margin-end:var(--_tooltip-border-width);margin-inline-end:var(--_tooltip-border-width)}';
 const BaseClass = WithDefaultAria(WithElementInternals(BaseComponent));
 /**
  * @tag forge-tooltip

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.0.0-next.19",
+  "version": "3.0.0-next.20",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -30,7 +30,7 @@
     "@material/shape": "^14.0.0",
     "@material/theme": "^14.0.0",
     "@material/typography": "^14.0.0",
-    "@tylertech/forge-core": "^2.3.0",
+    "@tylertech/forge-core": "^2.3.1",
     "@tylertech/tyler-icons": "^1.12.0",
     "imask": "^6.6.1",
     "tslib": "^2.3.1"

package/{dist/esm/chunks/chunk.SKLCDWYQ.js → styles/avatar/index.scss}

@@ -3,4 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-//# sourceMappingURL=chunk.SKLCDWYQ.js.map
+@forward './core';

package/styles/badge/_core.scss

@@ -14,7 +14,7 @@
 }
 
 @mixin base {
-  @include typography.style(label);
+  @include typography.style(label1);
 
   background: #{token(background)};
   color: #{token(color)};

package/styles/button/button.scss

@@ -16,7 +16,7 @@
 $host-tokens: [display disabled-cursor];
 
 :host {
-  @include tokens($includes: $host-tokens);;
+  @include tokens($includes: $host-tokens);
 }
 
 :host {

package/styles/button-area/_core.scss

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: block;
+  position: relative;
+}
+
+@mixin base {
+  position: relative;
+  overflow: hidden;
+}
+
+@mixin enabled {
+  cursor: #{token(cursor)};
+}
+@mixin disabled {
+  cursor: #{token(disabled-cursor)};
+}

package/styles/button-area/_token-utils.scss

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

@@ -3,14 +3,59 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
+@use '../state-layer';
+@use '../focus-indicator';
+@use '../utils/mixins' as utils;
 
-@include mixins.core-styles;
+//
+// Host
+//
 
 :host {
-  @include mixins.host;
+  @include host;
+
+  .forge-button-area {
+    @include enabled;
+  }
 }
 
 :host([hidden]) {
   display: none;
 }
+
+:host([disabled]) {
+  .forge-button-area {
+    @include disabled;
+  }
+}
+
+//
+// Base
+//
+
+.forge-button-area {
+  @include tokens;
+}
+
+.forge-button-area {
+  @include base;
+
+  .button {
+    @include utils.visually-hidden;
+  }
+}
+
+forge-focus-indicator {
+  z-index: 1; // Fixes an animation artifact in Safari
+
+  @include focus-indicator.provide-theme((
+    color: #{token(focus-indicator-color)},
+    outward-offset: #{token(focus-indicator-offset)}
+  ));
+}
+
+forge-state-layer {
+  @include state-layer.provide-theme(( color: #{token(primary-color)} ));
+  border-radius: inherit;
+}

package/styles/{divider/_variables.scss → button-area/index.scss}

@@ -3,5 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-$width: 1px !default;
-$margin: 0 !default;
+@forward './core';

package/styles/card/_mixins.scss

@@ -37,6 +37,7 @@
   @include theme.property(border-color, border-color);
 
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 @mixin raised() {

package/styles/checkbox/_core.scss

@@ -152,7 +152,7 @@
 }
 
 @mixin label {
-  @include typography.style(label);
+  @include typography.style(label1);
 
   &:empty {
     display: none;

package/styles/chips/chip/_core.scss

@@ -0,0 +1,137 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/typography';
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: inline-block;
+}
+
+@mixin base {
+  position: relative;
+
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: #{token(height)};
+
+  border-width: #{token(border-width)};
+  border-style: #{token(border-style)};
+  border-color: #{token(border-color)};
+  border-radius: #{token(shape)};
+
+  background: #{token(background)};
+  color: #{token(color)};
+
+  transition-property: background-color, color;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-easing)};
+}
+
+@mixin trigger {
+  @include typography.style(button);
+  
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: #{token(spacing)};
+
+  box-sizing: border-box;
+  height: 100%;
+  padding-inline: #{token(padding-inline)};
+  padding-block: #{token(padding-block)};
+
+  cursor: #{token(cursor)};
+  
+  z-index: 0;
+  
+  text-decoration: none;
+  border: none;
+  
+  background: inherit;
+  color: inherit;
+  -webkit-tap-highlight-color: transparent;
+  
+  border-radius: #{token(shape)};
+  outline: none;
+}
+
+@mixin remove-button {
+  padding-inline: #{token(remove-button-spacing)};
+}
+
+@mixin selected {
+  @include override(background, selected-background);
+  @include override(color, selected-color);
+}
+
+@mixin invalid {
+  @include override(color, invalid-color);
+}
+
+@mixin invalid-selected {
+  @include override(background, invalid-selected-background);
+  @include override(color, invalid-selected-color);
+}
+
+@mixin field {
+  @include override(background, field-background);
+  @include override(color, field-color);
+  @include override(border-color, field-border-color);
+  @include override(shape, field-shape);
+  @include override(cursor, field-cursor);
+}
+
+@mixin dense {
+  @include override(height, dense-height);
+  @include override(padding-inline, dense-padding-inline);
+  @include override(spacing, dense-spacing);
+}
+
+@mixin disabled {
+  opacity: #{token(disabled-opacity)};
+}
+
+@mixin trigger-disabled {
+  cursor: #{token(disabled-cursor)};
+}
+
+@mixin checkmark-base {
+  height: #{token(checkmark-size)};
+
+svg {
+    width: 0;
+    height: #{token(checkmark-size)};
+    transition-property: width;
+    transition-duration: #{token(transition-duration)};
+    transition-timing-function: #{token(transition-easing)};
+
+    path {
+      stroke: #{token(checkmark-color)};
+      transition-property: stroke-dashoffset;
+      transition-duration: #{token(transition-duration)};
+      transition-timing-function: #{token(transition-easing)};
+      stroke-width: 2px;
+      stroke-dashoffset: 29.7833385;
+      stroke-dasharray: 29.7833385;
+    }
+  }
+}
+
+@mixin checkmark-selected {
+  padding-inline-start: #{token(checkmark-spacing)};
+
+  svg {
+    width: #{token(checkmark-size)};
+
+    path {
+      transition-delay: #{token(checkmark-transition-delay)};
+      stroke-dashoffset: 0;
+    }
+  }
+}

package/styles/chips/chip/_token-utils.scss

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