vira 25.14.0 → 26.0.0

package/dist/elements/define-vira-element.js

@@ -5,16 +5,15 @@ import { wrapDefineElement } from 'element-vir';
  * @category Internal
  */
 export const ViraTagNamePrefix = `vira-`;
-const { defineElement } = wrapDefineElement({
+/**
+ * Define a vira element with custom requirements (like the `vira-` element tag prefix).
+ *
+ * @category Internal
+ */
+export const defineViraElement = wrapDefineElement({
     assertInputs: (inputs) => {
         if (!inputs.tagName.startsWith(ViraTagNamePrefix)) {
             throw new Error(`Tag name should start with '${ViraTagNamePrefix}' but got '${inputs.tagName}'`);
         }
     },
 });
-/**
- * Define a vira element with custom requirements (like the `vira-` element tag prefix).
- *
- * @category Internal
- */
-export const defineViraElement = defineElement;

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

@@ -1,5 +1,6 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type HTMLTemplateResult } from 'element-vir';
+import { type ViraLinkRoute } from '../vira-link.element.js';
 /**
  * An individual menu item consumed partially by `ViraMenuItem` and used by `ViraMenu`.
  *
@@ -8,17 +9,18 @@ import { type HTMLTemplateResult } from 'element-vir';
 export type MenuItem = {
     /** Each `id` must be unique across all items in a single menu. */
     id: PropertyKey;
-    /** The user-facing label for this menu item. */
-    label: string;
-} & PartialWithUndefined<{
-    disabled: boolean;
-    /** Text assigned to the `title` HTML attribute that'll show on long hover. */
-    titleText: string;
     /**
-     * An optional custom template for this menu item. This will replace the menu item text and icon
+     * The user-facing label for this menu item.
+     *
+     * Optionally, this can be a custom HTML template. This will replace the menu item text and icon
      * content, but will still be styled correctly if used within `ViraMenu`. Feel free to use
      * `ViraMenuItem` as the template with a custom `<slot>` to keep the selected checkmark
      * functionality.
      */
-    template: HTMLTemplateResult;
+    label: string | HTMLTemplateResult;
+} & PartialWithUndefined<{
+    route: ViraLinkRoute;
+    disabled: boolean;
+    /** Text assigned to the `title` HTML attribute that'll show on long hover. */
+    titleText: string;
 }>;

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

@@ -77,7 +77,11 @@ export const ViraMenuTrigger = defineViraElement()({
             }
             dispatch(new events.itemActivate(updateSelectedItems(item, inputs.selected, inputs.isMultiSelect)));
             if (!inputs.isMultiSelect) {
-                state.popUpManager?.removePopUp();
+                /**
+                 * Defer pop up removal to prevent race conditions with element-internal
+                 * click handlers.
+                 */
+                globalThis.setTimeout(() => state.popUpManager?.removePopUp());
             }
         })}
             >

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

@@ -1,8 +1,10 @@
+import { check } from '@augment-vir/assert';
 import { nav, navAttribute, NavController, NavValue } from 'device-navigation';
 import { classMap, css, html, ifDefined, testId } from 'element-vir';
 import { viraFormCssVars } from '../../styles/form-themes.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';
 /**
@@ -47,7 +49,8 @@ export const ViraMenu = defineViraElement()({
 
         .menu-item {
             ${noNativeFormStyles};
-            background-color: white;
+            will-change: background-color;
+            background-color: inherit;
             outline: none;
             cursor: pointer;
         }
@@ -99,29 +102,50 @@ export const ViraMenu = defineViraElement()({
         assertUniqueIdProps(inputs.items);
         const itemTemplates = inputs.items.map((item) => {
             const selected = !!inputs.selected?.includes(item.id);
-            const innerTemplate = item.template ||
-                html `
-                    <${ViraMenuItem.assign({
+            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);
-            return html `
-                <button
-                    class="menu-item ${classMap({
-                disabled: !!item.disabled,
-                selected,
-            })}"
-                    ${testId(viraMenuTestIds.item)}
-                    title=${ifDefined(item.titleText || undefined)}
-                    role="option"
-                    ${nav(state.internalNavController, { disabled })}
-                >
-                    ${innerTemplate}
-                </button>
-            `;
+            if (item.route) {
+                return html `
+                    <${ViraLink.assign({
+                    route: item.route,
+                })}
+                        class="menu-item ${classMap({
+                    disabled: !!item.disabled,
+                    selected,
+                })}"
+                        ${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,
+                })}"
+                        ${testId(viraMenuTestIds.item)}
+                        title=${ifDefined(item.titleText || undefined)}
+                        role="option"
+                        ${nav(state.internalNavController, { disabled })}
+                    >
+                        ${innerTemplate}
+                    </button>
+                `;
+            }
         });
         return html `
             ${itemTemplates}

package/dist/elements/vira-dropdown.element.d.ts

@@ -31,11 +31,6 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
      * multiple.
      */
     isMultiSelect: boolean;
