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

package/esm/tooltip/tooltip.d.ts

@@ -3,49 +3,116 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { TooltipBuilder } from './tooltip-constants';
-import { PopupPlacement } from '../popup';
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-export interface ITooltipComponent extends IBaseComponent {
-    text: string;
-    builder: TooltipBuilder | undefined;
+import { TooltipPlacement, TooltipTriggerType, TooltipType } from './tooltip-constants';
+import { BaseComponent } from '../core/base/base-component';
+import { IWithDefaultAria } from '../core/mixins/internals/with-default-aria';
+import { IWithElementInternals } from '../core/mixins/internals/with-element-internals';
+import { OverlayFlipState } from '../overlay/overlay-constants';
+import { PositionPlacement } from '../core/utils/position-utils';
+export interface ITooltipComponent extends IWithDefaultAria, IWithElementInternals {
+    open: boolean;
+    type: TooltipType;
+    anchor: string;
+    anchorElement: HTMLElement | null;
+    /** @deprecated use `anchor` instead */
     target: string;
+    placement: `${TooltipPlacement}`;
+    /** @deprecated use `placement` instead */
+    position: `${TooltipPlacement}`;
     delay: number;
-    position: PopupPlacement;
-    open: boolean;
-    hide(): void;
-    tooltipElement: HTMLElement | null;
+    offset: number;
+    flip: OverlayFlipState;
+    boundary: string | null;
+    boundaryElement: HTMLElement | null;
+    fallbackPlacements: PositionPlacement[] | null;
+    triggerType: TooltipTriggerType | TooltipTriggerType[];
 }
 declare global {
     interface HTMLElementTagNameMap {
         'forge-tooltip': ITooltipComponent;
     }
 }
+declare const BaseClass: import("..").AbstractConstructor<import("../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("..").AbstractConstructor<import("../core/mixins/internals/with-element-internals").WithElementInternalsContract> & typeof BaseComponent;
 /**
- * The custom element class behind the `<forge-tooltip>` element.
- *
  * @tag forge-tooltip
+ *
+ * @summary Tooltips display information related to an element when the user hovers over an element.
+ *
+ * @property {boolean} open - Whether or not the tooltip is open.
+ * @property {TooltipType} type - The type of tooltip. Valid values are `presentation` (default), `label`, and `description`.
+ * @property {string} anchor - The id of the element that the tooltip is anchored to.
+ * @property {TooltipPlacement} placement - The placement of the tooltip relative to the anchor element.
+ * @property {number} delay - The delay in milliseconds before the tooltip is shown.
+ * @property {number} offset - The offset in pixels between the tooltip and the anchor element.
+ * @property {OverlayFlipState} - flip - How the tooltip should place itself if there is not enough space at the desired placement.
+ * @property {string | null} boundary - The id of the element that the tooltip should be constrained to.
+ * @property {HTMLElement | null} boundaryElement - The element that the tooltip should be constrained to.
+ * @property {PositionPlacement[] | null} fallbackPlacements - The fallback placements of the tooltip relative to the anchor element.
+ * @property {TooltipTriggerType | TooltipTriggerType[]} triggerType - The trigger type(s) that will open the tooltip. Valid values are `hover` (default), `longpress`, and `focus`.
+ *
+ * @attribute {boolean} open - Whether or not the tooltip is open.
+ * @attribute {TooltipType} type - The type of tooltip. Valid values are `presentation` (default), `label`, and `description`.
+ * @attribute {string} anchor - The id of the element that the tooltip is anchored to.
+ * @attribute {TooltipPlacement} placement - The placement of the tooltip relative to the anchor element.
+ * @attribute {number} delay - The delay in milliseconds before the tooltip is shown.
+ * @attribute {number} offset - The offset in pixels between the tooltip and the anchor element.
+ * @attribute {OverlayFlipState} flip - How the tooltip should place itself if there is not enough space at the desired placement.
+ * @attribute {string | null} boundary - The id of the element that the tooltip should be constrained to.
+ * @attribute {PositionPlacement[]} fallbackPlacements - The fallback placements of the tooltip relative to the anchor element.
+ *
+ * @cssproperty --forge-tooltip-background - The background color of the tooltip surface.
+ * @cssproperty --forge-tooltip-color - The text color of the tooltip surface.
+ * @cssproperty --forge-tooltip-shape - The shape of the tooltip surface.
+ * @cssproperty --forge-tooltip-padding - The padding of the tooltip surface.
+ * @cssproperty --forge-tooltip-padding-block - The block padding of the tooltip surface.
+ * @cssproperty --forge-tooltip-padding-inline - The inline padding of the tooltip surface.
+ * @cssproperty --forge-tooltip-max-width - The maximum width of the tooltip surface.
+ * @cssproperty --forge-tooltip-elevation - The elevation of the tooltip surface.
+ * @cssproperty --forge-tooltip-border-width - The border width of the tooltip surface.
+ * @cssproperty --forge-tooltip-border-style - The border style of the tooltip surface.
+ * @cssproperty --forge-tooltip-border-color - The border color of the tooltip surface.
+ * @cssproperty --forge-tooltip-animation-timing - The animation timing function of the tooltip surface.
+ * @cssproperty --forge-tooltip-animation-duration - The animation duration of the tooltip surface.
+ * @cssproperty --forge-tooltip-animation-offset - The animation offset of the tooltip surface.
+ * @cssproperty --forge-tooltip-arrow-size - The size of the tooltip arrow.
+ * @cssproperty --forge-tooltip-arrow-height - The height of the tooltip arrow.
+ * @cssproperty --forge-tooltip-arrow-width - The width of the tooltip arrow.
+ * @cssproperty --forge-tooltip-arrow-shape - The shape of the tooltip arrow.
+ * @cssproperty --forge-tooltip-arrow-clip-path - The clip path of the tooltip arrow.
+ * @cssproperty --forge-tooltip-arrow-rotation - The rotation of the tooltip arrow.
+ * @cssproperty --forge-tooltip-arrow-top-rotation - The rotation of the tooltip arrow when the tooltip is placed on top.
+ * @cssproperty --forge-tooltip-arrow-right-rotation - The rotation of the tooltip arrow when the tooltip is placed on the right.
+ * @cssproperty --forge-tooltip-arrow-bottom-rotation - The rotation of the tooltip arrow when the tooltip is placed on the bottom.
+ * @cssproperty --forge-tooltip-arrow-left-rotation- The rotation of the tooltip arrow when the tooltip is placed on the left.
+ *
+ * @slot - The content to display in the tooltip.
+ *
+ * @csspart surface - The tooltip surface.
+ * @csspart arrow - The tooltip arrow.
+ * @csspart overlay - The overlay surface.
  */
-export declare class TooltipComponent extends BaseComponent implements ITooltipComponent {
+export declare class TooltipComponent extends BaseClass implements ITooltipComponent {
     static get observedAttributes(): string[];
     private _foundation;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** Gets/sets the tooltip text. */
-    text: string;
-    /** Sets the tooltip builder function for display complex tooltip content. */
-    builder: TooltipBuilder | undefined;
-    /** Gets/sets the target element selector. */
+    open: boolean;
+    type: TooltipType;
+    anchor: string;
+    anchorElement: HTMLElement | null;
+    /** @deprecated use `anchor` instead */
     target: string;
-    /** The tooltip display delay in milliseconds. */
+    placement: `${TooltipPlacement}`;
+    /** @deprecated use `placement` instead */
+    position: `${TooltipPlacement}`;
     delay: number;
-    /** Gets/sets the position. */
-    position: `${PopupPlacement}`;
-    /** Gets the open state of the tooltip. */
-    open: boolean;
-    tooltipElement: HTMLElement | null;
-    /** Hides the tooltip if it's open. */
-    hide(): void;
+    offset: number;
+    flip: OverlayFlipState;
+    boundary: string | null;
+    boundaryElement: HTMLElement | null;
+    fallbackPlacements: PositionPlacement[] | null;
+    triggerType: TooltipTriggerType | TooltipTriggerType[];
 }
+export {};

package/esm/tooltip/tooltip.js

@@ -4,81 +4,179 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, coerceNumber, hideElementVisually, FoundationProperty } from '@tylertech/forge-core';
+import { CustomElement, coerceNumber, FoundationProperty, coerceBoolean, attachShadowTemplate } from '@tylertech/forge-core';
 import { TooltipAdapter } from './tooltip-adapter';
 import { TooltipFoundation } from './tooltip-foundation';
 import { TOOLTIP_CONSTANTS } from './tooltip-constants';
 import { BaseComponent } from '../core/base/base-component';
+import { OverlayComponent } from '../overlay/overlay';
+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 BaseClass = WithDefaultAria(WithElementInternals(BaseComponent));
 /**
- * The custom element class behind the `<forge-tooltip>` element.
- *
  * @tag forge-tooltip
+ *
+ * @summary Tooltips display information related to an element when the user hovers over an element.
+ *
+ * @property {boolean} open - Whether or not the tooltip is open.
+ * @property {TooltipType} type - The type of tooltip. Valid values are `presentation` (default), `label`, and `description`.
+ * @property {string} anchor - The id of the element that the tooltip is anchored to.
+ * @property {TooltipPlacement} placement - The placement of the tooltip relative to the anchor element.
+ * @property {number} delay - The delay in milliseconds before the tooltip is shown.
+ * @property {number} offset - The offset in pixels between the tooltip and the anchor element.
+ * @property {OverlayFlipState} - flip - How the tooltip should place itself if there is not enough space at the desired placement.
+ * @property {string | null} boundary - The id of the element that the tooltip should be constrained to.
+ * @property {HTMLElement | null} boundaryElement - The element that the tooltip should be constrained to.
+ * @property {PositionPlacement[] | null} fallbackPlacements - The fallback placements of the tooltip relative to the anchor element.
+ * @property {TooltipTriggerType | TooltipTriggerType[]} triggerType - The trigger type(s) that will open the tooltip. Valid values are `hover` (default), `longpress`, and `focus`.
+ *
+ * @attribute {boolean} open - Whether or not the tooltip is open.
+ * @attribute {TooltipType} type - The type of tooltip. Valid values are `presentation` (default), `label`, and `description`.
+ * @attribute {string} anchor - The id of the element that the tooltip is anchored to.
+ * @attribute {TooltipPlacement} placement - The placement of the tooltip relative to the anchor element.
+ * @attribute {number} delay - The delay in milliseconds before the tooltip is shown.
+ * @attribute {number} offset - The offset in pixels between the tooltip and the anchor element.
+ * @attribute {OverlayFlipState} flip - How the tooltip should place itself if there is not enough space at the desired placement.
+ * @attribute {string | null} boundary - The id of the element that the tooltip should be constrained to.
+ * @attribute {PositionPlacement[]} fallbackPlacements - The fallback placements of the tooltip relative to the anchor element.
+ *
+ * @cssproperty --forge-tooltip-background - The background color of the tooltip surface.
+ * @cssproperty --forge-tooltip-color - The text color of the tooltip surface.
+ * @cssproperty --forge-tooltip-shape - The shape of the tooltip surface.
+ * @cssproperty --forge-tooltip-padding - The padding of the tooltip surface.
+ * @cssproperty --forge-tooltip-padding-block - The block padding of the tooltip surface.
+ * @cssproperty --forge-tooltip-padding-inline - The inline padding of the tooltip surface.
+ * @cssproperty --forge-tooltip-max-width - The maximum width of the tooltip surface.
+ * @cssproperty --forge-tooltip-elevation - The elevation of the tooltip surface.
+ * @cssproperty --forge-tooltip-border-width - The border width of the tooltip surface.
+ * @cssproperty --forge-tooltip-border-style - The border style of the tooltip surface.
+ * @cssproperty --forge-tooltip-border-color - The border color of the tooltip surface.
+ * @cssproperty --forge-tooltip-animation-timing - The animation timing function of the tooltip surface.
+ * @cssproperty --forge-tooltip-animation-duration - The animation duration of the tooltip surface.
+ * @cssproperty --forge-tooltip-animation-offset - The animation offset of the tooltip surface.
+ * @cssproperty --forge-tooltip-arrow-size - The size of the tooltip arrow.
+ * @cssproperty --forge-tooltip-arrow-height - The height of the tooltip arrow.
+ * @cssproperty --forge-tooltip-arrow-width - The width of the tooltip arrow.
+ * @cssproperty --forge-tooltip-arrow-shape - The shape of the tooltip arrow.
+ * @cssproperty --forge-tooltip-arrow-clip-path - The clip path of the tooltip arrow.
+ * @cssproperty --forge-tooltip-arrow-rotation - The rotation of the tooltip arrow.
+ * @cssproperty --forge-tooltip-arrow-top-rotation - The rotation of the tooltip arrow when the tooltip is placed on top.
+ * @cssproperty --forge-tooltip-arrow-right-rotation - The rotation of the tooltip arrow when the tooltip is placed on the right.
+ * @cssproperty --forge-tooltip-arrow-bottom-rotation - The rotation of the tooltip arrow when the tooltip is placed on the bottom.
+ * @cssproperty --forge-tooltip-arrow-left-rotation- The rotation of the tooltip arrow when the tooltip is placed on the left.
+ *
+ * @slot - The content to display in the tooltip.
+ *
+ * @csspart surface - The tooltip surface.
+ * @csspart arrow - The tooltip arrow.
+ * @csspart overlay - The overlay surface.
  */
-let TooltipComponent = class TooltipComponent extends BaseComponent {
+let TooltipComponent = class TooltipComponent extends BaseClass {
     static get observedAttributes() {
-        return [
-            TOOLTIP_CONSTANTS.attributes.TEXT,
-            TOOLTIP_CONSTANTS.attributes.TARGET,
-            TOOLTIP_CONSTANTS.attributes.DELAY,
-            TOOLTIP_CONSTANTS.attributes.POSITION
-        ];
+        return Object.values(TOOLTIP_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
+        attachShadowTemplate(this, template, styles);
         this._foundation = new TooltipFoundation(new TooltipAdapter(this));
     }
     connectedCallback() {
-        hideElementVisually(this);
-        requestAnimationFrame(() => this._foundation.initialize());
+        this._foundation.initialize();
     }
     disconnectedCallback() {
-        this._foundation.disconnect();
+        this._foundation.destroy();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case TOOLTIP_CONSTANTS.attributes.TEXT:
-                this.text = newValue;
+            case TOOLTIP_CONSTANTS.observedAttributes.ID:
+                this._foundation.syncTooltipAria();
+                break;
+            case TOOLTIP_CONSTANTS.observedAttributes.OPEN:
+                this.open = coerceBoolean(newValue);
                 break;
-            case TOOLTIP_CONSTANTS.attributes.TARGET:
-                this.target = newValue;
+            case TOOLTIP_CONSTANTS.observedAttributes.TYPE:
+                this.type = (newValue === null || newValue === void 0 ? void 0 : newValue.trim()) ? newValue : TOOLTIP_CONSTANTS.defaults.TYPE;
                 break;
-            case TOOLTIP_CONSTANTS.attributes.DELAY:
+            case TOOLTIP_CONSTANTS.observedAttributes.TARGET:
+            case TOOLTIP_CONSTANTS.observedAttributes.ANCHOR:
+                this.anchor = newValue;
+                break;
+            case TOOLTIP_CONSTANTS.observedAttributes.DELAY:
                 this.delay = coerceNumber(newValue);
                 break;
-            case TOOLTIP_CONSTANTS.attributes.POSITION:
-                this.position = newValue;
+            case TOOLTIP_CONSTANTS.observedAttributes.POSITION:
+            case TOOLTIP_CONSTANTS.observedAttributes.PLACEMENT:
+                this.placement = newValue;
+                break;
+            case TOOLTIP_CONSTANTS.observedAttributes.OFFSET:
+                this.offset = coerceNumber(newValue);
+                break;
+            case TOOLTIP_CONSTANTS.observedAttributes.FLIP:
+                this.flip = newValue;
+                break;
+            case TOOLTIP_CONSTANTS.observedAttributes.BOUNDARY:
+                this.boundary = newValue;
+                break;
+            case TOOLTIP_CONSTANTS.observedAttributes.FALLBACK_PLACEMENTS:
+                this.fallbackPlacements = (newValue === null || newValue === void 0 ? void 0 : newValue.trim()) ? coerceStringToArray(newValue) : null;
+                break;
+            case TOOLTIP_CONSTANTS.observedAttributes.TRIGGER_TYPE:
+                this.triggerType = (newValue === null || newValue === void 0 ? void 0 : newValue.trim()) ? coerceStringToArray(newValue) : TOOLTIP_CONSTANTS.defaults.TRIGGER_TYPES;
                 break;
         }
     }
-    /** Hides the tooltip if it's open. */
-    hide() {
-        this._foundation.hide();
-    }
 };
 __decorate([
     FoundationProperty()
-], TooltipComponent.prototype, "text", void 0);
+], TooltipComponent.prototype, "open", void 0);
+__decorate([
+    FoundationProperty()
+], TooltipComponent.prototype, "type", void 0);
 __decorate([
     FoundationProperty()
-], TooltipComponent.prototype, "builder", void 0);
+], TooltipComponent.prototype, "anchor", void 0);
 __decorate([
     FoundationProperty()
+], TooltipComponent.prototype, "anchorElement", void 0);
+__decorate([
+    FoundationProperty({ name: 'anchor' })
 ], TooltipComponent.prototype, "target", void 0);
