vira 29.9.0 → 30.1.0

package/dist/elements/index.d.ts

@@ -1,12 +1,6 @@
-export * from './define-vira-element.js';
-export * from './form/vira-form-fields.js';
-export * from './form/vira-form.element.js';
-export * from './pop-up/pop-up-helpers.js';
-export * from './pop-up/pop-up-menu-item.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-menu.element.js';
 export * from './pop-up/vira-pop-up-trigger.element.js';
 export * from './vira-bold-text.element.js';
 export * from './vira-button.element.js';
@@ -16,6 +10,7 @@ export * from './vira-collapsible-card.element.js';
 export * from './vira-collapsible-wrapper.element.js';
 export * from './vira-dropdown.element.js';
 export * from './vira-error.element.js';
+export * from './vira-form.element.js';
 export * from './vira-icon.element.js';
 export * from './vira-image.element.js';
 export * from './vira-input.element.js';

package/dist/elements/index.js

@@ -1,12 +1,6 @@
-export * from './define-vira-element.js';
-export * from './form/vira-form-fields.js';
-export * from './form/vira-form.element.js';
-export * from './pop-up/pop-up-helpers.js';
-export * from './pop-up/pop-up-menu-item.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-menu.element.js';
 export * from './pop-up/vira-pop-up-trigger.element.js';
 export * from './vira-bold-text.element.js';
 export * from './vira-button.element.js';
@@ -16,6 +10,7 @@ export * from './vira-collapsible-card.element.js';
 export * from './vira-collapsible-wrapper.element.js';
 export * from './vira-dropdown.element.js';
 export * from './vira-error.element.js';
+export * from './vira-form.element.js';
 export * from './vira-icon.element.js';
 export * from './vira-image.element.js';
 export * from './vira-input.element.js';

package/dist/elements/pop-up/vira-menu-item.element.d.ts

@@ -1,19 +1,22 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
-import { type MenuItem } from './pop-up-menu-item.js';
+import { type ViraIconSvg } from '../../icons/icon-svg.js';
 /**
  * An element for an individual menu item.
  *
  * @category PopUp
  * @category Elements
  */
-export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefinition<"vira-menu-item", {
+export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefinition<"vira-menu-item", PartialWithUndefined<{
     selected: boolean;
-} & PartialWithUndefined<{
+    disabled: boolean;
     /**
-     * The text to show in the menu item. If this is not provided, it is expected that you will
-     * instead utilize this element's `<slot>`.
+     * Set this to `true` to disable the default `ViraMenuItem` hover and active styles so you
+     * can apply your own.
      */
-    label: MenuItem["label"];
-    /** If `true`, does not render the selected check icon. */
-    hideCheckIcon: boolean;
-}>, {}, {}, "vira-menu-item-selected", "vira-menu-item-", readonly [], readonly []>;
+    disablePointerStyles: boolean;
+    /**
+     * If provided, this will override the checkmark icon. If this is provided, the icon will
+     * _always_ be shown, even if `selected` is set to `false`.
+     */
+    iconOverride: ViraIconSvg;
+}>, {}, {}, "vira-menu-item-selected" | "vira-menu-item-disabled" | "vira-menu-item-enabled" | "vira-menu-item-default-icon" | "vira-menu-item-default-styles", "vira-menu-item-", readonly [], readonly []>;

package/dist/elements/pop-up/vira-menu-item.element.js

@@ -1,7 +1,8 @@
 import { css, html } from 'element-vir';
 import { Check24Icon } from '../../icons/icon-svgs/check-24.icon.js';
+import { viraFormCssVars } from '../../styles/form-styles.js';
 import { noUserSelect } from '../../styles/index.js';
