vira 32.4.0 → 33.1.0

package/dist/directives/index.d.ts

@@ -0,0 +1,2 @@
+export * from './popover.directive.js';
+export * from './tooltip.directive.js';

package/dist/directives/index.js

@@ -0,0 +1,2 @@
+export * from './popover.directive.js';
+export * from './tooltip.directive.js';

package/dist/directives/popover.directive.d.ts

@@ -0,0 +1,29 @@
+import { AsyncDirective, type PartInfo } from 'element-vir';
+import { type PopoverManager, type PopoverOptions } from '../util/popover-manager.js';
+/**
+ * The directive class behind {@link popover}.
+ *
+ * @category Internal
+ */
+export declare class PopoverDirective extends AsyncDirective {
+    protected popoverManager: PopoverManager | undefined;
+    constructor(partInfo: PartInfo);
+    /** Applies the latest directive arguments. */
+    update(partInfo: PartInfo, [popoverManager, options,]: [
+        PopoverManager,
+        Readonly<PopoverOptions>
+    ]): undefined;
+    /** Renders nothing, this directive only attaches behavior to its element. */
+    render(popoverManager: PopoverManager, options: Readonly<PopoverOptions>): undefined;
+    protected disconnected(): void;
+    /** Re-opens a popover that `trigger` forces open. */
+    protected reconnected(): void;
+}
+/**
+ * Connects a {@link PopoverManager} to the element that this directive is attached to, so that the
+ * manager's popover opens anchored to that element.
+ *
+ * @category Popover
+ * @category Directives
+ */
+export declare const popover: (popoverManager: PopoverManager, options: Readonly<PopoverOptions>) => import("element-vir").DirectiveResult<typeof PopoverDirective>;

package/dist/directives/popover.directive.js

@@ -0,0 +1,45 @@
+import { assertWrap } from '@augment-vir/assert';
+import { assertIsElementPartInfo, AsyncDirective, directive } from 'element-vir';
+const directiveName = 'popover';
+/**
+ * The directive class behind {@link popover}.
+ *
+ * @category Internal
+ */
+export class PopoverDirective extends AsyncDirective {
+    popoverManager;
+    constructor(partInfo) {
+        super(partInfo);
+        assertIsElementPartInfo(partInfo, directiveName);
+    }
+    /** Applies the latest directive arguments. */
+    update(partInfo, [popoverManager, options,]) {
+        assertIsElementPartInfo(partInfo, directiveName);
+        if (popoverManager !== this.popoverManager) {
+            this.popoverManager?.destroy();
+            this.popoverManager = popoverManager;
+        }
+        popoverManager.update(assertWrap.instanceOf(partInfo.element, HTMLElement), options);
+        return this.render(popoverManager, options);
+    }
+    /** Renders nothing, this directive only attaches behavior to its element. */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(popoverManager, options) {
+        return undefined;
+    }
+    disconnected() {
+        this.popoverManager?.close();
+    }
+    /** Re-opens a popover that `trigger` forces open. */
+    reconnected() {
+        this.popoverManager?.applyForcedState();
+    }
+}
+/**
+ * Connects a {@link PopoverManager} to the element that this directive is attached to, so that the
+ * manager's popover opens anchored to that element.
+ *
+ * @category Popover
+ * @category Directives
+ */
+export const popover = directive(PopoverDirective);

package/dist/directives/tooltip.directive.d.ts

