@tylertech/forge 3.0.0-next.20 → 3.0.0-next.22

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

@@ -7,11 +7,15 @@ import { IOverlayAwareAdapter, OverlayAwareAdapter } from '../overlay/base/overl
 import { IPopoverComponent } from './popover';
 export interface IPopoverAdapter extends IOverlayAwareAdapter {
     readonly hostElement: IPopoverComponent;
+    destroy(): void;
+    initializeAnchorElement(): void;
+    cleanupAnchorElement(): void;
     tryLocateAnchorElement(id: string | null): void;
     addAnchorListener(type: string, listener: EventListener): void;
     removeAnchorListener(type: string, listener: EventListener): void;
     addSurfaceListener(type: string, listener: EventListener): void;
     removeSurfaceListener(type: string, listener: EventListener): void;
+    hide(): Promise<void>;
     setOverlayOpen(newState: boolean): void;
     toggleArrow(value: boolean): void;
     isChildElement(element: HTMLElement): boolean;
@@ -23,13 +27,17 @@ export declare class PopoverAdapter extends OverlayAwareAdapter<IPopoverComponen
     private _surfaceElement;
     private _arrowElement;
     constructor(component: IPopoverComponent);
+    destroy(): void;
     protected _initializeOverlayElement(): void;
     tryLocateAnchorElement(id: string | null): void;
+    initializeAnchorElement(): void;
+    cleanupAnchorElement(): void;
     addAnchorListener(type: string, listener: EventListener): void;
     removeAnchorListener(type: string, listener: EventListener): void;
     addSurfaceListener(type: string, listener: EventListener): void;
     removeSurfaceListener(type: string, listener: EventListener): void;
     setOverlayOpen(newState: boolean): void;
+    hide(): Promise<void>;
     toggleArrow(value: boolean): void;
     isChildElement(element: HTMLElement): boolean;
     tryAutofocus(): void;
@@ -43,4 +51,5 @@ export declare class PopoverAdapter extends OverlayAwareAdapter<IPopoverComponen
      * @returns The anchor element if found, otherwise null.
      */
     private _tryFindAnchorElement;
+    private _updateAnchorExpandedState;
 }

package/esm/popover/popover-adapter.js

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { getShadowElement } from '@tylertech/forge-core';
+import { prefersReducedMotion } from '../core/utils/feature-detection';
 import { VirtualElement } from '../core/utils/position-utils';
 import { OVERLAY_CONSTANTS } from '../overlay';
 import { OverlayAwareAdapter } from '../overlay/base/overlay-aware-adapter';
@@ -13,11 +14,22 @@ export class PopoverAdapter extends OverlayAwareAdapter {
         super(component);
         this._surfaceElement = getShadowElement(this._component, POPOVER_CONSTANTS.selectors.SURFACE);
     }
+    destroy() {
+        this._surfaceElement.classList.remove(POPOVER_CONSTANTS.classes.EXITING);
+        this.cleanupAnchorElement();
+    }
     _initializeOverlayElement() {
         this._overlayElement = getShadowElement(this._component, OVERLAY_CONSTANTS.elementName);
     }
     tryLocateAnchorElement(id) {
         this._overlayElement.anchorElement = this._tryFindAnchorElement(id);
+        this._updateAnchorExpandedState(this._overlayElement.open);
+    }
+    initializeAnchorElement() {
+        this._updateAnchorExpandedState(this._overlayElement.open);
+    }
+    cleanupAnchorElement() {
+        this._updateAnchorExpandedState(null);
     }
     addAnchorListener(type, listener) {
         var _a;
@@ -40,7 +52,26 @@ export class PopoverAdapter extends OverlayAwareAdapter {
         this._surfaceElement.removeEventListener(type, listener);
     }
     setOverlayOpen(newState) {
+        this._surfaceElement.classList.remove(POPOVER_CONSTANTS.classes.EXITING);
         this._overlayElement.open = newState;
+        this._updateAnchorExpandedState(newState);
+    }
+    hide() {
+        if (prefersReducedMotion()) {
+            this._surfaceElement.classList.remove(POPOVER_CONSTANTS.classes.EXITING);
+            this._overlayElement.open = false;
+            this._updateAnchorExpandedState(false);
+            return Promise.resolve();
+        }
+        return new Promise(resolve => {
+            this._surfaceElement.addEventListener('animationend', () => {
+                this._surfaceElement.classList.remove(POPOVER_CONSTANTS.classes.EXITING);
+                this._overlayElement.open = false;
+                this._updateAnchorExpandedState(false);
+                resolve();
+            }, { once: true });
+            this._surfaceElement.classList.add(POPOVER_CONSTANTS.classes.EXITING);
+        });
     }
     toggleArrow(value) {
         var _a;
@@ -67,9 +98,7 @@ export class PopoverAdapter extends OverlayAwareAdapter {
             window.requestAnimationFrame(() => {
                 if (this._component.open && this._overlayElement.isConnected && !this._component.matches(':focus-within')) {
                     const autofocusElement = this._component.querySelector('[autofocus]');
-                    if (autofocusElement) {
-                        autofocusElement.focus();
-                    }
+                    autofocusElement === null || autofocusElement === void 0 ? void 0 : autofocusElement.focus();
                 }
             });
         });
@@ -102,4 +131,13 @@ export class PopoverAdapter extends OverlayAwareAdapter {
         }
         return null;
     }
+    _updateAnchorExpandedState(state) {
+        var _a;
+        if (!this._overlayElement.anchorElement) {
+            return;
+        }
+        if (!(this._overlayElement.anchorElement instanceof VirtualElement) && !((_a = this.overlayElement.anchorElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('aria-hidden'))) {
+            this._overlayElement.anchorElement.setAttribute('aria-expanded', String(!!state));
+        }
+    }
 }

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