-import { defineViraElement } from '../define-vira-element.js';
+import { defineViraElement } from '../../util/define-vira-element.js';
 import { ViraIcon } from '../vira-icon.element.js';
 /**
  * An element for an individual menu item.
@@ -12,7 +13,11 @@ import { ViraIcon } from '../vira-icon.element.js';
 export const ViraMenuItem = defineViraElement()({
     tagName: 'vira-menu-item',
     hostClasses: {
-        'vira-menu-item-selected': ({ inputs }) => !inputs.hideCheckIcon && inputs.selected,
+        'vira-menu-item-selected': ({ inputs }) => !!inputs.selected || !!inputs.iconOverride,
+        'vira-menu-item-disabled': ({ inputs }) => !!inputs.disabled,
+        'vira-menu-item-enabled': ({ inputs }) => !inputs.disabled,
+        'vira-menu-item-default-icon': ({ inputs }) => !inputs.iconOverride,
+        'vira-menu-item-default-styles': ({ inputs }) => !inputs.disablePointerStyles,
     },
     styles: ({ hostClasses }) => css `
         :host {
@@ -20,44 +25,78 @@ export const ViraMenuItem = defineViraElement()({
             ${noUserSelect};
             box-sizing: border-box;
             max-width: 100%;
+            gap: 1px;
             overflow: hidden;
-        }
-
-        .item {
-            pointer-events: none;
-            min-height: 24px;
-            display: flex;
-            max-width: 100%;
+            padding: 8px 3px;
+            padding-right: 16px;
             align-items: center;
-            padding: 8px;
-            padding-right: 24px;
-            padding-left: 0;
             text-align: left;
-            box-sizing: border-box;
+        }
+
+        ${hostClasses['vira-menu-item-disabled'].selector}${hostClasses['vira-menu-item-default-styles'].selector} {
+            cursor: not-allowed;
+
+            & .slot-wrapper,
+            & ${ViraIcon} {
+                opacity: 0.3;
+                pointer-events: none;
+            }
+        }
+
+        ${hostClasses['vira-menu-item-enabled'].selector}${hostClasses['vira-menu-item-default-styles'].selector} {
+            cursor: pointer;
+
+            &:host(:focus) {
+                background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
+                outline: none;
+            }
+
+            &:host(:active) {
+                background-color: ${viraFormCssVars['vira-form-selection-active-color'].value};
+                outline: none;
+            }
+        }
+
+        ${hostClasses['vira-menu-item-default-icon'].selector} {
+            ${ViraIcon} {
+                visibility: hidden;
+            }
         }
 
         ${hostClasses['vira-menu-item-selected'].selector} ${ViraIcon} {
-            opacity: 1;
             visibility: visible;
         }
 
-        /*
-            The check icon looks centered when it has a border.
-            However, it does not have a border here.
-        */
-        ${ViraIcon} {
-            opacity: 0;
-            margin-top: -4px;
-            margin-right: -2px;
-            margin-left: 2px;
-            visibility: hidden;
+        .slot-wrapper {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            min-width: 0;
         }
     `,
+    init({ host, inputs }) {
+        host.setAttribute('role', 'menuitem');
+        host.setAttribute('tabindex', inputs.disabled ? '-1' : '0');
+        host.setAttribute('aria-selected', String(!!inputs.selected));
+        host.setAttribute('aria-disabled', String(!!inputs.disabled));
+        host.onmouseenter = () => {
+            if (!inputs.disabled) {
+                host.focus();
+            }
+        };
+        host.onmouseleave = () => {
+            if (!inputs.disabled) {
+                host.blur();
+            }
+        };
+    },
     render({ inputs }) {
         return html `
-            <div class="item">
-                <${ViraIcon.assign({ icon: Check24Icon })}></${ViraIcon}>
-                <slot>${inputs.label}</slot>
+            <${ViraIcon.assign({
+            icon: inputs.iconOverride || Check24Icon,
+        })}></${ViraIcon}>
+            <div class="slot-wrapper">
+                <slot>&nbsp;</slot>
             </div>
         `;
     },

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

@@ -1,8 +1,7 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type NavController } from 'device-navigation';
 import { type PopUpManager, type ShowPopUpResult } from '../../util/pop-up-manager.js';
-import { type MenuItem } from './pop-up-menu-item.js';
-import { type PopUpMenuCornerStyle } from './vira-pop-up-menu.element.js';
+import { type ViraMenuCornerStyle } from './vira-menu.element.js';
 import { type PopUpOffset, type PopUpTriggerPosition } from './vira-pop-up-trigger.element.js';
 /**
  * Test ids for {@link ViraMenuTrigger}.
@@ -18,24 +17,17 @@ export declare const viraMenuTriggerTestIds: {
  * @category PopUp
  * @category Elements
  */
-export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDefinition<"vira-menu-trigger", {
-    items: ReadonlyArray<Readonly<MenuItem>>;
-} & PartialWithUndefined<{
-    /** The selected item ids from the given `items` object. */
-    selected: ReadonlyArray<PropertyKey>;
+export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDefinition<"vira-menu-trigger", PartialWithUndefined<{
     isDisabled: boolean;
-    isMultiSelect: boolean;
     z_debug_forceOpenState: boolean;
     popUpOffset: PopUpOffset;
-    /** Hide menu item check mark icons. */
-    hideCheckIcons: boolean;
-    menuCornerStyle: PopUpMenuCornerStyle;
+    keepOpenAfterInteraction: boolean;
+    menuCornerStyle: ViraMenuCornerStyle;
 } & PopUpTriggerPosition>, {
     navController: undefined | NavController;
     popUpManager: undefined | PopUpManager;
     /** `undefined` means the pop up is not currently showing. */
     showPopUpResult: ShowPopUpResult | undefined;
 }, {
-    itemActivate: import("element-vir").DefineEvent<PropertyKey[]>;
     openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
-}, "vira-menu-trigger-", "vira-menu-trigger-", readonly [], readonly []>;
+}, "vira-menu-trigger-", "vira-menu-trigger-", readonly ["trigger"], readonly []>;

package/dist/elements/pop-up/vira-menu-trigger.element.js

@@ -1,8 +1,6 @@
-import { classMap, css, defineElementEvent, html, listen, nothing, testId } from 'element-vir';
-import { defineViraElement } from '../define-vira-element.js';
-import { updateSelectedItems } from './pop-up-helpers.js';
-import { ViraMenu } from './vira-menu.element.js';
-import { PopUpMenuDirection, ViraPopUpMenu, } from './vira-pop-up-menu.element.js';
+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';
 /**
  * Test ids for {@link ViraMenuTrigger}.
@@ -20,6 +18,9 @@ export const viraMenuTriggerTestIds = {
  */
 export const ViraMenuTrigger = defineViraElement()({
     tagName: 'vira-menu-trigger',
+    slotNames: [
+        'trigger',
+    ],
     styles: css `
         :host {
             display: inline-flex;
@@ -37,7 +38,6 @@ export const ViraMenuTrigger = defineViraElement()({
         }
     `,
     events: {
-        itemActivate: defineElementEvent(),
         openChange: defineElementEvent(),
     },
     state() {
@@ -48,13 +48,10 @@ export const ViraMenuTrigger = defineViraElement()({
             showPopUpResult: undefined,
         };
     },
-    render({ inputs, state, updateState, dispatch, events }) {
+    render({ inputs, state, updateState, dispatch, events, slotNames }) {
         return html `
             <${ViraPopUpTrigger.assign({
             ...inputs,
-            keepOpenAfterInteraction: true,
-            popUpOffset: inputs.popUpOffset,
-            horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Left,
         })}
                 class=${classMap({
             open: !!state.showPopUpResult,
@@ -72,30 +69,15 @@ export const ViraMenuTrigger = defineViraElement()({
             updateState({
                 showPopUpResult: event.detail,
             });
-        })}
-                ${listen(ViraPopUpTrigger.events.navSelect, (event) => {
-            const itemIndex = event.detail.x;
-            const item = inputs.items[itemIndex];
-            if (!item) {
-                throw new Error(`Found no dropdown option at index '${itemIndex}'`);
-            }
-            dispatch(new events.itemActivate(updateSelectedItems(item, inputs.selected, inputs.isMultiSelect)));
-            if (!inputs.isMultiSelect) {
-                /**
-                 * Defer pop up removal to prevent race conditions with element-internal
-                 * click handlers.
-                 */
-                globalThis.setTimeout(() => state.popUpManager?.removePopUp());
-            }
         })}
             >
-                <slot slot=${ViraPopUpTrigger.slotNames.trigger}></slot>
+                <slot name=${slotNames.trigger} slot=${ViraPopUpTrigger.slotNames.trigger}></slot>
                 ${state.navController && state.showPopUpResult
             ? html `
-                          <${ViraPopUpMenu.assign({
+                          <${ViraMenu.assign({
                 direction: state.showPopUpResult.popDown
-                    ? PopUpMenuDirection.Downwards
-                    : PopUpMenuDirection.Upwards,
+                    ? ViraMenuPopUpDirection.Downwards
+                    : ViraMenuPopUpDirection.Upwards,
                 cornerStyle: inputs.menuCornerStyle,
             })}
                               slot=${ViraPopUpTrigger.slotNames.popUp}
@@ -103,16 +85,8 @@ export const ViraMenuTrigger = defineViraElement()({
                 'full-width-menu': inputs.horizontalAnchor === HorizontalAnchor.Both,
             })}
                           >
-                              <${ViraMenu.assign({
-                items: inputs.items,
-                selected: inputs.selected,
-                navController: state.navController,
-                isMultiSelect: !!inputs.isMultiSelect,
-                hideCheckIcons: inputs.hideCheckIcons,
-            })}
-                                  ${testId(viraMenuTriggerTestIds.menu)}
-                              ></${ViraMenu}>
-                          </${ViraPopUpMenu}>
+                              <slot></slot>
+                          </${ViraMenu}>
                       `
             : nothing}
             </${ViraPopUpTrigger}>

package/dist/elements/pop-up/vira-menu.element.d.ts

@@ -1,38 +1,36 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
-import { NavController } from 'device-navigation';
-import { type MenuItem } from './pop-up-menu-item.js';
 /**
- * Test ids for {@link ViraMenu}.
+ * Possible corner styles for {@link ViraMenu}.
  *
  * @category Internal
  */
-export declare const viraMenuTestIds: {
-    item: string;
-};
+export declare enum ViraMenuCornerStyle {
+    /** Rounding of corners depends on the open direction of the menu. */
+    Directional = "directional",
+    /** All of the menus corners should be rounded. */
+    AllRounded = "all-rounded",
+    /** None of the menus corners should be rounded. */
+    AllSquare = "all-square"
+}
 /**
- * A wrapper for menu items. This can be used for dropdown items or menu bar dropdowns. To detect
- * when items are selected or unselected, pass in a `NavController` instance and hook into its
- * events.
+ * Menu pop-up directions available for {@link ViraMenu}.
+ *
+ * @category Internal
+ */
+export declare enum ViraMenuPopUpDirection {
+    Downwards = "downwards",
+    Upwards = "upwards"
+}
+/**
+ * A simple default style wrapper for pop-up menus. Consider using `renderMenuItemEntries` to help
+ * rendering many menu items.
  *
  * @category PopUp
  * @category Elements
  */
-export declare const ViraMenu: import("element-vir").DeclarativeElementDefinition<"vira-menu", {
-    /**
-     * The parent nav controller for this menu. If none is provided, an internal nav controller
-     * is created (which means it can't be hooked into by external elements).
-     *
-     * It is recommended to not leave this `undefined`.
-     */
-    navController: NavController | undefined;
-    /** All menu items to show to the user. */
-    items: ReadonlyArray<Readonly<MenuItem>>;
-} & PartialWithUndefined<{
-    /** The ids of the currently selected menu items. */
-    selected: ReadonlyArray<PropertyKey>;
-    isMultiSelect: boolean;
-    /** Hide menu item check mark icons. */
-    hideCheckIcons: boolean;
-}>, {
-    internalNavController: NavController;
-}, {}, "vira-menu-multiselect", "vira-menu-", readonly [], readonly []>;
+export declare const ViraMenu: import("element-vir").DeclarativeElementDefinition<"vira-menu", PartialWithUndefined<{
+    /** @default PopUpMenuDirection.Downwards */
+    direction: ViraMenuPopUpDirection;
+    /** @default PopUpMenuCornerStyle.Directional */
+    cornerStyle: ViraMenuCornerStyle;
+}>, {}, {}, "vira-menu-open-upwards" | "vira-menu-rounded" | "vira-menu-square", "vira-menu-", readonly [], readonly []>;

package/dist/elements/pop-up/vira-menu.element.js

@@ -1,175 +1,82 @@
-import { check } from '@augment-vir/assert';
-import { nav, navAttribute, NavController, NavValue } from 'device-navigation';
-import { classMap, css, html, ifDefined, testId } from 'element-vir';
+import { css, html } from 'element-vir';
 import { viraFormCssVars } from '../../styles/form-styles.js';
-import { noNativeFormStyles, viraDisabledStyles } from '../../styles/index.js';
-import { defineViraElement } from '../define-vira-element.js';
-import { ViraLink } from '../vira-link.element.js';
-import { assertUniqueIdProps } from './pop-up-helpers.js';
-import { ViraMenuItem } from './vira-menu-item.element.js';
+import { viraShadows } from '../../styles/shadows.js';
+import { defineViraElement } from '../../util/define-vira-element.js';
 /**
- * Test ids for {@link ViraMenu}.
+ * Possible corner styles for {@link ViraMenu}.
  *
  * @category Internal
  */
-export const viraMenuTestIds = {
-    item: 'menu-item',
-};
+export var ViraMenuCornerStyle;
+(function (ViraMenuCornerStyle) {
+    /** Rounding of corners depends on the open direction of the menu. */
+    ViraMenuCornerStyle["Directional"] = "directional";
+    /** All of the menus corners should be rounded. */
+    ViraMenuCornerStyle["AllRounded"] = "all-rounded";
+    /** None of the menus corners should be rounded. */
+    ViraMenuCornerStyle["AllSquare"] = "all-square";
+})(ViraMenuCornerStyle || (ViraMenuCornerStyle = {}));
 /**
- * A wrapper for menu items. This can be used for dropdown items or menu bar dropdowns. To detect
- * when items are selected or unselected, pass in a `NavController` instance and hook into its
- * events.
+ * Menu pop-up directions available for {@link ViraMenu}.
+ *
+ * @category Internal
+ */
+export var ViraMenuPopUpDirection;
+(function (ViraMenuPopUpDirection) {
+    ViraMenuPopUpDirection["Downwards"] = "downwards";
+    ViraMenuPopUpDirection["Upwards"] = "upwards";
+})(ViraMenuPopUpDirection || (ViraMenuPopUpDirection = {}));
+/**
+ * A simple default style wrapper for pop-up menus. Consider using `renderMenuItemEntries` to help
+ * rendering many menu items.
  *
  * @category PopUp
  * @category Elements
  */
 export const ViraMenu = defineViraElement()({
     tagName: 'vira-menu',
-    state({ inputs, host }) {
-        return {
-            internalNavController: inputs.navController || new NavController(host),
-        };
-    },
     hostClasses: {
-        'vira-menu-multiselect': ({ inputs }) => !!inputs.isMultiSelect,
+        'vira-menu-open-upwards': ({ inputs }) => inputs.direction === ViraMenuPopUpDirection.Upwards,
+        'vira-menu-rounded': ({ inputs }) => inputs.cornerStyle === ViraMenuCornerStyle.AllRounded,
+        'vira-menu-square': ({ inputs }) => inputs.cornerStyle === ViraMenuCornerStyle.AllSquare,
     },
     styles: ({ hostClasses }) => css `
         :host {
             display: flex;
             flex-direction: column;
-
-            width: 100%;
             max-width: 100%;
             max-height: 100%;
             overflow-y: auto;
-            overscroll-behavior: contain;
-            z-index: 100;
+            z-index: 99;
             box-sizing: border-box;
+            overscroll-behavior: contain;
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
             background-color: ${viraFormCssVars['vira-form-background-color'].value};
+            border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
             color: ${viraFormCssVars['vira-form-foreground-color'].value};
+            ${viraShadows.menuShadow}
         }
 
-        .menu-item {
-            ${noNativeFormStyles};
-            will-change: background-color;
-            background-color: inherit;
-            outline: none;
-
-            &.default-pointer-styles {
-                cursor: pointer;
-            }
-            &.no-default-pointer-styles {
-                cursor: auto !important;
-            }
+        ${hostClasses['vira-menu-open-upwards'].selector} {
+            ${viraShadows.menuShadowReversed}
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
         }
 
-        ${navAttribute.css({
-        baseSelector: '.menu-item.default-pointer-styles:not(.disabled):not(.selected)',
-        navValue: NavValue.Focused,
-    })}, .menu-item.default-pointer-styles:not(.disabled):not(.selected):hover {
-            background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
-            outline: none;
-        }
-        ${navAttribute.css({
-        baseSelector: '.menu-item.default-pointer-styles:not(.disabled):not(.selected)',
-        navValue: NavValue.Active,
-    })}, .menu-item.default-pointer-styles:not(.disabled):not(.selected):active {
-            background-color: ${viraFormCssVars['vira-form-selection-active-color'].value};
-            outline: none;
-        }
-
-        ${hostClasses['vira-menu-multiselect'].selector} {
-            &
-                ${navAttribute.css({
-        baseSelector: '.menu-item:not(.disabled)',
-        navValue: NavValue.Focused,
-    })},
-                .menu-item:not(.disabled):hover {
-                background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
-                outline: none;
-            }
-
-            &
-                ${navAttribute.css({
-        baseSelector: '.menu-item:not(.disabled)',
-        navValue: NavValue.Active,
-    })},
-                .menu-item:not(.disabled):active {
-                background-color: ${viraFormCssVars['vira-form-selection-active-color'].value};
-                outline: none;
-            }
+        ${hostClasses['vira-menu-square'].selector} {
+            border-radius: 0;
         }
 
-        ${ViraMenuItem} {
-            pointer-events: none;
-        }
-
-        .menu-item.disabled {
-            ${viraDisabledStyles};
-            pointer-events: auto;
+        ${hostClasses['vira-menu-rounded'].selector} {
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
         }
     `,
-    cleanup({ inputs, state }) {
-        if (!inputs.navController) {
-            state.internalNavController.destroy();
-        }
-    },
-    render({ inputs, state }) {
-        assertUniqueIdProps(inputs.items);
-        const itemTemplates = inputs.items.map((item) => {
-            const selected = !!inputs.selected?.includes(item.id);
-            const innerTemplate = check.isString(item.label)
-                ? html `
-                      <${ViraMenuItem.assign({
-                    label: item.label,
-                    selected,
-                    hideCheckIcon: inputs.hideCheckIcons,
-                })}></${ViraMenuItem}>
-                  `
-                : item.label;
-            const disabled = item.disabled || (!inputs.isMultiSelect && selected);
-            if (item.route) {
-                return html `
-                    <${ViraLink.assign({
-                    route: item.route,
-                    disableLinkStyles: true,
-                })}
-                        class="menu-item ${classMap({
-                    disabled: !!item.disabled,
-                    selected,
-                    'default-pointer-styles': !item.disableDefaultPointerStyles,
-                    'no-default-pointer-styles': !!item.disableDefaultPointerStyles,
-                })}"
-                        ${testId(viraMenuTestIds.item)}
-                        title=${ifDefined(item.titleText || undefined)}
-                        role="option"
-                        ${nav(state.internalNavController, { disabled })}
-                    >
-                        ${innerTemplate}
-                    </${ViraLink}>
-                `;
-            }
-            else {
-                return html `
-                    <button
-                        class="menu-item ${classMap({
-                    disabled: !!item.disabled,
-                    selected,
-                    'default-pointer-styles': !item.disableDefaultPointerStyles,
-                    'no-default-pointer-styles': !!item.disableDefaultPointerStyles,
-                })}"
-                        ${testId(viraMenuTestIds.item)}
-                        title=${ifDefined(item.titleText || undefined)}
-                        role="option"
-                        ${nav(state.internalNavController, { disabled })}
-                    >
-                        ${innerTemplate}
-                    </button>
-                `;
-            }
-        });
+    render() {
         return html `
-            ${itemTemplates}
+            <slot>&nbsp;</slot>
         `;
     },
 });