-    /**
-     * Shows the selection quantity rather than a list of selections. Only used when
-     * `isMultiSelect` is `true`.
-     */
-    showSelectionCount: boolean;
     icon: ViraIconSvg;
     selectionPrefix: string;
     isDisabled: boolean;

package/dist/elements/vira-dropdown.element.js

@@ -128,11 +128,9 @@ export const ViraDropdown = defineViraElement()({
             : nothing;
         const selectionDisplay = shouldUsePlaceholder
             ? inputs.placeholder || ''
-            : inputs.isMultiSelect && inputs.showSelectionCount
+            : inputs.isMultiSelect && selectedOptions.length > 1
                 ? `${selectedOptions.length} Selected`
-                : inputs.isMultiSelect
-                    ? selectedOptions.map((item) => item.label).join(', ')
-                    : selectedOptions[0]?.label || '';
+                : selectedOptions[0]?.label || '';
         return html `
             <${ViraMenuTrigger.assign({
             items: inputs.options,
@@ -165,10 +163,7 @@ export const ViraDropdown = defineViraElement()({
                         class="selection-display ${classMap({
             'using-placeholder': shouldUsePlaceholder,
         })}"
-                        title=${ifDefined(shouldUsePlaceholder ||
-            (inputs.isMultiSelect && inputs.showSelectionCount)
-            ? undefined
-            : selectionDisplay)}
+                        title=${ifDefined(shouldUsePlaceholder ? undefined : selectionDisplay)}
                     >
                         ${prefixTemplate} ${selectionDisplay}
                     </span>

package/dist/elements/vira-link.element.d.ts

@@ -1,5 +1,16 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
+import { type AttributeValues, type CSSResult } from 'element-vir';
 import { type SpaRoute, type SpaRouter } from 'spa-router-vir';
+/**
+ * The route properties required for using {@link ViraLink} with a route.
+ *
+ * @category Internal
+ */
+export type ViraLinkRoute = Readonly<{
+    route: SpaRoute<any, any, any>;
+    router: Pick<SpaRouter<any, any, any>, 'createRouteUrl' | 'setRouteOnDirectNavigation'>;
+    scrollToTop?: boolean;
+}>;
 /**
  * A hyperlink wrapper element that can be configured to emit route change events rather than just
  * being a raw link.
@@ -21,17 +32,14 @@ export declare const ViraLink: import("element-vir").DeclarativeElementDefinitio
      * A route that'll change that current page without navigating the window. If this property
      * is provided for the inputs, don't provide a link property.
      */
-    route: {
-        route: SpaRoute<any, any, any>;
-        router: Pick<SpaRouter<any, any, any>, "createRouteUrl" | "setRouteOnDirectNavigation">;
-        scrollToTop?: boolean;
-    };
+    route: ViraLinkRoute;
 }, "link" | "route"> & PartialWithUndefined<{
-    aria?: {
-        /**
-         * This label will be attached to the inner `<a>` element's `aria-label` attribute.
-         * If none is provided, no `aria-label` attribute will be generated.
-         */
-        label: string;
-    };
+    /** Styles that will be applied directly to the inner elements. */
+    stylePassthrough: Readonly<PartialWithUndefined<{
+        a: CSSResult;
+    }>>;
+    /** Attributes that will be applied directly to the inner elements. */
+    attributePassthrough: Readonly<PartialWithUndefined<{
+        a: AttributeValues;
+    }>>;
 }>, {}, {}, "vira-link-", "vira-link-hover-color", readonly []>;

package/dist/elements/vira-link.element.js

@@ -1,4 +1,4 @@
-import { css, html, ifDefined, listen } from 'element-vir';
+import { attributes, css, html, ifDefined, listen, nothing, } from 'element-vir';
 import { defineViraElement } from './define-vira-element.js';
 /**
  * A hyperlink wrapper element that can be configured to emit route change events rather than just
@@ -57,7 +57,10 @@ export const ViraLink = defineViraElement()({
                     href=${inputs.link.url}
                     target="_blank"
                     rel="noopener noreferrer"
-                    aria-label=${ifDefined(inputs.aria?.label || undefined)}
+                    ${inputs.attributePassthrough?.a
+                ? attributes(inputs.attributePassthrough.a)
+                : nothing}
+                    style=${ifDefined(inputs.stylePassthrough?.a)}
                 >
                     <slot></slot>
                 </a>
@@ -72,7 +75,10 @@ export const ViraLink = defineViraElement()({
                 <a
                     href=${linkUrl}
                     rel="noopener noreferrer"
-                    aria-label=${ifDefined(inputs.aria?.label || undefined)}
+                    ${inputs.attributePassthrough?.a
+                ? attributes(inputs.attributePassthrough.a)
+                : nothing}
+                    style=${ifDefined(inputs.stylePassthrough?.a)}
                     ${listen('click', clickCallback)}
                 >
                     <slot></slot>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "25.14.0",
+    "version": "26.0.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.14.0"
+        "element-vir": "^26.0.0"
     },
     "engines": {
         "node": ">=22"