+__decorate([
+    FoundationProperty()
+], TooltipComponent.prototype, "placement", void 0);
+__decorate([
+    FoundationProperty({ name: 'placement' })
+], TooltipComponent.prototype, "position", void 0);
 __decorate([
     FoundationProperty()
 ], TooltipComponent.prototype, "delay", void 0);
 __decorate([
     FoundationProperty()
-], TooltipComponent.prototype, "position", void 0);
+], TooltipComponent.prototype, "offset", void 0);
 __decorate([
     FoundationProperty()
-], TooltipComponent.prototype, "open", void 0);
+], TooltipComponent.prototype, "flip", void 0);
+__decorate([
+    FoundationProperty()
+], TooltipComponent.prototype, "boundary", void 0);
+__decorate([
+    FoundationProperty()
+], TooltipComponent.prototype, "boundaryElement", void 0);
+__decorate([
+    FoundationProperty()
+], TooltipComponent.prototype, "fallbackPlacements", void 0);
 __decorate([
-    FoundationProperty({ set: false })
-], TooltipComponent.prototype, "tooltipElement", void 0);
+    FoundationProperty()
+], TooltipComponent.prototype, "triggerType", void 0);
 TooltipComponent = __decorate([
     CustomElement({
-        name: TOOLTIP_CONSTANTS.elementName
+        name: TOOLTIP_CONSTANTS.elementName,
+        dependencies: [
+            OverlayComponent
+        ]
     })
 ], TooltipComponent);
 export { TooltipComponent };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.0.0-next.14",
