vira 27.0.0 → 28.0.0

package/dist/elements/index.d.ts

@@ -1,11 +1,11 @@
 export * from './define-vira-element.js';
-export * from './popover/popover-helpers.js';
-export * from './popover/popover-menu-item.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-menu.element.js';
-export * from './popover/vira-popover-trigger.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';
 export * from './vira-checkbox.element.js';

package/dist/elements/index.js

@@ -1,11 +1,11 @@
 export * from './define-vira-element.js';
-export * from './popover/popover-helpers.js';
-export * from './popover/popover-menu-item.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-menu.element.js';
-export * from './popover/vira-popover-trigger.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';
 export * from './vira-checkbox.element.js';

package/dist/elements/{popover/popover-helpers.d.ts → pop-up/pop-up-helpers.d.ts}

@@ -1,5 +1,5 @@
-import { type PopoverManager, type ShowPopoverResult } from '../../util/popover-manager.js';
-import { type MenuItem } from './popover-menu-item.js';
+import { type PopUpManager, type ShowPopUpResult } from '../../util/pop-up-manager.js';
+import { type MenuItem } from './pop-up-menu-item.js';
 /**
  * Verifies that all items have unique ids.
  *
@@ -18,13 +18,13 @@ export declare function updateSelectedItems(
 /** The item that should be newly toggled. */
 newItem: Readonly<MenuItem>, currentSelection?: ReadonlyArray<PropertyKey>, isMultiSelect?: boolean): PropertyKey[];
 /**
- * Handles toggling popover state for `ViraDropdown`.
+ * Handles toggling pop up state for `ViraDropdown`.
  *
  * @category Internal
  */
-export declare function triggerPopoverState({ open, callback, popoverManager, host, }: {
+export declare function triggerPopUpState({ open, callback, popUpManager, host, }: {
     open: boolean;
-    popoverManager: PopoverManager;
+    popUpManager: PopUpManager;
     host: HTMLElement;
-    callback?: ((showPopoverResult: ShowPopoverResult | undefined) => void) | undefined;
+    callback?: ((showPopUpResult: ShowPopUpResult | undefined) => void) | undefined;
 }): void;

package/dist/elements/{popover/popover-helpers.js → pop-up/pop-up-helpers.js}

@@ -42,17 +42,17 @@ newItem, currentSelection = [], isMultiSelect = false) {
     }
 }
 /**
- * Handles toggling popover state for `ViraDropdown`.
+ * Handles toggling pop up state for `ViraDropdown`.
  *
  * @category Internal
  */
