@tylertech/forge 3.6.3 → 3.7.0

package/esm/list/list-item/list-item.js

@@ -14,7 +14,7 @@ import { WithElementInternals } from '../../core/mixins/internals/with-element-i
 import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
 import { BaseComponent } from '../../core/base/base-component';
 const template = '<template><div class=\"forge-list-item\" part=\"root\"><slot name=\"start\"><slot name=\"leading\"></slot></slot><div class=\"text-container\" part=\"text-container\"><slot></slot><slot name=\"secondary-text\"></slot><slot name=\"tertiary-text\"></slot></div><slot name=\"end\"><slot name=\"trailing\"></slot></slot></div></template>';
-const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed)}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background:var(--forge-list-item-background, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-gap:var(--forge-list-item-gap, var(--forge-spacing-large, 24px));--_list-item-text-color:var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-text-font-size:var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-text-font-weight:var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-text-line-height:var(--forge-list-item-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-background:var(--forge-list-item-selected-background, var(--_list-item-selected-color));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-start-color:var(--forge-list-item-selected-start-color, var(--_list-item-selected-color));--_list-item-selected-end-color:var(--forge-list-item-selected-end-color, var(--_list-item-selected-color));--_list-item-selected-text-color:var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-gap:var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));--_list-item-start-selected-color:var(--forge-list-item-start-selected-color, var(--_list-item-selected-color));--_list-item-end-selected-color:var(--forge-list-item-end-selected-color, var(--_list-item-selected-color));--_list-item-wrap-padding:var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px))}.forge-list-item{position:relative;display:flex;gap:var(--_list-item-gap);align-items:center;box-sizing:border-box;outline:0;text-decoration:none;border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;background-color:var(--_list-item-background);height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin)}.forge-list-item.interactive{cursor:var(--_list-item-cursor)}.forge-list-item.disabled{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}.forge-list-item.disabled ::slotted(button){cursor:var(--_list-item-disabled-cursor)}.anchor{position:absolute;inset:0}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{--_list-item-gap:var(--_list-item-dense-gap);height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-background);pointer-events:none}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color);isolation:isolate}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]){margin-inline-start:var(--_list-item-indent)}.text-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;isolation:isolate;font-size:var(--_list-item-text-font-size);font-weight:var(--_list-item-text-font-weight);line-height:var(--_list-item-text-line-height);flex:1;contain:layout}slot[name=secondary-text]::slotted(*),slot[name=tertiary-text]::slotted(*){-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);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*){color:var(--_list-item-selected-text-color)}::slotted(:is(button,[role=button][tabindex],[forge-list-item-button])){appearance:none;cursor:var(--_list-item-cursor);border:none;padding-block:0;padding-inline:0;margin:0;box-sizing:border-box;background:0 0;color:inherit;outline:0;font:inherit;user-select:auto;text-align:inherit;letter-spacing:inherit;word-spacing:inherit;display:inline}::slotted(a){outline:0;color:inherit!important;text-decoration:none!important}::slotted([slot=end]),::slotted([slot=leading]),::slotted([slot=start]),::slotted([slot=trailing]){color:var(--_list-item-text-color);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;fill:currentColor}:host(:not([noninteractive])) ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])){--forge-focus-indicator-display:none;--forge-state-layer-display:none}:host([selected]) ::slotted([slot=leading]),:host([selected]) ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) ::slotted([slot=end]),:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([wrap]) .forge-list-item{--_list-item-padding:var(--_list-item-wrap-padding);height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1))}forge-state-layer{border-radius:inherit}';
+const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed)}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background:var(--forge-list-item-background, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-gap:var(--forge-list-item-gap, var(--forge-spacing-large, 24px));--_list-item-text-color:var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-text-font-size:var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-text-font-weight:var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-text-line-height:var(--forge-list-item-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-background:var(--forge-list-item-selected-background, var(--_list-item-selected-color));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-start-color:var(--forge-list-item-selected-start-color, var(--_list-item-selected-color));--_list-item-selected-end-color:var(--forge-list-item-selected-end-color, var(--_list-item-selected-color));--_list-item-selected-text-color:var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-gap:var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));--_list-item-start-selected-color:var(--forge-list-item-start-selected-color, var(--_list-item-selected-color));--_list-item-end-selected-color:var(--forge-list-item-end-selected-color, var(--_list-item-selected-color));--_list-item-wrap-padding:var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px))}.forge-list-item{position:relative;display:flex;gap:var(--_list-item-gap);align-items:center;box-sizing:border-box;outline:0;text-decoration:none;border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;background-color:var(--_list-item-background);height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin)}.forge-list-item.interactive{cursor:var(--_list-item-cursor)}.forge-list-item.disabled{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}.forge-list-item.disabled ::slotted(button){cursor:var(--_list-item-disabled-cursor)}.anchor{position:absolute;inset:0}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{--_list-item-gap:var(--_list-item-dense-gap);height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-background);pointer-events:none}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color);isolation:isolate}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]){margin-inline-start:var(--_list-item-indent)}.text-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;isolation:isolate;font-size:var(--_list-item-text-font-size);font-weight:var(--_list-item-text-font-weight);line-height:var(--_list-item-text-line-height);flex:1;contain:layout}slot[name=secondary-text]::slotted(*),slot[name=tertiary-text]::slotted(*){-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);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*){color:var(--_list-item-selected-text-color)}::slotted(:is(button,[role=button][tabindex],[forge-list-item-button])){appearance:none;cursor:var(--_list-item-cursor);border:none;padding-block:0;padding-inline:0;margin:0;box-sizing:border-box;width:100%;background:0 0;color:inherit;outline:0;font:inherit;user-select:auto;text-align:inherit;letter-spacing:inherit;word-spacing:inherit;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block}::slotted(a){outline:0;color:inherit!important;text-decoration:none!important}::slotted([slot=end]),::slotted([slot=leading]),::slotted([slot=start]),::slotted([slot=trailing]){color:var(--_list-item-text-color);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;fill:currentColor}:host(:not([noninteractive])) ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])){--forge-focus-indicator-display:none;--forge-state-layer-display:none}:host([selected]) ::slotted([slot=leading]),:host([selected]) ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) ::slotted([slot=end]),:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([wrap]) .forge-list-item{--_list-item-padding:var(--_list-item-wrap-padding);height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}:host([wrap]) ::slotted(:is(button,[role=button][tabindex],[forge-list-item-button])){white-space:normal}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1))}forge-state-layer{border-radius:inherit}';
 /**
  * @tag forge-list-item
  *

package/esm/list-dropdown/list-dropdown-constants.d.ts

@@ -6,6 +6,7 @@
 import type { IIconComponent } from '../icon';
 import type { IOverlayOffset } from '../overlay/overlay-constants';
 import { PositionPlacement } from '../core/utils/position-utils';
+import { TooltipPlacement, TooltipType } from '../tooltip';
 export declare const LIST_DROPDOWN_CONSTANTS: {
     attributes: {
         POPUP_CLASSES: string;
@@ -45,6 +46,7 @@ export interface IBaseListDropdownOption<T = any> {
     trailingIconComponentProps?: Partial<IIconComponent>;
     leadingBuilder?: () => HTMLElement;
     trailingBuilder?: () => HTMLElement;
+    tooltip?: ListDropdownTooltipConfig;
 }
 export interface IListDropdownOption<T = any> extends IBaseListDropdownOption<T> {
     options?: Array<IListDropdownOption | IListDropdownOptionGroup>;
@@ -112,3 +114,12 @@ export declare enum ListDropdownAsyncStyle {
     Spinner = "spinner",
     Skeleton = "skeleton"
 }
+export interface ListDropdownTooltipConfig {
+    text: string;
+    placement?: TooltipPlacement;
+    type?: TooltipType;
+    delay?: number;
+    offset?: number;
+    anchor?: string;
+    anchorElement?: HTMLElement;
+}

package/esm/list-dropdown/list-dropdown-utils.js

@@ -196,6 +196,24 @@ export function createListItems(config, listElement, options, startIndex = 0, re
                     }
                 }
             }
+            // Check for a tooltip configuration
+            if (option.tooltip) {
+                const { text, type = 'presentation', ...restConfig } = option.tooltip;
+                const tooltipElement = document.createElement('forge-tooltip');
+                tooltipElement.id = `list-dropdown-option-${config.id}-${optionIdIndex++}-tooltip`;
+                tooltipElement.textContent = option.tooltip.text;
+                // We always anchor to the list item element unless an anchor element is provided
+                if (!option.tooltip.anchor && !option.tooltip.anchorElement) {
+                    tooltipElement.anchorElement = listItemElement;
+                }
+                // We need to attach the tooltip ARIA attributes to the button element, not the anchor element
+                if (type === 'label' || type === 'description') {
+                    const a11yAttr = type === 'label' ? 'aria-labelledby' : 'aria-describedby';
+                    buttonElement.setAttribute(a11yAttr, tooltipElement.id);
+                }
+                Object.assign(tooltipElement, restConfig);
+                listItemElement.appendChild(tooltipElement);
+            }
             // Check for secondary (subtitle) text
             if (option.secondaryLabel) {
                 const secondaryLabelElement = document.createElement('span');

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

@@ -8,7 +8,6 @@ export declare const MENU_CONSTANTS: {
     elementName: "forge-menu";
     classes: {
         POPUP: string;
-        MENU: string;
     };
     selectors: {
         TOGGLE: string;

package/esm/menu/menu-constants.js

@@ -6,8 +6,7 @@
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}menu`;
 const classes = {
-    POPUP: 'forge-menu__popup',
-    MENU: 'mdc-menu'
+    POPUP: 'forge-menu__popup'
 };
 const selectors = {
     TOGGLE: `.${elementName}__toggle,[${elementName}-toggle],forge-button,forge-icon-button,forge-fab,button,[type=button],[role=button],a,forge-list-item,[tabindex]:not([tabindex^="-"])`,

package/esm/menu/menu-core.js

@@ -240,7 +240,7 @@ export class MenuCore extends CascadingListDropdownAwareCore {
             popupPlacement: this._placement,
             popupFallbackPlacements: this._fallbackPlacements,
             activeStartIndex: fromKeyboard ? 0 : undefined,
-            popupClasses: [MENU_CONSTANTS.classes.POPUP, MENU_CONSTANTS.classes.MENU, ...this._popupClasses],
+            popupClasses: [MENU_CONSTANTS.classes.POPUP, ...this._popupClasses],
             syncWidth: this._syncPopupWidth,
             activeChangeCallback: this._activeChangeListener,
             selectCallback: this._selectListener,

package/esm/menu/menu.js

@@ -13,6 +13,7 @@ import { PopoverComponent } from '../popover';
 import { MenuAdapter } from './menu-adapter';
 import { MENU_CONSTANTS } from './menu-constants';
 import { MenuCore } from './menu-core';
+import { TooltipComponent } from '../tooltip';
 const template = '<template><slot></slot></template>';
 const styles = ':host{display:inline-flex}:host([hidden]){display:none}';
 /**
@@ -140,7 +141,7 @@ __decorate([
 MenuComponent = __decorate([
     customElement({
         name: MENU_CONSTANTS.elementName,
-        dependencies: [PopoverComponent, ListComponent]
+        dependencies: [PopoverComponent, ListComponent, TooltipComponent]
     })
 ], MenuComponent);
 export { MenuComponent };

package/esm/popover/popover-adapter.js

@@ -6,7 +6,7 @@
 import { getShadowElement } from '@tylertech/forge-core';
 import { prefersReducedMotion } from '../core/utils/feature-detection';
 import { VirtualElement } from '../core/utils/position-utils';
-import { frame } from '../core/utils/utils';
+import { checkVisibility, frame } from '../core/utils/utils';
 import { OVERLAY_CONSTANTS } from '../overlay';
 import { OverlayAwareAdapter } from '../overlay/base/overlay-aware-adapter';
 import { POPOVER_CONSTANTS } from './popover-constants';
@@ -63,7 +63,7 @@ export class PopoverAdapter extends OverlayAwareAdapter {
             return Promise.resolve();
         }
         await frame();
-        if (!this._surfaceElement.checkVisibility()) {
+        if (!checkVisibility(this._surfaceElement)) {
             this._overlayElement.open = false;
             this._updateAnchorExpandedState(false);
             return Promise.resolve();

package/esm/select/core/base-select-adapter.js

@@ -81,7 +81,8 @@ export class BaseSelectAdapter extends BaseAdapter {
                     : o.trailingIconType,
                 trailingIconComponentProps: o.trailingIconComponentProps,
                 leadingBuilder: o.leadingBuilder,
-                trailingBuilder: o.trailingBuilder
+                trailingBuilder: o.trailingBuilder,
+                tooltip: o.tooltip
             };
         });
     }

package/esm/select/option/option-constants.d.ts

@@ -17,6 +17,7 @@ export declare const OPTION_CONSTANTS: {
         TRAILING_ICON_CLASS: string;
         TRAILING_ICON_TYPE: string;
         TRAILING_ICON: string;
+        TOOLTIP: string;
         VALUE: string;
     };
     events: {

package/esm/select/option/option-constants.js

@@ -17,6 +17,7 @@ const attributes = {
     TRAILING_ICON_CLASS: 'trailing-icon-class',
     TRAILING_ICON_TYPE: 'trailing-icon-type',
     TRAILING_ICON: 'trailing-icon',
+    TOOLTIP: 'tooltip',
     VALUE: 'value'
 };
 const events = {

package/esm/select/option/option-core.d.ts

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import type { IIconComponent } from '../../icon/icon';
-import { IBaseListDropdownOption, ListDropdownIconType } from '../../list-dropdown/list-dropdown-constants';
+import { IBaseListDropdownOption, ListDropdownIconType, ListDropdownTooltipConfig } from '../../list-dropdown/list-dropdown-constants';
 import { IOptionAdapter } from './option-adapter';
 export interface IOptionCore extends Required<IBaseListDropdownOption> {
 }
@@ -26,6 +26,7 @@ export declare class OptionCore implements IOptionCore {
     private _trailingIconComponentProps;
     private _leadingBuilder;
     private _trailingBuilder;
+    private _tooltip;
     constructor(_adapter: IOptionAdapter);
     /** Gets/sets the value of this option. */
     get value(): any;
