vira 25.9.0 → 25.10.0

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

@@ -2,6 +2,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 PopUpOffset } from './vira-pop-up-trigger.element.js';
 /**
  * Test ids for {@link ViraMenuTrigger}.
@@ -28,6 +29,7 @@ export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDe
     popUpOffset: PopUpOffset;
     /** Hide menu item check mark icons. */
     hideCheckIcons: boolean;
+    menuCornerStyle: PopUpMenuCornerStyle;
 }>, {
     navController: undefined | NavController;
     popUpManager: undefined | PopUpManager;

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

@@ -2,7 +2,7 @@ import { classMap, css, defineElementEvent, html, listen, nothing, testId } from
 import { defineViraElement } from '../define-vira-element.js';
 import { updateSelectedItems } from './pop-up-helpers.js';
 import { ViraMenu } from './vira-menu.element.js';
-import { ViraPopUpMenu } from './vira-pop-up-menu.element.js';
+import { PopUpMenuDirection, ViraPopUpMenu, } from './vira-pop-up-menu.element.js';
 import { ViraPopUpTrigger } from './vira-pop-up-trigger.element.js';
 /**
  * Test ids for {@link ViraMenuTrigger}.
@@ -86,7 +86,10 @@ export const ViraMenuTrigger = defineViraElement()({
                 ${state.navController && state.showPopUpResult
             ? html `
                           <${ViraPopUpMenu.assign({
-                openUpwards: !state.showPopUpResult.popDown,
+                direction: state.showPopUpResult.popDown
+                    ? PopUpMenuDirection.Downwards
+                    : PopUpMenuDirection.Upwards,
+                cornerStyle: inputs.menuCornerStyle,
             })}
                               slot=${ViraPopUpTrigger.slotNames.popUp}
                           >

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

@@ -1,10 +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", {
-    /** If true, indicates that the menu is opening upwards and should be styled accordingly. */
-    openUpwards?: boolean;
-}, {}, {}, "vira-pop-up-menu-open-upwards", "vira-pop-up-menu-", readonly []>;
+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 []>;

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

@@ -3,6 +3,30 @@ import { viraBorders } from '../../styles/border.js';
 import { viraFormCssVars } from '../../styles/form-themes.js';
 import { viraShadows } from '../../styles/shadows.js';
 import { defineViraElement } from '../define-vira-element.js';
