vira 29.3.0 → 29.3.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.
Files changed (4) hide show
  1. package/dist/elements/pop-up/vira-menu.element.js +16 -5
  2. package/dist/elements/vira-link.element.d.ts +3 -1
  3. package/dist/elements/vira-link.element.js +13 -8
  4. package/package.json +8 -8
package/dist/elements/pop-up/vira-menu.element.js CHANGED
@@ -60,13 +60,17 @@ export const ViraMenu = defineViraElement()({
60
60
  ${navAttribute.css({
61
61
  baseSelector: '.menu-item:not(.disabled):not(.selected)',
62
62
  navValue: NavValue.Focused,
63
- })}, ${navAttribute.css({
64
- baseSelector: '.menu-item:not(.disabled):not(.selected)',
65
- navValue: NavValue.Active,
66
63
  })}, .menu-item:not(.disabled):not(.selected):hover {
67
64
  background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
68
65
  outline: none;
69
66
  }
67
+ ${navAttribute.css({
68
+ baseSelector: '.menu-item:not(.disabled):not(.selected)',
69
+ navValue: NavValue.Active,
70
+ })}, .menu-item:not(.disabled):not(.selected):active {
71
+ background-color: ${viraFormCssVars['vira-form-selection-active-color'].value};
72
+ outline: none;
73
+ }
70
74
 
71
75
  ${hostClasses['vira-menu-multiselect'].selector} {
72
76
  &
@@ -74,12 +78,18 @@ export const ViraMenu = defineViraElement()({
74
78
  baseSelector: '.menu-item:not(.disabled)',
75
79
  navValue: NavValue.Focused,
76
80
  })},
81
+ .menu-item:not(.disabled):hover {
82
+ background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
83
+ outline: none;
84
+ }
85
+
86
+ &
77
87
  ${navAttribute.css({
78
88
  baseSelector: '.menu-item:not(.disabled)',
79
89
  navValue: NavValue.Active,
80
90
  })},
81
- .menu-item:not(.disabled):hover {
82
- background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
91
+ .menu-item:not(.disabled):active {
92
+ background-color: ${viraFormCssVars['vira-form-selection-active-color'].value};
83
93
  outline: none;
84
94
  }
85
95
  }
@@ -116,6 +126,7 @@ export const ViraMenu = defineViraElement()({
116
126
  return html `
117
127
  <${ViraLink.assign({
118
128
  route: item.route,
129
+ disableLinkStyles: true,
119
130
  })}
120
131
  class="menu-item ${classMap({
121
132
  disabled: !!item.disabled,
package/dist/elements/vira-link.element.d.ts CHANGED
@@ -70,4 +70,6 @@ export declare const ViraLink: import("element-vir").DeclarativeElementDefinitio
70
70
  attributePassthrough: Readonly<PartialWithUndefined<{
71
71
  a: AttributeValues;
72
72
  }>>;
73
- }>, {}, {}, "vira-link-", "vira-link-", readonly [], readonly []>;
73
+ /** If set to true, internal link styles are not applied. */
74
+ disableLinkStyles: boolean;
75
+ }>, {}, {}, "vira-link-link-styles", "vira-link-", readonly [], readonly []>;
package/dist/elements/vira-link.element.js CHANGED
@@ -11,7 +11,10 @@ import { defineViraElement } from './define-vira-element.js';
11
11
  */
12
12
  export const ViraLink = defineViraElement()({
13
13
  tagName: 'vira-link',
14
- styles: css `
14
+ hostClasses: {
15
+ 'vira-link-link-styles': ({ inputs }) => !inputs.disableLinkStyles,
16
+ },
17
+ styles: ({ hostClasses }) => css `
15
18
  :host {
16
19
  display: inline;
17
20
  text-decoration: underline;
@@ -27,14 +30,16 @@ export const ViraLink = defineViraElement()({
27
30
  white-space: inherit;
28
31
  }
29
32
 
30
- :host(:hover) a,
31
- a:hover {
32
- color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
33
- }
33
+ ${hostClasses['vira-link-link-styles'].selector} {
34
+ &:hover a,
35
+ & a:hover {
36
+ color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
37
+ }
34
38
 
35
- :host(:active) a,
36
- a:active {
37
- color: ${viraFormCssVars['vira-form-accent-primary-active-color'].value};
39
+ &:active a,
40
+ & a:active {
41
+ color: ${viraFormCssVars['vira-form-accent-primary-active-color'].value};
42
+ }
38
43
  }
39
44
  `,
40
45
  render({ inputs }) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vira",
3
- "version": "29.3.0",
3
+ "version": "29.3.1",
4
4
  "description": "A simple and highly versatile design system using element-vir.",
5
5
  "keywords": [
6
6
  "design",
@@ -38,9 +38,9 @@
38
38
  "test:docs": "virmator docs check"
39
39
  },
40
40
  "dependencies": {
41
- "@augment-vir/assert": "^31.59.0",
42
- "@augment-vir/common": "^31.59.0",
43
- "@augment-vir/web": "^31.59.0",
41
+ "@augment-vir/assert": "^31.59.2",
42
+ "@augment-vir/common": "^31.59.2",
43
+ "@augment-vir/web": "^31.59.2",
44
44
  "colorjs.io": "^0.6.1",
45
45
  "date-vir": "^8.1.0",
46
46
  "device-navigation": "^4.5.5",
@@ -52,20 +52,20 @@
52
52
  "typed-event-target": "^4.1.0"
53
53
  },
54
54
  "devDependencies": {
55
- "@augment-vir/test": "^31.59.0",
55
+ "@augment-vir/test": "^31.59.2",
56
56
  "@web/dev-server-esbuild": "^1.0.4",
57
57
  "@web/test-runner": "^0.20.2",
58
58
  "@web/test-runner-commands": "^0.9.0",
59
59
  "@web/test-runner-playwright": "^0.11.1",
60
60
  "@web/test-runner-visual-regression": "^0.10.0",
61
- "esbuild": "^0.27.2",
61
+ "esbuild": "^0.27.3",
62
62
  "istanbul-smart-text-reporter": "^1.1.5",
63
63
  "markdown-code-example-inserter": "^3.0.3",
64
- "theme-vir": "^28.18.7",
64
+ "theme-vir": "^28.20.0",
65
65
  "typedoc": "^0.28.16",
66
66
  "typescript": "5.9.3",
67
67
  "vite": "^7.3.1",
68
- "vite-tsconfig-paths": "^6.0.5"
68
+ "vite-tsconfig-paths": "^6.1.0"
69
69
  },
70
70
  "peerDependencies": {
71
71
  "element-vir": "^26.9.1",