@@ -0,0 +1,60 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { AsyncDirective, type HtmlInterpolation, type PartInfo } from 'element-vir';
+import { ViraTooltip } from '../elements/popover/vira-tooltip.element.js';
+import { PopoverManager, type PopoverOptions, PopoverTrigger } from '../util/popover-manager.js';
+/**
+ * Options for {@link tooltip}.
+ *
+ * @category Popover
+ */
+export type TooltipOptions = PartialWithUndefined<{
+    /** Defaults to {@link PopoverTrigger.Hover}. `true` or `false` force the tooltip open or closed. */
+    trigger: boolean | PopoverTrigger;
+}> & Pick<PopoverOptions, 'delay' | 'timeout'>;
+/**
+ * The directive class behind {@link tooltip}.
+ *
+ * @category Internal
+ */
+export declare class TooltipDirective extends AsyncDirective {
+    content: HtmlInterpolation;
+    /** Only exists while the tooltip is shown. */
+    tooltipElement: (typeof ViraTooltip)['InstanceType'] | undefined;
+    readonly popoverManager: PopoverManager;
+    constructor(partInfo: PartInfo);
+    /** Applies the latest directive arguments. */
+    update(partInfo: PartInfo, [content, options,]: [
+        HtmlInterpolation,
+        TooltipOptions?
+    ]): undefined;
+    /** Creates a new {@link ViraTooltip} after `anchor`, replacing any previous one. */
+    protected createTooltipElement(anchor: HTMLElement): import("element-vir").DeclarativeElementHost<"vira-tooltip", {
+        anchor: HTMLElement;
+    }, {}, {}, "vira-tooltip-", "vira-tooltip-", readonly [], readonly []>;
+    /** Renders nothing, this directive only attaches behavior to its element. */
+    render(content: HtmlInterpolation, options?: TooltipOptions): undefined;
+    protected disconnected(): void;
+    /** Re-opens a popover that `trigger` forces open. */
+    protected reconnected(): void;
+}
+/**
+ * Shows a {@link ViraTooltip} with the given contents while the element that this directive is
+ * attached to is hovered or focused, or as `options.trigger` describes. The tooltip is centered
+ * above the element when it fits, otherwise it is aligned to the element's left or right edge, and
+ * it flips below the element when there's no room above. The tooltip is inserted right after the
+ * element, so styles from the element's shadow root apply to template contents.
+ *
+ * @category Popover
+ * @category Directives
+ * @example
+ *
+ * ```ts
+ * import {html} from 'element-vir';
+ * import {tooltip} from 'vira';
+ *
+ * html`
+ *     <button ${tooltip('Mark as resolved')}>Resolve</button>
+ * `;
+ * ```
+ */
+export declare const tooltip: (content: HtmlInterpolation, options?: TooltipOptions | undefined) => import("element-vir").DirectiveResult<typeof TooltipDirective>;

package/dist/directives/tooltip.directive.js

@@ -0,0 +1,99 @@
+import { assertWrap } from '@augment-vir/assert';
+import { assertIsElementPartInfo, AsyncDirective, directive, } from 'element-vir';
+import { render } from 'lit';
+import { listenTo } from 'typed-event-target';
+import { ViraTooltip } from '../elements/popover/vira-tooltip.element.js';
+import { PopoverManager, PopoverTrigger } from '../util/popover-manager.js';
+const directiveName = 'tooltip';
+/**
+ * The directive class behind {@link tooltip}.
+ *
+ * @category Internal
+ */
+export class TooltipDirective extends AsyncDirective {
+    content;
+    /** Only exists while the tooltip is shown. */
+    tooltipElement;
+    popoverManager = new PopoverManager();
+    constructor(partInfo) {
+        super(partInfo);
+        assertIsElementPartInfo(partInfo, directiveName);
+    }
+    /** Applies the latest directive arguments. */
+    update(partInfo, [content, options,]) {
+        assertIsElementPartInfo(partInfo, directiveName);
+        const anchor = assertWrap.instanceOf(partInfo.element, HTMLElement);
+        this.content = content;
+        if (this.tooltipElement) {
+            render(content, this.tooltipElement);
+        }
+        this.popoverManager.update(anchor, {
+            trigger: options?.trigger ?? PopoverTrigger.Hover,
+            delay: options?.delay,
+            timeout: options?.timeout,
+            getPopover: () => this.createTooltipElement(anchor),
+        });
+        return this.render(content, options);
+    }
+    /** Creates a new {@link ViraTooltip} after `anchor`, replacing any previous one. */
+    createTooltipElement(anchor) {
+        this.tooltipElement?.remove();
+        const tooltipElement = assertWrap.instanceOf(document.createElement(ViraTooltip.tagName), ViraTooltip);
+        this.tooltipElement = tooltipElement;
+        listenTo(tooltipElement, 'toggle', () => {
+            if (!tooltipElement.matches(':popover-open')) {
+                tooltipElement.remove();
+                if (this.tooltipElement === tooltipElement) {
+                    this.tooltipElement = undefined;
+                }
+            }
+        });
+        this.tooltipElement.assignInputs({
+            anchor,
+        });
+        this.tooltipElement.popover = 'manual';
+        this.tooltipElement.role = 'tooltip';
+        /**
+         * Keeps the tooltip rendered when the anchor is slotted into a named slot, where an
+         * unassigned sibling would not be rendered at all.
+         */
+        this.tooltipElement.slot = anchor.slot;
+        /** Rendered into light DOM so that the anchor's shadow root styles the contents. */
+        render(this.content, this.tooltipElement);
+        anchor.after(this.tooltipElement);
+        return this.tooltipElement;
+    }
+    /** Renders nothing, this directive only attaches behavior to its element. */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(content, options) {
+        return undefined;
+    }
+    disconnected() {
+        this.popoverManager.close();
+    }
+    /** Re-opens a popover that `trigger` forces open. */
+    reconnected() {
+        this.popoverManager.applyForcedState();
+    }
+}
+/**
+ * Shows a {@link ViraTooltip} with the given contents while the element that this directive is
+ * attached to is hovered or focused, or as `options.trigger` describes. The tooltip is centered
+ * above the element when it fits, otherwise it is aligned to the element's left or right edge, and
+ * it flips below the element when there's no room above. The tooltip is inserted right after the
+ * element, so styles from the element's shadow root apply to template contents.
+ *
+ * @category Popover
+ * @category Directives
+ * @example
+ *
+ * ```ts
+ * import {html} from 'element-vir';
+ * import {tooltip} from 'vira';
+ *
+ * html`
+ *     <button ${tooltip('Mark as resolved')}>Resolve</button>
+ * `;
+ * ```
+ */
+export const tooltip = directive(TooltipDirective);