@@ -75,4 +76,6 @@ export declare class OptionCore implements IOptionCore {
     /** Gets/sets the trailing builder of this option. */
     get trailingBuilder(): () => HTMLElement;
     set trailingBuilder(value: () => HTMLElement);
+    get tooltip(): ListDropdownTooltipConfig;
+    set tooltip(value: ListDropdownTooltipConfig);
 }

package/esm/select/option/option-core.js

@@ -174,4 +174,12 @@ export class OptionCore {
             this._trailingBuilder = value;
         }
     }
+    get tooltip() {
+        return this._tooltip;
+    }
+    set tooltip(value) {
+        if (this._tooltip !== value) {
+            this._tooltip = value;
+        }
+    }
 }

package/esm/select/option/option.d.ts

@@ -5,7 +5,7 @@
  */
 import { IIconComponent } from '../../icon';
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
-import { IBaseListDropdownOption, ListDropdownIconType } from '../../list-dropdown/list-dropdown-constants';
+import { IBaseListDropdownOption, ListDropdownIconType, ListDropdownTooltipConfig } from '../../list-dropdown/list-dropdown-constants';
 export interface IOptionComponent extends IBaseComponent, Required<IBaseListDropdownOption> {
 }
 declare global {
@@ -101,4 +101,8 @@ export declare class OptionComponent extends BaseComponent implements IOptionCom
      * Gets/sets the trailing builder of this option.
      */
     trailingBuilder: () => HTMLElement;
+    /**
+     * Gets/sets the tooltip configuration for this option.
+     */
+    tooltip: ListDropdownTooltipConfig;
 }

