vira 25.13.1 → 25.15.0

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/table/create-table.d.ts

@@ -5,48 +5,53 @@ import { type HtmlInterpolation } from 'element-vir';
  *
  * @category Internal
  */
-export type ViraTableCell<Columns extends ViraTableColumns | undefined = undefined> = undefined extends Columns ? Record<PropertyKey, HtmlInterpolation> : Record<ArrayElement<Exclude<Columns, undefined>>['key'], HtmlInterpolation>;
+export type ViraTableCells<Keys extends ViraTableKeys | undefined = undefined> = undefined extends Keys ? Record<PropertyKey, HtmlInterpolation> : Record<ArrayElement<Exclude<Keys, undefined>>['key'], HtmlInterpolation>;
 /**
- * An individual column definition in {@link ViraTableColumns}.
+ * An individual key definition in {@link ViraTableKeys}. In default table orientation, this will
+ * define each column's key. In horizontal orientation, this will define each row's key.
  *
  * @category Internal
  */
-export type ViraTableColumn = Readonly<{
-    /** The key that cells must use to set a value for this column. */
+export type ViraTableKey = Readonly<{
+    /** The key that cells must set a value to. */
     key: PropertyKey;
 } & PartialWithUndefined<{
     /**
-     * This will be displayed in the header for this column. If no `label` is provided, the
-     * `key` will be used.
+     * This will be displayed in the header for this key. If no `label` is provided, the `key`
+     * will be used.
      */
     label: HtmlInterpolation;
-    /** If set to `true`, this column will not be rendered. */
+    /** If set to `true`, all cells for this key will not be rendered. */
     hide: boolean;
-    /** If true, this column is a header column, so all cells in it will be rendered as headers. */
+    /** In horizontal table orientation, this prevents this key's row from being clicked. */
+    disabled: boolean;
+    /** If true, will be rendered as headers. */
     isHeader: boolean;
 }>>;
 /**
- * A column definition for {@link ViraTableSetup}.
+ * All key definitions for a {@link ViraTableSetup} instance. In default table orientation, these
+ * will define each column. In horizontal orientation, this will define each row header.
  *
  * @category Internal
  */
-export type ViraTableColumns = ReadonlyArray<ViraTableColumn>;
+export type ViraTableKeys = ReadonlyArray<ViraTableKey>;
 /**
- * An individual row in {@link ViraTableSetup}.
+ * An individual entry in {@link ViraTableSetup}. In default table orientation, this will be a row.
+ * In horizontal orientation, this will be a column.
  *
  * @category Internal
  */
-export type ViraTableRow<Columns extends ViraTableColumns | undefined = undefined> = {
-    cells: ViraTableCell<Columns>;
+export type ViraTableEntry<Keys extends ViraTableKeys | undefined = undefined> = {
+    cells: ViraTableCells<Keys>;
 } & PartialWithUndefined<{
     /**
-     * If `true`, no actions will be fired from this row (like row clicks). No disable styles are
+     * If `true`, no actions will be fired from this entry (like clicks). No disable styles are
      * applied.
      *
      * @default false
      */
     disabled: boolean;
-    /** Optional: keep track of which row is which by attaching an id to it. */
+    /** Optional: keep track of which entry is which by attaching an id to it. */
     id: PropertyKey;
 }>;
 /**
@@ -55,15 +60,15 @@ export type ViraTableRow<Columns extends ViraTableColumns | undefined = undefine
  * @category Internal
  */
 export type ViraTableSetup = Readonly<{
-    /** The order of these columns determines the order that they render in. */
-    columns: ViraTableColumns;
-    rows: ReadonlyArray<Readonly<ViraTableRow>>;
+    /** The order of these keys determines the order that they render in. */
+    keys: ViraTableKeys;
+    entries: ReadonlyArray<Readonly<ViraTableEntry>>;
 }>;
 /**
  * Create a type-safe {@link ViraTableSetup} object to be used with the `ViraTable` element.
  *
  * @category Internal
  */
-export declare function createTable<const Columns extends ViraTableColumns>(
-/** The order of these columns determines the order that they render in. */
-columns: Readonly<Columns>, rows: ReadonlyArray<Readonly<ViraTableRow<Columns>>>): ViraTableSetup;
+export declare function createTable<const Keys extends ViraTableKeys>(
+/** The order of these keys determines the order that they render in. */
+keys: Readonly<Keys>, entries: ReadonlyArray<Readonly<ViraTableEntry<Keys>>>): ViraTableSetup;

package/dist/elements/table/create-table.js

@@ -4,10 +4,10 @@
  * @category Internal
  */
 export function createTable(
-/** The order of these columns determines the order that they render in. */
-columns, rows) {
+/** The order of these keys determines the order that they render in. */
+keys, entries) {
     return {
-        columns,
-        rows,
+        keys,
+        entries,
     };
 }

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

@@ -1,6 +1,6 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type AttributeValues, type CSSResult } from 'element-vir';
-import { type ViraTableRow, type ViraTableSetup } from './create-table.js';
+import { type ViraTableEntry, type ViraTableSetup } from './create-table.js';
 /**
  * Element tagnames that have passthroughs setup for them in {@link ViraTable}.
  *
@@ -22,11 +22,17 @@ export declare const ViraTable: import("element-vir").DeclarativeElementDefiniti
     table: ViraTableSetup;
 } & PartialWithUndefined<{
     /**
-     * Block all rows from being clickable.
+     * Key headers are rendered on the left, rows become columns.
      *
      * @default false
      */
-    preventRowClicks: boolean;
+    horizontalOrientation: boolean;
+    /**
+     * Allow all rows to be clickable. Each row can override this for itself.
+     *
+     * @default false
+     */
+    allowRowClicks: boolean;
     /**
      * Block the sticky table header.
      *
@@ -34,13 +40,14 @@ export declare const ViraTable: import("element-vir").DeclarativeElementDefiniti
      */
     preventStickyHeader: boolean;
     /**
-     * Hide header row entirely.
+     * Hide header row (in default orientation) or column (in horizontal orientation)
+     * entirely.
      *
      * @default false
      */
-    hideHeaderRow: boolean;
+    hideKeyHeaders: boolean;
     /**
-     * Pixel value of the header row sticky offset.
+     * Pixel value of the header's sticky offset.
      *
      * @default 0
      */
@@ -51,7 +58,7 @@ export declare const ViraTable: import("element-vir").DeclarativeElementDefiniti
     stylePassthrough: Readonly<PartialWithUndefined<Record<ViraTableElementsForPassthrough, CSSResult>>>;
 }>>, {}, {
     rowClick: import("element-vir").DefineEvent<{
-        row: ViraTableRow;
+        entry: ViraTableEntry;
         originalEvent: MouseEvent;
     }>;
 }, "vira-table-", "vira-table-", readonly []>;

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

