@vaadin/side-nav 25.0.0-alpha4 → 25.0.0-alpha6

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 (10) hide show
  1. package/package.json +8 -8
  2. package/src/styles/vaadin-side-nav-base-styles.js +4 -4
  3. package/src/styles/vaadin-side-nav-item-base-styles.js +9 -9
  4. package/src/styles/vaadin-side-nav-item-core-styles.js +0 -1
  5. package/src/styles/vaadin-side-nav-shared-base-styles.js +4 -4
  6. package/src/vaadin-side-nav-item.js +4 -1
  7. package/src/vaadin-side-nav.js +2 -1
  8. package/theme/lumo/vaadin-side-nav-item-styles.js +8 -10
  9. package/web-types.json +1 -1
  10. package/web-types.lit.json +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/side-nav",
3
- "version": "25.0.0-alpha4",
3
+ "version": "25.0.0-alpha6",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -37,15 +37,15 @@
37
37
  ],
38
38
  "dependencies": {
39
39
  "@open-wc/dedupe-mixin": "^1.3.0",
40
- "@vaadin/a11y-base": "25.0.0-alpha4",
41
- "@vaadin/component-base": "25.0.0-alpha4",
42
- "@vaadin/vaadin-lumo-styles": "25.0.0-alpha4",
43
- "@vaadin/vaadin-themable-mixin": "25.0.0-alpha4",
40
+ "@vaadin/a11y-base": "25.0.0-alpha6",
41
+ "@vaadin/component-base": "25.0.0-alpha6",
42
+ "@vaadin/vaadin-lumo-styles": "25.0.0-alpha6",
43
+ "@vaadin/vaadin-themable-mixin": "25.0.0-alpha6",
44
44
  "lit": "^3.0.0"
45
45
  },
46
46
  "devDependencies": {
47
- "@vaadin/chai-plugins": "25.0.0-alpha4",
48
- "@vaadin/test-runner-commands": "25.0.0-alpha4",
47
+ "@vaadin/chai-plugins": "25.0.0-alpha6",
48
+ "@vaadin/test-runner-commands": "25.0.0-alpha6",
49
49
  "@vaadin/testing-helpers": "^2.0.0",
50
50
  "lit": "^3.0.0",
51
51
  "sinon": "^18.0.0"
@@ -54,5 +54,5 @@
54
54
  "web-types.json",
55
55
  "web-types.lit.json"
56
56
  ],
57
- "gitHead": "ce4421f0daf26027b863b91787a474e4cc264344"
57
+ "gitHead": "cd1d084198d2b326c58d44bb39fa4845b71ce551"
58
58
  }