package/esm/select/option/option.js

@@ -26,7 +26,8 @@ let OptionComponent = class OptionComponent extends BaseComponent {
             OPTION_CONSTANTS.attributes.LEADING_ICON_TYPE,
             OPTION_CONSTANTS.attributes.TRAILING_ICON,
             OPTION_CONSTANTS.attributes.TRAILING_ICON_CLASS,
-            OPTION_CONSTANTS.attributes.TRAILING_ICON_TYPE
+            OPTION_CONSTANTS.attributes.TRAILING_ICON_TYPE,
+            OPTION_CONSTANTS.attributes.TOOLTIP
         ];
     }
     constructor() {
@@ -71,6 +72,9 @@ let OptionComponent = class OptionComponent extends BaseComponent {
             case OPTION_CONSTANTS.attributes.TRAILING_ICON_TYPE:
                 this.trailingIconType = newValue;
                 break;
+            case OPTION_CONSTANTS.attributes.TOOLTIP:
+                this.tooltip = newValue ? { text: newValue } : undefined;
+                break;
         }
     }
 };
@@ -122,6 +126,9 @@ __decorate([
 __decorate([
     coreProperty()
 ], OptionComponent.prototype, "trailingBuilder", void 0);
+__decorate([
+    coreProperty()
+], OptionComponent.prototype, "tooltip", void 0);
 OptionComponent = __decorate([
     customElement({
         name: OPTION_CONSTANTS.elementName

package/esm/select/select/select-core.js

@@ -119,9 +119,7 @@ export class SelectCore extends BaseSelectCore {
         // Update the state of the component based on the existence of a selected value
         const text = this._getSelectedText();
         this._adapter.setSelectedText(text);
-        if (!this._open) {
-            this._tryFloatLabel();
-        }
+        this._tryFloatLabel();
     }
     /** Gets/sets the label text. */
     get label() {

package/esm/select/select/select.d.ts

@@ -125,6 +125,7 @@ declare const SelectComponent_base: import("../../constants").AbstractConstructo
  * @csspart support-text - The support text element.
  * @csspart support-text - The element containing the support text slot.
  * @csspart support-text-end - The element containing the support text end slot.
+ * @csspart outline - The element containing the forge-focus-indicator element.
  * @csspart focus-indicator - The focus indicator element.
  *
  * @slot value - The selected text to display

package/esm/select/select/select.js

@@ -122,6 +122,7 @@ const styles = ':host{display:block;outline:0}:host([hidden]){display:none}forge
  * @csspart support-text - The support text element.
  * @csspart support-text - The element containing the support text slot.
  * @csspart support-text-end - The element containing the support text end slot.
+ * @csspart outline - The element containing the forge-focus-indicator element.
  * @csspart focus-indicator - The focus indicator element.
  *
  * @slot value - The selected text to display

package/esm/split-view/split-view-panel/split-view-panel.js

@@ -13,7 +13,7 @@ import { SplitViewPanelCore } from './split-view-panel-core';
 import { SplitViewPanelAdapter } from './split-view-panel-adapter';
 import { IconComponent, IconRegistry } from '../../icon';
 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-state-layer target=\"handle\" id=\"state-layer\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator inward target=\"handle\" part=\"focus-indicator\"></forge-focus-indicator></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
-const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{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:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{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;animation-name:uxbrlv3;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uxbrlv3{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:uxbrlvc;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uxbrlvc{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:uxbrlw6;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uxbrlw6{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:uxbrlwb;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uxbrlwb{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{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));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{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;animation-name:uxbrlwu;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uxbrlwu{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:uxbrlxq;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uxbrlxq{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:uxbrlyb;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uxbrlyb{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:uxbrlyn;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uxbrlyn{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){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}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
+const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{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:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{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;animation-name:u58y6y0;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u58y6y0{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:u58y6y5;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u58y6y5{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u58y6yu;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes u58y6yu{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:u58y6z1;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes u58y6z1{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{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));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{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;animation-name:u58y6zf;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u58y6zf{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u58y706;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u58y706{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u58y713;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes u58y713{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u58y722;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes u58y722{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){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}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
 import { StateLayerComponent } from '../../state-layer';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 /**

package/esm/switch/switch.d.ts

@@ -16,7 +16,7 @@ export interface ISwitchComponent extends IWithFormAssociation, IWithFocusable,
     checked: boolean;
     /** @deprecated use `checked` instead */
     on: boolean;
-    /** @deprecated use `on` instead */
+    /** @deprecated use `checked` instead */
     selected: boolean;
     defaultChecked: boolean;
     /** @deprecated use `defaultChecked` instead */

package/esm/tabs/tab-bar/tab-bar-core.js

@@ -49,6 +49,9 @@ export class TabBarCore {
     async _onTabsChanged() {
         this._tabs = this._adapter.getTabs();
         this._syncTabState();
+        if (this._scrollButtons) {
+            this._detectScrollableStatus();
+        }
         this._tryScrollActiveTabIntoView();
     }
     _onTabSelected(evt) {

package/esm/text-field/text-field.d.ts

@@ -47,6 +47,7 @@ declare global {
  * @csspart support-text - The support text element.
  * @csspart support-text - The element containing the support text slot.
  * @csspart support-text-end - The element containing the support text end slot.
+ * @csspart outline - The element containing the forge-focus-indicator element.
  * @csspart focus-indicator - The focus indicator element.
  *
  * @slot - The default/unnamed slot for the field's input.

package/esm/text-field/text-field.js

@@ -46,6 +46,7 @@ const styles = ':host{display:block}:host([hidden]){display:none}forge-field{dis
  * @csspart support-text - The support text element.
  * @csspart support-text - The element containing the support text slot.
  * @csspart support-text-end - The element containing the support text end slot.
+ * @csspart outline - The element containing the forge-focus-indicator element.
  * @csspart focus-indicator - The focus indicator element.
  *
  * @slot - The default/unnamed slot for the field's input.

package/esm/time-picker/time-picker-adapter.js

@@ -85,7 +85,6 @@ export class TimePickerAdapter extends BaseAdapter {
             iconButtonElement.density = 'medium';
             iconButtonElement.type = 'button';
             iconButtonElement.tabIndex = -1;
-            iconButtonElement.style.marginRight = '4px'; // Override default trailing slot margin in text-field
             iconButtonElement.setAttribute('aria-label', 'Toggle time dropdown');
             const iconElement = document.createElement(ICON_CONSTANTS.elementName);
             iconElement.name = 'clock_outline';

package/package.json

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

package/sass/expansion-panel/_core.scss

@@ -28,6 +28,9 @@
   min-height: 0;
 
   opacity: 0;
+
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
 }
 
 @mixin inner {

package/sass/field/_core.scss

@@ -24,7 +24,7 @@
 
 @mixin base {
   /* Internal custom properties */
-  @include override(disableable-cursor, unset, value);
+  @include override(disableable-cursor, auto, value);
   @include override(disableable-opacity, 1, value);
   @include override(inner-border-block-size, 100%, value);
   @include override(inner-border-color, #{token(outline-color, custom)}, value);

package/sass/field/field.scss

@@ -241,7 +241,7 @@ $variants: (
 //
 
 :host([required]) {
-  .label::before {
+  .has-label .label::before {
     @include core.label-before;
   }
 }

package/sass/list/list-item/_core.scss

@@ -43,6 +43,7 @@
   padding-inline: 0;
   margin: 0;
   box-sizing: border-box;
+  width: 100%;
 
   background: transparent;
   color: inherit;
@@ -53,8 +54,15 @@
   text-align: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 
-  display: inline;
+  display: block;
+}
+
+@mixin button-wrap {
+  white-space: normal;
 }
 
 @mixin anchor {

package/sass/list/list-item/list-item.scss

@@ -216,6 +216,10 @@ slot[name='tertiary-text'] {
     @include text-container-wrap;
   }
 
+  ::slotted(:is(button, [role='button'][tabindex], [forge-list-item-button])) {
+    @include button-wrap;
+  }
+
   slot[name='secondary-text'],
   slot[name='tertiary-text'] {
     &::slotted(*) {