package/dist/elements/color/vira-color-picker.element.d.ts

@@ -1,7 +1,7 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { Color } from '@electrovir/color/dist/data/color-class/color.js';
 /**
- * A color picker element with a swatch that opens a popup with color format sliders.
+ * A color picker element with a swatch that opens a popover with color format sliders.
  *
  * Set the width and height of the swatch using the provided CSS variables.
  *

package/dist/elements/color/vira-color-picker.element.js

@@ -11,10 +11,10 @@ import { viraFormCssVars } from '../../styles/form-styles.js';
 import { noNativeFormStyles } from '../../styles/native-styles.js';
 import { viraShadows } from '../../styles/shadows.js';
 import { colorLocalStorageClient } from '../../util/color-local-storage.client.js';
-import { ViraPopUpTrigger } from '../pop-up/vira-pop-up-trigger.element.js';
+import { ViraPopoverTrigger } from '../popover/vira-popover-trigger.element.js';
+import { ViraDropdown } from '../vira-dropdown.element.js';
 import { ViraIcon } from '../vira-icon.element.js';
 import { ViraInput } from '../vira-input.element.js';
-import { ViraSelect } from '../vira-select.element.js';
 import { ViraColorFormatSliders } from './vira-color-format-sliders.element.js';
 import { ViraColorSwatch } from './vira-color-swatch.element.js';
 const colorFormatOptions = getObjectTypedValues(ColorFormatName).map((formatName) => {
@@ -24,7 +24,7 @@ const colorFormatOptions = getObjectTypedValues(ColorFormatName).map((formatName
     };
 });
 /**
- * A color picker element with a swatch that opens a popup with color format sliders.
+ * A color picker element with a swatch that opens a popover with color format sliders.
  *
  * Set the width and height of the swatch using the provided CSS variables.
  *
@@ -71,7 +71,7 @@ export const ViraColorPicker = defineElement()({
                 display: flex;
             }
 
-            ${ViraPopUpTrigger} {
+            ${ViraPopoverTrigger} {
                 width: 100%;
                 height: 100%;
                 box-sizing: border-box;
@@ -123,7 +123,7 @@ export const ViraColorPicker = defineElement()({
                 border-radius: 8px;
             }
 
-            .pop-up .picker {
+            .popover .picker {
                 ${viraShadows.menuShadow}
             }
 
@@ -210,12 +210,14 @@ export const ViraColorPicker = defineElement()({
         `;
         const pickerTemplate = html `
             <div class="picker">
-                <${ViraSelect.assign({
+                <${ViraDropdown.assign({
             options: colorFormatOptions,
-            value: state.selectedFormatName,
+            selected: [
+                state.selectedFormatName,
+            ],
         })}
-                    ${listen(ViraSelect.events.valueChange, (event) => {
-            const selectedFormat = checkWrap.isEnumValue(event.detail, ColorFormatName);
+                    ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
+            const selectedFormat = checkWrap.isEnumValue(event.detail[0], ColorFormatName);
             if (selectedFormat) {
                 updateState({
                     selectedFormatName: selectedFormat,
@@ -223,7 +225,7 @@ export const ViraColorPicker = defineElement()({
                 colorLocalStorageClient.set.lastFormat(selectedFormat);
             }
         })}
-                ></${ViraSelect}>
+                ></${ViraDropdown}>
                 ${rawInputTemplate}
                 <${ViraColorFormatSliders.assign({
             color,
@@ -248,12 +250,12 @@ export const ViraColorPicker = defineElement()({
         }
         else {
             return html `
-                <${ViraPopUpTrigger.assign({
+                <${ViraPopoverTrigger.assign({
                 keepOpenAfterInteraction: true,
             })}>
                     <button
                         class="trigger"
-                        slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-trigger']}
+                        slot=${ViraPopoverTrigger.slotNames['vira-popover-trigger-trigger']}
                         ${listen('mousedown', () => {
                 const storedFormat = colorLocalStorageClient.get.lastFormat();
                 if (storedFormat) {
@@ -266,12 +268,12 @@ export const ViraColorPicker = defineElement()({
                         ${swatchTemplate}
                     </button>
                     <div
-                        class="pop-up"
-                        slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-pop-up']}
+                        class="popover"
+                        slot=${ViraPopoverTrigger.slotNames['vira-popover-trigger-popover']}
                     >
                         ${pickerTemplate}
                     </div>
-                </${ViraPopUpTrigger}>
+                </${ViraPopoverTrigger}>
             `;
         }
     },

package/dist/elements/index.d.ts

@@ -8,10 +8,11 @@ export * from './color/vira-color-picker.element.js';
 export * from './color/vira-color-slider.element.js';
 export * from './color/vira-color-swatch.element.js';
 export * from './color/vira-contrast-indicator.element.js';
-export * from './pop-up/vira-menu-item.element.js';
-export * from './pop-up/vira-menu-trigger.element.js';
-export * from './pop-up/vira-menu.element.js';
-export * from './pop-up/vira-pop-up-trigger.element.js';
+export * from './popover/vira-menu-item.element.js';
+export * from './popover/vira-menu-trigger.element.js';
+export * from './popover/vira-menu.element.js';
+export * from './popover/vira-popover-trigger.element.js';
+export * from './popover/vira-tooltip.element.js';
 export * from './vira-absolute-time.element.js';
 export * from './vira-bold-text.element.js';
 export * from './vira-button.element.js';
@@ -32,7 +33,6 @@ export * from './vira-link.element.js';
 export * from './vira-modal.element.js';
 export * from './vira-progress.element.js';
 export * from './vira-relative-time.element.js';
-export * from './vira-select.element.js';
 export * from './vira-tabs.element.js';
 export * from './vira-tag.element.js';
 export * from './vira-text-area.element.js';

package/dist/elements/index.js

@@ -8,10 +8,11 @@ export * from './color/vira-color-picker.element.js';
 export * from './color/vira-color-slider.element.js';
 export * from './color/vira-color-swatch.element.js';
 export * from './color/vira-contrast-indicator.element.js';
-export * from './pop-up/vira-menu-item.element.js';
-export * from './pop-up/vira-menu-trigger.element.js';
-export * from './pop-up/vira-menu.element.js';
-export * from './pop-up/vira-pop-up-trigger.element.js';
+export * from './popover/vira-menu-item.element.js';
+export * from './popover/vira-menu-trigger.element.js';
+export * from './popover/vira-menu.element.js';
+export * from './popover/vira-popover-trigger.element.js';
+export * from './popover/vira-tooltip.element.js';
 export * from './vira-absolute-time.element.js';
 export * from './vira-bold-text.element.js';
 export * from './vira-button.element.js';
@@ -32,7 +33,6 @@ export * from './vira-link.element.js';
 export * from './vira-modal.element.js';
 export * from './vira-progress.element.js';
 export * from './vira-relative-time.element.js';
-export * from './vira-select.element.js';
 export * from './vira-tabs.element.js';
 export * from './vira-tag.element.js';
 export * from './vira-text-area.element.js';

package/dist/elements/{pop-up → popover}/vira-menu-item.element.d.ts

@@ -3,7 +3,7 @@ import { type ViraIconSvg } from '../../icons/icon-svg.js';
 /**
  * An element for an individual menu item.
  *
- * @category PopUp
+ * @category Popover
  * @category Elements
  */
 export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefinition<"vira-menu-item", PartialWithUndefined<{
@@ -20,7 +20,7 @@ export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefin
      */
     iconOverride: ViraIconSvg;
     /**
-     * When `true`, activating this item will _not_ close the containing pop-up.
+     * When `true`, activating this item will _not_ close the containing popover.
      *
      * @default false
      */
@@ -30,8 +30,8 @@ export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefin
     cleanupListeners: undefined | (() => void);
 }, {
     /**
-     * Fired when this menu item is activated by the user (a non-disabled click). Pop-up
-     * containers (e.g. `ViraPopUpTrigger`) listen to this to close the pop-up on selection,
+     * Fired when this menu item is activated by the user (a non-disabled click). Popover
+     * containers (e.g. `ViraPopoverTrigger`) listen to this to close the popover on selection,
      * gated by `keepOpenAfterInteraction`.
      */
     activate: import("element-vir").DefineElementEvent<undefined>;

package/dist/elements/{pop-up → popover}/vira-menu-item.element.js

@@ -11,7 +11,7 @@ const selectedCheckIcon = createSizedIcon(lucideIcons.Check, 16);
 /**
  * An element for an individual menu item.
  *
- * @category PopUp
+ * @category Popover
  * @category Elements
  */
 export const ViraMenuItem = defineViraElement()({
@@ -24,8 +24,8 @@ export const ViraMenuItem = defineViraElement()({
     },
     events: {
         /**
-         * Fired when this menu item is activated by the user (a non-disabled click). Pop-up
-         * containers (e.g. `ViraPopUpTrigger`) listen to this to close the pop-up on selection,
+         * Fired when this menu item is activated by the user (a non-disabled click). Popover
+         * containers (e.g. `ViraPopoverTrigger`) listen to this to close the popover on selection,
          * gated by `keepOpenAfterInteraction`.
          */
         activate: defineElementEvent(),
@@ -207,6 +207,15 @@ export const ViraMenuItem = defineViraElement()({
             }, {
                 capture: true,
             }),
+            listenTo(host, 'keydown', (event) => {
+                if (event instanceof KeyboardEvent &&
+                    event.target === host &&
+                    (event.key === 'Enter' || event.key === ' ')) {
+                    /** Prevents Space from scrolling the menu. */
+                    event.preventDefault();
+                    host.click();
+                }
+            }),
             listenTo(host, 'mouseenter', () => {
                 if (!inputs.disabled) {
                     host.focus();

package/dist/elements/popover/vira-menu-trigger.element.d.ts

@@ -0,0 +1,56 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type NavController } from 'device-navigation';
+import { type PopoverTrigger } from '../../util/popover-manager.js';
+import { ViraMenuCornerStyle } from './vira-menu.element.js';
+import { type PopoverOffset } from './vira-popover-trigger.element.js';
+/**
+ * Test ids for {@link ViraMenuTrigger}.
+ *
+ * @category Internal
+ */
+export declare const viraMenuTriggerTestIds: {
+    menu: string;
+};
+/**
+ * A more specific wrapper of `ViraPopoverTrigger` that always opens a menu.
+ *
+ * @category Popover
+ * @category Elements
+ */
+export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, PartialWithUndefined<{
+    isDisabled: boolean;
+    /**
+     * Defaults to {@link PopoverTrigger.Mousedown}. `true` or `false` force the popover open or
+     * closed.
+     */
+    trigger: boolean | PopoverTrigger;
+    popoverOffset: PopoverOffset;
+    keepOpenAfterInteraction: boolean;
+    /** @default ViraMenuCornerStyle.Round */
+    menuCornerStyle: ViraMenuCornerStyle;
+    /**
+     * Passed to {@link ViraMenu}'s `hoverScrollSpeed` input. How many menu items per second
+     * hovering a scroll arrow scrolls through.
+     *
+     * @default 24
+     */
+    menuHoverScrollSpeed: number;
+    /**
+     * If true, the focus outline is moved inside the element.
+     *
+     * @default false
+     */
+    useInsideFocus: boolean;
+    /**
+     * When `true`, the trigger will focus itself when the popover closes.
+     *
+     * @default false
+     */
+    focusOnClose: boolean;
+}>, {
+    navController: undefined | NavController;
+    isOpen: boolean;
+}, {
+    /** `true` when the popover just opened, `false` when it just closed. */
+    openChange: import("element-vir").DefineElementEvent<boolean>;
+}, `vira-${string}-`, `vira-${string}-`, readonly ["vira-menu-trigger-trigger"], readonly []>;

package/dist/elements/{pop-up → popover}/vira-menu-trigger.element.js

@@ -1,7 +1,7 @@
 import { classMap, css, defineElementEvent, html, listen, nothing } from 'element-vir';
 import { defineViraElement } from '../../util/define-vira-element.js';
-import { ViraMenu, ViraMenuPopUpDirection } from './vira-menu.element.js';
-import { HorizontalAnchor, ViraPopUpTrigger, } from './vira-pop-up-trigger.element.js';
+import { ViraMenu, ViraMenuCornerStyle } from './vira-menu.element.js';
+import { ViraPopoverTrigger } from './vira-popover-trigger.element.js';
 /**
  * Test ids for {@link ViraMenuTrigger}.
  *
@@ -11,9 +11,9 @@ export const viraMenuTriggerTestIds = {
     menu: 'menu-trigger-menu',
 };
 /**
- * A more specific wrapper of `ViraPopUpTrigger` that always opens a menu.
+ * A more specific wrapper of `ViraPopoverTrigger` that always opens a menu.
  *
- * @category PopUp
+ * @category Popover
  * @category Elements
  */
 export const ViraMenuTrigger = defineViraElement()({
@@ -29,72 +29,61 @@ export const ViraMenuTrigger = defineViraElement()({
             max-width: 100%;
         }
 
-        ${ViraPopUpTrigger} {
-            width: 100%;
-        }
-
-        .full-width-menu {
+        ${ViraPopoverTrigger} {
             width: 100%;
         }
     `,
     events: {
+        /** `true` when the popover just opened, `false` when it just closed. */
         openChange: defineElementEvent(),
     },
     state() {
         return {
             navController: undefined,
-            popUpManager: undefined,
-            /** `undefined` means the pop up is not currently showing. */
-            showPopUpResult: undefined,
+            isOpen: false,
         };
     },
     render({ inputs, state, updateState, dispatch, events, slotNames }) {
         return html `
-            <${ViraPopUpTrigger.assign({
+            <${ViraPopoverTrigger.assign({
             ...inputs,
         })}
                 class=${classMap({
-            open: !!state.showPopUpResult,
+            open: state.isOpen,
         })}
-                ${listen(ViraPopUpTrigger.events.init, (event) => {
+                ${listen(ViraPopoverTrigger.events.init, (event) => {
             updateState({
                 navController: event.detail.navController,
-                popUpManager: event.detail.popUpManager,
             });
         })}
-                ${listen(ViraPopUpTrigger.events.openChange, (event) => {
-            if (!!state.showPopUpResult !== !!event.detail) {
+                ${listen(ViraPopoverTrigger.events.openChange, (event) => {
+            if (state.isOpen !== event.detail) {
                 dispatch(new events.openChange({
                     detail: event.detail,
                 }));
             }
             updateState({
-                showPopUpResult: event.detail,
+                isOpen: event.detail,
             });
         })}
             >
                 <slot
                     name=${slotNames['vira-menu-trigger-trigger']}
-                    slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-trigger']}
+                    slot=${ViraPopoverTrigger.slotNames['vira-popover-trigger-trigger']}
                 ></slot>
-                ${state.navController && state.showPopUpResult
+                ${state.navController && state.isOpen
             ? html `
                           <${ViraMenu.assign({
-                direction: state.showPopUpResult.popDown
-                    ? ViraMenuPopUpDirection.Downwards
-                    : ViraMenuPopUpDirection.Upwards,
-                cornerStyle: inputs.menuCornerStyle,
-            })}
-                              slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-pop-up']}
-                              class=${classMap({
-                'full-width-menu': inputs.horizontalAnchor === HorizontalAnchor.Both,
+                cornerStyle: inputs.menuCornerStyle || ViraMenuCornerStyle.Round,
+                hoverScrollSpeed: inputs.menuHoverScrollSpeed,
             })}
+                              slot=${ViraPopoverTrigger.slotNames['vira-popover-trigger-popover']}
                           >
                               <slot></slot>
                           </${ViraMenu}>
                       `
             : nothing}
-            </${ViraPopUpTrigger}>
+            </${ViraPopoverTrigger}>
         `;
     },
 });