package/src/styles/vaadin-side-nav-base-styles.js CHANGED
@@ -19,13 +19,13 @@ const sideNav = css`
19
19
  display: flex;
20
20
  align-items: center;
21
21
  justify-content: start;
22
- gap: var(--vaadin-side-nav-item-gap, var(--_vaadin-gap-container-inline));
23
- padding: var(--vaadin-side-nav-item-padding, var(--_vaadin-padding-container));
22
+ gap: var(--vaadin-side-nav-item-gap, var(--vaadin-gap-container-inline));
23
+ padding: var(--vaadin-side-nav-item-padding, var(--vaadin-padding-container));
24
24
  font-size: var(--vaadin-side-nav-label-font-size, 0.875em);
25
25
  font-weight: var(--vaadin-side-nav-label-font-weight, 500);
26
- color: var(--vaadin-side-nav-label-color, inherit);
26
+ color: var(--vaadin-side-nav-label-color, var(--vaadin-color-subtle));
27
27
  line-height: var(--vaadin-side-nav-label-line-height, inherit);
28
- border-radius: var(--vaadin-side-nav-item-border-radius, var(--_vaadin-radius-m));
28
+ border-radius: var(--vaadin-side-nav-item-border-radius, var(--vaadin-radius-m));
29
29
  touch-action: manipulation;
30
30
  }
31
31
  }
package/src/styles/vaadin-side-nav-item-base-styles.js CHANGED
@@ -12,23 +12,23 @@ const sideNavItem = css`
12
12
  [part='content'] {
13
13
  display: flex;
14
14
  align-items: center;
15
- padding: var(--vaadin-side-nav-item-padding, var(--_vaadin-padding));
16
- gap: var(--vaadin-side-nav-item-gap, var(--_vaadin-gap-container-inline));
15
+ padding: var(--vaadin-side-nav-item-padding, var(--vaadin-padding-container));
16
+ gap: var(--vaadin-side-nav-item-gap, var(--vaadin-gap-container-inline));
17
17
  font-size: var(--vaadin-side-nav-item-font-size, 1em);
18
18
  font-weight: var(--vaadin-side-nav-item-font-weight, 500);
19
19
  line-height: var(--vaadin-side-nav-item-line-height, inherit);
20
- color: var(--vaadin-side-nav-item-color, inherit);
20
+ color: var(--vaadin-side-nav-item-color, var(--vaadin-color-subtle));
21
21
  background: var(--vaadin-side-nav-item-background, transparent);
22
22
  background-origin: border-box;
23
23
  border: var(--vaadin-side-nav-item-border-width, 0) solid var(--vaadin-side-nav-item-border-color, transparent);
24
- border-radius: var(--vaadin-side-nav-item-border-radius, var(--_vaadin-radius-m));
24
+ border-radius: var(--vaadin-side-nav-item-border-radius, var(--vaadin-radius-m));
25
25
  cursor: var(--vaadin-clickable-cursor);
26
26
  touch-action: manipulation;
27
27
  }
28
28
 
29
29
  :host([current]) [part='content'] {
30
- --vaadin-side-nav-item-background: var(--_vaadin-background-container-strong);
31
- --vaadin-side-nav-item-color: var(--_vaadin-color-strong);
30
+ --vaadin-side-nav-item-background: var(--vaadin-background-container);
31
+ --vaadin-side-nav-item-color: var(--vaadin-color);
32
32
  }
33
33
 