@@ -6,8 +6,20 @@
 import { OverlayLightDismissReason } from '../overlay';
 export declare const POPOVER_CONSTANTS: {
     elementName: string;
+    observedAttributes: {
+        ARROW: string;
+        ANIMATION_TYPE: string;
+        TRIGGER_TYPE: string;
+        LONGPRESS_DELAY: string;
+        PERSISTENT_HOVER: string;
+        HOVER_DELAY: string;
+        HOVER_DISMISS_DELAY: string;
+        PRESET: string;
+    };
     attributes: {
         OPEN: string;
+        HOST: string;
+        CONSTRAIN_VIEWPORT_WIDTH: string;
         ARROW: string;
         ANIMATION_TYPE: string;
         TRIGGER_TYPE: string;
@@ -15,12 +27,15 @@ export declare const POPOVER_CONSTANTS: {
         PERSISTENT_HOVER: string;
         HOVER_DELAY: string;
         HOVER_DISMISS_DELAY: string;
+        PRESET: string;
     };
     classes: {
         ARROW: string;
+        EXITING: string;
     };
     selectors: {
         SURFACE: string;
+        HOST: string;
     };
     parts: {
         ARROW: string;
@@ -32,12 +47,14 @@ export declare const POPOVER_CONSTANTS: {
     defaults: {
         TRIGGER_TYPE: PopoverTriggerType;
         HOVER_DELAY: number;
+        PRESET: PopoverPreset;
     };
 };
 export declare const POPOVER_HOVER_TIMEOUT = 500;
 export type PopoverAnimationType = 'none' | 'zoom' | 'slide' | 'fade';
 export type PopoverTriggerType = 'click' | 'hover' | 'focus' | 'longpress' | 'doubleclick' | 'contextmenu' | 'manual';
 export type PopoverDismissReason = OverlayLightDismissReason | PopoverTriggerType | 'destroy';
+export type PopoverPreset = 'popover' | 'dropdown';
 export interface IPopoverToggleEventData {
     newState: 'closed' | 'open';
     oldState: 'closed' | 'open';

package/esm/popover/popover-constants.js

@@ -5,21 +5,24 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}popover`;
-const attributes = {
-    OPEN: 'open',
+const observedAttributes = {
     ARROW: 'arrow',
     ANIMATION_TYPE: 'animation-type',
     TRIGGER_TYPE: 'trigger-type',
     LONGPRESS_DELAY: 'longpress-delay',
     PERSISTENT_HOVER: 'persistent-hover',
     HOVER_DELAY: 'hover-delay',
-    HOVER_DISMISS_DELAY: 'hover-dismiss-delay'
+    HOVER_DISMISS_DELAY: 'hover-dismiss-delay',
+    PRESET: 'preset'
 };
+const attributes = Object.assign(Object.assign({}, observedAttributes), { OPEN: 'open', HOST: 'forge-popover-host', CONSTRAIN_VIEWPORT_WIDTH: 'constrain-viewport-width' });
 const classes = {
-    ARROW: 'arrow'
+    ARROW: 'arrow',
+    EXITING: 'exiting'
 };
 const selectors = {
-    SURFACE: '.forge-popover'
+    SURFACE: '.forge-popover',
+    HOST: `:is(forge-dialog,forge-popover,[${attributes.HOST}])`
 };
 const parts = {
     ARROW: 'arrow'
@@ -30,10 +33,12 @@ const events = {
 };
 const defaults = {
     TRIGGER_TYPE: 'click',
-    HOVER_DELAY: 0
+    HOVER_DELAY: 0,
+    PRESET: 'popover'
 };
 export const POPOVER_CONSTANTS = {
     elementName,
+    observedAttributes,
     attributes,
     classes,
     selectors,

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

@@ -6,7 +6,7 @@
 import { IOverlayAwareFoundation, OverlayAwareFoundation } from '../overlay/base/overlay-aware-foundation';
 import { OverlayLightDismissEventData } from '../overlay/overlay-constants';
 import { IPopoverAdapter } from './popover-adapter';
-import { PopoverAnimationType, PopoverTriggerType } from './popover-constants';
+import { PopoverAnimationType, PopoverTriggerType, PopoverPreset } from './popover-constants';
 import { IDismissibleStackState } from '../core/utils/dismissible-stack';
 import { VirtualElement } from '../core/utils/position-utils';
 export interface IPopoverFoundation extends IOverlayAwareFoundation {
@@ -17,6 +17,8 @@ export interface IPopoverFoundation extends IOverlayAwareFoundation {
     persistentHover: boolean;
     hoverDismissDelay: number;
     hoverDelay: number;
+    preset: PopoverPreset;
+    hideAsync(): Promise<void>;
     dispatchBeforeToggleEvent(state: IDismissibleStackState): boolean;
 }
 declare const BaseClass: import("..").AbstractConstructor<import("../core/mixins/interactions/longpress/with-longpress-listener").WithLongpressListenerContract> & (abstract new (_adapter: IPopoverAdapter) => OverlayAwareFoundation<IPopoverAdapter>);
@@ -28,6 +30,7 @@ export declare class PopoverFoundation extends BaseClass implements IPopoverFoun
     private _persistentHover;
     private _hoverDismissDelay;
     private _hoverDelay;
+    private _preset;
     private _previouslyFocusedElement;
     private _hoverAnchorLeaveTimeout;
     private _popoverMouseleaveTimeout;
@@ -47,6 +50,7 @@ export declare class PopoverFoundation extends BaseClass implements IPopoverFoun
     constructor(adapter: IPopoverAdapter);
     initialize(): void;
     destroy(): void;
+    hideAsync(): Promise<void>;
     protected _onOverlayLightDismiss(evt: CustomEvent<OverlayLightDismissEventData>): Promise<void>;
     dispatchBeforeToggleEvent({ reason }: IDismissibleStackState): boolean;
     private _openPopover;
@@ -140,5 +144,7 @@ export declare class PopoverFoundation extends BaseClass implements IPopoverFoun
     set hoverDelay(value: number);
     get hoverDismissDelay(): number;
     set hoverDismissDelay(value: number);
+    get preset(): PopoverPreset;
+    set preset(value: PopoverPreset);
 }
 export {};

package/esm/popover/popover-foundation.js

@@ -19,6 +19,7 @@ export class PopoverFoundation extends BaseClass {
         this._persistentHover = false;
         this._hoverDismissDelay = POPOVER_HOVER_TIMEOUT;
         this._hoverDelay = POPOVER_CONSTANTS.defaults.HOVER_DELAY;
+        this._preset = POPOVER_CONSTANTS.defaults.PRESET;
         this._previouslyFocusedElement = null;
         // Click trigger listeners
         this._anchorClickListener = this._onAnchorClick.bind(this);
@@ -43,9 +44,11 @@ export class PopoverFoundation extends BaseClass {
             this._adapter.tryLocateAnchorElement(this._anchor);
         }
         this._initializeTriggerListeners();
+        this._adapter.initializeAnchorElement();
     }
     destroy() {
         super.destroy();
+        this._adapter.destroy();
         window.clearTimeout(this._hoverTimeout);
         window.clearTimeout(this._hoverAnchorLeaveTimeout);
         window.clearTimeout(this._popoverMouseleaveTimeout);
@@ -55,6 +58,9 @@ export class PopoverFoundation extends BaseClass {
         }
         this._removeTriggerListeners();
     }
+    hideAsync() {
+        return this._closePopover();
+    }
     async _onOverlayLightDismiss(evt) {
         evt.preventDefault();
         this._requestDismiss(evt.detail.reason);
@@ -65,11 +71,12 @@ export class PopoverFoundation extends BaseClass {
             return false;
         }
         const previousFocusedEl = this._previouslyFocusedElement;
-        this._closePopover();
-        this._dispatchToggleEvent();
-        if (reason === 'escape' && previousFocusedEl && this._adapter.hasFocus()) {
-            previousFocusedEl.focus();
-        }
+        this._closePopover().then(() => {
+            this._dispatchToggleEvent();
+            if (reason === 'escape' && previousFocusedEl && this._adapter.hasFocus()) {
+                previousFocusedEl.focus();
+            }
+        });
         return true;
     }
     _openPopover({ dispatchEvents = true, fromKeyboard = false } = {}) {
@@ -93,10 +100,15 @@ export class PopoverFoundation extends BaseClass {
             this._dispatchToggleEvent();
         }
     }
-    _closePopover() {
+    async _closePopover() {
         this._previouslyFocusedElement = null;
-        this._adapter.setOverlayOpen(false);
         DismissibleStack.instance.remove(this._adapter.hostElement);
+        if (this._animationType === 'none') {
+            this._adapter.setOverlayOpen(false);
+        }
+        else {
+            await this._adapter.hide();
+        }
         this._adapter.toggleHostAttribute(POPOVER_CONSTANTS.attributes.OPEN, this.open);
     }
     _dispatchBeforetoggleEvent() {
@@ -378,10 +390,12 @@ export class PopoverFoundation extends BaseClass {
         if (this._adapter.overlayElement.anchorElement !== value) {
             if (this._adapter.isConnected) {
                 this._removeTriggerListeners();
+                this._adapter.cleanupAnchorElement();
             }
             this._adapter.overlayElement.anchorElement = value;
             if (this._adapter.isConnected) {
                 this._initializeTriggerListeners();
+                this._adapter.initializeAnchorElement();
             }
         }
     }
@@ -393,8 +407,10 @@ export class PopoverFoundation extends BaseClass {
             this._anchor = value;
             if (this._adapter.isConnected) {
                 this._removeTriggerListeners();
+                this._adapter.cleanupAnchorElement();
                 this._adapter.tryLocateAnchorElement(this._anchor);
                 this._initializeTriggerListeners();
+                this._adapter.initializeAnchorElement();
             }
         }
     }
@@ -480,4 +496,16 @@ export class PopoverFoundation extends BaseClass {
             this._adapter.setHostAttribute(POPOVER_CONSTANTS.attributes.HOVER_DISMISS_DELAY, String(this._hoverDismissDelay));
         }
     }
+    get preset() {
+        var _a;
+        return (_a = this._preset) !== null && _a !== void 0 ? _a : POPOVER_CONSTANTS.defaults.PRESET;
+    }
+    set preset(value) {
+        value = value !== null && value !== void 0 ? value : POPOVER_CONSTANTS.defaults.PRESET;
+        if (this._preset !== value) {
+            this._preset = value;
+            const hasPreset = value !== POPOVER_CONSTANTS.defaults.PRESET;
+            this._adapter.toggleHostAttribute(POPOVER_CONSTANTS.attributes.PRESET, hasPreset, this._preset);
+        }
+    }
 }

package/esm/popover/popover.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { IPopoverToggleEventData, PopoverAnimationType, PopoverTriggerType } from './popover-constants';
+import { IPopoverToggleEventData, PopoverAnimationType, PopoverPreset, PopoverTriggerType } from './popover-constants';
 import { IPopoverFoundation } from './popover-foundation';
 import { IOverlayAware, OverlayAware } from '../overlay/base/overlay-aware';
 import { IDismissible, tryDismiss, IDismissibleStackState } from '../core/utils/dismissible-stack';
@@ -15,6 +15,8 @@ export interface IPopoverComponent extends IOverlayAware, IDismissible {
     persistentHover: boolean;
     hoverDelay: number;
     hoverDismissDelay: number;
+    preset: PopoverPreset;
+    hideAsync(): Promise<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -37,6 +39,7 @@ declare global {
  * @property {boolean} persistentHover - Whether or not the popover should remain open when the user hovers outside the popover.
  * @property {number} hoverDismissDelay - The delay in milliseconds before the popover is dismissed when the user hovers outside of the popover.
  * @property {number} hoverDelay - The delay in milliseconds before the popover is shown.
+ * @property {PopoverPreset} preset - The preset to use for the popover.
  *
  * @attribute {string} arrow - Whether or not the popover should render an arrow.
  * @attribute {string} animation-type - The animation type to use for the popover. Valid values are `'none'`, `'fade'`, `'slide'`, and `'zoom'` (default).
@@ -45,6 +48,7 @@ declare global {
  * @attribute {string} persistent-hover - Whether or not the popover should remain open when the user hovers outside the popover.
  * @attribute {string} hover-dismiss-delay - The delay in milliseconds before the popover is dismissed when the user hovers outside of the popover.
  * @attribute {number} hover-delay - The delay in milliseconds before the popover is shown.
+ * @attribute {string} preset - The preset to use for the popover.
  *
  * @event {CustomEvent<IPopoverToggleEventData} forge-popover-beforetoggle - Dispatches before the popover is toggled, and is cancelable.
  * @event {CustomEvent<IPopoverToggleEventData} forge-popover-toggle - Dispatches after the popover is toggled.
@@ -55,6 +59,12 @@ declare global {
  * @cssproperty --forge-popover-border-width - The border width of the popover surface.
  * @cssproperty --forge-popover-border-style - The border style of the popover surface.
  * @cssproperty --forge-popover-border-color - The border color of the popover surface.
+ * @cssproperty --forge-popover-width - The width of the popover surface. Defaults to `auto`.
+ * @cssproperty --forge-popover-height - The height of the popover surface. Defaults to `auto`.
+ * @cssproperty --forge-popover-min-width - The minimum width of the popover surface. Defaults to `none`.
+ * @cssproperty --forge-popover-max-width - The maximum width of the popover surface. Defaults to `none`.
+ * @cssproperty --forge-popover-min-height - The minimum height of the popover surface. Defaults to `none`.
+ * @cssproperty --forge-popover-max-height - The maximum height of the popover surface. Defaults to `none`.
  * @cssproperty --forge-popover-arrow-size - The size of the arrow.
  * @cssproperty --forge-popover-arrow-height - The height of the arrow.
  * @cssproperty --forge-popover-arrow-width - The width of the arrow.
@@ -77,6 +87,8 @@ declare global {
  * @cssproperty --forge-popover-position-block-end - The `block-end` position of the popover.
  * @cssproperty --forge-popover-position-inline-start - The `inline-start` position of the popover.
  * @cssproperty --forge-popover-position-inline-end - The `inline-end` position of the popover.
+ * @cssproperty --forge-popover-preset-dropdown-max-height - The maximum height of the popover when using `preset="dropdown"`. Defaults to `256px`.
+ * @cssproperty --forge-popover-preset-dropdown-overflow - The overflow behavior of the popover when using `preset="dropdown"`. Defaults to `auto visible` (vertical scrolling only).
  *
  * @slot - The content to render inside the popover.
  *
@@ -97,4 +109,6 @@ export declare class PopoverComponent extends OverlayAware<IPopoverFoundation> i
     persistentHover: boolean;
     hoverDelay: number;
     hoverDismissDelay: number;
+    preset: PopoverPreset;
+    hideAsync(): Promise<void>;
 }

package/esm/popover/popover.js

@@ -13,7 +13,7 @@ import { OverlayAware } from '../overlay/base/overlay-aware';
 import { coerceStringToArray } from '../core/utils/utils';
 import { tryDismiss } from '../core/utils/dismissible-stack';
 const template = '<template><forge-overlay exportparts=\"root:overlay\"><div class=\"forge-popover\" part=\"surface\"><slot></slot></div></forge-overlay></template>';
-const styles = '@-webkit-keyframes zoomin{from{-webkit-transform:scale(.8);transform:scale(.8)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes zoomin{from{-webkit-transform:scale(.8);transform:scale(.8)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes slidein{from{-webkit-transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y));transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y))}to{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@keyframes slidein{from{-webkit-transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y));transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y))}to{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}:host{display:contents;--forge-theme-surface:var(--forge-theme-surface-bright, #ffffff)}:host([hidden]){display:none}forge-overlay{--_popover-background:var(--forge-popover-background, var(--forge-theme-surface-bright, #ffffff));--_popover-border-radius:var(--forge-popover-border-radius, var(--forge-shape-medium, 4px));--_popover-box-shadow:var(--forge-popover-box-shadow, var(--forge-theme-popup-elevation, var(--forge-theme-surface-bright-shadow)));--_popover-border-width:var(--forge-popover-border-width, 0);--_popover-border-style:var(--forge-popover-border-style, solid);--_popover-border-color:var(--forge-popover-border-color, var(--forge-theme-outline, #e0e0e0));--_popover-arrow-size:var(--forge-popover-arrow-size, 12px);--_popover-arrow-height:var(--forge-popover-arrow-height, var(--_popover-arrow-size));--_popover-arrow-width:var(--forge-popover-arrow-width, var(--_popover-arrow-size));--_popover-arrow-background-color:var(--forge-popover-arrow-background-color, var(--_popover-background));--_popover-arrow-top-rotation:var(--forge-popover-arrow-top-rotation, 135deg);--_popover-arrow-right-rotation:var(--forge-popover-arrow-right-rotation, 225deg);--_popover-arrow-bottom-rotation:var(--forge-popover-arrow-bottom-rotation, 315deg);--_popover-arrow-left-rotation:var(--forge-popover-arrow-left-rotation, 45deg);--_popover-arrow-border-width:var(--forge-popover-arrow-border-width, var(--forge-border-thin, 1px));--_popover-animation-timing:var(--forge-popover-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_popover-zoom-duration:var(--forge-popover-zoom-duration, var(--forge-animation-duration-short3, 150ms));--_popover-zoom-timing:var(--forge-popover-zoom-timing, var(--_popover-animating-timing));--_popover-slide-duration:var(--forge-popover-slide-duration, var(--forge-animation-duration-short3, 150ms));--_popover-slide-timing:var(--forge-popover-slide-timing, var(--_popover-animating-timing));--_popover-slide-offset:var(--forge-popover-slide-offset, 24px);--_popover-fade-duration:var(--forge-popover-fade-duration, var(--forge-animation-duration-medium2, 300ms));--_popover-fade-timing:var(--forge-popover-fade-timing, var(--_popover-animating-timing));--_popover-position-inline-start:var(--forge-popover-position-inline-start, auto);--_popover-position-inline-end:var(--forge-popover-position-inline-end, auto);--_popover-position-block-start:var(--forge-popover-position-block-start, auto);--_popover-position-block-end:var(--forge-popover-position-block-end, auto)}.forge-popover{--_popover-arrow-translate-x:0;--_popover-arrow-translate-y:0;--_popover-arrow-rotation:0;--_popover-slidein-x:0;--_popover-slidein-y:0;--_popover-zoomin-origin:50% 50% 0;--_popover-arrow-clip-path:polygon(calc(var(--_popover-border-width) * -1) calc(var(--_popover-border-width) * -1), calc(100% + var(--_popover-border-width)) calc(var(--_popover-border-width) * -1), calc(100% + var(--_popover-border-width)) calc(100% + var(--_popover-border-width)))}.forge-popover{position:relative;background:var(--_popover-background);border-radius:var(--_popover-border-radius);-webkit-box-shadow:var(--_popover-box-shadow);box-shadow:var(--_popover-box-shadow);border-width:var(--_popover-border-width);border-style:var(--_popover-border-style);border-color:var(--_popover-border-color)}:host([open][no-anchor]) forge-overlay{--forge-overlay-position-inline-start:var(--_popover-position-inline-start);--forge-overlay-position-inline-end:var(--_popover-position-inline-end);--forge-overlay-position-block-start:var(--_popover-position-block-start);--forge-overlay-position-block-end:var(--_popover-position-block-end)}:host([arrow]) .forge-popover{--_popover-border-width:var(--_popover-arrow-border-width)}:host([arrow]) .arrow{position:absolute;background-color:var(--_popover-arrow-background-color);height:var(--_popover-arrow-height);width:var(--_popover-arrow-width);-webkit-box-shadow:var(--_popover-box-shadow);box-shadow:var(--_popover-box-shadow);border-width:var(--_popover-border-width);border-style:var(--_popover-border-style);border-color:var(--_popover-border-color);-webkit-transform:translate(var(--_popover-arrow-translate-x),var(--_popover-arrow-translate-y)) rotate(var(--_popover-arrow-rotation));transform:translate(var(--_popover-arrow-translate-x),var(--_popover-arrow-translate-y)) rotate(var(--_popover-arrow-rotation));-webkit-clip-path:var(--_popover-arrow-clip-path);clip-path:var(--_popover-arrow-clip-path)}:host([arrow]) forge-overlay[position-placement^=top] .arrow{--_popover-arrow-translate-y:var(--forge-popover-arrow-translate-y, calc(var(--_popover-border-width) * -1));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-top-rotation))}:host([arrow]) forge-overlay[position-placement^=right] .arrow{--_popover-arrow-translate-x:var(--forge-popover-arrow-translate-x, var(--_popover-border-width));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-right-rotation))}:host([arrow]) forge-overlay[position-placement^=bottom] .arrow{--_popover-arrow-translate-y:var(--forge-popover-arrow-translate-y, var(--_popover-border-width));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-bottom-rotation))}:host([arrow]) forge-overlay[position-placement^=left] .arrow{--_popover-arrow-translate-x:var(--forge-popover-arrow-translate-x, calc(var(--_popover-border-width) * -1));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-left-rotation))}:host(:not([animation-type])) .forge-popover,:host([animation-type=zoom]) .forge-popover{-webkit-animation-duration:var(--_popover-zoom-duration);animation-duration:var(--_popover-zoom-duration);-webkit-animation-timing-function:var(--_popover-zoom-timing);animation-timing-function:var(--_popover-zoom-timing);-webkit-animation-name:fadein,zoomin;animation-name:fadein,zoomin;-webkit-transform-origin:var(--_popover-zoomin-origin);transform-origin:var(--_popover-zoomin-origin)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom left)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom right)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left top)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left bottom)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top left)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top right)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right top)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right bottom)}:host([animation-type=slide]) .forge-popover{-webkit-animation-duration:var(--_popover-slide-duration);animation-duration:var(--_popover-slide-duration);-webkit-animation-timing-function:var(--_popover-slide-timing);animation-timing-function:var(--_popover-slide-timing);-webkit-animation-name:fadein,slidein;animation-name:fadein,slidein}:host([animation-type=slide]) forge-overlay[open][position-placement^=top] .forge-popover{--_popover-slidein-y:var(--forge-popover-slidein-y, var(--_popover-slide-offset))}:host([animation-type=slide]) forge-overlay[open][position-placement^=right] .forge-popover{--_popover-slidein-x:var(--forge-popover-slidein-x, calc(var(--_popover-slide-offset) * -1))}:host([animation-type=slide]) forge-overlay[open][position-placement^=bottom] .forge-popover{--_popover-slidein-y:var(--forge-popover-slidein-y, calc(var(--_popover-slide-offset) * -1))}:host([animation-type=slide]) forge-overlay[open][position-placement^=left] .forge-popover{--_popover-slidein-x:var(--forge-popover-slidein-x, var(--_popover-slide-offset))}:host([animation-type=fade]) .forge-popover{-webkit-animation-duration:var(--_popover-fade-duration);animation-duration:var(--_popover-fade-duration);-webkit-animation-timing-function:var(--_popover-fade-timing);animation-timing-function:var(--_popover-fade-timing);-webkit-animation-name:fadein;animation-name:fadein}';
+const styles = '@-webkit-keyframes zoomin{from{-webkit-transform:scale(.8);transform:scale(.8)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes zoomin{from{-webkit-transform:scale(.8);transform:scale(.8)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes zoomout{from{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(.8);transform:scale(.8)}}@keyframes zoomout{from{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(.8);transform:scale(.8)}}@-webkit-keyframes slidein{from{-webkit-transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y));transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y))}to{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@keyframes slidein{from{-webkit-transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y));transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y))}to{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@-webkit-keyframes slideout{from{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}to{-webkit-transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y));transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y))}}@keyframes slideout{from{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}to{-webkit-transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y));transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y))}}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadeout{from{opacity:1}to{opacity:0}}@keyframes fadeout{from{opacity:1}to{opacity:0}}@layer base,animation,preset,reduced-motion; @layer base{:host{display:contents;--forge-theme-surface:var(--forge-theme-surface-bright, #ffffff)}:host([hidden]){display:none}forge-overlay{--_popover-width:var(--forge-popover-width, auto);--_popover-height:var(--forge-popover-height, auto);--_popover-min-width:var(--forge-popover-min-width, none);--_popover-max-width:var(--forge-popover-max-width, none);--_popover-min-height:var(--forge-popover-min-height, none);--_popover-max-height:var(--forge-popover-max-height, none);--_popover-background:var(--forge-popover-background, var(--forge-theme-surface-bright, #ffffff));--_popover-border-radius:var(--forge-popover-border-radius, var(--forge-shape-medium, 4px));--_popover-box-shadow:var(--forge-popover-box-shadow, var(--forge-theme-popup-elevation, var(--forge-theme-surface-bright-shadow)));--_popover-border-width:var(--forge-popover-border-width, 0);--_popover-border-style:var(--forge-popover-border-style, solid);--_popover-border-color:var(--forge-popover-border-color, var(--forge-theme-outline, #e0e0e0));--_popover-overflow:var(--forge-popover-overflow, initial);--_popover-arrow-size:var(--forge-popover-arrow-size, 12px);--_popover-arrow-height:var(--forge-popover-arrow-height, var(--_popover-arrow-size));--_popover-arrow-width:var(--forge-popover-arrow-width, var(--_popover-arrow-size));--_popover-arrow-background-color:var(--forge-popover-arrow-background-color, var(--_popover-background));--_popover-arrow-top-rotation:var(--forge-popover-arrow-top-rotation, 135deg);--_popover-arrow-right-rotation:var(--forge-popover-arrow-right-rotation, 225deg);--_popover-arrow-bottom-rotation:var(--forge-popover-arrow-bottom-rotation, 315deg);--_popover-arrow-left-rotation:var(--forge-popover-arrow-left-rotation, 45deg);--_popover-arrow-border-width:var(--forge-popover-arrow-border-width, var(--forge-border-thin, 1px));--_popover-animation-enter-duration:var(--forge-popover-animation-enter-duration, var(--forge-animation-duration-short3, 150ms));--_popover-animation-enter-timing:var(--forge-popover-animation-enter-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_popover-animation-exit-duration:var(--forge-popover-animation-exit-duration, var(--forge-animation-duration-short2, 100ms));--_popover-animation-exit-timing:var(--forge-popover-animation-exit-timing, var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)));--_popover-zoom-enter-duration:var(--forge-popover-zoom-enter-duration, var(--_popover-animation-enter-duration));--_popover-zoom-enter-timing:var(--forge-popover-zoom-enter-timing, var(--_popover-animation-enter-timing));--_popover-zoom-exit-duration:var(--forge-popover-zoom-exit-duration, var(--_popover-animation-exit-duration));--_popover-zoom-exit-timing:var(--forge-popover-zoom-exit-timing, var(--_popover-animation-exit-timing));--_popover-slide-enter-duration:var(--forge-popover-slide-enter-duration, var(--_popover-animation-enter-duration));--_popover-slide-enter-timing:var(--forge-popover-slide-enter-timing, var(--_popover-animation-enter-timing));--_popover-slide-exit-duration:var(--forge-popover-slide-exit-duration, var(--_popover-animation-exit-duration));--_popover-slide-exit-timing:var(--forge-popover-slide-exit-timing, var(--_popover-animation-exit-timing));--_popover-slide-offset:var(--forge-popover-slide-offset, 24px);--_popover-fade-enter-duration:var(--forge-popover-fade-enter-duration, var(--forge-animation-duration-medium2, 300ms));--_popover-fade-enter-timing:var(--forge-popover-fade-enter-timing, var(--_popover-animation-enter-timing));--_popover-fade-exit-duration:var(--forge-popover-fade-exit-duration, var(--_popover-animation-exit-duration));--_popover-fade-exit-timing:var(--forge-popover-fade-exit-timing, var(--_popover-animation-exit-timing));--_popover-position-inline-start:var(--forge-popover-position-inline-start, auto);--_popover-position-inline-end:var(--forge-popover-position-inline-end, auto);--_popover-position-block-start:var(--forge-popover-position-block-start, auto);--_popover-position-block-end:var(--forge-popover-position-block-end, auto);--_popover-preset-dropdown-max-height:var(--forge-popover-preset-dropdown-max-height, 256px);--_popover-preset-dropdown-overflow:var(--forge-popover-preset-dropdown-overflow, auto visible);--_popover-preset-dropdown-padding-block:var(--forge-popover-preset-dropdown-padding-block, var(--forge-spacing-xsmall, 8px))}.forge-popover{--_popover-arrow-translate-x:0;--_popover-arrow-translate-y:0;--_popover-arrow-rotation:0;--_popover-slidein-x:0;--_popover-slidein-y:0;--_popover-zoomin-origin:50% 50% 0;--_popover-arrow-clip-path:polygon(calc(var(--_popover-border-width) * -1) calc(var(--_popover-border-width) * -1), calc(100% + var(--_popover-border-width)) calc(var(--_popover-border-width) * -1), calc(100% + var(--_popover-border-width)) calc(100% + var(--_popover-border-width)))}.forge-popover{position:relative;overflow:var(--_popover-overflow);-webkit-box-sizing:border-box;box-sizing:border-box;background:var(--_popover-background);border-radius:var(--_popover-border-radius);-webkit-box-shadow:var(--_popover-box-shadow);box-shadow:var(--_popover-box-shadow);border-width:var(--_popover-border-width);border-style:var(--_popover-border-style);border-color:var(--_popover-border-color);width:var(--_popover-width);height:var(--_popover-height);min-width:var(--_popover-min-width);max-width:var(--_popover-max-width);min-height:var(--_popover-min-height);max-height:var(--_popover-max-height)}.forge-popover::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-popover::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popover::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popover::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popover::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,var(--forge-shape-full,9999px));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-popover::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}:host([open][no-anchor]) forge-overlay{--forge-overlay-position-inline-start:var(--_popover-position-inline-start);--forge-overlay-position-inline-end:var(--_popover-position-inline-end);--forge-overlay-position-block-start:var(--_popover-position-block-start);--forge-overlay-position-block-end:var(--_popover-position-block-end)}:host([arrow]) .forge-popover{--_popover-border-width:var(--_popover-arrow-border-width)}:host([arrow]) .arrow{position:absolute;background-color:var(--_popover-arrow-background-color);height:var(--_popover-arrow-height);width:var(--_popover-arrow-width);-webkit-box-shadow:var(--_popover-box-shadow);box-shadow:var(--_popover-box-shadow);border-width:var(--_popover-border-width);border-style:var(--_popover-border-style);border-color:var(--_popover-border-color);-webkit-transform:translate(var(--_popover-arrow-translate-x),var(--_popover-arrow-translate-y)) rotate(var(--_popover-arrow-rotation));transform:translate(var(--_popover-arrow-translate-x),var(--_popover-arrow-translate-y)) rotate(var(--_popover-arrow-rotation));-webkit-clip-path:var(--_popover-arrow-clip-path);clip-path:var(--_popover-arrow-clip-path)}:host([arrow]) forge-overlay[position-placement^=top] .arrow{--_popover-arrow-translate-y:var(--forge-popover-arrow-translate-y, calc(var(--_popover-border-width) * -1));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-top-rotation))}:host([arrow]) forge-overlay[position-placement^=right] .arrow{--_popover-arrow-translate-x:var(--forge-popover-arrow-translate-x, var(--_popover-border-width));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-right-rotation))}:host([arrow]) forge-overlay[position-placement^=bottom] .arrow{--_popover-arrow-translate-y:var(--forge-popover-arrow-translate-y, var(--_popover-border-width));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-bottom-rotation))}:host([arrow]) forge-overlay[position-placement^=left] .arrow{--_popover-arrow-translate-x:var(--forge-popover-arrow-translate-x, calc(var(--_popover-border-width) * -1));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-left-rotation))}}@layer preset{:host([preset=dropdown]) .forge-popover{--_popover-max-height:var(--_popover-preset-dropdown-max-height);--_popover-overflow:var(--_popover-preset-dropdown-overflow);padding-block:var(--_popover-preset-dropdown-padding-block)}:host([constrain-viewport-width]) .forge-popover{--_popover-max-width:var(--forge-popover-max-width, 100vw)}}@layer animation{:host(:not([animation-type])) .forge-popover,:host([animation-type=zoom]) .forge-popover{-webkit-animation-duration:var(--_popover-zoom-enter-duration);animation-duration:var(--_popover-zoom-enter-duration);-webkit-animation-timing-function:var(--_popover-zoom-enter-timing);animation-timing-function:var(--_popover-zoom-enter-timing);-webkit-animation-name:fadein,zoomin;animation-name:fadein,zoomin;-webkit-transform-origin:var(--_popover-zoomin-origin);transform-origin:var(--_popover-zoomin-origin)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom left)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom right)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left top)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left bottom)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top left)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top right)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right top)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right bottom)}:host(:not([animation-type])) forge-overlay[open] .forge-popover.exiting,:host([animation-type=zoom]) forge-overlay[open] .forge-popover.exiting{-webkit-animation-duration:var(--_popover-zoom-exit-duration);animation-duration:var(--_popover-zoom-exit-duration);-webkit-animation-timing-function:var(--_popover-zoom-exit-timing);animation-timing-function:var(--_popover-zoom-exit-timing);-webkit-animation-name:fadeout,zoomout;animation-name:fadeout,zoomout}:host([animation-type=slide]) .forge-popover{-webkit-animation-duration:var(--_popover-slide-enter-duration);animation-duration:var(--_popover-slide-enter-duration);-webkit-animation-timing-function:var(--_popover-slide-enter-timing);animation-timing-function:var(--_popover-slide-enter-timing);-webkit-animation-name:fadein,slidein;animation-name:fadein,slidein}:host([animation-type=slide]) forge-overlay[open][position-placement^=top] .forge-popover{--_popover-slidein-y:var(--forge-popover-slidein-y, var(--_popover-slide-offset))}:host([animation-type=slide]) forge-overlay[open][position-placement^=right] .forge-popover{--_popover-slidein-x:var(--forge-popover-slidein-x, calc(var(--_popover-slide-offset) * -1))}:host([animation-type=slide]) forge-overlay[open][position-placement^=bottom] .forge-popover{--_popover-slidein-y:var(--forge-popover-slidein-y, calc(var(--_popover-slide-offset) * -1))}:host([animation-type=slide]) forge-overlay[open][position-placement^=left] .forge-popover{--_popover-slidein-x:var(--forge-popover-slidein-x, var(--_popover-slide-offset))}:host([animation-type=slide]) forge-overlay[open] .forge-popover.exiting{-webkit-animation-duration:var(--_popover-slide-exit-duration);animation-duration:var(--_popover-slide-exit-duration);-webkit-animation-timing-function:var(--_popover-slide-exit-timing);animation-timing-function:var(--_popover-slide-exit-timing);-webkit-animation-name:fadeout,slideout;animation-name:fadeout,slideout}:host([animation-type=fade]) .forge-popover{-webkit-animation-duration:var(--_popover-fade-enter-duration);animation-duration:var(--_popover-fade-enter-duration);-webkit-animation-timing-function:var(--_popover-fade-enter-timing);animation-timing-function:var(--_popover-fade-enter-timing);-webkit-animation-name:fadein;animation-name:fadein}:host([animation-type=fade]) .forge-popover.exiting{-webkit-animation-duration:var(--_popover-fade-exit-duration);animation-duration:var(--_popover-fade-exit-duration);-webkit-animation-timing-function:var(--_popover-fade-exit-timing);animation-timing-function:var(--_popover-fade-exit-timing);-webkit-animation-name:fadeout;animation-name:fadeout}}@layer reduced-motion{@media (prefers-reduced-motion:reduce){.forge-popover{-webkit-animation:none;animation:none}.forge-popover.exiting{-webkit-animation:none;animation:none}}}';
 /**
  * @tag forge-popover
  *
@@ -26,6 +26,7 @@ const styles = '@-webkit-keyframes zoomin{from{-webkit-transform:scale(.8);trans
  * @property {boolean} persistentHover - Whether or not the popover should remain open when the user hovers outside the popover.
  * @property {number} hoverDismissDelay - The delay in milliseconds before the popover is dismissed when the user hovers outside of the popover.
  * @property {number} hoverDelay - The delay in milliseconds before the popover is shown.
+ * @property {PopoverPreset} preset - The preset to use for the popover.
  *
  * @attribute {string} arrow - Whether or not the popover should render an arrow.
  * @attribute {string} animation-type - The animation type to use for the popover. Valid values are `'none'`, `'fade'`, `'slide'`, and `'zoom'` (default).
@@ -34,6 +35,7 @@ const styles = '@-webkit-keyframes zoomin{from{-webkit-transform:scale(.8);trans
  * @attribute {string} persistent-hover - Whether or not the popover should remain open when the user hovers outside the popover.
  * @attribute {string} hover-dismiss-delay - The delay in milliseconds before the popover is dismissed when the user hovers outside of the popover.
  * @attribute {number} hover-delay - The delay in milliseconds before the popover is shown.
+ * @attribute {string} preset - The preset to use for the popover.
  *
  * @event {CustomEvent<IPopoverToggleEventData} forge-popover-beforetoggle - Dispatches before the popover is toggled, and is cancelable.
  * @event {CustomEvent<IPopoverToggleEventData} forge-popover-toggle - Dispatches after the popover is toggled.
@@ -44,6 +46,12 @@ const styles = '@-webkit-keyframes zoomin{from{-webkit-transform:scale(.8);trans
  * @cssproperty --forge-popover-border-width - The border width of the popover surface.
  * @cssproperty --forge-popover-border-style - The border style of the popover surface.
  * @cssproperty --forge-popover-border-color - The border color of the popover surface.
+ * @cssproperty --forge-popover-width - The width of the popover surface. Defaults to `auto`.
+ * @cssproperty --forge-popover-height - The height of the popover surface. Defaults to `auto`.
+ * @cssproperty --forge-popover-min-width - The minimum width of the popover surface. Defaults to `none`.
+ * @cssproperty --forge-popover-max-width - The maximum width of the popover surface. Defaults to `none`.
+ * @cssproperty --forge-popover-min-height - The minimum height of the popover surface. Defaults to `none`.
+ * @cssproperty --forge-popover-max-height - The maximum height of the popover surface. Defaults to `none`.
  * @cssproperty --forge-popover-arrow-size - The size of the arrow.
  * @cssproperty --forge-popover-arrow-height - The height of the arrow.
  * @cssproperty --forge-popover-arrow-width - The width of the arrow.
@@ -66,6 +74,8 @@ const styles = '@-webkit-keyframes zoomin{from{-webkit-transform:scale(.8);trans
  * @cssproperty --forge-popover-position-block-end - The `block-end` position of the popover.
  * @cssproperty --forge-popover-position-inline-start - The `inline-start` position of the popover.
  * @cssproperty --forge-popover-position-inline-end - The `inline-end` position of the popover.
+ * @cssproperty --forge-popover-preset-dropdown-max-height - The maximum height of the popover when using `preset="dropdown"`. Defaults to `256px`.
+ * @cssproperty --forge-popover-preset-dropdown-overflow - The overflow behavior of the popover when using `preset="dropdown"`. Defaults to `auto visible` (vertical scrolling only).
  *
  * @slot - The content to render inside the popover.
  *
@@ -76,13 +86,7 @@ let PopoverComponent = class PopoverComponent extends OverlayAware {
     static get observedAttributes() {
         return [
             ...Object.values(OVERLAY_CONSTANTS.observedAttributes),
-            POPOVER_CONSTANTS.attributes.ARROW,
-            POPOVER_CONSTANTS.attributes.ANIMATION_TYPE,
-            POPOVER_CONSTANTS.attributes.TRIGGER_TYPE,
-            POPOVER_CONSTANTS.attributes.LONGPRESS_DELAY,
-            POPOVER_CONSTANTS.attributes.PERSISTENT_HOVER,
-            POPOVER_CONSTANTS.attributes.HOVER_DELAY,
-            POPOVER_CONSTANTS.attributes.HOVER_DISMISS_DELAY
+            ...Object.values(POPOVER_CONSTANTS.observedAttributes)
         ];
     }
     [tryDismiss](state) {
@@ -101,30 +105,36 @@ let PopoverComponent = class PopoverComponent extends OverlayAware {
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case POPOVER_CONSTANTS.attributes.ARROW:
+            case POPOVER_CONSTANTS.observedAttributes.ARROW:
                 this.arrow = coerceBoolean(newValue);
                 return;
-            case POPOVER_CONSTANTS.attributes.ANIMATION_TYPE:
+            case POPOVER_CONSTANTS.observedAttributes.ANIMATION_TYPE:
                 this.animationType = newValue;
                 return;
-            case POPOVER_CONSTANTS.attributes.TRIGGER_TYPE:
+            case POPOVER_CONSTANTS.observedAttributes.TRIGGER_TYPE:
                 this.triggerType = (newValue === null || newValue === void 0 ? void 0 : newValue.trim()) ? coerceStringToArray(newValue) : POPOVER_CONSTANTS.defaults.TRIGGER_TYPE;
                 return;
-            case POPOVER_CONSTANTS.attributes.LONGPRESS_DELAY:
+            case POPOVER_CONSTANTS.observedAttributes.LONGPRESS_DELAY:
                 this.longpressDelay = coerceNumber(newValue);
                 return;
-            case POPOVER_CONSTANTS.attributes.PERSISTENT_HOVER:
+            case POPOVER_CONSTANTS.observedAttributes.PERSISTENT_HOVER:
                 this.persistentHover = coerceBoolean(newValue);
                 return;
-            case POPOVER_CONSTANTS.attributes.HOVER_DELAY:
+            case POPOVER_CONSTANTS.observedAttributes.HOVER_DELAY:
                 this.hoverDelay = coerceNumber(newValue);
                 return;
-            case POPOVER_CONSTANTS.attributes.HOVER_DISMISS_DELAY:
+            case POPOVER_CONSTANTS.observedAttributes.HOVER_DISMISS_DELAY:
                 this.hoverDismissDelay = coerceNumber(newValue);
                 return;
+            case POPOVER_CONSTANTS.observedAttributes.PRESET:
+                this.preset = newValue;
+                return;
         }
         super.attributeChangedCallback(name, oldValue, newValue);
     }
+    hideAsync() {
+        return this._foundation.hideAsync();
+    }
 };
 __decorate([
     FoundationProperty()
@@ -147,6 +157,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], PopoverComponent.prototype, "hoverDismissDelay", void 0);
+__decorate([
+    FoundationProperty()
+], PopoverComponent.prototype, "preset", void 0);
 PopoverComponent = __decorate([
     CustomElement({
         name: POPOVER_CONSTANTS.elementName,

package/esm/radio/core/radio-group-manager.d.ts

@@ -18,10 +18,15 @@ export declare class RadioGroupManager {
      * the same name from the form element.
      *
      * @param el - The IRadioComponent to get the radio group for.
+     * @param rootNode - The node to search for radios.
+     * @param form - The form element to get radios from.
      * @returns An array of IRadioComponents that belong to the same radio group as the given
      * IRadioComponent.
      */
-    static getRadioGroup(el: IRadioComponent): IRadioComponent[];
+    static getRadioGroup(el: IRadioComponent, { rootNode, form }?: {
+        rootNode?: ShadowRoot | Document;
+        form?: HTMLFormElement;
+    }): IRadioComponent[];
     /**
      * Sets the validity of a radio group.
      * If no radio is selected in the group and selection is required, it sets the validity to
@@ -36,6 +41,18 @@ export declare class RadioGroupManager {
      * @param el - The radio component to set as selected.
      */
     static setSelectedRadioInGroup(el: IRadioComponent): void;
+    /**
+     * Sets the tabindices of radios in a radio group based on the currently checked radio.
+     * @param el - A radio component within the group to update the tab indices for.
+     * @param ignoreSelf - Whether to ignore the passed radio component when updating the tab indices.
+     * @param rootNode - The node to search for radios.
+     * @param form - The form element to get radios from.
+     */
+    static syncRadioFocusableState(el: IRadioComponent, { ignoreSelf, rootNode, form }?: {
+        ignoreSelf: boolean;
+        rootNode?: ShadowRoot | Document;
+        form?: HTMLFormElement;
+    }): void;
     /**
      * Focuses the next radio in the radio group.
      *