-export function triggerPopoverState({ open, callback, popoverManager, host, }) {
+export function triggerPopUpState({ open, callback, popUpManager, host, }) {
     if (open) {
-        const showPopoverResult = popoverManager.showPopover(host);
-        callback?.(showPopoverResult);
+        const showPopUpResult = popUpManager.showPopUp(host);
+        callback?.(showPopUpResult);
     }
     else {
-        popoverManager.removePopover();
+        popUpManager.removePopUp();
         callback?.(undefined);
     }
 }

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

@@ -1,9 +1,9 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
-import { type MenuItem } from './popover-menu-item.js';
+import { type MenuItem } from './pop-up-menu-item.js';
 /**
  * An element for an individual menu item.
  *
- * @category Popover
+ * @category PopUp
  * @category Elements
  */
 export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefinition<"vira-menu-item", Readonly<{

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

@@ -6,7 +6,7 @@ import { ViraIcon } from '../vira-icon.element.js';
 /**
  * An element for an individual menu item.
  *
- * @category Popover
+ * @category PopUp
  * @category Elements
  */
 export const ViraMenuItem = defineViraElement()({

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

@@ -0,0 +1,55 @@
+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 { HorizontalAnchor, type PopUpOffset } from './vira-pop-up-trigger.element.js';
+/**
+ * Test ids for {@link ViraMenuTrigger}.
+ *
+ * @category Internal
+ */
+export declare const viraMenuTriggerTestIds: {
+    menu: string;
+};
+/**
+ * A more specific wrapper of `ViraPopUpTrigger` that always opens a menu.
+ *
+ * @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>;
+    isDisabled: boolean;
+    isMultiSelect: boolean;
+    z_debug_forceOpenState: boolean;
+    popUpOffset: PopUpOffset;
+    /** Hide menu item check mark icons. */
+    hideCheckIcons: boolean;
+    menuCornerStyle: PopUpMenuCornerStyle;
+    /**
+     * - `HorizontalAnchor.Left`: pop-up is anchored to the left side of the trigger and the
+     *   pop-up can grow to the right.
+     * - `HorizontalAnchor.Right`: pop-up is anchored to the right side of the trigger and the
+     *   pop-up can grow to the left.
+     * - `HorizontalAnchor.Both`: pop-up is anchored on both sides of the trigger and cannot grow
+     *   beyond it.
+     *
+     * Note that when `HorizontalAnchor.Both` is _not_ used, this anchor will cancel out any
+     * `popUpOffset` for the direction _opposite_ of the chosen anchor.
+     *
+     * @default HorizontalAnchor.Left
+     */
+    horizontalAnchor: HorizontalAnchor;
+}>, {
+    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 []>;

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

@@ -1,9 +1,9 @@
 import { classMap, css, defineElementEvent, html, listen, nothing, testId } from 'element-vir';
 import { defineViraElement } from '../define-vira-element.js';
-import { updateSelectedItems } from './popover-helpers.js';
+import { updateSelectedItems } from './pop-up-helpers.js';
 import { ViraMenu } from './vira-menu.element.js';
-import { PopoverMenuDirection, ViraPopoverMenu, } from './vira-popover-menu.element.js';
-import { ViraPopoverTrigger } from './vira-popover-trigger.element.js';
+import { PopUpMenuDirection, ViraPopUpMenu, } from './vira-pop-up-menu.element.js';
+import { HorizontalAnchor, ViraPopUpTrigger, } from './vira-pop-up-trigger.element.js';
 /**
  * Test ids for {@link ViraMenuTrigger}.
  *
@@ -13,9 +13,9 @@ export const viraMenuTriggerTestIds = {
     menu: 'menu-trigger-menu',
 };
 /**
- * A more specific wrapper of `ViraPopoverTrigger` that always opens a menu.
+ * A more specific wrapper of `ViraPopUpTrigger` that always opens a menu.
  *
- * @category Popover
+ * @category PopUp
  * @category Elements
  */
 export const ViraMenuTrigger = defineViraElement()({
@@ -28,7 +28,7 @@ export const ViraMenuTrigger = defineViraElement()({
             max-width: 100%;
         }
 
-        ${ViraPopoverTrigger} {
+        ${ViraPopUpTrigger} {
             width: 100%;
         }
 
@@ -43,37 +43,38 @@ export const ViraMenuTrigger = defineViraElement()({
     state() {
         return {
             navController: undefined,
-            popoverManager: undefined,
-            /** `undefined` means the popover is not currently showing. */
-            showPopoverResult: undefined,
+            popUpManager: undefined,
+            /** `undefined` means the pop up is not currently showing. */
+            showPopUpResult: undefined,
         };
     },
     render({ inputs, state, updateState, dispatch, events }) {
         return html `
-            <${ViraPopoverTrigger.assign({
+            <${ViraPopUpTrigger.assign({
             isDisabled: inputs.isDisabled,
             keepOpenAfterInteraction: true,
             z_debug_forceOpenState: inputs.z_debug_forceOpenState,
-            popoverOffset: inputs.popoverOffset,
+            popUpOffset: inputs.popUpOffset,
+            horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Left,
         })}
                 class=${classMap({
-            open: !!state.showPopoverResult,
+            open: !!state.showPopUpResult,
         })}
-                ${listen(ViraPopoverTrigger.events.init, (event) => {
+                ${listen(ViraPopUpTrigger.events.init, (event) => {
             updateState({
                 navController: event.detail.navController,
-                popoverManager: event.detail.popoverManager,
+                popUpManager: event.detail.popUpManager,
             });
         })}
-                ${listen(ViraPopoverTrigger.events.openChange, (event) => {
-            if (!!state.showPopoverResult !== !!event.detail) {
+                ${listen(ViraPopUpTrigger.events.openChange, (event) => {
+            if (!!state.showPopUpResult !== !!event.detail) {
                 dispatch(new events.openChange(event.detail));
             }
             updateState({
-                showPopoverResult: event.detail,
+                showPopUpResult: event.detail,
             });
         })}
-                ${listen(ViraPopoverTrigger.events.navSelect, (event) => {
+                ${listen(ViraPopUpTrigger.events.navSelect, (event) => {
             const itemIndex = event.detail.x;
             const item = inputs.items[itemIndex];
             if (!item) {
@@ -82,23 +83,26 @@ export const ViraMenuTrigger = defineViraElement()({
             dispatch(new events.itemActivate(updateSelectedItems(item, inputs.selected, inputs.isMultiSelect)));
             if (!inputs.isMultiSelect) {
                 /**
-                 * Defer popover removal to prevent race conditions with element-internal
+                 * Defer pop up removal to prevent race conditions with element-internal
                  * click handlers.
                  */
-                globalThis.setTimeout(() => state.popoverManager?.removePopover());
+                globalThis.setTimeout(() => state.popUpManager?.removePopUp());
             }
         })}
             >
-                <slot slot=${ViraPopoverTrigger.slotNames.trigger}></slot>
-                ${state.navController && state.showPopoverResult
+                <slot slot=${ViraPopUpTrigger.slotNames.trigger}></slot>
+                ${state.navController && state.showPopUpResult
             ? html `
-                          <${ViraPopoverMenu.assign({
-                direction: state.showPopoverResult.popDown
-                    ? PopoverMenuDirection.Downwards
-                    : PopoverMenuDirection.Upwards,
+                          <${ViraPopUpMenu.assign({
+                direction: state.showPopUpResult.popDown
+                    ? PopUpMenuDirection.Downwards
+                    : PopUpMenuDirection.Upwards,
                 cornerStyle: inputs.menuCornerStyle,
             })}
-                              slot=${ViraPopoverTrigger.slotNames.popover}
+                              slot=${ViraPopUpTrigger.slotNames.popUp}
+                              class=${classMap({
+                'full-width-menu': inputs.horizontalAnchor === HorizontalAnchor.Both,
+            })}
                           >
                               <${ViraMenu.assign({
                 items: inputs.items,
@@ -109,10 +113,10 @@ export const ViraMenuTrigger = defineViraElement()({
             })}
                                   ${testId(viraMenuTriggerTestIds.menu)}
                               ></${ViraMenu}>
-                          </${ViraPopoverMenu}>
+                          </${ViraPopUpMenu}>
                       `
             : nothing}
-            </${ViraPopoverTrigger}>
+            </${ViraPopUpTrigger}>
         `;
     },
 });

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

@@ -1,6 +1,6 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { NavController } from 'device-navigation';
-import { type MenuItem } from './popover-menu-item.js';
+import { type MenuItem } from './pop-up-menu-item.js';
 /**
  * Test ids for {@link ViraMenu}.
  *
@@ -14,7 +14,7 @@ export declare const viraMenuTestIds: {
  * when items are selected or unselected, pass in a `NavController` instance and hook into its
  * events.
  *
- * @category Popover
+ * @category PopUp
  * @category Elements
  */
 export declare const ViraMenu: import("element-vir").DeclarativeElementDefinition<"vira-menu", Readonly<{

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

@@ -5,7 +5,7 @@ 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 './popover-helpers.js';
+import { assertUniqueIdProps } from './pop-up-helpers.js';
 import { ViraMenuItem } from './vira-menu-item.element.js';
 /**
  * Test ids for {@link ViraMenu}.
@@ -20,7 +20,7 @@ export const viraMenuTestIds = {
  * when items are selected or unselected, pass in a `NavController` instance and hook into its
  * events.
  *
- * @category Popover
+ * @category PopUp
  * @category Elements
  */
 export const ViraMenu = defineViraElement()({

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

@@ -0,0 +1,35 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+/**
+ * Possible corner styles for {@link ViraPopUpMenu}.
+ *
+ * @category Internal
+ */
+export declare enum PopUpMenuCornerStyle {
+    /** 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"
+}
+/**
+ * Menu pop-up directions available for {@link ViraPopUpMenu}.
+ *
+ * @category Internal
+ */
+export declare enum PopUpMenuDirection {
+    Downwards = "downwards",
+    Upwards = "upwards"
+}
+/**
+ * A simple default style wrapper for pop-up menus.
+ *
+ * @category PopUp
+ * @category Elements
+ */
+export declare const ViraPopUpMenu: import("element-vir").DeclarativeElementDefinition<"vira-pop-up-menu", PartialWithUndefined<{
+    /** @default PopUpMenuDirection.Downwards */
+    direction: PopUpMenuDirection;
+    /** @default PopUpMenuCornerStyle.Directional */
+    cornerStyle: PopUpMenuCornerStyle;
+}>, {}, {}, "vira-pop-up-menu-open-upwards" | "vira-pop-up-menu-rounded" | "vira-pop-up-menu-square", "vira-pop-up-menu-", readonly [], readonly []>;

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

@@ -4,41 +4,41 @@ import { viraFormCssVars } from '../../styles/form-styles.js';
 import { viraShadows } from '../../styles/shadows.js';
 import { defineViraElement } from '../define-vira-element.js';
 /**
- * Possible corner styles for {@link ViraPopoverMenu}.
+ * Possible corner styles for {@link ViraPopUpMenu}.
  *
  * @category Internal
  */
-export var PopoverMenuCornerStyle;
-(function (PopoverMenuCornerStyle) {
+export var PopUpMenuCornerStyle;
+(function (PopUpMenuCornerStyle) {
     /** Rounding of corners depends on the open direction of the menu. */
-    PopoverMenuCornerStyle["Directional"] = "directional";
+    PopUpMenuCornerStyle["Directional"] = "directional";
     /** All of the menus corners should be rounded. */
-    PopoverMenuCornerStyle["AllRounded"] = "all-rounded";
+    PopUpMenuCornerStyle["AllRounded"] = "all-rounded";
     /** None of the menus corners should be rounded. */
-    PopoverMenuCornerStyle["AllSquare"] = "all-square";
-})(PopoverMenuCornerStyle || (PopoverMenuCornerStyle = {}));
+    PopUpMenuCornerStyle["AllSquare"] = "all-square";
+})(PopUpMenuCornerStyle || (PopUpMenuCornerStyle = {}));
 /**
- * Menu popover directions available for {@link ViraPopoverMenu}.
+ * Menu pop-up directions available for {@link ViraPopUpMenu}.
  *
  * @category Internal
  */
-export var PopoverMenuDirection;
-(function (PopoverMenuDirection) {
-    PopoverMenuDirection["Downwards"] = "downwards";
-    PopoverMenuDirection["Upwards"] = "upwards";
-})(PopoverMenuDirection || (PopoverMenuDirection = {}));
+export var PopUpMenuDirection;
+(function (PopUpMenuDirection) {
+    PopUpMenuDirection["Downwards"] = "downwards";
+    PopUpMenuDirection["Upwards"] = "upwards";
+})(PopUpMenuDirection || (PopUpMenuDirection = {}));
 /**
- * A simple default style wrapper for popover menus.
+ * A simple default style wrapper for pop-up menus.
  *
- * @category Popover
+ * @category PopUp
  * @category Elements
  */
-export const ViraPopoverMenu = defineViraElement()({
-    tagName: 'vira-popover-menu',
+export const ViraPopUpMenu = defineViraElement()({
+    tagName: 'vira-pop-up-menu',
     hostClasses: {
-        'vira-popover-menu-open-upwards': ({ inputs }) => inputs.direction === PopoverMenuDirection.Upwards,
-        'vira-popover-menu-rounded': ({ inputs }) => inputs.cornerStyle === PopoverMenuCornerStyle.AllRounded,
-        'vira-popover-menu-square': ({ inputs }) => inputs.cornerStyle === PopoverMenuCornerStyle.AllSquare,
+        'vira-pop-up-menu-open-upwards': ({ inputs }) => inputs.direction === PopUpMenuDirection.Upwards,
+        'vira-pop-up-menu-rounded': ({ inputs }) => inputs.cornerStyle === PopUpMenuCornerStyle.AllRounded,
+        'vira-pop-up-menu-square': ({ inputs }) => inputs.cornerStyle === PopUpMenuCornerStyle.AllSquare,
     },
     styles: ({ hostClasses }) => css `
         :host {
@@ -57,18 +57,18 @@ export const ViraPopoverMenu = defineViraElement()({
             ${viraShadows.menuShadow}
         }
 
-        ${hostClasses['vira-popover-menu-open-upwards'].selector} {
+        ${hostClasses['vira-pop-up-menu-open-upwards'].selector} {
             ${viraShadows.menuShadowReversed}
             border-radius: ${viraBorders['vira-form-input-radius'].value};
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
         }
 
-        ${hostClasses['vira-popover-menu-square'].selector} {
+        ${hostClasses['vira-pop-up-menu-square'].selector} {
             border-radius: 0;
         }
 
-        ${hostClasses['vira-popover-menu-rounded'].selector} {
+        ${hostClasses['vira-pop-up-menu-rounded'].selector} {
             border-radius: ${viraBorders['vira-form-input-radius'].value};
         }
     `,

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

@@ -0,0 +1,81 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { NavController, type Coords } from 'device-navigation';
+import { PopUpManager, type ShowPopUpResult } from '../../util/pop-up-manager.js';
+/**
+ * Offsets applied to any menu opened by {@link ViraPopUpTrigger}.
+ *
+ * @category Internal
+ */
+export type PopUpOffset = PartialWithUndefined<{
+    vertical: number;
+    right: number;
+    left: number;
+}>;
+/**
+ * Anchor options for pop-ups.
+ *
+ * @category Internal
+ */
+export declare enum HorizontalAnchor {
+    /**
+     * The left side of the pop-up will be anchored to the left side of the trigger, allowing the
+     * pop-up to grow on the right side of the trigger.
+     */
+    Left = "left",
+    /**
+     * The Right side of the pop-up will be anchored to the right side of the trigger, allowing the
+     * pop-up to grow on the left side of the trigger.
+     */
+    Right = "right",
+    /**
+     * Restrict the pop-up on both sides.
+     *
+     * This is the default anchor for {@link ViraPopUpTrigger}.
+     */
+    Both = "both"
+}
+/**
+ * An element with slots for a pop-up trigger and pop-up contents.
+ *
+ * @category PopUp
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-pop-up-trigger
+ */
+export declare const ViraPopUpTrigger: import("element-vir").DeclarativeElementDefinition<"vira-pop-up-trigger", PartialWithUndefined<{
+    isDisabled: boolean;
+    /** For debugging purposes only. Very bad for actual production code use. */
+    z_debug_forceOpenState: boolean;
+    /** Set to `true` to keep the pop-up open if it is interacted with. */
+    keepOpenAfterInteraction: boolean;
+    /** All values in px. */
+    popUpOffset?: PopUpOffset;
+    /**
+     * - `HorizontalAnchor.Left`: pop-up is anchored to the left side of the trigger and the
+     *   pop-up can grow to the right.
+     * - `HorizontalAnchor.Right`: pop-up is anchored to the right side of the trigger and the
+     *   pop-up can grow to the left.
+     * - `HorizontalAnchor.Both`: pop-up is anchored on both sides of the trigger and cannot grow
+     *   beyond it. (This is the default experience.)
+     *
+     * Note that when `HorizontalAnchor.Both` is _not_ used, this anchor will cancel out any
+     * `popUpOffset` for the direction _opposite_ of the chosen anchor.
+     *
+     * @default HorizontalAnchor.Both
+     */
+    horizontalAnchor?: HorizontalAnchor;
+}>, {
+    /** `undefined` means the pop up is not currently showing. */
+    showPopUpResult: ShowPopUpResult | undefined;
+    popUpManager: PopUpManager;
+}, {
+    navSelect: import("element-vir").DefineEvent<Coords>;
+    /**
+     * - `undefined` indicates that the pop-up just closed.
+     * - {@link ShowPopUpResult} indicates that the pop-up just opened.
+     */
+    openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
+    init: import("element-vir").DefineEvent<{
+        navController: NavController;
+        popUpManager: PopUpManager;
+    }>;
+}, "vira-pop-up-trigger-disabled", "vira-pop-up-trigger-", readonly ["trigger", "popUp"], readonly []>;