34
34
  :host([disabled]) {
@@ -36,7 +36,7 @@ const sideNavItem = css`
36
36
  }
37
37
 
38
38
  :host([disabled]) [part='content'] {
39
- --vaadin-side-nav-item-color: var(--_vaadin-color-subtle);
39
+ --vaadin-side-nav-item-color: var(--vaadin-color-disabled);
40
40
  }
41
41
 
42
42
  [part='link'] {
@@ -91,10 +91,10 @@ const sideNavItem = css`
91
91
  [part='content']::before {
92
92
  content: '';
93
93
  --_hierarchy-indent: calc(var(--_level, 0) * var(--vaadin-side-nav-child-indent, var(--vaadin-icon-size, 1lh)));
94
- --_icon-indent: calc(var(--_level, 0) * var(--vaadin-side-nav-item-gap, var(--_vaadin-gap-container-inline)));
94
+ --_icon-indent: calc(var(--_level, 0) * var(--vaadin-side-nav-item-gap, var(--vaadin-gap-container-inline)));
95
95
  width: calc(var(--_hierarchy-indent) + var(--_icon-indent));
96
96
  flex: none;
97
- margin-inline-start: calc(var(--vaadin-side-nav-item-gap, var(--_vaadin-gap-container-inline)) * -1);
97
+ margin-inline-start: calc(var(--vaadin-side-nav-item-gap, var(--vaadin-gap-container-inline)) * -1);
98
98
  }
99
99
 
100
100
  slot[name='children'] {
package/src/styles/vaadin-side-nav-item-core-styles.js CHANGED
@@ -35,7 +35,6 @@ export const sideNavItemStyles = css`
35
35
  }
36
36
 
37
37
  button {
38
- -webkit-appearance: none;
39
38
  appearance: none;
40
39
  flex: none;
41
40
  position: relative;
package/src/styles/vaadin-side-nav-shared-base-styles.js CHANGED
@@ -11,7 +11,7 @@ export const sharedStyles = css`
11
11
  :host {
12
12
  display: flex;
13
13
  flex-direction: column;
14
- gap: var(--vaadin-side-nav-items-gap, var(--_vaadin-gap-container-block));
14
+ gap: var(--vaadin-side-nav-items-gap, var(--vaadin-gap-container-block));
15
15
  cursor: default;
16
16
  -webkit-tap-highlight-color: transparent;
17
17
  }
@@ -35,8 +35,8 @@ export const sharedStyles = css`
35
35
  }
36
36
 
37
37
  [part='toggle-button'] {
38
- border-radius: var(--vaadin-side-nav-item-border-radius, var(--_vaadin-radius-s));
39
- color: var(--_vaadin-color);
38
+ border-radius: var(--vaadin-side-nav-item-border-radius, var(--vaadin-radius-s));
39
+ color: var(--vaadin-color-subtle);
40
40
  }
41
41
 
42
42
  [part='toggle-button']::before {
@@ -77,7 +77,7 @@ export const sharedStyles = css`
77
77
  list-style-type: none;
78
78
  display: flex;
79
79
  flex-direction: column;
80
- gap: var(--vaadin-side-nav-items-gap, var(--_vaadin-gap-container-block));
80
+ gap: var(--vaadin-side-nav-items-gap, var(--vaadin-gap-container-block));
81
81
  }
82
82
 
83
83
  :focus-visible {
package/src/vaadin-side-nav-item.js CHANGED
@@ -10,6 +10,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
10
10
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
11
11
  import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
12
12
  import { matchPaths } from '@vaadin/component-base/src/url-utils.js';
13
+ import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
13
14
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
14
15
  import { location } from './location.js';
15
16
  import { sideNavItemStyles } from './styles/vaadin-side-nav-item-core-styles.js';
@@ -80,7 +81,9 @@ import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
80
81
  * @mixes ElementMixin
81
82
  * @mixes SideNavChildrenMixin
82
83
  */
83
- class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement))))) {
84
+ class SideNavItem extends SideNavChildrenMixin(
85
+ DisabledMixin(ElementMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement))))),
86
+ ) {
84
87
  static get is() {
85
88
  return 'vaadin-side-nav-item';
86
89
  }
package/src/vaadin-side-nav.js CHANGED
@@ -11,6 +11,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
11
11
  import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
12
12
  import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
13
13
  import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
14
+ import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
14
15
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
15
16
  import { sideNavSlotStyles, sideNavStyles } from './styles/vaadin-side-nav-core-styles.js';
16
17
  import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
@@ -73,7 +74,7 @@ import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
73
74
  * @mixes SideNavChildrenMixin
74
75
  */
75
76
  class SideNav extends SideNavChildrenMixin(
76
- SlotStylesMixin(FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement))))),
77
+ SlotStylesMixin(FocusMixin(ElementMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement)))))),
77
78
  ) {
78
79
  static get is() {
79
80
  return 'vaadin-side-nav';
package/theme/lumo/vaadin-side-nav-item-styles.js CHANGED
@@ -72,17 +72,15 @@ export const sideNavItemStyles = css`
72
72
  transform: none;
73
73
  }
74
74
 
75
- @supports selector(:focus-visible) {
76
- [part='link'],
77
- [part='toggle-button'] {
78
- outline: none;
79
- }
75
+ [part='link'],
76
+ [part='toggle-button'] {
77
+ outline: none;
78
+ }
80
79
 
81
- [part='link']:focus-visible,
82
- [part='toggle-button']:focus-visible {
83
- border-radius: var(--lumo-border-radius-m);
84
- box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
85
- }
80
+ [part='link']:focus-visible,
81
+ [part='toggle-button']:focus-visible {
82
+ border-radius: var(--lumo-border-radius-m);
83
+ box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
86
84
  }
87
85
 
88
86
  [part='link']:active {
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/side-nav",
4
- "version": "25.0.0-alpha4",
4
+ "version": "25.0.0-alpha6",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/side-nav",
4
- "version": "25.0.0-alpha4",
4
+ "version": "25.0.0-alpha6",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {