@tylertech/forge 3.8.0-dev.3 → 3.8.0

package/esm/key/key-item/key-item.d.ts

@@ -3,8 +3,9 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { LitElement, TemplateResult } from 'lit';
+import { TemplateResult } from 'lit';
 import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
+import { BaseLitElement } from '../../core/base/base-lit-element';
 export declare const KEY_ITEM_TAG_NAME: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-key-item
@@ -26,7 +27,7 @@ export declare const KEY_ITEM_TAG_NAME: keyof HTMLElementTagNameMap;
  * @csspart label - The label element.
  * @csspart value - The value element.
  */
-export declare class KeyItemComponent extends LitElement {
+export declare class KeyItemComponent extends BaseLitElement {
     static styles: import("lit").CSSResult;
     /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
     static [CUSTOM_ELEMENT_NAME_PROPERTY]: keyof HTMLElementTagNameMap;

package/esm/key/key-item/key-item.js

@@ -5,11 +5,12 @@
  */
 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 { setDefaultAria } from '../../core/utils/a11y-utils';
 import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
+import { BaseLitElement } from '../../core/base/base-lit-element';
 const styles = ':host{display:inline}.forge-key-item{--_key-item-icon-color:var(--forge-key-item-icon-color, var(--forge-theme-tertiary, #3d5afe));--_key-item-label-color:var(--forge-key-item-label-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_key-item-value-color:var(--forge-key-item-value-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_key-item-gap:var(--forge-key-item-gap, var(--forge-spacing-xsmall, 8px));--_key-item-icon-size:var(--forge-key-item-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1))}.forge-key-item{-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);box-sizing:border-box;display:grid;grid-template:\"icon label\" \"icon value\";column-gap:var(--_key-item-gap);inline-size:fit-content;line-height:normal}.forge-key-item.inline{grid-template:\"icon label value\";grid-template-columns:auto 1fr auto;align-items:center;inline-size:auto}.forge-key-item.no-value{grid-template:\"icon label\";align-items:center}.forge-key-item.no-value .value{display:none}.forge-key-item:not(.inline,.no-value) .label{padding-block-start:1px}.icon{--forge-icon-size:var(--_key-item-icon-size);grid-area:icon;color:var(--_key-item-icon-color)}.label{grid-area:label;color:var(--_key-item-label-color)}.value{grid-area:value;color:var(--_key-item-value-color)}.default-icon{block-size:calc(var(--_key-item-icon-size) - 1px);inline-size:calc(var(--_key-item-icon-size) - 1px);border-radius:50%;background:currentColor}';
 export const KEY_ITEM_TAG_NAME = 'forge-key-item';
 /**
@@ -32,7 +33,7 @@ export const KEY_ITEM_TAG_NAME = 'forge-key-item';
  * @csspart label - The label element.
  * @csspart value - The value element.
  */
-let KeyItemComponent = class KeyItemComponent extends LitElement {
+let KeyItemComponent = class KeyItemComponent extends BaseLitElement {
     constructor() {
         super();
         /**

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

@@ -3,6 +3,8 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { PositionPlacement } from '../core/utils/position-utils';
+import { IOverlayOffset, OverlayFlipState, OverlayPlacement, OverlayShiftState } from '../overlay/overlay-constants';
 import { ListDropdownHeaderBuilder, ListDropdownFooterBuilder } from './list-dropdown-constants';
 export interface IListDropdownAwareCore {
     popupClasses: string | string[];
@@ -14,6 +16,11 @@ export interface IListDropdownAwareCore {
     observeScrollThreshold: number;
     constrainPopupWidth: boolean;
     wrapOptionText: boolean;
+    popoverPlacement: OverlayPlacement;
+    popoverOffset: IOverlayOffset;
+    popoverFlip: OverlayFlipState;
+    popoverShift: OverlayShiftState;
+    popoverFallbackPlacements: PositionPlacement[] | null;
 }
 export declare abstract class ListDropdownAwareCore implements IListDropdownAwareCore {
     protected _popupClasses: string | string[];
@@ -25,6 +32,11 @@ export declare abstract class ListDropdownAwareCore implements IListDropdownAwar
     protected _observeScrollThreshold: number;
     protected _constrainPopupWidth: boolean;
     protected _wrapOptionText: boolean;
+    protected _popoverPlacement: OverlayPlacement;
+    protected _popoverOffset: IOverlayOffset;
+    protected _popoverFlip: OverlayFlipState;
+    protected _popoverShift: OverlayShiftState;
+    protected _popoverFallbackPlacements: PositionPlacement[] | null;
     get syncPopupWidth(): boolean;
     set syncPopupWidth(value: boolean);
     get popupClasses(): string | string[];
@@ -43,5 +55,15 @@ export declare abstract class ListDropdownAwareCore implements IListDropdownAwar
     set constrainPopupWidth(value: boolean);
     get wrapOptionText(): boolean;
     set wrapOptionText(value: boolean);
+    get popoverPlacement(): OverlayPlacement;
+    set popoverPlacement(value: OverlayPlacement);
+    get popoverOffset(): IOverlayOffset;
+    set popoverOffset(value: IOverlayOffset);
+    get popoverFlip(): OverlayFlipState;
+    set popoverFlip(value: OverlayFlipState);
+    get popoverShift(): OverlayShiftState;
+    set popoverShift(value: OverlayShiftState);
+    get popoverFallbackPlacements(): PositionPlacement[] | null;
+    set popoverFallbackPlacements(value: PositionPlacement[] | null);
     protected _applySelection(): void;
 }

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

@@ -72,5 +72,35 @@ export class ListDropdownAwareCore {
     set wrapOptionText(value) {
         this._wrapOptionText = value;
     }
+    get popoverPlacement() {
+        return this._popoverPlacement;
+    }
+    set popoverPlacement(value) {
+        this._popoverPlacement = value;
+    }
+    get popoverOffset() {
+        return this._popoverOffset;
+    }
+    set popoverOffset(value) {
+        this._popoverOffset = value;
+    }
+    get popoverFlip() {
+        return this._popoverFlip;
+    }
+    set popoverFlip(value) {
+        this._popoverFlip = value;
+    }
+    get popoverShift() {
+        return this._popoverShift;
+    }
+    set popoverShift(value) {
+        this._popoverShift = value;
+    }
+    get popoverFallbackPlacements() {
+        return this._popoverFallbackPlacements;
+    }
+    set popoverFallbackPlacements(value) {
+        this._popoverFallbackPlacements = value;
+    }
     _applySelection() { }
 }

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

@@ -5,6 +5,8 @@
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
 import { ListDropdownHeaderBuilder, ListDropdownFooterBuilder } from './list-dropdown-constants';
+import { PositionPlacement } from '../core/utils/position-utils';
+import { OverlayPlacement, IOverlayOffset, OverlayFlipState, OverlayShiftState } from '../overlay/overlay-constants';
 export interface IListDropdownAware extends IBaseComponent {
     popupClasses: string | string[];
     popupHeaderBuilder: ListDropdownHeaderBuilder;
@@ -15,6 +17,11 @@ export interface IListDropdownAware extends IBaseComponent {
     observeScrollThreshold: number;
     constrainPopupWidth: boolean;
     wrapOptionText: boolean;
+    popoverPlacement: OverlayPlacement;
+    popoverOffset: IOverlayOffset;
+    popoverFlip: OverlayFlipState;
+    popoverShift: OverlayShiftState;
+    popoverFallbackPlacements: PositionPlacement[] | null;
 }
 export declare class ListDropdownAware extends BaseComponent {
     static get observedAttributes(): string[];
@@ -66,4 +73,32 @@ export declare class ListDropdownAware extends BaseComponent {
      * @attribute wrap-option-text
      */
     wrapOptionText: boolean;
+    /**
+     * Gets/sets the placement of the popover.
+     * @default 'bottom'
+     * @attribute popover-placement
+     */
+    popoverPlacement: OverlayPlacement;
+    /**
+     * Gets/sets the offset of the popover.
+     * @attribute popover-offset
+     */
+    popoverOffset: IOverlayOffset;
+    /**
+     * Gets/sets the flip state of the popover.
+     * @default 'auto'
+     * @attribute popover-flip
+     */
+    popoverFlip: OverlayFlipState;
+    /**
+     * Gets/sets whether the popover should shift to fit within the viewport.
+     * @default 'auto'
+     * @attribute popover-shift
+     */
+    popoverShift: OverlayShiftState;
+    /**
+     * Gets/sets the fallback placements of the popover.
+     * @attribute popover-fallback-placements
+     */
+    popoverFallbackPlacements: PositionPlacement[] | null;
 }

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,9 +3,10 @@
  * 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';
@@ -49,9 +50,10 @@ 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.

package/esm/meter/meter/meter.js

@@ -5,13 +5,14 @@
  */
 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([
@@ -54,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
@@ -295,6 +296,7 @@ let MeterComponent = class MeterComponent extends LitElement {
 _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 })

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

@@ -4,8 +4,9 @@
  * License: Apache-2.0
  */
 import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
+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
@@ -28,7 +29,7 @@ export declare const METER_GROUP_TAG_NAME: keyof HTMLElementTagNameMap;
  * @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. */

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

@@ -6,11 +6,12 @@
 var _a;
 import { __decorate } from "tslib";
 import { CUSTOM_ELEMENT_NAME_PROPERTY, debounce } from '@tylertech/forge-core';
-import { html, LitElement, unsafeCSS } from 'lit';
+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';
 /**
@@ -34,7 +35,7 @@ export const METER_GROUP_TAG_NAME = 'forge-meter-group';
  * @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;
     }

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,