@tylertech/forge 3.0.0-next.21 → 3.0.0-next.23

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

@@ -11,7 +11,7 @@ import { LIST_ITEM_CONSTANTS } from './list-item-constants';
 import { StateLayerComponent } from '../../state-layer';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 const template = '<template><div class=\"forge-list-item\" tabindex=\"0\" part=\"root\"><slot name=\"leading\"></slot><slot name=\"avatar\"></slot><div class=\"text-container\" part=\"text-container\"><slot></slot><slot name=\"title\"></slot><slot name=\"primary-text\"></slot><slot name=\"subtitle\"></slot><slot name=\"secondary-text\"></slot><slot name=\"tertiary-text\"></slot><slot name=\"tertiary-title\"></slot></div><slot name=\"trailing\"></slot><forge-state-layer exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator part=\"focus-indicator\" inward></forge-focus-indicator></div></template>';
-const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, 56px);--_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px))}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background-color:var(--forge-list-item-background-color, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, var(--forge-spacing-xsmall, 8px) 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-xlarge, 32px));--_list-item-supporting-text-color:var(--forge-list-item-supporting-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-supporting-text-font-size:var(--forge-list-item-supporting-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-supporting-text-font-weight:var(--forge-list-item-supporting-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-supporting-text-line-height:var(--forge-list-item-supporting-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-leading-color:var(--forge-list-item-selected-leading-color, var(--_list-item-selected-color));--_list-item-selected-trailing-color:var(--forge-list-item-selected-trailing-color, var(--_list-item-selected-color));--_list-item-selected-supporting-text-color:var(--forge-list-item-selected-supporting-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-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed);--_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-medium, 16px));--_list-item-leading-selected-color:var(--forge-list-item-leading-selected-color, var(--_list-item-selected-color));--_list-item-trailing-selected-color:var(--forge-list-item-trailing-selected-color, var(--_list-item-selected-color));--_list-item-avatar-background-color:var(--forge-list-item-avatar-background-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-avatar-color:var(--forge-list-item-avatar-color, var(--forge-theme-on-primary, #ffffff));--_list-item-avatar-shape:var(--forge-list-item-avatar-shape, var(--forge-shape-round, 50%));--_list-item-avatar-size:var(--forge-list-item-avatar-size, 40px)}.forge-list-item{position:relative;display:-webkit-box;display:flex;gap:var(--_list-item-gap);-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;text-decoration:none;background-color:var(--_list-item-background-color);border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin);cursor:var(--_list-item-cursor)}:host([non-interactive]) .forge-list-item{cursor:initial}:host([disabled]) .forge-list-item{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}: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]){-webkit-margin-start:var(--_list-item-dense-indent);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-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]){color:var(--_list-item-leading-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-trailing-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]){-webkit-margin-start:var(--_list-item-indent);margin-inline-start:var(--_list-item-indent)}a.forge-list-item{color:inherit}.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);-webkit-text-decoration:var(--forge-typography-body2-text-decoration,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:var(--_list-item-supporting-text-font-size);font-weight:var(--_list-item-supporting-text-font-weight);line-height:var(--_list-item-supporting-text-line-height);-webkit-box-flex:1;flex:1}slot[name=secondary-text]::slotted(*),slot[name=subtitle]::slotted(*),slot[name=tertiary-text]::slotted(*),slot[name=tertiary-title]::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);-webkit-text-decoration:var(--forge-typography-body1-text-decoration,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-supporting-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=subtitle]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*),:host([selected]) slot[name=tertiary-title]::slotted(*){color:var(--_list-item-selected-supporting-text-color)}::slotted([slot=avatar]){background-color:var(--_list-item-avatar-background-color);color:var(--_list-item-avatar-color);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor;-webkit-margin-end:calc((var(--_list-item-gap)/ 2) * -1);margin-inline-end:calc((var(--_list-item-gap)/ 2) * -1);min-width:var(--_list-item-avatar-size);min-height:var(--_list-item-avatar-size);border-radius:var(--_list-item-avatar-shape)}::slotted([slot=leading]),::slotted([slot=trailing]){color:var(--_list-item-supporting-text-color);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor}:host([selected]) ::slotted([slot=leading]){color:var(--_list-item-leading-selected-color)}:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-trailing-selected-color)}:host([wrap]) .forge-list-item{height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=subtitle]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*),:host([wrap]) slot[name=tertiary-title]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:var(--forge-shape-medium, 4px)}forge-state-layer{border-radius:inherit}';
+const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, 56px);--_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px))}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background-color:var(--forge-list-item-background-color, 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-xlarge, 32px));--_list-item-supporting-text-color:var(--forge-list-item-supporting-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-supporting-text-font-size:var(--forge-list-item-supporting-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-supporting-text-font-weight:var(--forge-list-item-supporting-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-supporting-text-line-height:var(--forge-list-item-supporting-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-leading-color:var(--forge-list-item-selected-leading-color, var(--_list-item-selected-color));--_list-item-selected-trailing-color:var(--forge-list-item-selected-trailing-color, var(--_list-item-selected-color));--_list-item-selected-supporting-text-color:var(--forge-list-item-selected-supporting-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-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed);--_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-leading-selected-color:var(--forge-list-item-leading-selected-color, var(--_list-item-selected-color));--_list-item-trailing-selected-color:var(--forge-list-item-trailing-selected-color, var(--_list-item-selected-color));--_list-item-avatar-background-color:var(--forge-list-item-avatar-background-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-avatar-color:var(--forge-list-item-avatar-color, var(--forge-theme-on-primary, #ffffff));--_list-item-avatar-shape:var(--forge-list-item-avatar-shape, var(--forge-shape-round, 50%));--_list-item-avatar-size:var(--forge-list-item-avatar-size, 40px);--_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:-webkit-box;display:flex;gap:var(--_list-item-gap);-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;text-decoration:none;background-color:var(--_list-item-background-color);border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin);cursor:var(--_list-item-cursor)}:host([non-interactive]) .forge-list-item{cursor:initial}:host([disabled]) .forge-list-item{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}: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]){-webkit-margin-start:var(--_list-item-dense-indent);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-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]){color:var(--_list-item-leading-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-trailing-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]){-webkit-margin-start:var(--_list-item-indent);margin-inline-start:var(--_list-item-indent)}a.forge-list-item{color:inherit}.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);-webkit-text-decoration:var(--forge-typography-body2-text-decoration,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:var(--_list-item-supporting-text-font-size);font-weight:var(--_list-item-supporting-text-font-weight);line-height:var(--_list-item-supporting-text-line-height);-webkit-box-flex:1;flex:1}slot[name=secondary-text]::slotted(*),slot[name=subtitle]::slotted(*),slot[name=tertiary-text]::slotted(*),slot[name=tertiary-title]::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);-webkit-text-decoration:var(--forge-typography-body1-text-decoration,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-supporting-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=subtitle]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*),:host([selected]) slot[name=tertiary-title]::slotted(*){color:var(--_list-item-selected-supporting-text-color)}::slotted([slot=avatar]){background-color:var(--_list-item-avatar-background-color);color:var(--_list-item-avatar-color);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor;-webkit-margin-end:calc((var(--_list-item-gap)/ 2) * -1);margin-inline-end:calc((var(--_list-item-gap)/ 2) * -1);min-width:var(--_list-item-avatar-size);min-height:var(--_list-item-avatar-size);border-radius:var(--_list-item-avatar-shape)}::slotted([slot=leading]),::slotted([slot=trailing]){color:var(--_list-item-supporting-text-color);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor}:host([selected]) ::slotted([slot=leading]){color:var(--_list-item-leading-selected-color)}:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-trailing-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=subtitle]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*),:host([wrap]) slot[name=tertiary-title]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:var(--forge-shape-medium, 4px)}forge-state-layer{border-radius:inherit}';
 /**
  * @tag forge-list-item
  *
@@ -74,6 +74,7 @@ const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, 56px);--
  * @cssproperty --forge-list-item-background-color - The background color.
  * @cssproperty --forge-list-item-shape - The shape of the list item.
  * @cssproperty --forge-list-item-padding - The padding inside of the container element.
+ * @cssproperty --forge-list-item-wrap-padding - The padding inside of the container element when `wrap` is enabled.
  * @cssproperty --forge-list-item-margin - The margin around the host element.
  * @cssproperty --forge-list-item-height - The height of the container.
  * @cssproperty --forge-list-item-dense-height - The height when in the dense state.

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

@@ -8,6 +8,7 @@ export interface IListDropdownAdapter {
     dropdownElement: HTMLElement | undefined;
     open(config: IListDropdownOpenConfig, selectCallback: (value: any, id: string) => void, closeCb: () => void): void;
     close(): void;
+    remove(): void;
     setScrollBottomListener(listener: () => void, scrollThreshold: number): void;
     removeScrollBottomListener(listener: () => void): void;
     getActiveOptionIndex(): number;
@@ -39,7 +40,8 @@ export declare class ListDropdownAdapter implements IListDropdownAdapter {
     constructor(_targetElement: HTMLElement);
     get dropdownElement(): HTMLElement | undefined;
     open(config: IListDropdownOpenConfig, selectCallback: (value: any, id: string) => void, closeCb: () => void): void;
-    close(): void;
+    close(): Promise<void>;
+    remove(): void;
     setScrollBottomListener(listener: () => void, scrollThreshold: number): void;
     removeScrollBottomListener(listener: () => void): void;
     getActiveOptionIndex(): number;

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

@@ -3,12 +3,12 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { LIST_DROPDOWN_CONSTANTS } from './list-dropdown-constants';
+import { LIST_DROPDOWN_CONSTANTS, ListDropdownType } from './list-dropdown-constants';
 import { createDropdown, createList, createListItems, createAsyncElement, createBusyElement, createCheckboxElement } from './list-dropdown-utils';
-import { POPUP_CONSTANTS } from '../popup';
 import { LIST_ITEM_CONSTANTS } from '../list/list-item';
-import { ScrollEvents, getShadowElement, ScrollAxisObserver, removeAllChildren, isFunction, removeElement, replaceElement, createVisuallyHiddenElement, isDeepEqual, tryScrollIntoView } from '@tylertech/forge-core';
+import { ScrollEvents, getShadowElement, ScrollAxisObserver, removeAllChildren, isFunction, removeElement, replaceElement, createVisuallyHiddenElement, isDeepEqual, tryScrollIntoView, closestElement } from '@tylertech/forge-core';
 import { ICON_CONSTANTS } from '../icon';
+import { POPOVER_CONSTANTS } from '../popover';
 export class ListDropdownAdapter {
     constructor(_targetElement) {
         this._targetElement = _targetElement;
@@ -17,8 +17,12 @@ export class ListDropdownAdapter {
         return this._dropdownElement;
     }
     open(config, selectCallback, closeCb) {
+        var _a, _b;
         // Now lets create the popup and append the children
         this._dropdownElement = createDropdown(config, this._targetElement);
+        if (config.type !== ListDropdownType.None && config.type !== ListDropdownType.Menu) {
+            this._dropdownElement.preset = 'dropdown';
+        }
         this.syncWidth(!!config.syncWidth, config.targetWidthCallback);
         // If we are configured to show a busy indicator (linear progress bar across the top), then create and append it first
         if (config.allowBusy) {
@@ -69,14 +73,24 @@ export class ListDropdownAdapter {
         this._announcerElement = createVisuallyHiddenElement();
         this._announcerElement.id = `${config.id}-activedescendant`;
         this._dropdownElement.appendChild(this._announcerElement);
+        // Append to root node
+        const hostDocument = (_a = this._targetElement.ownerDocument) !== null && _a !== void 0 ? _a : document;
+        const hostElement = (_b = closestElement(POPOVER_CONSTANTS.selectors.HOST, this._targetElement)) !== null && _b !== void 0 ? _b : hostDocument.body;
+        hostElement.appendChild(this._dropdownElement);
         // Open the popup
+        this._dropdownElement.setAttribute(POPOVER_CONSTANTS.attributes.HOST, '');
         this._dropdownElement.open = true;
     }
-    close() {
+    async close() {
         if (!this._dropdownElement) {
             return;
         }
-        this._dropdownElement.open = false;
+        await this._dropdownElement.hideAsync();
+        this.remove();
+    }
+    remove() {
+        var _a;
+        (_a = this._dropdownElement) === null || _a === void 0 ? void 0 : _a.remove();
         this._dropdownElement = undefined;
         this._listElement = undefined;
         this._announcerElement = undefined;
@@ -84,9 +98,9 @@ export class ListDropdownAdapter {
     setScrollBottomListener(listener, scrollThreshold) {
         if (this._dropdownElement) {
             if (!this._scrollObserver) {
-                const scrollTarget = getShadowElement(this._dropdownElement, POPUP_CONSTANTS.selectors.CONTAINER);
                 const scrollConfig = { scrollThreshold };
-                this._scrollObserver = new ScrollAxisObserver(scrollTarget, scrollConfig);
+                const scrollContainer = getShadowElement(this._dropdownElement, POPOVER_CONSTANTS.selectors.SURFACE);
+                this._scrollObserver = new ScrollAxisObserver(scrollContainer, scrollConfig);
                 this._scrollObserver.addListener(ScrollEvents.ScrolledEnd, listener);
             }
         }
@@ -181,7 +195,8 @@ export class ListDropdownAdapter {
     }
     syncWidth(sync, targetWidthCallback) {
         if (this._dropdownElement) {
-            this._dropdownElement.style[sync ? 'width' : 'minWidth'] = `${this._getTargetElementWidth(targetWidthCallback)}px`;
+            const propertyName = sync ? '--forge-popover-width' : '--forge-popover-min-width';
+            this._dropdownElement.style.setProperty(propertyName, `${this._getTargetElementWidth(targetWidthCallback)}px`);
         }
     }
     setOptions(config) {
@@ -269,7 +284,7 @@ export class ListDropdownAdapter {
     }
     _scrollListItemIntoView(listItem, behavior = 'auto', block = 'nearest') {
         if (listItem && this._dropdownElement && this._dropdownElement.isConnected) {
-            const scrollContainer = getShadowElement(this._dropdownElement, POPUP_CONSTANTS.selectors.CONTAINER);
+            const scrollContainer = getShadowElement(this._dropdownElement, POPOVER_CONSTANTS.selectors.SURFACE);
             if (scrollContainer) {
                 tryScrollIntoView(scrollContainer, listItem, behavior, block);
             }

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

@@ -3,8 +3,9 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { IIconComponent } from '../icon';
-import { IPopupPosition, PopupPlacement } from '../popup';
+import type { IIconComponent } from '../icon';
+import type { IOverlayOffset } from '../overlay/overlay-constants';
+import { PositionPlacement } from '../core/utils/position-utils';
 export declare const LIST_DROPDOWN_CONSTANTS: {
     attributes: {
         POPUP_CLASSES: string;
@@ -78,10 +79,10 @@ export interface IListDropdownConfig<T = any> {
     dense?: boolean;
     type?: ListDropdownType;
     popupClasses?: string | string[];
-    popupOffset?: IPopupPosition;
+    popupOffset?: IOverlayOffset;
     popupStatic?: boolean;
-    popupPlacement?: PopupPlacement;
-    popupFallbackPlacements?: PopupPlacement[];
+    popupPlacement?: PositionPlacement;
+    popupFallbackPlacements?: PositionPlacement[];
     optionLimit?: number;
     optionBuilder?: ListDropdownOptionBuilder;
     observeScroll?: boolean;

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

@@ -8,7 +8,7 @@ import { IListDropdownConfig, IListDropdownOption, IListDropdownOptionGroup } fr
 export interface IListDropdownFoundation {
     dropdownElement: HTMLElement | undefined;
     open(): void;
-    close(): void;
+    close(): Promise<void>;
     getActiveOptionIndex(): number;
     getActiveOption(): IListDropdownOption | undefined;
     toggleOptionMultiple(index: number, isSelected: boolean): void;
@@ -35,7 +35,7 @@ export declare class ListDropdownFoundation implements IListDropdownFoundation {
     constructor(_adapter: IListDropdownAdapter, config: IListDropdownConfig);
     destroy(): void;
     open(): void;
-    close(): void;
+    close(): Promise<void>;
     private _onSelect;
     getActiveOptionIndex(): number;
     getActiveOption(): IListDropdownOption | undefined;

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

@@ -23,9 +23,7 @@ export class ListDropdownFoundation {
         };
     }
     destroy() {
-        if (this._open) {
-            this.close();
-        }
+        this._adapter.remove();
     }
     open() {
         if (!this._open) {
@@ -41,13 +39,13 @@ export class ListDropdownFoundation {
             }
         }
     }
-    close() {
+    async close() {
         if (this._open) {
             this._open = false;
-            this._adapter.close();
             if (this._config.observeScroll && this._config.scrollEndListener) {
                 this._adapter.removeScrollBottomListener(this._scrollEndListener);
             }
+            await this._adapter.close();
         }
     }
     _onSelect(value, id) {

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

@@ -5,7 +5,7 @@
  */
 import { ILinearProgressComponent } from '../linear-progress';
 import { IListComponent } from '../list/list';
-import { IPopupComponent } from '../popup';
+import { IPopoverComponent } from '../popover/popover';
 import { IListDropdownOpenConfig, IListDropdownOption, IListDropdownOptionGroup, ListDropdownAsyncStyle } from './list-dropdown-constants';
 export declare enum ListDropdownOptionType {
     Option = 0,
@@ -16,8 +16,8 @@ export declare enum ListDropdownOptionType {
  * @param config
  * @param targetElement
  */
-export declare function createDropdown(config: IListDropdownOpenConfig, targetElement: HTMLElement): IPopupComponent;
-export declare function createPopupDropdown(config: IListDropdownOpenConfig, targetElement: HTMLElement): IPopupComponent;
+export declare function createDropdown(config: IListDropdownOpenConfig, targetElement: HTMLElement): IPopoverComponent;
+export declare function createPopupDropdown(config: IListDropdownOpenConfig, targetElement: HTMLElement): IPopoverComponent;
 export declare function createList(config: IListDropdownOpenConfig): IListComponent;
 /**
  * Creates the list to place inside of the dropdown.

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

@@ -8,7 +8,7 @@ import { tylIconCheckBox, tylIconCheckBoxOutlineBlank } from '@tylertech/tyler-i
 import { ICON_CLASS_NAME } from '../constants';
 import { LINEAR_PROGRESS_CONSTANTS } from '../linear-progress';
 import { LIST_CONSTANTS } from '../list/list';
-import { PopupAnimationType, POPUP_CONSTANTS } from '../popup';
+import { POPOVER_CONSTANTS } from '../popover';
 import { SKELETON_CONSTANTS } from '../skeleton';
 import { ListDropdownAsyncStyle, ListDropdownType, LIST_DROPDOWN_CONSTANTS } from './list-dropdown-constants';
 export var ListDropdownOptionType;
@@ -47,32 +47,24 @@ export function createDropdown(config, targetElement) {
 }
 export function createPopupDropdown(config, targetElement) {
     var _a;
-    const popupElement = document.createElement('forge-popup');
-    popupElement.targetElement = targetElement;
-    popupElement.placement = config.popupPlacement || 'bottom-start';
-    popupElement.manageFocus = false;
-    popupElement.static = !!config.popupStatic;
+    const popoverElement = document.createElement('forge-popover');
+    popoverElement.anchorElement = targetElement;
+    popoverElement.placement = config.popupPlacement || 'bottom-start';
+    popoverElement.persistent = Boolean(config.popupStatic);
     if ((_a = config.popupFallbackPlacements) === null || _a === void 0 ? void 0 : _a.length) {
-        popupElement.fallbackPlacements = config.popupFallbackPlacements;
+        popoverElement.fallbackPlacements = config.popupFallbackPlacements;
     }
     if (config.constrainViewportWidth) {
-        popupElement.setAttribute(POPUP_CONSTANTS.attributes.CONSTRAIN_VIEWPORT_WIDTH, '');
+        popoverElement.setAttribute(POPOVER_CONSTANTS.attributes.CONSTRAIN_VIEWPORT_WIDTH, '');
     }
     if (config.popupOffset) {
-        popupElement.offset = config.popupOffset;
+        popoverElement.offset = config.popupOffset;
     }
     // Set the animations based on our type
-    switch (config.type) {
-        case ListDropdownType.Menu:
-            popupElement.animationType = PopupAnimationType.Menu;
-            break;
-        case ListDropdownType.None:
-            popupElement.animationType = PopupAnimationType.None;
-            break;
-        default:
-            popupElement.animationType = PopupAnimationType.Dropdown;
+    if (config.type === ListDropdownType.None) {
+        popoverElement.animationType = 'none';
     }
-    return popupElement;
+    return popoverElement;
 }
 export function createList(config) {
     const listElement = document.createElement(LIST_CONSTANTS.elementName);

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

@@ -7,7 +7,7 @@ import { IListDropdownConfig, IListDropdownOption, IListDropdownOptionGroup } fr
 export interface IListDropdown {
     dropdownElement: HTMLElement | undefined;
     open(): void;
-    close(): void;
+    close(): Promise<void>;
     destroy(): void;
     getActiveOptionIndex(): number;
     getActiveOption(): IListDropdownOption | undefined;
@@ -34,7 +34,7 @@ export declare class ListDropdown implements IListDropdown {
     /** Opens the dropdown. */
     open(): void;
     /** Closes the dropdown. */
-    close(): void;
+    close(): Promise<void>;
     /** Gets the currently highlighted option index in the dropdown. */
     getActiveOptionIndex(): number;
     getActiveOption(): IListDropdownOption | undefined;

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

@@ -22,7 +22,7 @@ export class ListDropdown {
     }
     /** Closes the dropdown. */
     close() {
-        this._foundation.close();
+        return this._foundation.close();
     }
     /** Gets the currently highlighted option index in the dropdown. */
     getActiveOptionIndex() {

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

@@ -15,8 +15,9 @@ export interface IMenuAdapter extends IBaseAdapter {
     hasTargetElement(): boolean;
     addTargetListener(event: string, callback: (event: Event) => void, bubbles?: boolean): void;
     removeTargetListener(event: string, callback: (event: Event) => void): void;
+    destroyListDropdown(): void;
     attachMenu(config: IListDropdownConfig): void;
-    detachMenu(): void;
+    detachMenu(): Promise<void>;
     setOptions(options: Array<IMenuOption | IMenuOptionGroup>): void;
     getActiveOptionIndex(): number;
     setActiveOption(index: number): void;
@@ -47,7 +48,8 @@ export declare class MenuAdapter extends BaseAdapter<IMenuComponent> implements
     removeTargetListener(event: string, callback: (event: Event) => void): void;
     attachMenu(config: IListDropdownConfig): void;
     setOptions(options: Array<IMenuOption | IMenuOptionGroup>): void;
-    detachMenu(): void;
+    destroyListDropdown(): void;
+    detachMenu(): Promise<void>;
     setActiveOption(index: number): void;
     activateFirstOption(): void;
     setCascadeTargetInactive(): void;

package/esm/menu/menu-adapter.js

@@ -61,14 +61,20 @@ export class MenuAdapter extends BaseAdapter {
             this._listDropdown.setOptions(options);
         }
     }
-    detachMenu() {
+    destroyListDropdown() {
+        if (this._listDropdown) {
+            this._listDropdown.destroy();
+            this._listDropdown = undefined;
+        }
+    }
+    async detachMenu() {
         if (this._targetElement) {
             this._targetElement.removeAttribute('aria-activedescendant');
             this._targetElement.removeAttribute('aria-expanded');
             this._targetElement.removeAttribute('aria-controls');
         }
         if (this._listDropdown) {
-            this._listDropdown.close();
+            await this._listDropdown.close();
             this._listDropdown.destroy();
             this._listDropdown = undefined;
         }

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

@@ -4,8 +4,9 @@
  * License: Apache-2.0
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { PositionPlacement } from '../core/utils/position-utils';
 import { CascadingListDropdownAwareFoundation } from '../list-dropdown';
-import { IPopupPosition, PopupPlacement } from '../popup';
+import type { IOverlayOffset } from '../overlay/overlay-constants';
 import { IMenuOption } from './index';
 import { IMenuAdapter } from './menu-adapter';
 import { IMenuOptionGroup, IMenuSelectEventData, MenuMode, MenuOptionBuilder, MenuOptionFactory } from './menu-constants';
@@ -18,13 +19,13 @@ export interface IMenuFoundation extends ICustomElementFoundation {
     optionsFactory: MenuOptionFactory | undefined;
     selectedIndex: number;
     selectedValue: any;
-    placement: PopupPlacement;
-    fallbackPlacements: PopupPlacement[];
+    placement: PositionPlacement;
+    fallbackPlacements: PositionPlacement[];
     dense: boolean;
     iconClass: string;
     persistSelection: boolean;
     mode: MenuMode;
-    popupOffset: IPopupPosition;
+    popupOffset: IOverlayOffset;
     optionBuilder: MenuOptionBuilder | undefined;
     activateFirstOption(): void;
 }
@@ -92,10 +93,10 @@ export declare class MenuFoundation extends CascadingListDropdownAwareFoundation
     get selectedIndex(): number;
     set selectedValue(value: any);
     get selectedValue(): any;
-    get placement(): PopupPlacement;
-    set placement(value: PopupPlacement);
-    get fallbackPlacements(): PopupPlacement[];
-    set fallbackPlacements(value: PopupPlacement[]);
+    get placement(): PositionPlacement;
+    set placement(value: PositionPlacement);
+    get fallbackPlacements(): PositionPlacement[];
+    set fallbackPlacements(value: PositionPlacement[]);
     get dense(): boolean;
     set dense(value: boolean);
     get iconClass(): string;
@@ -104,8 +105,8 @@ export declare class MenuFoundation extends CascadingListDropdownAwareFoundation
     set persistSelection(value: boolean);
     get mode(): MenuMode;
     set mode(value: MenuMode);
-    get popupOffset(): IPopupPosition;
-    set popupOffset(value: IPopupPosition);
+    get popupOffset(): IOverlayOffset;
+    set popupOffset(value: IOverlayOffset);
     get optionBuilder(): MenuOptionBuilder | undefined;
     set optionBuilder(cb: MenuOptionBuilder | undefined);
     get popupElement(): HTMLElement | null;

package/esm/menu/menu-foundation.js

@@ -34,9 +34,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
         this._initializeInteractionListeners();
     }
     disconnect() {
-        if (this._open) {
-            this._closeDropdown();
-        }
+        this._closeMenu({ destroy: true });
         this._destroyInteractionListeners();
     }
     activateFirstOption() {
@@ -269,10 +267,15 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
         });
         this._adapter.emitHostEvent(MENU_CONSTANTS.events.OPEN);
     }
-    _closeMenu() {
+    _closeMenu({ destroy = false } = {}) {
         this._open = false;
         this._childOpen = false;
-        this._adapter.detachMenu();
+        if (destroy) {
+            this._adapter.destroyListDropdown();
+        }
+        else {
+            this._adapter.detachMenu();
+        }
         if (this._activeMouseLeaveTimeout !== undefined) {
             window.clearTimeout(this._activeMouseLeaveTimeout);
         }
@@ -382,7 +385,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
     _createCascadingElement({ index, options, parentValue }) {
         const menu = this._adapter.createChildMenu(index, parentValue, this._onCascadingChildOpen.bind(this), this._onCascadingChildClose.bind(this), this._onCascadingOptionSelected.bind(this));
         menu.mode = 'cascade';
-        menu.popupOffset = { x: 0, y: -8 };
+        menu.popupOffset = { mainAxis: 0, crossAxis: -8 };
         menu.dense = this._dense;
         menu.placement = 'right-start';
         menu.fallbackPlacements = ['left-start', 'right-start']; // Cascading menus should only fallback to left or right placement if needed

package/esm/menu/menu.d.ts

@@ -3,21 +3,22 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { PositionPlacement } from '../core/utils/position-utils';
 import { IListDropdownAware, ListDropdownAware } from '../list-dropdown/list-dropdown-aware';
-import { IPopupPosition, PopupPlacement } from '../popup';
+import type { IOverlayOffset } from '../overlay/overlay-constants';
 import { IMenuActiveChangeEventData, IMenuOption, IMenuOptionGroup, IMenuSelectEventData, MenuMode, MenuOptionBuilder, MenuOptionFactory } from './menu-constants';
 export interface IMenuComponent extends IListDropdownAware {
     open: boolean;
     options: Array<IMenuOption | IMenuOptionGroup> | MenuOptionFactory;
     selectedIndex: number;
     selectedValue: number;
-    placement: PopupPlacement;
-    fallbackPlacements: PopupPlacement[];
+    placement: PositionPlacement;
+    fallbackPlacements: PositionPlacement[];
     dense: boolean;
     iconClass: string;
     persistSelection: boolean;
     mode: MenuMode;
-    popupOffset: IPopupPosition;
+    popupOffset: IOverlayOffset;
     optionBuilder: MenuOptionBuilder | undefined;
     popupElement: HTMLElement | undefined;
     propagateKeyEvent(evt: KeyboardEvent): void;
@@ -55,9 +56,9 @@ export declare class MenuComponent extends ListDropdownAware implements IMenuCom
     /** Gets/sets the value of the option to select. */
     selectedValue: any;
     /** Gets/sets the menu placement (default is bottom-left). */
-    placement: `${PopupPlacement}`;
+    placement: `${PositionPlacement}`;
     /** Gets/sets the fallback menu placement for overriding the default of any side. */
-    fallbackPlacements: `${PopupPlacement}`[];
+    fallbackPlacements: `${PositionPlacement}`[];
     /** Gets/sets dense state of the list options used in the menu popup. */
     dense: boolean;
     /** Gets/sets the class name to use for option icons. */
@@ -70,7 +71,7 @@ export declare class MenuComponent extends ListDropdownAware implements IMenuCom
     /** Gets/sets the mode that this menu is using. */
     mode: MenuMode;
     /** Sets the position adjustment on the internal popup element. */
-    popupOffset: IPopupPosition;
+    popupOffset: IOverlayOffset;
     /** Sets the callback that will be executed for each option in the dropdown for producing custom option templates. */
     optionBuilder: MenuOptionBuilder;
     /**

package/esm/menu/menu.js

@@ -9,7 +9,7 @@ import { tylIconArrowRight } from '@tylertech/tyler-icons/standard';
 import { IconRegistry } from '../icon';
 import { ListComponent } from '../list';
 import { ListDropdownAware } from '../list-dropdown/list-dropdown-aware';
-import { PopupComponent } from '../popup';
+import { PopoverComponent } from '../popover';
 import { MenuAdapter } from './menu-adapter';
 import { MENU_CONSTANTS } from './menu-constants';
 import { MenuFoundation } from './menu-foundation';
@@ -135,7 +135,7 @@ MenuComponent = __decorate([
     CustomElement({
         name: MENU_CONSTANTS.elementName,
         dependencies: [
-            PopupComponent,
+            PopoverComponent,
             ListComponent
         ]
     })

package/esm/overlay/overlay-adapter.d.ts

@@ -34,7 +34,6 @@ export declare class OverlayAdapter extends BaseAdapter<IOverlayComponent> imple
     private _rootElement;
     private _autoUpdateCleanup?;
     private _lightDismissController;
-    private _overlayStackAddTimeout?;
     constructor(component: IOverlayComponent);
     show(): Promise<void>;
     hide(): void;

package/esm/overlay/overlay-adapter.js

@@ -28,7 +28,6 @@ export class OverlayAdapter extends BaseAdapter {
     }
     hide() {
         var _a;
-        window.clearTimeout(this._overlayStackAddTimeout);
         this.tryCleanupAutoUpdate();
         if (SUPPORTS_POPOVER && this._rootElement.matches(':popover-open')) {
             this._rootElement.hidePopover();
@@ -81,7 +80,7 @@ export class OverlayAdapter extends BaseAdapter {
                 flip: flip !== 'never',
                 flipOptions: {
                     boundary: SUPPORTS_POPOVER ? document.body : 'clippingAncestors',
-                    fallbackStrategy: 'initialPlacement',
+                    fallbackStrategy: 'bestFit',
                     fallbackPlacements: (_a = fallbackPlacements !== null && fallbackPlacements !== void 0 ? fallbackPlacements : OVERLAY_FALLBACK_PLACEMENT_MAP[placement]) !== null && _a !== void 0 ? _a : DEFAULT_FALLBACK_PLACEMENTS,
                     crossAxis: flip === 'cross' || flip === 'auto',
                     mainAxis: flip === 'main' || flip === 'auto'

package/esm/paginator/paginator.js

@@ -14,7 +14,7 @@ import { SelectComponent } from '../select';
 import { IconComponent, IconRegistry } from '../icon';
 import { BaseComponent } from '../core/base/base-component';
 import { TooltipComponent } from '../tooltip';
-const template = '<template><div class=\"forge-paginator\" part=\"root\"><div class=\"forge-paginator__container\" part=\"container\"><div class=\"forge-paginator__label\" part=\"label\"></div><forge-select class=\"forge-paginator__page-size-options\" aria-label=\"Choose page size\" density=\"dense\" part=\"page-size-options\"></forge-select><div class=\"forge-paginator__range-label\" part=\"range-label\"></div><forge-icon-button class=\"forge-paginator__first-page\" part=\"first-page-button\" part=\"first-page-button-element\"><forge-icon name=\"first_page\" part=\"first-page-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"top\">Go to the first page</forge-tooltip><forge-icon-button class=\"forge-paginator__previous-page\" part=\"previous-page-button\" part=\"previous-page-button-element\"><forge-icon name=\"keyboard_arrow_left\" part=\"previous-page-button-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"top\">Go to the previous page</forge-tooltip><div class=\"forge-paginator__range-label--alternative\" part=\"range-label-alternative\"></div><forge-icon-button class=\"forge-paginator__next-page\" part=\"next-page-button\" part=\"next-page-button-element\"><forge-icon name=\"keyboard_arrow_right\" part=\"next-page-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"top\">Go to the next page</forge-tooltip><forge-icon-button class=\"forge-paginator__last-page\" part=\"last-page-button\" part=\"last-page-button-element\"><forge-icon name=\"last_page\" part=\"last-page-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"top\">Go to the last page</forge-tooltip></div></div></template>';
+const template = '<template><div class=\"forge-paginator\" part=\"root\"><div class=\"forge-paginator__container\" part=\"container\"><div class=\"forge-paginator__label\" part=\"label\"></div><forge-select class=\"forge-paginator__page-size-options\" aria-label=\"Choose page size\" label-position=\"none\" density=\"extra-small\" part=\"page-size-options\"></forge-select><div class=\"forge-paginator__range-label\" part=\"range-label\"></div><forge-icon-button class=\"forge-paginator__first-page\" part=\"first-page-button\" part=\"first-page-button-element\"><forge-icon name=\"first_page\" part=\"first-page-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"top\">Go to the first page</forge-tooltip><forge-icon-button class=\"forge-paginator__previous-page\" part=\"previous-page-button\" part=\"previous-page-button-element\"><forge-icon name=\"keyboard_arrow_left\" part=\"previous-page-button-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"top\">Go to the previous page</forge-tooltip><div class=\"forge-paginator__range-label--alternative\" part=\"range-label-alternative\"></div><forge-icon-button class=\"forge-paginator__next-page\" part=\"next-page-button\" part=\"next-page-button-element\"><forge-icon name=\"keyboard_arrow_right\" part=\"next-page-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"top\">Go to the next page</forge-tooltip><forge-icon-button class=\"forge-paginator__last-page\" part=\"last-page-button\" part=\"last-page-button-element\"><forge-icon name=\"last_page\" part=\"last-page-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"top\">Go to the last page</forge-tooltip></div></div></template>';
 const styles = '.forge-paginator{display:inline-block}.forge-paginator--alternative{display:-webkit-box;display:flex}.forge-paginator--alternative .forge-paginator__label,.forge-paginator--alternative .forge-paginator__page-size-options,.forge-paginator--alternative .forge-paginator__range-label{display:none}.forge-paginator--alternative .forge-paginator__range-label--alternative{display:inline-block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);margin:0 12px}.forge-paginator__range-label--alternative{display:none}.forge-paginator__container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.forge-paginator__label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);margin-right:16px}.forge-paginator__page-size-options{margin-right:16px}.forge-paginator__range-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);margin-right:8px}.forge-paginator__first-page,.forge-paginator__last-page,.forge-paginator__next-page,.forge-paginator__previous-page{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}:host{display:inline-block}:host([hidden]){display:none}:host([alternative]) .forge-paginator--alignment-center .forge-paginator__container{-webkit-box-pack:center;justify-content:center}:host([alternative]) .forge-paginator--alignment-center .forge-paginator__range-label--alternative{margin:0 auto}:host([alternative]) .forge-paginator--alignment-start .forge-paginator__container{-webkit-box-pack:start;justify-content:flex-start}:host([alternative]) .forge-paginator--alignment-end .forge-paginator__container{-webkit-box-pack:end;justify-content:flex-end}:host([alternative]) .forge-paginator .forge-paginator__container{-webkit-box-flex:1;flex:1}';
 /**
  * @tag forge-paginator