+  "version": "3.0.0-next.16",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,13 +13,12 @@
   "typings": "esm/index.d.ts",
   "sideEffects": false,
   "dependencies": {
+    "@floating-ui/dom": "^1.5.3",
     "@material/animation": "^14.0.0",
     "@material/button": "^14.0.0",
     "@material/card": "^14.0.0",
     "@material/checkbox": "^14.0.0",
     "@material/chips": "^14.0.0",
-    "@material/density": "^14.0.0",
-    "@material/dom": "^14.0.0",
     "@material/drawer": "^14.0.0",
     "@material/elevation": "^14.0.0",
     "@material/feature-targeting": "^14.0.0",
@@ -30,7 +29,6 @@
     "@material/select": "^14.0.0",
     "@material/shape": "^14.0.0",
     "@material/theme": "^14.0.0",
-    "@material/touch-target": "^14.0.0",
     "@material/typography": "^14.0.0",
     "@tylertech/forge-core": "^2.3.0",
     "@tylertech/tyler-icons": "^1.12.0",

package/styles/app-bar/app-bar/_core.scss

@@ -6,6 +6,8 @@
 @use '../../core/styles/typography';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin host {
   display: block;
 }
@@ -51,6 +53,10 @@
   height: 100%;
 }
 
+@mixin section-center {
+  justify-content: center;
+}
+
 @mixin section-end {
   justify-self: end;
 }

