vira 25.12.2 → 25.12.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -38,4 +38,4 @@ export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDe
38
38
  }, {
39
39
  itemActivate: import("element-vir").DefineEvent<PropertyKey[]>;
40
40
  openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
41
- }, "vira-menu-trigger-", "vira-menu-trigger-", readonly ["trigger"]>;
41
+ }, "vira-menu-trigger-", "vira-menu-trigger-", readonly []>;
@@ -36,7 +36,6 @@ export const ViraMenuTrigger = defineViraElement()({
36
36
  itemActivate: defineElementEvent(),
37
37
  openChange: defineElementEvent(),
38
38
  },
39
- slotNames: ['trigger'],
40
39
  state() {
41
40
  return {
42
41
  navController: undefined,
@@ -45,7 +44,7 @@ export const ViraMenuTrigger = defineViraElement()({
45
44
  showPopUpResult: undefined,
46
45
  };
47
46
  },
48
- render({ inputs, state, updateState, dispatch, events, slotNames }) {
47
+ render({ inputs, state, updateState, dispatch, events }) {
49
48
  return html `
50
49
  <${ViraPopUpTrigger.assign({
51
50
  isDisabled: inputs.isDisabled,
@@ -82,7 +81,7 @@ export const ViraMenuTrigger = defineViraElement()({
82
81
  }
83
82
  })}
84
83
  >
85
- <slot slot=${slotNames.trigger} name=${ViraPopUpTrigger.slotNames.trigger}></slot>
84
+ <slot slot=${ViraPopUpTrigger.slotNames.trigger}></slot>
86
85
  ${state.navController && state.showPopUpResult
87
86
  ? html `
88
87
  <${ViraPopUpMenu.assign({
@@ -54,4 +54,4 @@ export declare const ViraTable: import("element-vir").DeclarativeElementDefiniti
54
54
  row: ViraTableRow;
55
55
  originalEvent: MouseEvent;
56
56
  }>;
57
- }, "vira-table-", "vira-table-row-hover" | "vira-table-row-active" | "vira-table-background", readonly []>;
57
+ }, "vira-table-", "vira-table-", readonly []>;
@@ -1,4 +1,5 @@
1
1
  import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, nothing, } from 'element-vir';
2
+ import { viraFormCssVars } from '../../styles/form-themes.js';
2
3
  import { defineViraElement } from '../define-vira-element.js';
3
4
  /**
4
5
  * A flexible table element with automatic header pinning. Use {@link createTable} to create a
@@ -8,14 +9,9 @@ import { defineViraElement } from '../define-vira-element.js';
8
9
  */
9
10
  export const ViraTable = defineViraElement()({
10
11
  tagName: 'vira-table',
11
- cssVars: {
12
- 'vira-table-row-hover': '#cfe9ff',
13
- 'vira-table-row-active': '#cfe9ff',
14
- 'vira-table-background': 'white',
15
- },
16
- styles: ({ cssVars }) => css `
12
+ styles: css `
17
13
  :host {
18
- background: ${cssVars['vira-table-background'].value};
14
+ background: ${viraFormCssVars['vira-form-background-color'].value};
19
15
  display: block;
20
16
  position: relative;
21
17
  }
@@ -43,10 +39,14 @@ export const ViraTable = defineViraElement()({
43
39
  cursor: pointer;
44
40
 
45
41
  &:hover {
46
- background-color: ${cssVars['vira-table-row-hover'].value};
42
+ color: ${viraFormCssVars['vira-form-selection-hover-foreground-color'].value};
43
+ background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
44
+ .value};
47
45
  }
48
46
  &:active {
49
- background-color: ${cssVars['vira-table-row-active'].value};
47
+ color: ${viraFormCssVars['vira-form-selection-active-foreground-color'].value};
48
+ background-color: ${viraFormCssVars['vira-form-selection-active-background-color']
49
+ .value};
50
50
  }
51
51
  }
52
52
  `,
@@ -154,7 +154,6 @@ export const ViraDropdown = defineViraElement()({
154
154
  })}
155
155
  >
156
156
  <div
157
- slot=${ViraMenuTrigger.slotNames.trigger}
158
157
  class="dropdown-trigger ${classMap({
159
158
  open: !!state.showPopUpResult,
160
159
  'open-upwards': !state.showPopUpResult?.popDown,
@@ -11,4 +11,6 @@ export declare const viraFormCssVars: import("lit-css-vars").CssVarDefinitions<{
11
11
  readonly 'vira-form-focus-color': import("lit").CSSResult;
12
12
  readonly 'vira-form-selection-hover-background-color': "#d2eaff";
13
13
  readonly 'vira-form-selection-hover-foreground-color': "black";
14
+ readonly 'vira-form-selection-active-background-color': "#d2eaff";
15
+ readonly 'vira-form-selection-active-foreground-color': "black";
14
16
  }>;
@@ -13,4 +13,6 @@ export const viraFormCssVars = defineCssVars({
13
13
  'vira-form-focus-color': viraFocusCssVars['vira-focus-outline-color'].value,
14
14
  'vira-form-selection-hover-background-color': '#d2eaff',
15
15
  'vira-form-selection-hover-foreground-color': 'black',
16
+ 'vira-form-selection-active-background-color': '#d2eaff',
17
+ 'vira-form-selection-active-foreground-color': 'black',
16
18
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vira",
3
- "version": "25.12.2",
3
+ "version": "25.12.3",
4
4
  "description": "A simple and highly versatile design system using element-vir.",
5
5
  "keywords": [
6
6
  "design",
@@ -67,7 +67,7 @@
67
67
  "vite-tsconfig-paths": "^5.1.4"
68
68
  },
69
69
  "peerDependencies": {
70
- "element-vir": "^25.12.2"
70
+ "element-vir": "^25.12.3"
71
71
  },
72
72
  "engines": {
73
73
  "node": ">=22"