vira 25.12.1 → 25.12.3

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

@@ -38,4 +38,4 @@ export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDe
 }, {
     itemActivate: import("element-vir").DefineEvent<PropertyKey[]>;
     openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
-}, "vira-menu-trigger-", "vira-menu-trigger-", readonly ["trigger"]>;
+}, "vira-menu-trigger-", "vira-menu-trigger-", readonly []>;

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

@@ -36,7 +36,6 @@ export const ViraMenuTrigger = defineViraElement()({
         itemActivate: defineElementEvent(),
         openChange: defineElementEvent(),
     },
-    slotNames: ['trigger'],
     state() {
         return {
             navController: undefined,
@@ -45,7 +44,7 @@ export const ViraMenuTrigger = defineViraElement()({
             showPopUpResult: undefined,
         };
     },
-    render({ inputs, state, updateState, dispatch, events, slotNames }) {
+    render({ inputs, state, updateState, dispatch, events }) {
         return html `
             <${ViraPopUpTrigger.assign({
             isDisabled: inputs.isDisabled,
@@ -82,7 +81,7 @@ export const ViraMenuTrigger = defineViraElement()({
             }
         })}
             >
-                <slot slot=${slotNames.trigger} name=${ViraPopUpTrigger.slotNames.trigger}></slot>
+                <slot slot=${ViraPopUpTrigger.slotNames.trigger}></slot>
                 ${state.navController && state.showPopUpResult
             ? html `
                           <${ViraPopUpMenu.assign({

package/dist/elements/table/define-table.d.ts

@@ -26,8 +26,18 @@ export type ViraTableColumns = ReadonlyArray<Readonly<{
  * @category Internal
  */
 export type ViraTableRow<Columns extends ViraTableColumns | undefined = undefined> = {
-    value: ViraTableCell<Columns>;
-};
+    cells: ViraTableCell<Columns>;
+} & PartialWithUndefined<{
+    /**
+     * If `true`, no actions will be fired from this row (like row clicks). No disable styles are
+     * applied.
+     *
+     * @default false
+     */
+    disabled: boolean;
+    /** Optional: keep track of which row is which by attaching an id to it. */
+    id: PropertyKey;
+}>;
 /**
  * Table information input for `ViraTable`.
  *

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 ViraTableSetup } from './define-table.js';
+import { type ViraTableRow, type ViraTableSetup } from './define-table.js';
 /**
  * Element tagnames that have passthroughs setup for them in {@link ViraTable}.
  *
@@ -21,6 +21,12 @@ export declare const ViraTable: import("element-vir").DeclarativeElementDefiniti
      */
     table: ViraTableSetup;
 } & PartialWithUndefined<{
+    /**
+     * Block all rows from being clickable.
+     *
+     * @default false
+     */
+    preventRowClicks: boolean;
     /**
      * Block the sticky table header.
      *
@@ -43,4 +49,9 @@ export declare const ViraTable: import("element-vir").DeclarativeElementDefiniti
     attributePassthrough: Readonly<PartialWithUndefined<Record<ViraTableElementsForPassthrough, AttributeValues>>>;
     /** Styles that will be applied directly to the inner elements. */
     stylePassthrough: Readonly<PartialWithUndefined<Record<ViraTableElementsForPassthrough, CSSResult>>>;
-}>>, {}, {}, "vira-table-", "vira-table-", readonly []>;
+}>>, {}, {
+    rowClick: import("element-vir").DefineEvent<{
+        row: ViraTableRow;
+        originalEvent: MouseEvent;
+    }>;
+}, "vira-table-", "vira-table-", readonly []>;

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

@@ -1,4 +1,5 @@
-import { attributes, css, html, ifDefined, nothing, } from 'element-vir';
+import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, nothing, } from 'element-vir';
+import { viraFormCssVars } from '../../styles/form-themes.js';
 import { defineViraElement } from '../define-vira-element.js';
 /**
  * A flexible table element with automatic header pinning. Use {@link createTable} to create a
@@ -10,14 +11,19 @@ export const ViraTable = defineViraElement()({
     tagName: 'vira-table',
     styles: css `
         :host {
-            background-color: white;
+            background: ${viraFormCssVars['vira-form-background-color'].value};
             display: block;
             position: relative;
         }
 
         table,
         thead {
-            background-color: inherit;
+            background: inherit;
+        }
+
+        th,
+        td {
+            padding: 0;
         }
 
         table {
@@ -26,10 +32,28 @@ export const ViraTable = defineViraElement()({
 
         thead {
             z-index: 10;
-            /* Note that important thead styles are also directly attached to the element. */
+            /* Other important thead styles are directly attached to the HTML element. */
+        }
+
+        .clickable {
+            cursor: pointer;
+
+            &:hover {
+                color: ${viraFormCssVars['vira-form-selection-hover-foreground-color'].value};
+                background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
+        .value};
+            }
+            &:active {
+                color: ${viraFormCssVars['vira-form-selection-active-foreground-color'].value};
+                background-color: ${viraFormCssVars['vira-form-selection-active-background-color']
+        .value};
+            }
         }
     `,
-    render({ inputs }) {
+    events: {
+        rowClick: defineElementEvent(),
+    },
+    render({ inputs, events, dispatch }) {
         const rows = inputs.table.rows.map((row) => {
             const cells = inputs.table.columns.map((column) => {
                 if (column.hide) {
@@ -42,16 +66,25 @@ export const ViraTable = defineViraElement()({
                     : nothing}
                         style=${ifDefined(inputs.stylePassthrough?.td)}
                     >
-                        ${row.value[column.key]}
+                        ${row.cells[column.key]}
                     </td>
                 `;
             });
+            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>

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

@@ -154,7 +154,6 @@ export const ViraDropdown = defineViraElement()({
         })}
             >
                 <div
-                    slot=${ViraMenuTrigger.slotNames.trigger}
                     class="dropdown-trigger ${classMap({
             open: !!state.showPopUpResult,
             'open-upwards': !state.showPopUpResult?.popDown,

package/dist/styles/form-themes.d.ts

@@ -11,4 +11,6 @@ export declare const viraFormCssVars: import("lit-css-vars").CssVarDefinitions<{
     readonly 'vira-form-focus-color': import("lit").CSSResult;
     readonly 'vira-form-selection-hover-background-color': "#d2eaff";
     readonly 'vira-form-selection-hover-foreground-color': "black";
+    readonly 'vira-form-selection-active-background-color': "#d2eaff";
+    readonly 'vira-form-selection-active-foreground-color': "black";
 }>;

package/dist/styles/form-themes.js

@@ -13,4 +13,6 @@ export const viraFormCssVars = defineCssVars({
     'vira-form-focus-color': viraFocusCssVars['vira-focus-outline-color'].value,
     'vira-form-selection-hover-background-color': '#d2eaff',
     'vira-form-selection-hover-foreground-color': 'black',
+    'vira-form-selection-active-background-color': '#d2eaff',
+    'vira-form-selection-active-foreground-color': 'black',
 });

package/package.json

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