@@ -54,65 +54,117 @@ export const ViraTable = defineViraElement()({
         rowClick: defineElementEvent(),
     },
     render({ inputs, events, dispatch }) {
-        const rows = inputs.table.rows.map((row) => {
-            const cells = inputs.table.columns.map((column) => {
-                if (column.hide) {
+        const rowTemplates = inputs.horizontalOrientation
+            ? inputs.table.keys.map((key) => {
+                if (key.hide) {
                     return nothing;
                 }
-                const cellElement = column.isHeader ? 'th' : 'td';
+                const cells = inputs.table.entries.map((entry) => {
+                    const cellElement = key.isHeader ? 'th' : 'td';
+                    return html `
+                          <${cellElement}
+                              ${listen('click', (event) => {
+                        if (isClickable) {
+                            dispatch(new events.rowClick({ originalEvent: event, entry: entry }));
+                        }
+                    })}
+                              ${key.isHeader
+                        ? inputs.attributePassthrough?.th
+                            ? attributes(inputs.attributePassthrough.th)
+                            : nothing
+                        : inputs.attributePassthrough?.td
+                            ? attributes(inputs.attributePassthrough.td)
+                            : nothing}
+                              style=${key.isHeader
+                        ? ifDefined(inputs.stylePassthrough?.th)
+                        : ifDefined(inputs.stylePassthrough?.td)}
+                          >
+                              ${entry.cells[key.key]}
+                          </${cellElement}>
+                      `;
+                });
+                const isClickable = !!inputs.allowRowClicks && !key.disabled;
                 return html `
-                    <${cellElement}
-                        ${column.isHeader
-                    ? inputs.attributePassthrough?.th
-                        ? attributes(inputs.attributePassthrough.th)
-                        : nothing
-                    : inputs.attributePassthrough?.td
-                        ? attributes(inputs.attributePassthrough.td)
-                        : nothing}
-                        style=${column.isHeader
-                    ? ifDefined(inputs.stylePassthrough?.th)
-                    : ifDefined(inputs.stylePassthrough?.td)}
-                    >
-                        ${row.cells[column.key]}
-                    </${cellElement}>
-                `;
+                      <tr
+                          class=${classMap({
+                    clickable: isClickable,
+                })}
+                          ${inputs.attributePassthrough?.tr
+                    ? attributes(inputs.attributePassthrough.tr)
+                    : nothing}
+                          style=${ifDefined(inputs.stylePassthrough?.tr)}
+                      >
+                          <th
+                              ${inputs.attributePassthrough?.th
+                    ? attributes(inputs.attributePassthrough.th)
+                    : nothing}
+                              style=${ifDefined(inputs.stylePassthrough?.th)}
+                          >
+                              ${key.label}
+                          </th>
+                          ${cells}
+                      </tr>
+                  `;
+            })
+            : inputs.table.entries.map((entry) => {
+                const cells = inputs.table.keys.map((key) => {
+                    if (key.hide) {
+                        return nothing;
+                    }
+                    const cellElement = key.isHeader ? 'th' : 'td';
+                    return html `
+                          <${cellElement}
+                              ${key.isHeader
+                        ? inputs.attributePassthrough?.th
+                            ? attributes(inputs.attributePassthrough.th)
+                            : nothing
+                        : inputs.attributePassthrough?.td
+                            ? attributes(inputs.attributePassthrough.td)
+                            : nothing}
+                              style=${key.isHeader
+                        ? ifDefined(inputs.stylePassthrough?.th)
+                        : ifDefined(inputs.stylePassthrough?.td)}
+                          >
+                              ${entry.cells[key.key]}
+                          </${cellElement}>
+                      `;
+                });
+                const isClickable = !!inputs.allowRowClicks && !entry.disabled;
+                return html `
+                      <tr
+                          class=${classMap({
+                    clickable: isClickable,
+                })}
+                          ${inputs.attributePassthrough?.tr
+                    ? attributes(inputs.attributePassthrough.tr)
+                    : nothing}
+                          style=${ifDefined(inputs.stylePassthrough?.tr)}
+                          ${listen('click', (event) => {
+                    if (isClickable) {
+                        dispatch(new events.rowClick({ originalEvent: event, entry: entry }));
+                    }
+                })}
+                      >
+                          ${cells}
+                      </tr>
+                  `;
             });
-            const isClickable = !inputs.preventRowClicks && !row.disabled;
-            return html `
-                <tr
-                    class=${classMap({
-                clickable: isClickable,
-            })}
-                    ${inputs.attributePassthrough?.tr
-                ? attributes(inputs.attributePassthrough.tr)
-                : nothing}
-                    style=${ifDefined(inputs.stylePassthrough?.tr)}
-                    ${listen('click', (event) => {
-                if (isClickable) {
-                    dispatch(new events.rowClick({ originalEvent: event, row }));
-                }
-            })}
-                >
-                    ${cells}
-                </tr>
-            `;
-        });
-        const headerCells = inputs.hideHeaderRow
+        const headerCells = inputs.hideKeyHeaders || inputs.horizontalOrientation
             ? undefined
-            : inputs.table.columns.map((column) => {
-                if (column.hide) {
+            : inputs.table.keys.map((key) => {
+                if (key.hide) {
                     return nothing;
                 }
                 return html `
-                      <th
-                          ${inputs.attributePassthrough?.th
+                          <th
+                              ${inputs.attributePassthrough?.th
                     ? attributes(inputs.attributePassthrough.th)
                     : nothing}
-                          style=${ifDefined(inputs.stylePassthrough?.th)}
-                      >
-                          ${column.label}
-                      </th>
-                  `;
+                              style=${ifDefined(inputs.stylePassthrough?.th)}
+                          >
+                              ${key.label}
+                          </th>
+                      `;
             });
         const headerRow = headerCells
             ? html `
@@ -125,11 +177,11 @@ export const ViraTable = defineViraElement()({
                       ${headerCells}
                   </tr>
               `
-            : nothing;
+            : undefined;
         const theadStyles = css `
             ${inputs.stylePassthrough?.thead || css ``}
             top: ${inputs.stickyOffset || 0}px;
-            ${inputs.preventStickyHeader || inputs.hideHeaderRow
+            ${inputs.preventStickyHeader || inputs.hideKeyHeaders
             ? css ``
             : css `
                       position: sticky;
@@ -142,21 +194,25 @@ export const ViraTable = defineViraElement()({
             : nothing}
                 style=${ifDefined(inputs.stylePassthrough?.table)}
             >
-                <thead
-                    ${inputs.attributePassthrough?.thead
-            ? attributes(inputs.attributePassthrough.thead)
+                ${headerRow
+            ? html `
+                          <thead
+                              ${inputs.attributePassthrough?.thead
+                ? attributes(inputs.attributePassthrough.thead)
+                : nothing}
+                              style=${theadStyles}
+                          >
+                              ${headerRow}
+                          </thead>
+                      `
             : nothing}
-                    style=${theadStyles}
-                >
-                    ${headerRow}
-                </thead>
                 <tbody
                     ${inputs.attributePassthrough?.tbody
             ? attributes(inputs.attributePassthrough.tbody)
             : nothing}
                     style=${ifDefined(inputs.stylePassthrough?.tbody)}
                 >
-                    ${rows}
+                    ${rowTemplates}
                 </tbody>
             </table>
         `;

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,15 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 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,11 +31,7 @@ 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?: {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "25.13.1",
+    "version": "25.15.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,21 +38,21 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.21.1",
-        "@augment-vir/common": "^31.21.1",
-        "@augment-vir/web": "^31.21.1",
+        "@augment-vir/assert": "^31.23.3",
+        "@augment-vir/common": "^31.23.3",
+        "@augment-vir/web": "^31.23.3",
         "colorjs.io": "^0.5.2",
         "date-vir": "^7.3.1",
         "device-navigation": "^4.5.5",
         "lit-css-vars": "^3.0.11",
         "observavir": "^2.0.5",
         "page-active": "^1.0.1",
-        "spa-router-vir": "^5.5.0",
+        "spa-router-vir": "^6.0.0",
         "type-fest": "^4.41.0",
         "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.21.1",
+        "@augment-vir/test": "^31.23.3",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
@@ -67,7 +67,7 @@
         "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {
-        "element-vir": "^25.13.1"
+        "element-vir": "^25.15.0"
     },
     "engines": {
         "node": ">=22"