@tylertech/forge 3.8.0-dev.2 → 3.8.0-dev.4

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

@@ -9,42 +9,46 @@ import { BaseComponent } from '../core/base/base-component';
 import { LIST_DROPDOWN_CONSTANTS } from './list-dropdown-constants';
 export class ListDropdownAware extends BaseComponent {
     static get observedAttributes() {
-        return [
-            LIST_DROPDOWN_CONSTANTS.attributes.POPUP_CLASSES,
-            LIST_DROPDOWN_CONSTANTS.attributes.OPTION_LIMIT,
-            LIST_DROPDOWN_CONSTANTS.attributes.OBSERVE_SCROLL,
-            LIST_DROPDOWN_CONSTANTS.attributes.OBSERVE_SCROLL_THRESHOLD,
-            LIST_DROPDOWN_CONSTANTS.attributes.SYNC_POPUP_WIDTH,
-            LIST_DROPDOWN_CONSTANTS.attributes.CONSTRAIN_POPUP_WIDTH,
-            LIST_DROPDOWN_CONSTANTS.attributes.WRAP_OPTION_TEXT
-        ];
+        return Object.values(LIST_DROPDOWN_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case LIST_DROPDOWN_CONSTANTS.attributes.POPUP_CLASSES:
+            case LIST_DROPDOWN_CONSTANTS.observedAttributes.POPUP_CLASSES:
                 this.popupClasses = newValue;
                 break;
-            case LIST_DROPDOWN_CONSTANTS.attributes.OPTION_LIMIT:
+            case LIST_DROPDOWN_CONSTANTS.observedAttributes.OPTION_LIMIT:
                 this.optionLimit = coerceNumber(newValue);
                 break;
-            case LIST_DROPDOWN_CONSTANTS.attributes.OBSERVE_SCROLL:
+            case LIST_DROPDOWN_CONSTANTS.observedAttributes.OBSERVE_SCROLL:
                 this.observeScroll = coerceBoolean(newValue);
                 break;
-            case LIST_DROPDOWN_CONSTANTS.attributes.OBSERVE_SCROLL_THRESHOLD:
+            case LIST_DROPDOWN_CONSTANTS.observedAttributes.OBSERVE_SCROLL_THRESHOLD:
                 this.observeScrollThreshold = coerceNumber(newValue);
                 break;
-            case LIST_DROPDOWN_CONSTANTS.attributes.SYNC_POPUP_WIDTH:
+            case LIST_DROPDOWN_CONSTANTS.observedAttributes.SYNC_POPUP_WIDTH:
                 this.syncPopupWidth = coerceBoolean(newValue);
                 break;
-            case LIST_DROPDOWN_CONSTANTS.attributes.CONSTRAIN_POPUP_WIDTH:
+            case LIST_DROPDOWN_CONSTANTS.observedAttributes.CONSTRAIN_POPUP_WIDTH:
                 this.constrainPopupWidth = coerceBoolean(newValue);
                 break;
-            case LIST_DROPDOWN_CONSTANTS.attributes.WRAP_OPTION_TEXT:
+            case LIST_DROPDOWN_CONSTANTS.observedAttributes.WRAP_OPTION_TEXT:
                 this.wrapOptionText = coerceBoolean(newValue);
                 break;
+            case LIST_DROPDOWN_CONSTANTS.observedAttributes.POPOVER_PLACEMENT:
+                this.popoverPlacement = newValue;
+                break;
+            case LIST_DROPDOWN_CONSTANTS.observedAttributes.POPOVER_OFFSET:
+                this.popoverOffset = JSON.parse(newValue);
+                break;
+            case LIST_DROPDOWN_CONSTANTS.observedAttributes.POPOVER_FLIP:
+                this.popoverFlip = newValue;
+                break;
+            case LIST_DROPDOWN_CONSTANTS.observedAttributes.POPOVER_SHIFT:
+                this.popoverShift = newValue;
+                break;
         }
     }
 }
