@tylertech/forge 3.7.0 → 3.8.0-dev.0

package/esm/expansion-panel/expansion-panel-core.js

@@ -3,6 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { frame } from '../core';
 import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
 export class ExpansionPanelCore {
     constructor(_adapter) {
@@ -10,14 +11,49 @@ export class ExpansionPanelCore {
         this._open = false;
         this._orientation = 'vertical';
         this._animationType = 'default';
+        this._trigger = '';
         this._clickListener = this._onClick.bind(this);
         this._keydownListener = this._onKeydown.bind(this);
         this._animationCompleteListener = this._onAnimationComplete.bind(this);
+        this._slotListener = this._handleContentSlotChange.bind(this);
     }
-    initialize() {
+    async initialize() {
         this._adapter.addHeaderListener('click', this._clickListener);
         this._adapter.addHeaderListener('keydown', this._keydownListener);
         this._adapter.setAnimationCompleteListener(this._animationCompleteListener);
+        this._adapter.addContentSlotListener(this._slotListener);
+        this._adapter.setContentId();
+        await frame();
+        this._syncTrigger();
+    }
+    destroy() {
+        this._adapter.detachTriggerAria();
+        this._adapter.removeTriggerListeners();
+        this._adapter.setTriggerElement(undefined);
+    }
+    _handleContentSlotChange() {
+        this._adapter.setContentId();
+        this._syncTrigger();
+    }
+    _clearTrigger() {
+        this._adapter.removeTriggerListeners({ reset: true });
+        this._adapter.detachTriggerAria();
+    }
+    _syncTrigger() {
+        if (!this._adapter.triggerElement?.isConnected) {
+            this._clearTrigger();
+            if (this._trigger) {
+                this._adapter.setTriggerElementById(this._trigger);
+            }
+            else {
+                this._adapter.setTriggerElement(undefined);
+            }
+        }
+        this._adapter.updateAriaControls();
+        this._adapter.updateAriaExpanded(this._open);
+        this._adapter.removeTriggerListeners({ reset: true });
+        this._adapter.addTriggerListener('click', this._clickListener);
+        this._adapter.addTriggerListener('keydown', this._keydownListener);
     }
     _onClick(evt) {
         const fromIgnoredEl = evt
@@ -50,6 +86,7 @@ export class ExpansionPanelCore {
     _togglePanel() {
         this._adapter.toggleHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.OPEN, this._open);
         this._adapter.tryToggleOpenIcon(this._open);
+        this._adapter.updateAriaExpanded(this._open);
         if (this._open) {
             if (this._animationType !== 'none') {
                 this._adapter.animationStart();
@@ -96,4 +133,29 @@ export class ExpansionPanelCore {
             this._adapter.setHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.ANIMATION_TYPE, this._animationType);
         }
     }
+    get trigger() {
+        return this._trigger;
+    }
+    set trigger(value) {
+        if (this._trigger !== value) {
+            this._clearTrigger();
+            this._trigger = value;
+            this._adapter.setTriggerElementById(this._trigger);
+            if (this._adapter.isConnected) {
+                this._syncTrigger();
+            }
+        }
+    }
+    get triggerElement() {
+        return this._adapter.triggerElement;
+    }
+    set triggerElement(el) {
+        if (this._adapter.triggerElement !== el) {
+            this._clearTrigger();
+            this._adapter.setTriggerElement(el);
+            if (this._adapter.isConnected) {
+                this._syncTrigger();
+            }
+        }
+    }
 }

package/esm/expansion-panel/expansion-panel.d.ts

@@ -9,7 +9,10 @@ export interface IExpansionPanelComponent extends IBaseComponent {
     open: boolean;
     orientation: ExpansionPanelOrientation;
     animationType: ExpansionPanelAnimationType;
+    trigger: string;
+    triggerElement: HTMLElement | null;
     toggle(): void;
+    [emulateUserToggle](open: boolean): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -28,10 +31,13 @@ declare global {
  * @property {boolean} [open=false] - Whether the panel is open or closed.
  * @property {ExpansionPanelOrientation} [orientation="vertical"] - The orientation of the panel.
  * @property {ExpansionPanelAnimationType} [animationType="default"] - The type of animation to use when opening/closing the panel.
+ * @property {string} trigger - The id of the element that the expansion panel should be toggled by.
+ * @property {HTMLElement | null} triggerElement - The element that the expansion panel should be toggled by.
  *
  * @attribute {boolean} [open=false] - Whether the panel is open or closed.
  * @attribute {ExpansionPanelOrientation} [orientation="vertical"] - The orientation of the panel.
  * @attribute {ExpansionPanelAnimationType} [animation-type="default"] - The type of animation to use when opening/closing the panel.
+ * @attribute {string} [trigger] - The id of the button that the expansion panel is associated with.
  *
  * @fires {CustomEvent<boolean>} forge-expansion-panel-toggle - Event fired when the panel is toggled open or closed.
  * @fires {CustomEvent<boolean>} forge-expansion-panel-animation-complete - Event fired when the panel has finished animating when toggling.
@@ -55,10 +61,13 @@ export declare class ExpansionPanelComponent extends BaseComponent implements IE
     private _core;
     constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     open: boolean;
     orientation: ExpansionPanelOrientation;
     animationType: ExpansionPanelAnimationType;
+    trigger: string;
+    triggerElement: HTMLElement | null;
     /**
      * Toggles the open state of the panel.
      */

package/esm/expansion-panel/expansion-panel.js

@@ -19,10 +19,13 @@ const styles = ':host{display:block}:host([hidden]){display:none}.forge-expansio
  * @property {boolean} [open=false] - Whether the panel is open or closed.
  * @property {ExpansionPanelOrientation} [orientation="vertical"] - The orientation of the panel.
  * @property {ExpansionPanelAnimationType} [animationType="default"] - The type of animation to use when opening/closing the panel.
+ * @property {string} trigger - The id of the element that the expansion panel should be toggled by.
+ * @property {HTMLElement | null} triggerElement - The element that the expansion panel should be toggled by.
  *
  * @attribute {boolean} [open=false] - Whether the panel is open or closed.
  * @attribute {ExpansionPanelOrientation} [orientation="vertical"] - The orientation of the panel.
  * @attribute {ExpansionPanelAnimationType} [animation-type="default"] - The type of animation to use when opening/closing the panel.
+ * @attribute {string} [trigger] - The id of the button that the expansion panel is associated with.
  *
  * @fires {CustomEvent<boolean>} forge-expansion-panel-toggle - Event fired when the panel is toggled open or closed.
  * @fires {CustomEvent<boolean>} forge-expansion-panel-animation-complete - Event fired when the panel has finished animating when toggling.
@@ -53,6 +56,9 @@ let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponen
     connectedCallback() {
         this._core.initialize();
     }
+    disconnectedCallback() {
+        this._core.destroy();
+    }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
             case EXPANSION_PANEL_CONSTANTS.observedAttributes.OPEN:
@@ -64,6 +70,8 @@ let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponen
             case EXPANSION_PANEL_CONSTANTS.observedAttributes.ANIMATION_TYPE:
                 this.animationType = newValue;
                 break;
+            case EXPANSION_PANEL_CONSTANTS.observedAttributes.TRIGGER:
+                this.trigger = newValue;
         }
     }
     /**
@@ -94,6 +102,12 @@ __decorate([
 __decorate([
     coreProperty()
 ], ExpansionPanelComponent.prototype, "animationType", void 0);
+__decorate([
+    coreProperty()
+], ExpansionPanelComponent.prototype, "trigger", void 0);
+__decorate([
+    coreProperty()
+], ExpansionPanelComponent.prototype, "triggerElement", void 0);
 ExpansionPanelComponent = __decorate([
     customElement({
         name: EXPANSION_PANEL_CONSTANTS.elementName

package/esm/floating-action-button/floating-action-button-constants.d.ts

@@ -24,7 +24,7 @@ export declare const FLOATING_ACTION_BUTTON_CONSTANTS: {
     };
     defaults: {
         DEFAULT_THEME: Theme;
-        DEFAULT_DENSITY: Density;
+        DEFAULT_DENSITY: FloatingActionButtonDensity;
         DEFAULT_ELEVATION: FloatingActionButtonElevation;
     };
 };

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

@@ -33,7 +33,7 @@ export declare const ICON_CONSTANTS: {
         DEFAULT_NETWORK_BASE_URL: string;
     };
 };
-export declare const ICON_REGISTRY_KEY = "forgeIcons";
+export declare const ICON_REGISTRY_KEY: "forgeIcons";
 export type IconUrlBuilder = (name: string, type: IconExternalType) => string;
 export type IconExternalType = '' | 'custom' | 'standard' | 'extended';
 export type IconTheme = Theme | 'text-medium' | 'text-low';

package/esm/icon/icon-registry.d.ts

@@ -3,6 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { ICON_REGISTRY_KEY } from './icon-constants';
 /** The shape of an SVG icon that can be defined with the icon registry. */
 export interface IIcon {
     /** The unique name of the icon. */
@@ -14,6 +15,11 @@ export interface IIconDescriptor {
     raw: string;
     node?: SVGElement;
 }
+declare global {
+    interface Window {
+        [ICON_REGISTRY_KEY]: Map<string, IIconDescriptor>;
+    }
+}
 /**
  * The registry for SVG icon instances being used within the current context.
  */

package/esm/icon-button/icon-button-constants.d.ts

@@ -34,7 +34,7 @@ export declare const ICON_BUTTON_CONSTANTS: {
         DEFAULT_VARIANT: IconButtonVariant;
         DEFAULT_THEME: IconButtonTheme;
         DEFAULT_SHAPE: IconButtonShape;
-        DEFAULT_DENSITY: Density;
+        DEFAULT_DENSITY: IconButtonDensity;
     };
 };
 export type IconButtonVariant = 'icon' | 'outlined' | 'tonal' | 'filled' | 'raised';

package/esm/label/label-adapter.js

@@ -103,7 +103,7 @@ export class LabelAdapter extends BaseAdapter {
             targetEl = this._component.querySelector(selector);
         }
         if (targetEl && !targetEl.shadowRoot) {
-            // If the target element has not been updgraded, mark it to connect later
+            // If the target element has not been upgraded, mark it to connect later
             targetEl.setAttribute(DEFERRED_LABEL_TARGET, '');
             targetEl[forgeLabelRef] = this._component;
             return null;

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

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

package/esm/meter/meter/meter.js

@@ -8,7 +8,8 @@ import { LitElement, 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, toggleState } from '../../core/utils/a11y-utils';
+import { setDefaultAria } from '../../core/utils/a11y-utils';
+import { toggleState } from '../../core/utils/utils';
 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}}';
 const VALUE_STATE_MAP = new Map([
     ['optimal', 'optimum-value'],

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

@@ -8,7 +8,8 @@ import { debounce } from '@tylertech/forge-core';
 import { html, LitElement, unsafeCSS } from 'lit';
 import { customElement, property, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { setDefaultAria, toggleState } from '../../core/utils/a11y-utils';
+import { setDefaultAria } from '../../core/utils/a11y-utils';
+import { toggleState } from '../../core/utils/utils';
 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}}';
 /**
  * @tag forge-meter-group

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

@@ -5,7 +5,7 @@
  */
 import { IBaseAdapter } from '../../core';
 import { PositionPlacement, VirtualElement } from '../../core/utils/position-utils';
-import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy } from '../overlay-constants';
+import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy, OverlayShiftState } from '../overlay-constants';
 export interface IBaseOverlayCore {
     initialize(): void;
     destroy(): void;
@@ -19,7 +19,7 @@ export interface IBaseOverlayCore {
     offset: IOverlayOffset;
     hide: OverlayHideState;
     persistent: boolean;
-    shift: boolean;
+    shift: OverlayShiftState;
     flip: OverlayFlipState;
     boundary: string | null;
     boundaryElement: HTMLElement | null;
@@ -41,7 +41,7 @@ export declare abstract class BaseOverlayCore<T extends IBaseAdapter> implements
     abstract offset: IOverlayOffset;
     abstract hide: OverlayHideState;
     abstract persistent: boolean;
-    abstract shift: boolean;
+    abstract shift: OverlayShiftState;
     abstract flip: OverlayFlipState;
     abstract boundary: string | null;
     abstract boundaryElement: HTMLElement | null;

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

@@ -5,7 +5,7 @@
  */
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 import { IBaseOverlayCore } from './base-overlay-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';
 export interface IBaseOverlay extends IBaseComponent {
     anchorElement: HTMLElement | VirtualElement | null;
@@ -16,7 +16,7 @@ export interface IBaseOverlay extends IBaseComponent {
     placement: OverlayPlacement;
     positionStrategy: OverlayPositionStrategy;
     offset: IOverlayOffset;
-    shift: boolean;
+    shift: OverlayShiftState;
     hide: OverlayHideState;
     persistent: boolean;
     flip: OverlayFlipState;
@@ -38,7 +38,7 @@ export declare abstract class BaseOverlay<T extends IBaseOverlayCore> extends Ba
     placement: OverlayPlacement;
     positionStrategy: OverlayPositionStrategy;
     offset: IOverlayOffset;
-    shift: boolean;
+    shift: OverlayShiftState;
     hide: OverlayHideState;
     persistent: boolean;
     flip: OverlayFlipState;

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

@@ -42,7 +42,17 @@ export class BaseOverlay extends BaseComponent {
                 this.persistent = coerceBoolean(newValue);
                 break;
             case OVERLAY_CONSTANTS.observedAttributes.SHIFT:
-                this.shift = coerceBoolean(newValue);
+                // Handle legacy boolean attributes for shift by converting to corresponding type values
+                // TODO: Remove support for boolean attribute conversion in v4
+                if (newValue === '' || newValue?.trim() === 'true') {
+                    this.shift = 'auto';
+                }
+                else if (newValue == null || newValue?.trim() === 'false') {
+                    this.shift = 'never';
+                }
+                else {
+                    this.shift = newValue;
+                }
                 break;
             case OVERLAY_CONSTANTS.observedAttributes.FLIP:
                 this.flip = newValue;

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

@@ -6,7 +6,7 @@
 import { IBaseOverlayCore } from './base-overlay-core';
 import { IOverlayComponent } from '../overlay';
 import { IOverlayAwareAdapter } from './overlay-aware-adapter';
-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';
 export interface IOverlayAwareCore extends IBaseOverlayCore {
     readonly overlayElement: IOverlayComponent;
@@ -39,8 +39,8 @@ export declare abstract class OverlayAwareCore<T extends IOverlayAwareAdapter> i
     set hide(value: OverlayHideState);
     get persistent(): boolean;
     set persistent(value: boolean);
-    get shift(): boolean;
-    set shift(value: boolean);
+    get shift(): OverlayShiftState;
+    set shift(value: OverlayShiftState);
     get flip(): OverlayFlipState;
     set flip(value: OverlayFlipState);
     get boundary(): string | null;

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

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { OVERLAY_CONSTANTS } from '../overlay-constants';
+import { toggleAttribute } from '@tylertech/forge-core';
 export class OverlayAwareCore {
     constructor(_adapter) {
         this._adapter = _adapter;
@@ -115,7 +116,7 @@ export class OverlayAwareCore {
     set shift(value) {
         if (this._adapter.overlayElement.shift !== value) {
             this._adapter.overlayElement.shift = value;
-            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.SHIFT, this._adapter.overlayElement.shift);
+            toggleAttribute(this._adapter.hostElement, this._adapter.overlayElement.shift !== OVERLAY_CONSTANTS.defaults.SHIFT, OVERLAY_CONSTANTS.attributes.SHIFT, String(this._adapter.overlayElement.shift));
         }
     }
     get flip() {

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

@@ -6,7 +6,7 @@
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
 import { PositionPlacement, VirtualElement } from '../core/utils/position-utils';
 import { IOverlayComponent } from './overlay';
-import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayLightDismissReason, OverlayPositionStrategy } from './overlay-constants';
+import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayLightDismissReason, OverlayPositionStrategy, OverlayShiftState } from './overlay-constants';
 export interface IOverlayAdapter extends IBaseAdapter<IOverlayComponent> {
     show(): void;
     hide(): void;
@@ -24,7 +24,7 @@ export interface IPositionElementConfig {
     placement: PositionPlacement;
     hide: OverlayHideState;
     offset: IOverlayOffset;
-    shift: boolean;
+    shift: OverlayShiftState;
     flip: OverlayFlipState;
     boundary: string | null;
     boundaryElement: HTMLElement | null;

package/esm/overlay/overlay-adapter.js

@@ -6,10 +6,10 @@
 import { autoUpdate } from '@floating-ui/dom';
 import { getShadowElement } from '@tylertech/forge-core';
 import { BaseAdapter } from '../core/base/base-adapter';
-import { DEFAULT_FALLBACK_PLACEMENTS, positionElementAsync, VirtualElement } from '../core/utils/position-utils';
-import { locateElementById, roundByDPR } from '../core/utils/utils';
+import { positionElementAsync, VirtualElement } from '../core/utils/position-utils';
+import { locateElementById } from '../core/utils/utils';
 import { OverlayComponent } from './overlay';
-import { overlayStack, OVERLAY_CONSTANTS, OVERLAY_FALLBACK_PLACEMENT_MAP, SUPPORTS_POPOVER } from './overlay-constants';
+import { OVERLAY_CONSTANTS, overlayStack, SUPPORTS_POPOVER } from './overlay-constants';
 export class OverlayAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
@@ -73,14 +73,14 @@ export class OverlayAdapter extends BaseAdapter {
                 strategy,
                 placement,
                 hide: hide !== 'never',
-                shift,
+                shift: shift !== 'never',
                 shiftOptions: {
                     boundary: boundaryEl
                 },
                 flip: flip !== 'never',
                 flipOptions: {
-                    fallbackStrategy: 'bestFit',
-                    fallbackPlacements: fallbackPlacements ?? OVERLAY_FALLBACK_PLACEMENT_MAP[placement] ?? DEFAULT_FALLBACK_PLACEMENTS,
+                    boundary: boundaryEl,
+                    fallbackPlacements,
                     crossAxis: flip === 'cross' || flip === 'auto',
                     mainAxis: flip === 'main' || flip === 'auto'
                 },
@@ -117,14 +117,6 @@ export class OverlayAdapter extends BaseAdapter {
             // Update the clipped attributes to allow for state-based clipping adjustments by consumers
             this._component.toggleAttribute(OVERLAY_CONSTANTS.attributes.CLIPPED_X, isClippedX);
             this._component.toggleAttribute(OVERLAY_CONSTANTS.attributes.CLIPPED_Y, isClippedY);
-            // If clipped, adjust the position by the clipping delta on each axis
-            if (isClippedX || isClippedY) {
-                const { x, y } = result;
-                const { height, width } = overlayRect;
-                const clippedDeltaX = isClippedX ? x + width - viewportWidth : 0;
-                const clippedDeltaY = isClippedY ? y + height - viewportHeight : 0;
-                this._rootElement.style.translate = `${roundByDPR(x - clippedDeltaX)}px ${roundByDPR(y - clippedDeltaY)}px`;
-            }
         });
     }
     tryCleanupAutoUpdate() {

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

@@ -50,6 +50,7 @@ export declare const OVERLAY_CONSTANTS: {
     defaults: {
         readonly HIDE: "anchor-hidden";
         readonly FLIP: "auto";
+        readonly SHIFT: "auto";
     };
 };
 export declare const SUPPORTS_POPOVER: boolean;
@@ -62,6 +63,7 @@ export type OverlayPositionStrategy = 'absolute' | 'fixed';
 export type OverlayPlacement = PositionPlacement;
 export type OverlayHideState = 'anchor-hidden' | 'never';
 export type OverlayFlipState = 'auto' | 'main' | 'cross' | 'never';
+export type OverlayShiftState = 'auto' | 'never' | boolean;
 export type OverlayLightDismissReason = 'click' | 'escape';
 export interface IOverlayToggleEvent extends Event {
     newState: 'closed' | 'open';
@@ -71,8 +73,3 @@ export interface OverlayLightDismissEventData {
     reason: OverlayLightDismissReason;
 }
 export declare const overlayStack: unique symbol;
-/**
- * This is a map of fallback placements for each placement. The fallback placements are used when the
- * original placement is not possible due to the boundary or other constraints.
- */
-export declare const OVERLAY_FALLBACK_PLACEMENT_MAP: Record<OverlayPlacement, OverlayPlacement[]>;

package/esm/overlay/overlay-constants.js

@@ -38,7 +38,8 @@ const events = {
 };
 const defaults = {
     HIDE: 'anchor-hidden',
-    FLIP: 'auto'
+    FLIP: 'auto',
+    SHIFT: 'auto'
 };
 export const OVERLAY_CONSTANTS = {
     elementName,
@@ -51,25 +52,3 @@ export const OVERLAY_CONSTANTS = {
 };
 export const SUPPORTS_POPOVER = supportsPopover();
 export const overlayStack = Symbol('overlayStack');
-/**
- * This is a map of fallback placements for each placement. The fallback placements are used when the
- * original placement is not possible due to the boundary or other constraints.
- */
-export const OVERLAY_FALLBACK_PLACEMENT_MAP = {
-    // Left
-    left: ['right', 'bottom', 'top', 'top-start', 'top-end', 'left-start', 'left-end', 'right-start', 'right-end'],
-    'left-start': ['left-end', 'right-start', 'right-end', 'bottom', 'top'],
-    'left-end': ['left-start', 'right-end', 'right-start', 'bottom', 'top', 'bottom-start', 'bottom-end'],
-    // Right
-    right: ['left', 'bottom', 'top', 'top-start', 'top-end', 'left-start', 'left-end', 'right-start', 'right-end'],
-    'right-start': ['right-end', 'left-start', 'left-end', 'bottom', 'top'],
-    'right-end': ['right-start', 'left-end', 'left-start', 'bottom', 'top', 'bottom-start', 'bottom-end'],
-    // Top
-    top: ['bottom', 'left', 'right', 'bottom-start', 'left-start', 'left-end', 'right-start', 'right-end'],
-    'top-start': ['bottom-start', 'left', 'right', 'left-start', 'left-end', 'right-start', 'right-end'],
-    'top-end': ['bottom-end', 'left', 'right', 'right-start', 'right-end', 'left-start', 'left-end'],
-    // Bottom
-    bottom: ['top', 'left', 'right', 'top-start', 'left-start', 'left-end', 'right-start', 'right-end'],
-    'bottom-start': ['top-start', 'left', 'right', 'left-start', 'left-end', 'right-start', 'right-end'],
-    'bottom-end': ['top-end', 'left', 'right', 'right-start', 'right-end', 'left-start', 'left-end']
-};

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

@@ -6,7 +6,7 @@
 import { PositionPlacement } from '../core/utils/position-utils';
 import { IBaseOverlayCore, BaseOverlayCore } from './base/base-overlay-core';
 import { IOverlayAdapter } from './overlay-adapter';
-import { IOverlayOffset, OverlayPlacement, OverlayPositionStrategy, OverlayFlipState, OverlayHideState } from './overlay-constants';
+import { IOverlayOffset, OverlayPlacement, OverlayPositionStrategy, OverlayFlipState, OverlayHideState, OverlayShiftState } from './overlay-constants';
 export interface IOverlayCore extends IBaseOverlayCore {
     arrowElement: HTMLElement;
     arrowElementOffset: number;
@@ -59,8 +59,8 @@ export declare class OverlayCore extends BaseOverlayCore<IOverlayAdapter> implem
     set positionStrategy(value: OverlayPositionStrategy);
     get offset(): IOverlayOffset;
     set offset(value: IOverlayOffset);
-    get shift(): boolean;
-    set shift(value: boolean);
+    get shift(): OverlayShiftState;
+    set shift(value: OverlayShiftState);
     get hide(): OverlayHideState;
     set hide(value: OverlayHideState);
     get persistent(): boolean;