vira 29.4.0 → 29.5.1

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.
@@ -19,6 +19,11 @@ export type MenuItem = {
19
19
  */
20
20
  label: string | HTMLTemplateResult;
21
21
  } & PartialWithUndefined<{
22
+ /**
23
+ * If set to `true`, the default hover styles aren't applied to the menu item. This is best used
24
+ * with a template `label` (rather than a plain string).
25
+ */
26
+ disableDefaultPointerStyles: boolean;
22
27
  route: ViraLinkRoute;
23
28
  disabled: boolean;
24
29
  /** Text assigned to the `title` HTML attribute that'll show on long hover. */
@@ -54,20 +54,26 @@ export const ViraMenu = defineViraElement()({
54
54
  will-change: background-color;
55
55
  background-color: inherit;
56
56
  outline: none;
57
- cursor: pointer;
57
+
58
+ &.default-pointer-styles {
59
+ cursor: pointer;
60
+ }
61
+ &.no-default-pointer-styles {
62
+ cursor: auto !important;
63
+ }
58
64
  }
59
65
 
60
66
  ${navAttribute.css({
61
- baseSelector: '.menu-item:not(.disabled):not(.selected)',
67
+ baseSelector: '.menu-item.default-pointer-styles:not(.disabled):not(.selected)',
62
68
  navValue: NavValue.Focused,
63
- })}, .menu-item:not(.disabled):not(.selected):hover {
69
+ })}, .menu-item.default-pointer-styles:not(.disabled):not(.selected):hover {
64
70
  background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
65
71
  outline: none;
66
72
  }
67
73
  ${navAttribute.css({
68
- baseSelector: '.menu-item:not(.disabled):not(.selected)',
74
+ baseSelector: '.menu-item.default-pointer-styles:not(.disabled):not(.selected)',
69
75
  navValue: NavValue.Active,
70
- })}, .menu-item:not(.disabled):not(.selected):active {
76
+ })}, .menu-item.default-pointer-styles:not(.disabled):not(.selected):active {
71
77
  background-color: ${viraFormCssVars['vira-form-selection-active-color'].value};
72
78
  outline: none;
73
79
  }
@@ -131,6 +137,8 @@ export const ViraMenu = defineViraElement()({
131
137
  class="menu-item ${classMap({
132
138
  disabled: !!item.disabled,
133
139
  selected,
140
+ 'default-pointer-styles': !item.disableDefaultPointerStyles,
141
+ 'no-default-pointer-styles': !!item.disableDefaultPointerStyles,
134
142
  })}"
135
143
  ${testId(viraMenuTestIds.item)}
136
144
  title=${ifDefined(item.titleText || undefined)}
@@ -147,6 +155,8 @@ export const ViraMenu = defineViraElement()({
147
155
  class="menu-item ${classMap({
148
156
  disabled: !!item.disabled,
149
157
  selected,
158
+ 'default-pointer-styles': !item.disableDefaultPointerStyles,
159
+ 'no-default-pointer-styles': !!item.disableDefaultPointerStyles,
150
160
  })}"
151
161
  ${testId(viraMenuTestIds.item)}
152
162
  title=${ifDefined(item.titleText || undefined)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vira",
3
- "version": "29.4.0",
3
+ "version": "29.5.1",
4
4
  "description": "A simple and highly versatile design system using element-vir.",
5
5
  "keywords": [
6
6
  "design",
@@ -65,7 +65,7 @@
65
65
  "typedoc": "^0.28.16",
66
66
  "typescript": "5.9.3",
67
67
  "vite": "^7.3.1",
68
- "vite-tsconfig-paths": "^6.1.0"
68
+ "vite-tsconfig-paths": "^6.1.1"
69
69
  },
70
70
  "peerDependencies": {
71
71
  "element-vir": "^26.9.1",