+/**
+ * Possible corner styles for {@link ViraPopUpMenu}.
+ *
+ * @category Internal
+ */
+export var PopUpMenuCornerStyle;
+(function (PopUpMenuCornerStyle) {
+    /** Rounding of corners depends on the open direction of the menu. */
+    PopUpMenuCornerStyle["Directional"] = "directional";
+    /** All of the menus corners should be rounded. */
+    PopUpMenuCornerStyle["AllRounded"] = "all-rounded";
+    /** None of the menus corners should be rounded. */
+    PopUpMenuCornerStyle["AllSquare"] = "all-square";
+})(PopUpMenuCornerStyle || (PopUpMenuCornerStyle = {}));
+/**
+ * Menu pop-up directions available for {@link ViraPopUpMenu}.
+ *
+ * @category Internal
+ */
+export var PopUpMenuDirection;
+(function (PopUpMenuDirection) {
+    PopUpMenuDirection["Downwards"] = "downwards";
+    PopUpMenuDirection["Upwards"] = "upwards";
+})(PopUpMenuDirection || (PopUpMenuDirection = {}));
 /**
  * A simple default style wrapper for pop-up menus.
  *
@@ -12,7 +36,9 @@ import { defineViraElement } from '../define-vira-element.js';
 export const ViraPopUpMenu = defineViraElement()({
     tagName: 'vira-pop-up-menu',
     hostClasses: {
-        'vira-pop-up-menu-open-upwards': ({ inputs }) => !!inputs.openUpwards,
+        '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 {
@@ -33,11 +59,18 @@ export const ViraPopUpMenu = defineViraElement()({
         }
 
         ${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;
-            border-top-left-radius: ${viraBorders['vira-form-input-radius'].value};
-            border-top-right-radius: ${viraBorders['vira-form-input-radius'].value};
-            ${viraShadows.menuShadowReversed}
+        }
+
+        ${hostClasses['vira-pop-up-menu-square'].selector} {
+            border-radius: 0;
+        }
+
+        ${hostClasses['vira-pop-up-menu-rounded'].selector} {
+            border-radius: ${viraBorders['vira-form-input-radius'].value};
         }
     `,
     render() {

package/dist/elements/vira-bold-text.element.d.ts

@@ -1,4 +1,8 @@
-/** Use this element to reserve space for bolded text, even if it isn't bold yet. */
+/**
+ * Use this element to reserve space for bolded text, even if it isn't bold yet.
+ *
+ * @category Elements
+ */
 export declare const ViraBoldText: import("element-vir").DeclarativeElementDefinition<"vira-bold", {
     bold: boolean;
     text: string;

package/dist/elements/vira-bold-text.element.js

@@ -1,6 +1,10 @@
 import { css, html } from 'element-vir';
 import { defineViraElement } from './define-vira-element.js';
-/** Use this element to reserve space for bolded text, even if it isn't bold yet. */
+/**
+ * Use this element to reserve space for bolded text, even if it isn't bold yet.
+ *
+ * @category Elements
+ */
 export const ViraBoldText = defineViraElement()({
     tagName: 'vira-bold',
     cssVars: {

package/dist/util/pop-up-manager.d.ts

@@ -21,7 +21,7 @@ export declare const emptyPositionRect: PositionRect;
 /**
  * Options for {@link PopUpManager}.
  *
- * @category Pop Up
+ * @category PopUp
  */
 export type PopUpManagerOptions = {
     /**
@@ -61,7 +61,7 @@ export type PopUpManagerOptions = {
 /**
  * Output type from {@link PopUpManager.showPopUp}
  *
- * @category Pop Up
+ * @category PopUp
  */
 export type ShowPopUpResult = {
     /**
@@ -83,7 +83,7 @@ declare const HidePopUpEvent_base: (new (eventInitDict?: EventInit) => import("t
 /**
  * An event fired from {@link PopUpManager} when the pop up should be hidden.
  *
- * @category Pop Up
+ * @category PopUp
  */
 export declare class HidePopUpEvent extends HidePopUpEvent_base {
 }
@@ -104,7 +104,7 @@ declare const NavSelectEvent_base: (new (eventInitDict: {
  * An event fired from {@link PopUpManager} when an individual item in the pop up has been selected
  * by the user.
  *
- * @category Pop Up
+ * @category PopUp
  */
 export declare class NavSelectEvent extends NavSelectEvent_base {
 }
@@ -117,7 +117,7 @@ export type PopUpManagerEvents = HidePopUpEvent | NavSelectEvent;
 /**
  * A "pop up" manager for items that pop up from the HTML page, like dropdowns or menus.
  *
- * @category Pop Up
+ * @category PopUp
  */
 export declare class PopUpManager {
     readonly navController: NavController;

package/dist/util/pop-up-manager.js

@@ -18,7 +18,7 @@ export const emptyPositionRect = {
 /**
  * An event fired from {@link PopUpManager} when the pop up should be hidden.
  *
- * @category Pop Up
+ * @category PopUp
  */
 export class HidePopUpEvent extends defineTypedEvent('hide-pop-up') {
 }
@@ -26,14 +26,14 @@ export class HidePopUpEvent extends defineTypedEvent('hide-pop-up') {
  * An event fired from {@link PopUpManager} when an individual item in the pop up has been selected
  * by the user.
  *
- * @category Pop Up
+ * @category PopUp
  */
 export class NavSelectEvent extends defineTypedCustomEvent()('nav-select') {
 }
 /**
  * A "pop up" manager for items that pop up from the HTML page, like dropdowns or menus.
  *
- * @category Pop Up
+ * @category PopUp
  */
 export class PopUpManager {
     navController;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "25.9.0",
+    "version": "25.10.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -67,7 +67,7 @@
         "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {
-        "element-vir": "^25.9.0"
+        "element-vir": "^25.10.0"
     },
     "engines": {
         "node": ">=22"