@@ -75,3 +79,18 @@ __decorate([
 __decorate([
     coreProperty()
 ], ListDropdownAware.prototype, "wrapOptionText", void 0);
+__decorate([
+    coreProperty()
+], ListDropdownAware.prototype, "popoverPlacement", void 0);
+__decorate([
+    coreProperty()
+], ListDropdownAware.prototype, "popoverOffset", void 0);
+__decorate([
+    coreProperty()
+], ListDropdownAware.prototype, "popoverFlip", void 0);
+__decorate([
+    coreProperty()
+], ListDropdownAware.prototype, "popoverShift", void 0);
+__decorate([
+    coreProperty()
+], ListDropdownAware.prototype, "popoverFallbackPlacements", void 0);

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

@@ -4,11 +4,11 @@
  * License: Apache-2.0
  */
 import type { IIconComponent } from '../icon';
-import type { IOverlayOffset } from '../overlay/overlay-constants';
+import type { IOverlayOffset, OverlayFlipState, OverlayShiftState } from '../overlay/overlay-constants';
 import { PositionPlacement } from '../core/utils/position-utils';
 import { TooltipPlacement, TooltipType } from '../tooltip';
 export declare const LIST_DROPDOWN_CONSTANTS: {
-    attributes: {
+    observedAttributes: {
         POPUP_CLASSES: string;
         OPTION_LIMIT: string;
         OBSERVE_SCROLL: string;
@@ -16,8 +16,25 @@ export declare const LIST_DROPDOWN_CONSTANTS: {
         SYNC_POPUP_WIDTH: string;
         CONSTRAIN_POPUP_WIDTH: string;
         WRAP_OPTION_TEXT: string;
+        POPOVER_PLACEMENT: string;
+        POPOVER_OFFSET: string;
+        POPOVER_FLIP: string;
+        POPOVER_SHIFT: string;
+    };
+    attributes: {
         CHECKBOX_ELEMENT: string;
         DATA_ALLOW_FOCUS: string;
+        POPUP_CLASSES: string;
+        OPTION_LIMIT: string;
+        OBSERVE_SCROLL: string;
+        OBSERVE_SCROLL_THRESHOLD: string;
+        SYNC_POPUP_WIDTH: string;
+        CONSTRAIN_POPUP_WIDTH: string;
+        WRAP_OPTION_TEXT: string;
+        POPOVER_PLACEMENT: string;
+        POPOVER_OFFSET: string;
+        POPOVER_FLIP: string;
+        POPOVER_SHIFT: string;
     };
     classes: {
         GROUP_WRAPPER: string;
@@ -85,7 +102,9 @@ export interface IListDropdownConfig<T = any> {
     popupOffset?: IOverlayOffset;
     popupStatic?: boolean;
     popupPlacement?: PositionPlacement;
-    popupFallbackPlacements?: PositionPlacement[];
+    popupFlip?: OverlayFlipState;
+    popupShift?: OverlayShiftState;
+    popupFallbackPlacements?: PositionPlacement[] | null;
     optionLimit?: number;
     optionBuilder?: ListDropdownOptionBuilder;
     observeScroll?: boolean;

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

@@ -3,7 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-const attributes = {
+const observedAttributes = {
     POPUP_CLASSES: 'popup-classes',
     OPTION_LIMIT: 'option-limit',
     OBSERVE_SCROLL: 'observe-scroll',
@@ -11,6 +11,13 @@ const attributes = {
     SYNC_POPUP_WIDTH: 'sync-popup-width',
     CONSTRAIN_POPUP_WIDTH: 'constrain-popup-width',
     WRAP_OPTION_TEXT: 'wrap-option-text',
+    POPOVER_PLACEMENT: 'popover-placement',
+    POPOVER_OFFSET: 'popover-offset',
+    POPOVER_FLIP: 'popover-flip',
+    POPOVER_SHIFT: 'popover-shift'
+};
+const attributes = {
+    ...observedAttributes,
     // Internal
     CHECKBOX_ELEMENT: 'data-list-dropdown-checkbox',
     DATA_ALLOW_FOCUS: 'data-list-dropdown-allow-focus'
@@ -19,6 +26,7 @@ const classes = {
     GROUP_WRAPPER: 'forge-list-dropdown__group-wrapper'
 };
 export const LIST_DROPDOWN_CONSTANTS = {
+    observedAttributes,
     attributes,
     classes
 };

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

@@ -60,6 +60,12 @@ export function createPopupDropdown(config, targetElement) {
     if (config.popupOffset) {
         popoverElement.offset = config.popupOffset;
     }
+    if (config.popupFlip) {
+        popoverElement.flip = config.popupFlip;
+    }
+    if (config.popupShift !== undefined) {
+        popoverElement.shift = config.popupShift;
+    }
     // Set the animations based on our type
     if (config.type === ListDropdownType.None) {
         popoverElement.animationType = 'none';

package/esm/menu/menu-core.js

@@ -238,6 +238,8 @@ export class MenuCore extends CascadingListDropdownAwareCore {
             observeScroll: this._observeScroll,
             observeScrollThreshold: this._observeScrollThreshold,
             popupPlacement: this._placement,
+            popupFlip: this._popoverFlip,
+            popupShift: this._popoverShift,
             popupFallbackPlacements: this._fallbackPlacements,
             activeStartIndex: fromKeyboard ? 0 : undefined,
             popupClasses: [MENU_CONSTANTS.classes.POPUP, ...this._popupClasses],

package/esm/menu/menu.js

@@ -25,6 +25,7 @@ const styles = ':host{display:inline-flex}:host([hidden]){display:none}';
 let MenuComponent = class MenuComponent extends ListDropdownAware {
     static get observedAttributes() {
         return [
+            ...ListDropdownAware.observedAttributes,
             MENU_CONSTANTS.attributes.OPEN,
             MENU_CONSTANTS.attributes.PLACEMENT,
             MENU_CONSTANTS.attributes.SELECTED_INDEX,

package/esm/meter/meter/meter.d.ts

@@ -3,8 +3,11 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { Theme } from '../../constants';
+import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
+import { BaseLitElement } from '../../core/base/base-lit-element';
+export declare const METER_TAG_NAME: keyof HTMLElementTagNameMap;
 export type MeterDirection = 'horizontal' | 'vertical';
 export type MeterDensity = 'default' | 'small' | 'medium' | 'large';
 export type MeterShape = 'default' | 'round' | 'squared';
@@ -47,9 +50,11 @@ export type MeterValueMode = 'manual' | 'percentage' | 'value';
  * @slot - The default slot for the meter's label.
  * @slot value - A textual representation of the meter's value.
  */
-export declare class MeterComponent extends LitElement {
+export declare class MeterComponent extends BaseLitElement {
     static styles: import("lit").CSSResult;
     static formAssociated: boolean;
+    /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+    static [CUSTOM_ELEMENT_NAME_PROPERTY]: keyof HTMLElementTagNameMap;
     /**
      * The current value of the meter.
      * @default 0

package/esm/meter/meter/meter.js

@@ -3,14 +3,18 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+var _a;
 import { __decorate } from "tslib";
-import { LitElement, html, unsafeCSS } from 'lit';
+import { html, unsafeCSS } from 'lit';
 import { customElement, property, queryAssignedNodes, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { setDefaultAria } from '../../core/utils/a11y-utils';
 import { toggleState } from '../../core/utils/utils';
+import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
+import { BaseLitElement } from '../../core/base/base-lit-element';
 const styles = ':host{display:inline}.forge-meter{--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary, #3d5afe));--_meter-height:var(--forge-meter-height, var(--forge-spacing-medium, 16px));--_meter-shape:var(--forge-meter-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_meter-inner-shape:var(--forge-meter-inner-shape, 0);--_meter-inner-elevation:var(--forge-meter-inner-elevation, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_meter-tickmarks:var(--forge-meter-tickmarks, 10);--_meter-tickmark-opacity:var(--forge-meter-tickmark-opacity, 54%);--_meter-transition-duration:var(--forge-meter-transition-duration, var(--forge-animation-duration-short4, 200ms));--_meter-transition-timing:var(--forge-meter-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-meter{box-sizing:border-box}.forge-meter .heading{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);display:flex;align-items:center;justify-content:space-between;line-height:normal}.forge-meter .heading.not-empty{margin-bottom:var(--forge-spacing-xxsmall,4px)}.forge-meter .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.forge-meter .value{color:var(--forge-theme-text-medium,rgba(0,0,0,.6))}.forge-meter .track{position:relative;block-size:var(--_meter-height);border-radius:var(--_meter-shape);overflow:hidden;background:var(--_meter-background)}.forge-meter .track.segmented{--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-low, #f9e9e0));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning, #d14900));transition-property:background;transition-duration:var(--_meter-transition-duration);transition-timing-function:var(--_meter-transition-timing)}.forge-meter .track.segmented.least-optimal{--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-low, #f6e0e4));--_meter-color:var(--forge-meter-color, var(--forge-theme-error, #b00020))}.forge-meter .track.segmented.optimal{--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-low, #e6efe6));--_meter-color:var(--forge-meter-color, var(--forge-theme-success, #2e7d32))}.forge-meter .track.segmented .bar{transition-property:translate,box-shadow,background;transition-duration:var(--_meter-transition-duration);transition-timing-function:var(--_meter-transition-timing)}.forge-meter .track.lowest{--_meter-inner-elevation:var(--forge-meter-inner-elevation, 0)}.forge-meter .track.tickmarks::after{content:\"\";position:relative;display:block;width:100%;height:100%;margin-left:2px;background:repeating-linear-gradient(90deg,var(--_meter-color) 0,var(--_meter-color) 1px,var(--_meter-background) 1px,var(--_meter-background) 2px,transparent 2px,transparent calc(100% / (var(--_meter-tickmarks) + 1) + 0px));background-position-x:-2px;opacity:var(--_meter-tickmark-opacity);pointer-events:none;transition-property:background;transition-duration:var(--_meter-transition-duration);transition-timing-function:var(--_meter-transition-timing)}.forge-meter .bar{position:absolute;left:-100%;width:100%;height:100%;border-radius:var(--_meter-inner-shape);box-shadow:var(--_meter-inner-elevation);background:var(--_meter-color);translate:var(--_meter-percentage) 0;transition-property:translate,box-shadow;transition-duration:var(--_meter-transition-duration);transition-timing-function:var(--_meter-transition-timing)}.forge-meter.grouped{display:block;position:absolute;z-index:var(--_meter-z-index);top:0;left:var(--_meter-inset);width:calc(var(--_meter-percentage) + var(--_meter-group-height) * .5);height:100%;border-radius:var(--_meter-inner-shape);border-top-left-radius:0;border-bottom-left-radius:0;margin-left:calc(-1 * var(--_meter-group-height) * .5);background:var(--_meter-color);box-shadow:var(--_meter-inner-elevation)}.forge-meter.grouped.muted{--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary-container-high, #b5c0ff))}.forge-meter.density--small{--_meter-height:var(--forge-meter-height, var(--forge-spacing-xsmall, 8px))}.forge-meter.density--medium{--_meter-height:var(--forge-meter-height, var(--forge-spacing-medium, 16px))}.forge-meter.density--large{--_meter-height:var(--forge-meter-height, var(--forge-spacing-large, 24px))}.forge-meter.shape--default{--_meter-shape:var(--forge-meter-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)))}.forge-meter.shape--rounded{--_meter-shape:var(--forge-meter-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)))}.forge-meter.shape--squared{--_meter-shape:var(--forge-meter-shape, 0)}.forge-meter.inner-shape--inherit{--_meter-inner-shape:var(--_meter-shape)}.forge-meter.muted .track{--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary-container-high, #b5c0ff))}.forge-meter.muted .track.segmented{--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning-container-high, #eeba9e))}.forge-meter.muted .track.segmented.least-optimal{--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_meter-color:var(--forge-meter-color, var(--forge-theme-error-container-high, #e19eaa))}.forge-meter.muted .track.segmented.optimal{--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-minimum, #f7faf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-success-container-high, #b0ceb1))}:host(:is(:state(vertical),:--vertical)){display:block}:host(:is(:state(vertical),:--vertical)) .forge-meter{display:flex;flex-direction:row-reverse;align-items:end;width:fit-content;height:100%;max-width:100%}:host(:is(:state(vertical),:--vertical)) .forge-meter .heading{flex-direction:column;align-items:start}:host(:is(:state(vertical),:--vertical)) .forge-meter .heading.not-empty{margin-bottom:0;margin-left:var(--forge-spacing-xsmall,8px)}:host(:is(:state(vertical),:--vertical)) .forge-meter .track{width:var(--_meter-height);height:100%}:host(:is(:state(vertical),:--vertical)) .forge-meter .track.tickmarks::after{margin-top:-2px;margin-left:0;background:repeating-linear-gradient(0,var(--_meter-color) 0,var(--_meter-color) 1px,var(--_meter-background) 1px,var(--_meter-background) 2px,transparent 2px,transparent calc(100% / (var(--_meter-tickmarks) + 1) + 0px));background-position-x:0;background-position-y:2px}:host(:is(:state(vertical),:--vertical)) .forge-meter .bar{left:initial;top:100%;translate:0 calc(-1 * var(--_meter-percentage))}:host(:is(:state(vertical),:--vertical)) .forge-meter.grouped{display:block;top:calc(100% - var(--_meter-percentage) - var(--_meter-inset));left:0;width:100%;height:calc(var(--_meter-percentage) + var(--_meter-group-height) * .5);max-width:initial;border-radius:var(--_meter-inner-shape);border-bottom-left-radius:0;border-bottom-right-radius:0;margin-left:0;margin-bottom:calc(-1 * var(--_meter-group-height) * .5)}.theme--primary:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-primary-container-low, #e8eaf6));--_meter-color:var(--forge-meter-color, var(--forge-theme-primary, #3f51b5))}.theme--primary:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-primary-container-low, #e8eaf6));--_meter-color:var(--forge-meter-color, var(--forge-theme-primary, #3f51b5))}.theme--primary.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_meter-color:var(--forge-meter-color, var(--forge-theme-primary-container-high, #b6bde3))}.theme--primary.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_meter-color:var(--forge-meter-color, var(--forge-theme-primary-container-high, #b6bde3))}.theme--secondary:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-secondary-container-low, #fff8e1));--_meter-color:var(--forge-meter-color, var(--forge-theme-secondary, #ffc107))}.theme--secondary:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-secondary-container-low, #fff8e1));--_meter-color:var(--forge-meter-color, var(--forge-theme-secondary, #ffc107))}.theme--secondary.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-secondary-container-minimum, #fffdf5));--_meter-color:var(--forge-meter-color, var(--forge-theme-secondary-container-high, #ffe7a1))}.theme--secondary.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-secondary-container-minimum, #fffdf5));--_meter-color:var(--forge-meter-color, var(--forge-theme-secondary-container-high, #ffe7a1))}.theme--tertiary:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary, #3d5afe))}.theme--tertiary:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary, #3d5afe))}.theme--tertiary.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary-container-high, #b5c0ff))}.theme--tertiary.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary-container-high, #b5c0ff))}.theme--success:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-low, #e6efe6));--_meter-color:var(--forge-meter-color, var(--forge-theme-success, #2e7d32))}.theme--success:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-low, #e6efe6));--_meter-color:var(--forge-meter-color, var(--forge-theme-success, #2e7d32))}.theme--success.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-minimum, #f7faf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-success-container-high, #b0ceb1))}.theme--success.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-minimum, #f7faf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-success-container-high, #b0ceb1))}.theme--warning:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-low, #f9e9e0));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning, #d14900))}.theme--warning:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-low, #f9e9e0));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning, #d14900))}.theme--warning.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning-container-high, #eeba9e))}.theme--warning.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning-container-high, #eeba9e))}.theme--error:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-low, #f6e0e4));--_meter-color:var(--forge-meter-color, var(--forge-theme-error, #b00020))}.theme--error:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-low, #f6e0e4));--_meter-color:var(--forge-meter-color, var(--forge-theme-error, #b00020))}.theme--error.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_meter-color:var(--forge-meter-color, var(--forge-theme-error-container-high, #e19eaa))}.theme--error.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_meter-color:var(--forge-meter-color, var(--forge-theme-error-container-high, #e19eaa))}.theme--info:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-info-container-low, #e3edf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-info, #1565c0))}.theme--info:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-info-container-low, #e3edf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-info, #1565c0))}.theme--info.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-info-container-minimum, #f6f9fc));--_meter-color:var(--forge-meter-color, var(--forge-theme-info-container-high, #a6c4e7))}.theme--info.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-info-container-minimum, #f6f9fc));--_meter-color:var(--forge-meter-color, var(--forge-theme-info-container-high, #a6c4e7))}@media (prefers-reduced-motion:reduce){.track{--_meter-transition-duration:var(--forge-meter-transition-duration, 0)}}@media (forced-colors:active){.track{border:1px solid CanvasText}.track .bar{background:CanvasText}.grouped{border-inline-end:1px solid Canvas!important;background:CanvasText!important}:host(:is(:state(vertical),:--vertical)) .grouped{border-block-start:1px solid CanvasText!important;border-inline-end:initial!important}}';
+export const METER_TAG_NAME = 'forge-meter';
 const VALUE_STATE_MAP = new Map([
     ['optimal', 'optimum-value'],
     ['suboptimal', 'suboptimum-value'],
@@ -51,7 +55,7 @@ const VALUE_STATE_MAP = new Map([
  * @slot - The default slot for the meter's label.
  * @slot value - A textual representation of the meter's value.
  */
-let MeterComponent = class MeterComponent extends LitElement {
+let MeterComponent = class MeterComponent extends BaseLitElement {
     /**
      * Gets the percentage of the meter that's filled.
      * @readonly
@@ -289,8 +293,11 @@ let MeterComponent = class MeterComponent extends LitElement {
         VALUE_STATE_MAP.forEach((value, status) => toggleState(this._internals, value, this._status === status));
     }
 };
+_a = CUSTOM_ELEMENT_NAME_PROPERTY;
 MeterComponent.styles = unsafeCSS(styles);
 MeterComponent.formAssociated = true;
+/** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+MeterComponent[_a] = METER_TAG_NAME;
 __decorate([
     property({ type: Number })
 ], MeterComponent.prototype, "value", void 0);
@@ -355,6 +362,6 @@ __decorate([
     queryAssignedNodes({ slot: 'value' })
 ], MeterComponent.prototype, "_valueNodes", void 0);
 MeterComponent = __decorate([
-    customElement('forge-meter')
+    customElement(METER_TAG_NAME)
 ], MeterComponent);
 export { MeterComponent };

package/esm/meter/meter-group/index.js

@@ -4,8 +4,8 @@
  * License: Apache-2.0
  */
 import { tryDefine } from '@tylertech/forge-core';
-import { MeterGroupComponent } from './meter-group';
+import { METER_GROUP_TAG_NAME, MeterGroupComponent } from './meter-group';
 export * from './meter-group';
 export function defineMeterGroupComponent() {
-    tryDefine('forge-meter-group', MeterGroupComponent);
+    tryDefine(METER_GROUP_TAG_NAME, MeterGroupComponent);
 }

package/esm/meter/meter-group/meter-group.d.ts

@@ -3,8 +3,11 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
+import { PropertyValues, TemplateResult } from 'lit';
 import { MeterDensity, MeterDirection, MeterInnerShape, MeterShape } from '../meter/meter';
+import { BaseLitElement } from '../../core/base/base-lit-element';
+export declare const METER_GROUP_TAG_NAME: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-meter-group
  *
@@ -26,9 +29,11 @@ import { MeterDensity, MeterDirection, MeterInnerShape, MeterShape } from '../me
  * @slot label - Positions a label above the meter group.
  * @slot value - A textual representation of the meter's value.
  */
-export declare class MeterGroupComponent extends LitElement {
+export declare class MeterGroupComponent extends BaseLitElement {
     static styles: import("lit").CSSResult;
     static formAssociated: boolean;
+    /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+    static [CUSTOM_ELEMENT_NAME_PROPERTY]: keyof HTMLElementTagNameMap;
     /**
      * The minimum value of each meter in the group.
      * @default 0

package/esm/meter/meter-group/meter-group.js

@@ -3,14 +3,17 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+var _a;
 import { __decorate } from "tslib";
-import { debounce } from '@tylertech/forge-core';
-import { html, LitElement, unsafeCSS } from 'lit';
+import { CUSTOM_ELEMENT_NAME_PROPERTY, debounce } from '@tylertech/forge-core';
+import { html, unsafeCSS } from 'lit';
 import { customElement, property, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { setDefaultAria } from '../../core/utils/a11y-utils';
 import { toggleState } from '../../core/utils/utils';
+import { BaseLitElement } from '../../core/base/base-lit-element';
 const styles = ':host{display:inline}.forge-meter-group{--_meter-group-background:var(--forge-meter-group-background, var(--forge-theme-surface-container-low, #ebebeb));--_meter-group-height:var(--forge-meter-group-height, var(--forge-spacing-medium, 16px));--_meter-group-shape:var(--forge-meter-group-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_meter-group-tickmarks:var(--forge-meter-group-tickmarks, 10);--_meter-group-tickmark-color:var(--forge-meter-group-tickmark-color, var(--forge-theme-outline-high, #212121));--_meter-group-tickmark-opacity:var(--forge-meter-group-tickmark-opacity, 54%)}.forge-meter-group{box-sizing:border-box}.forge-meter-group .heading{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);display:flex;align-items:center;justify-content:space-between;line-height:normal}.forge-meter-group .heading.not-empty{margin-bottom:var(--forge-spacing-xxsmall,4px)}.forge-meter-group .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.forge-meter-group .value{color:var(--forge-theme-text-medium,rgba(0,0,0,.6))}.forge-meter-group .track{position:relative;height:var(--_meter-group-height);border-radius:var(--_meter-group-shape);overflow:hidden;background:var(--_meter-group-background)}.forge-meter-group .track.tickmarks::after{content:\"\";position:relative;display:block;z-index:9999;width:100%;height:100%;margin-left:-1px;background:repeating-linear-gradient(90deg,var(--_meter-group-tickmark-color) 0,var(--_meter-group-tickmark-color) 1px,transparent 1px,transparent calc(100% / (var(--_meter-group-tickmarks) + 1) + 0px));opacity:var(--_meter-group-tickmark-opacity);pointer-events:none}.forge-meter-group .track.inner-shape--inherit{--forge-meter-inner-shape:var(--_meter-group-shape)}.forge-meter-group .track.shape--default{--_meter-group-shape:var(--forge-meter-group-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)))}.forge-meter-group .track.shape--rounded{--_meter-group-shape:var(--forge-meter-group-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)))}.forge-meter-group .track.shape--squared{--_meter-group-shape:var(--forge-meter-group-shape, 0)}.forge-meter-group .track.density--small{--_meter-group-height:var(--forge-meter-group-height, var(--forge-spacing-xsmall, 8px))}.forge-meter-group .track.density--medium{--_meter-group-height:var(--forge-meter-group-height, var(--forge-spacing-medium, 16px))}.forge-meter-group .track.density--large{--_meter-group-height:var(--forge-meter-group-height, var(--forge-spacing-large, 24px))}:host(:is(:state(vertical),:--vertical)){display:block}:host(:is(:state(vertical),:--vertical)) .forge-meter-group{display:flex;flex-direction:row-reverse;align-items:end;width:fit-content;height:100%;max-width:100%}:host(:is(:state(vertical),:--vertical)) .forge-meter-group .heading{flex-direction:column;align-items:start}:host(:is(:state(vertical),:--vertical)) .forge-meter-group .heading.not-empty{margin-bottom:0;margin-left:var(--forge-spacing-xsmall,8px)}:host(:is(:state(vertical),:--vertical)) .forge-meter-group .track{width:var(--_meter-group-height);height:100%}:host(:is(:state(vertical),:--vertical)) .forge-meter-group .track.tickmarks::after{margin-top:1px;margin-left:0;background:repeating-linear-gradient(90deg,var(--_meter-group-tickmark-color),true 0,var(--_meter-group-tickmark-color),true 1px,transparent 1px,transparent calc(100% / (var(--_meter-group-tickmarks) + 1) + 0px))}@media (forced-colors:active){.track{border:1px solid CanvasText}}';
+export const METER_GROUP_TAG_NAME = 'forge-meter-group';
 /**
  * @tag forge-meter-group
  *
@@ -32,7 +35,7 @@ const styles = ':host{display:inline}.forge-meter-group{--_meter-group-backgroun
  * @slot label - Positions a label above the meter group.
  * @slot value - A textual representation of the meter's value.
  */
-let MeterGroupComponent = class MeterGroupComponent extends LitElement {
+let MeterGroupComponent = class MeterGroupComponent extends BaseLitElement {
     get labels() {
         return this._internals.labels;
     }
@@ -157,9 +160,12 @@ let MeterGroupComponent = class MeterGroupComponent extends LitElement {
         this._hasSlottedHeadingContent = !!nodes.length;
     }
 };
+_a = CUSTOM_ELEMENT_NAME_PROPERTY;
 /* @ignore */
 MeterGroupComponent.styles = unsafeCSS(styles);
 MeterGroupComponent.formAssociated = true;
+/** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+MeterGroupComponent[_a] = METER_GROUP_TAG_NAME;
 __decorate([
     property({ type: Number })
 ], MeterGroupComponent.prototype, "min", void 0);
@@ -194,6 +200,6 @@ __decorate([
     queryAssignedElements({ selector: 'forge-meter' })
 ], MeterGroupComponent.prototype, "_meters", void 0);
 MeterGroupComponent = __decorate([
-    customElement('forge-meter-group')
+    customElement(METER_GROUP_TAG_NAME)
 ], MeterGroupComponent);
 export { MeterGroupComponent };

package/esm/overlay/base/overlay-aware.d.ts

@@ -6,7 +6,7 @@
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 import { IOverlayComponent } from '../overlay';
 import { IOverlayAwareCore } from './overlay-aware-core';
-import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy } from '../overlay-constants';
+import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy, OverlayShiftState } from '../overlay-constants';
 import { PositionPlacement, VirtualElement } from '../../core/utils/position-utils';
 import { IBaseOverlay } from './base-overlay';
 export interface IOverlayAware extends IBaseComponent, IBaseOverlay {
@@ -21,7 +21,7 @@ export interface IOverlayAware extends IBaseComponent, IBaseOverlay {
  * @property {OverlayPlacement} [placement="bottom"] - The placement of the overlay.
  * @property {OverlayPositionStrategy} [positionStrategy="fixed"] - The position strategy of the overlay.
  * @property {IOverlayOffset} [offset={}] - The offset of the overlay.
- * @property {boolean} [shift=false] - Whether the overlay should shift to fit within the viewport.
+ * @property {OverlayShiftState} [shift="auto"] - Whether the overlay should shift to fit within the viewport.
  * @property {OverlayHideState} [hide="anchor-hidden"] - The hide state of the overlay.
  * @property {boolean} [persistent=false] - Whether the overlay should persist when the anchor is removed.
  * @property {OverlayFlipState} [flip="auto"] - Whether the overlay should flip placements to another side fit within the viewport.
@@ -37,7 +37,7 @@ export interface IOverlayAware extends IBaseComponent, IBaseOverlay {
  * @attribute {OverlayPlacement} [placement="bottom"] - The placement of the overlay.
  * @attribute {OverlayPositionStrategy} [position-strategy="fixed"] - The position strategy of the overlay.
  * @attribute {IOverlayOffset} offset - The offset of the overlay.
- * @attribute {boolean} [shift=false] - Whether the overlay should shift to fit within the viewport.
+ * @attribute {OverlayShiftState} [shift="auto"] - Whether the overlay should shift to fit within the viewport.
  * @attribute {OverlayHideState} [hide="anchor-hidden"] - The hide state of the overlay.
  * @attribute {boolean} [persistent=false] - Whether the overlay should persist when the anchor is removed.
  * @attribute {OverlayFlipState} [flip="auto"] - Whether the overlay should flip placements to another side fit within the viewport.
@@ -60,7 +60,7 @@ export declare abstract class OverlayAware<T extends IOverlayAwareCore> extends
     placement: OverlayPlacement;
     positionStrategy: OverlayPositionStrategy;
     offset: IOverlayOffset;
-    shift: boolean;
+    shift: OverlayShiftState;
     hide: OverlayHideState;
     persistent: boolean;
     flip: OverlayFlipState;

package/esm/overlay/base/overlay-aware.js

@@ -16,7 +16,7 @@ import { OVERLAY_CONSTANTS } from '../overlay-constants';
  * @property {OverlayPlacement} [placement="bottom"] - The placement of the overlay.
  * @property {OverlayPositionStrategy} [positionStrategy="fixed"] - The position strategy of the overlay.
  * @property {IOverlayOffset} [offset={}] - The offset of the overlay.
- * @property {boolean} [shift=false] - Whether the overlay should shift to fit within the viewport.
+ * @property {OverlayShiftState} [shift="auto"] - Whether the overlay should shift to fit within the viewport.
  * @property {OverlayHideState} [hide="anchor-hidden"] - The hide state of the overlay.
  * @property {boolean} [persistent=false] - Whether the overlay should persist when the anchor is removed.
  * @property {OverlayFlipState} [flip="auto"] - Whether the overlay should flip placements to another side fit within the viewport.
@@ -32,7 +32,7 @@ import { OVERLAY_CONSTANTS } from '../overlay-constants';
  * @attribute {OverlayPlacement} [placement="bottom"] - The placement of the overlay.
  * @attribute {OverlayPositionStrategy} [position-strategy="fixed"] - The position strategy of the overlay.
  * @attribute {IOverlayOffset} offset - The offset of the overlay.
- * @attribute {boolean} [shift=false] - Whether the overlay should shift to fit within the viewport.
+ * @attribute {OverlayShiftState} [shift="auto"] - Whether the overlay should shift to fit within the viewport.
  * @attribute {OverlayHideState} [hide="anchor-hidden"] - The hide state of the overlay.
  * @attribute {boolean} [persistent=false] - Whether the overlay should persist when the anchor is removed.
  * @attribute {OverlayFlipState} [flip="auto"] - Whether the overlay should flip placements to another side fit within the viewport.
@@ -75,7 +75,7 @@ export class OverlayAware extends BaseComponent {
                 this.persistent = coerceBoolean(newValue);
                 break;
             case OVERLAY_CONSTANTS.observedAttributes.SHIFT:
-                this.shift = coerceBoolean(newValue);
+                this.shift = newValue;
                 break;
             case OVERLAY_CONSTANTS.observedAttributes.FLIP:
                 this.flip = newValue;

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

@@ -127,6 +127,11 @@ export class BaseSelectCore extends ListDropdownAwareCore {
             scrollEndListener: this._dropdownScrollEndListener,
             activeChangeCallback: this._activeChangeListener,
             targetWidthCallback: this._targetWidthCallback,
+            popupPlacement: this._popoverPlacement,
+            popupOffset: this._popoverOffset,
+            popupFlip: this._popoverFlip,
+            popupShift: this._popoverShift,
+            popupFallbackPlacements: this._popoverFallbackPlacements,
             popupClasses: this._popupClasses,
             optionLimit: this._optionLimit,
             headerBuilder: this._popupHeaderBuilder,

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

@@ -14,7 +14,8 @@ import { FieldDensity, FieldLabelPosition } from '../../field';
 import { IWithBaseField } from '../../field/base/with-base-field';
 import { BaseSelectComponent, IBaseSelectComponent } from '../core';
 import { SelectCore } from './select-core';
-export interface ISelectComponent extends IWithFormAssociation, IWithFocusable, IWithLabelAwareness, IWithElementInternals, IWithDefaultAria, IWithBaseField, IBaseSelectComponent {
+import { IListDropdownAware } from '../../list-dropdown/list-dropdown-aware';
+export interface ISelectComponent extends IWithFormAssociation, IWithFocusable, IWithLabelAwareness, IWithElementInternals, IWithDefaultAria, IWithBaseField, IBaseSelectComponent, IListDropdownAware {
     label: string;
     placeholder: string;
     setFormValue(value: FormValue | null, state?: FormValue | null | undefined): void;
@@ -63,6 +64,20 @@ declare const SelectComponent_base: import("../../constants").AbstractConstructo
  * @property {SelectOptionBuilder} optionBuilder - Gets/sets the option builder function.
  * @property {SelectSelectedTextBuilder} selectedTextBuilder - Gets/sets the selected text builder function.
  * @property {SelectBeforeValueChangeCallback<any>} beforeValueChange - Gets/sets the before value change callback.
+ * @property {string | string[]; - } popupClasses - Gets/sets the list of classes to apply to the popup element.
+ * @property {ListDropdownHeaderBuilder} popupHeaderBuilder - Gets/sets the callback function for generating header content within the popup.
+ * @property {ListDropdownFooterBuilder} popupFooterBuilder - Gets/sets the callback function for generating header content within the popup.
+ * @property {boolean} [syncPopupWidth=false] - Gets/sets whether the popup width is synchronized with the popup target width.
+ * @property {number} optionLimit - Gets/sets the maximum number of options to display in the dropdown.
+ * @property {boolean} [observeScroll=false] - Controls the observation of scroll events on the dropdown.
+ * @property {number} [observeScrollThreshold=0] - The number of pixels from the bottom to trigger the scroll bottom event. Only applicable if `observeScroll` is true.
+ * @property {boolean} [constrainPopupWidth=true] - Gets/sets whether the popup width will be constrained to a max width of the viewport width (default: `100vw`).
+ * @property {boolean} [wrapOptionText=false] - Gets/sets whether the options will wrap their text or not. This only applies if `constrainPopupWidth` is `true`, if there is an explicit width set via CSS.
+ * @property {OverlayPlacement} [popoverPlacement="bottom"] - Gets/sets the placement of the popover.
+ * @property {IOverlayOffset} popoverOffset - Gets/sets the offset of the popover.
+ * @property {OverlayFlipState} [popoverFlip="auto"] - Gets/sets the flip state of the popover.
+ * @property {OverlayShiftState} [popoverShift="auto"] - Gets/sets whether the popover should shift to fit within the viewport.
+ * @property {PositionPlacement | null} popoverFallbackPlacements - Gets/sets the fallback placements of the popover.
  *
  * @attribute {string} label - Controls the label text.
  * @attribute {string} placeholder - Controls the placeholder text.
@@ -70,6 +85,15 @@ declare const SelectComponent_base: import("../../constants").AbstractConstructo
  * @attribute {number | number[]} selected-index - Gets/sets the selected index.
  * @attribute {boolean} multiple - Gets/sets the multiple select state.
  * @attribute {boolean} open - Gets/sets the open state.
+ * @attribute {boolean} [sync-popup-width=false] - Gets/sets whether the popup width is synchronized with the popup target width.
+ * @attribute {number} option-limit - Gets/sets the maximum number of options to display in the dropdown.
+ * @attribute {boolean} [observe-scroll=false] - Controls the observation of scroll events on the dropdown.
+ * @attribute {number} [observe-scroll-threshold=0] - The number of pixels from the bottom to trigger the scroll bottom event. Only applicable if `observeScroll` is true.
+ * @attribute {boolean} [wrap-option-text=false] - Gets/sets whether the options will wrap their text or not. This only applies if `constrainPopupWidth` is `true`, if there is an explicit width set via CSS.
+ * @attribute {OverlayPlacement} [popover-placement="bottom"] - Gets/sets the placement of the popover.
+ * @attribute {IOverlayOffset} popover-offset - Gets/sets the offset of the popover.
+ * @attribute {OverlayFlipState} [popover-flip="auto"] - Gets/sets the flip state of the popover.
+ * @attribute {OverlayShiftState} [popover-shift="auto"] - Gets/sets whether the popover should shift to fit within the viewport.
  *
  * @cssproperty --forge-select-placeholder-color - The color of the placeholder text.
  * @cssproperty --forge-field-background - The background of the field surface.

package/esm/select/select/select.js

@@ -27,7 +27,8 @@ import { OptionGroupComponent } from '../option-group';
 import { SelectAdapter } from './select-adapter';
 import { SELECT_CONSTANTS } from './select-constants';
 import { SelectCore } from './select-core';
-const template = '<template><forge-field id=\"field\" popover-icon focus-indicator-allow-focus focus-indicator-focus-mode=\"focus\"><label id=\"select-label\" aria-hidden=\"true\" part=\"label\" slot=\"label\"></label><slot slot=\"start\" name=\"start\"></slot><div data-forge-field-input class=\"selected-text-container\" part=\"text-container\" aria-live=\"assertive\" aria-atomic=\"true\"><slot name=\"value\"><span id=\"selected-text\" class=\"selected-text\" part=\"text\"></span></slot></div><slot slot=\"end\" name=\"end\"></slot><slot slot=\"accessory\" name=\"accessory\"></slot><slot slot=\"support-text\" name=\"support-text\"></slot><slot slot=\"support-text-end\" name=\"support-text-end\"></slot><slot slot=\"start\" name=\"leading\"></slot><slot slot=\"end\" name=\"trailing\"></slot><slot slot=\"accessory\" name=\"addon-end\"></slot><slot slot=\"support-text\" name=\"helper-text\"></slot></forge-field></template>';
+import { ListDropdownAware } from '../../list-dropdown/list-dropdown-aware';
+const template = '<template><forge-field id=\"field\" popover-icon focus-indicator-allow-focus focus-indicator-focus-mode=\"focus\"><span id=\"select-label\" slot=\"label\"></span><slot slot=\"start\" name=\"start\"></slot><div data-forge-field-input class=\"selected-text-container\" part=\"text-container\" aria-live=\"assertive\" aria-atomic=\"true\"><slot name=\"value\"><span id=\"selected-text\" class=\"selected-text\" part=\"text\"></span></slot></div><slot slot=\"end\" name=\"end\"></slot><slot slot=\"accessory\" name=\"accessory\"></slot><slot slot=\"support-text\" name=\"support-text\"></slot><slot slot=\"support-text-end\" name=\"support-text-end\"></slot><slot slot=\"start\" name=\"leading\"></slot><slot slot=\"end\" name=\"trailing\"></slot><slot slot=\"accessory\" name=\"addon-end\"></slot><slot slot=\"support-text\" name=\"helper-text\"></slot></forge-field></template>';
 const styles = ':host{display:block;outline:0}:host([hidden]){display:none}forge-field{--_select-placeholder-color:var(--forge-select-placeholder-color, var(--forge-field-placeholder-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6))))}.selected-text-container{display:grid;align-items:center;cursor:pointer}.selected-text,::slotted([slot=value]){white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.selected-text:empty::before{content:attr(placeholder);color:var(--_select-placeholder-color);font-size:inherit}:host([disabled]) .selected-text-container{cursor:not-allowed}forge-field{display:contents}';
 /**
  * @tag forge-select
@@ -60,6 +61,20 @@ const styles = ':host{display:block;outline:0}:host([hidden]){display:none}forge
  * @property {SelectOptionBuilder} optionBuilder - Gets/sets the option builder function.
  * @property {SelectSelectedTextBuilder} selectedTextBuilder - Gets/sets the selected text builder function.
  * @property {SelectBeforeValueChangeCallback<any>} beforeValueChange - Gets/sets the before value change callback.
+ * @property {string | string[]; - } popupClasses - Gets/sets the list of classes to apply to the popup element.
+ * @property {ListDropdownHeaderBuilder} popupHeaderBuilder - Gets/sets the callback function for generating header content within the popup.
+ * @property {ListDropdownFooterBuilder} popupFooterBuilder - Gets/sets the callback function for generating header content within the popup.
+ * @property {boolean} [syncPopupWidth=false] - Gets/sets whether the popup width is synchronized with the popup target width.
+ * @property {number} optionLimit - Gets/sets the maximum number of options to display in the dropdown.
+ * @property {boolean} [observeScroll=false] - Controls the observation of scroll events on the dropdown.
+ * @property {number} [observeScrollThreshold=0] - The number of pixels from the bottom to trigger the scroll bottom event. Only applicable if `observeScroll` is true.
+ * @property {boolean} [constrainPopupWidth=true] - Gets/sets whether the popup width will be constrained to a max width of the viewport width (default: `100vw`).
+ * @property {boolean} [wrapOptionText=false] - Gets/sets whether the options will wrap their text or not. This only applies if `constrainPopupWidth` is `true`, if there is an explicit width set via CSS.
+ * @property {OverlayPlacement} [popoverPlacement="bottom"] - Gets/sets the placement of the popover.
+ * @property {IOverlayOffset} popoverOffset - Gets/sets the offset of the popover.
+ * @property {OverlayFlipState} [popoverFlip="auto"] - Gets/sets the flip state of the popover.
+ * @property {OverlayShiftState} [popoverShift="auto"] - Gets/sets whether the popover should shift to fit within the viewport.
+ * @property {PositionPlacement | null} popoverFallbackPlacements - Gets/sets the fallback placements of the popover.
  *
  * @attribute {string} label - Controls the label text.
  * @attribute {string} placeholder - Controls the placeholder text.
@@ -67,6 +82,15 @@ const styles = ':host{display:block;outline:0}:host([hidden]){display:none}forge
  * @attribute {number | number[]} selected-index - Gets/sets the selected index.
  * @attribute {boolean} multiple - Gets/sets the multiple select state.
  * @attribute {boolean} open - Gets/sets the open state.
+ * @attribute {boolean} [sync-popup-width=false] - Gets/sets whether the popup width is synchronized with the popup target width.
+ * @attribute {number} option-limit - Gets/sets the maximum number of options to display in the dropdown.
+ * @attribute {boolean} [observe-scroll=false] - Controls the observation of scroll events on the dropdown.
+ * @attribute {number} [observe-scroll-threshold=0] - The number of pixels from the bottom to trigger the scroll bottom event. Only applicable if `observeScroll` is true.
+ * @attribute {boolean} [wrap-option-text=false] - Gets/sets whether the options will wrap their text or not. This only applies if `constrainPopupWidth` is `true`, if there is an explicit width set via CSS.
+ * @attribute {OverlayPlacement} [popover-placement="bottom"] - Gets/sets the placement of the popover.
+ * @attribute {IOverlayOffset} popover-offset - Gets/sets the offset of the popover.
+ * @attribute {OverlayFlipState} [popover-flip="auto"] - Gets/sets the flip state of the popover.
+ * @attribute {OverlayShiftState} [popover-shift="auto"] - Gets/sets whether the popover should shift to fit within the viewport.
  *
  * @cssproperty --forge-select-placeholder-color - The color of the placeholder text.
  * @cssproperty --forge-field-background - The background of the field surface.
@@ -135,6 +159,7 @@ const styles = ':host{display:block;outline:0}:host([hidden]){display:none}forge
 let SelectComponent = class SelectComponent extends WithFormAssociation(WithLabelAwareness(WithFocusable(WithDefaultAria(WithElementInternals(WithBaseField((BaseSelectComponent))))))) {
     static get observedAttributes() {
         return [
+            ...ListDropdownAware.observedAttributes,
             ...Object.values(BASE_FIELD_CONSTANTS.observedAttributes),
             ...Object.values(SELECT_CONSTANTS.observedAttributes),
             ...Object.values(BASE_SELECT_CONSTANTS.observedAttributes)

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:ugo58a2;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ugo58a2{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:ugo58am;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ugo58am{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:ugo58b3;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 ugo58b3{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:ugo58b7;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 ugo58b7{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:ugo58c6;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ugo58c6{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:ugo58cs;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ugo58cs{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:ugo58dg;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 ugo58dg{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:ugo58e9;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 ugo58e9{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:u0bbjid;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u0bbjid{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:u0bbjj1;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u0bbjj1{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:u0bbjjn;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 u0bbjjn{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:u0bbjjq;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 u0bbjjq{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:u0bbjkj;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u0bbjkj{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:u0bbjkk;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u0bbjkk{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:u0bbjkm;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 u0bbjkm{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:u0bbjl9;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 u0bbjl9{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';
 /**