package/styles/app-bar/app-bar/app-bar.scss

@@ -4,9 +4,7 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
-@use './configuration' as *;
-@use './token-utils' as *;
-@use './core';
+@use './core' as *;
 @use '../../focus-indicator';
 @use '../../state-layer';
 @use '../../tabs/tab-bar';
@@ -18,12 +16,14 @@
 // Host
 //
 
+$host-tokens: [background foreground];
+
 :host {
-  @include host-configuration;
+  @include tokens($includes: $host-tokens);
 }
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -38,7 +38,9 @@
   @include theme.provide((
     primary: #{token(foreground)},
     on-primary: rgba(black, color-emphasis.value(highest)),
-    text-medium: rgba(white, color-emphasis.value(medium))
+    text-high: rgba(white, color-emphasis.value(highest)),
+    text-medium: rgba(white, color-emphasis.value(medium)),
+    text-low: rgba(white, color-emphasis.value(medium-low))
   ));
 }
 
@@ -47,36 +49,40 @@
 //
 
 .forge-app-bar {
-  @include configuration;
+  @include tokens($excludes: $host-tokens);
 }
 
 .forge-app-bar {
-  @include core.base;
+  @include base;
 
   .row {
-    @include core.row;
+    @include row;
   }
 
   &.no-center {
     .row {
-      @include core.row-no-center;
+      @include row-no-center;
     }
   }
 
   .section {
-    @include core.section;
+    @include section;
+
+    &:not(:last-child):not(:first-child) {
+      @include section-center;
+    }
 
     &:last-child {
-      @include core.section-end;
+      @include section-end;
     }
   }
 
   h1 {
-    @include core.title;
+    @include title;
   }
 
   a {
-    @include core.anchor-base;
+    @include anchor-base;
 
     forge-state-layer {
       @include state-layer.provide-theme((
@@ -94,7 +100,7 @@
   }
 
   .logo-title-container {
-    @include core.logo-title-container;
+    @include logo-title-container;
   }
 }
 
@@ -104,7 +110,7 @@
 
 :host(:is(:not([elevation]),[elevation=raised])) {
   .forge-app-bar {
-    @include core.elevation-raised;
+    @include elevation-raised;
   }
 }
 
@@ -121,7 +127,15 @@
 //
 
 ::slotted([slot=logo]) {
-  @include core.logo;
+  @include logo;
+}
+
+//
+// Slotted - Search
+//
+
+::slotted(forge-app-bar-search[slot=center]) {
+  width: 100%;
 }
 
 //

package/styles/app-bar/app-bar/index.scss

@@ -3,6 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@forward './configuration';
 @forward './core';
-@forward './token-utils' show provide-theme;

package/styles/app-bar/search/_core.scss

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/typography';
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: block;
+}
+
+@mixin base {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  gap: #{token(gap)};
+
+  height: #{token(height)};
+  width: 100%;
+  padding-inline: #{token(padding)};
+  box-sizing: border-box;
+
+  border-radius: #{token(shape)};
+
+  &:hover {
+    &::after {
+      opacity: #{token(border-hover-opacity)};
+    }
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-color: #{token(background-color)};
+    opacity: #{token(background-color-opacity)};
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: #{token(border-opacity)};
+    border-radius: #{token(shape)};
+    outline: 1px solid #{token(border-color)};
+    transition-property: opacity;
+    transition-duration: #{token(transition-duration)};
+    transition-timing-function: #{token(transition-timing-function)};
+  }
+}
+
+@mixin input {
+  @include typography.style(body2);
+
+  display: block;
+  overflow: hidden;
+  background: none;
+  color: currentColor;
+  border: none;
+  width: 100%;
+  margin: 0;
+  outline: none;
+  
+  &::placeholder {
+    color: currentColor;
+    opacity: #{token(input-placeholder-opacity)};
+  }
+}

package/styles/app-bar/search/_token-utils.scss

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