@vaadin/side-nav 25.2.0-alpha8 → 25.2.0-beta1

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 (9) hide show
  1. package/custom-elements.json +28 -2
  2. package/package.json +11 -11
  3. package/src/vaadin-side-nav-children-mixin.js +5 -4
  4. package/src/vaadin-side-nav-item.d.ts +15 -0
  5. package/src/vaadin-side-nav-item.js +17 -8
  6. package/src/vaadin-side-nav.d.ts +11 -0
  7. package/src/vaadin-side-nav.js +11 -5
  8. package/web-types.json +24 -79
  9. package/web-types.lit.json +21 -21
package/custom-elements.json CHANGED
@@ -100,7 +100,7 @@
100
100
  "declarations": [
101
101
  {
102
102
  "kind": "class",
103
- "description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n Item 1\n <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n Child item 1\n </vaadin-side-nav-item>\n <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n Child item 2\n </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n Item\n <vaadin-badge slot=\"suffix\">Suffix</vaadin-badge>\n</vaadin-side-nav-item>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`content` | The element that wraps link and toggle button\n`children` | The element that wraps child items\n`link` | The clickable anchor used for navigation\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`disabled` | Set when the element is disabled.\n`expanded` | Set when the element is expanded.\n`has-children` | Set when the element has child items.\n`has-tooltip` | Set when the element has a slotted tooltip.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
103
+ "description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n Item 1\n <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n Child item 1\n </vaadin-side-nav-item>\n <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n Child item 2\n </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n Item\n <vaadin-badge slot=\"suffix\">Suffix</vaadin-badge>\n</vaadin-side-nav-item>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`content` | The element that wraps link and toggle button\n`children` | The element that wraps child items\n`link` | The clickable anchor used for navigation\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`disabled` | Set when the element is disabled.\n`expanded` | Set when the element is expanded.\n`has-children` | Set when the element has child items.\n`has-tooltip` | Set when the element has a slotted tooltip.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:-----------------------------------------|\n| `--vaadin-side-nav-item-background` |\n| `--vaadin-side-nav-item-border-color` |\n| `--vaadin-side-nav-item-border-radius` |\n| `--vaadin-side-nav-item-border-width` |\n| `--vaadin-side-nav-item-font-size` |\n| `--vaadin-side-nav-item-font-weight` |\n| `--vaadin-side-nav-item-gap` |\n| `--vaadin-side-nav-item-line-height` |\n| `--vaadin-side-nav-item-padding` |\n| `--vaadin-side-nav-item-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
104
104
  "name": "SideNavItem",
105
105
  "members": [
106
106
  {
@@ -114,6 +114,20 @@
114
114
  "attribute": "current",
115
115
  "readonly": true
116
116
  },
117
+ {
118
+ "kind": "field",
119
+ "name": "disabled",
120
+ "privacy": "public",
121
+ "type": {
122
+ "text": "boolean"
123
+ },
124
+ "description": "If true, the user cannot interact with this element.",
125
+ "attribute": "disabled",
126
+ "inheritedFrom": {
127
+ "name": "DisabledMixin",
128
+ "package": "@vaadin/a11y-base/src/disabled-mixin.js"
129
+ }
130
+ },
117
131
  {
118
132
  "kind": "field",
119
133
  "name": "expanded",
@@ -207,6 +221,18 @@
207
221
  "description": "Whether the item's path matches the current browser URL.\n\nA match occurs when both share the same base origin (like https://example.com),\nthe same path (like /path/to/page), and the browser URL contains at least\nall the query parameters with the same values from the item's path.\n\nSee [`matchNested`](#/elements/vaadin-side-nav-item#property-matchNested) for how to change the path matching behavior.\n\nThe state is updated when the item is added to the DOM or when the browser\nnavigates to a new page.",
208
222
  "fieldName": "current"
209
223
  },
224
+ {
225
+ "name": "disabled",
226
+ "type": {
227
+ "text": "boolean"
228
+ },
229
+ "description": "If true, the user cannot interact with this element.",
230
+ "fieldName": "disabled",
231
+ "inheritedFrom": {
232
+ "name": "DisabledMixin",
233
+ "package": "@vaadin/a11y-base/src/disabled-mixin.js"
234
+ }
235
+ },
210
236
  {
211
237
  "name": "expanded",
212
238
  "type": {
@@ -311,7 +337,7 @@
311
337
  "declarations": [
312
338
  {
313
339
  "kind": "class",
314
- "description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label` | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n <span slot=\"label\">Main menu</span>\n <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`label` | The label element\n`children` | The element that wraps child items\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`collapsed` | Set when the element is collapsed.\n`focus-ring` | Set when the label is focused using the keyboard.\n`focused` | Set when the label is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
340
+ "description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label` | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n <span slot=\"label\">Main menu</span>\n <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`label` | The label element\n`children` | The element that wraps child items\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`collapsed` | Set when the element is collapsed.\n`focus-ring` | Set when the label is focused using the keyboard.\n`focused` | Set when the label is focused.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:-----------------------------------------|\n| `--vaadin-side-nav-child-indent` |\n| `--vaadin-side-nav-items-gap` |\n| `--vaadin-side-nav-label-color` |\n| `--vaadin-side-nav-label-font-size` |\n| `--vaadin-side-nav-label-font-weight` |\n| `--vaadin-side-nav-label-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
315
341
  "name": "SideNav",
316
342
  "members": [
317
343
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/side-nav",
3
- "version": "25.2.0-alpha8",
3
+ "version": "25.2.0-beta1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -35,19 +35,19 @@
35
35
  ],
36
36
  "dependencies": {
37
37
  "@open-wc/dedupe-mixin": "^1.3.0",
38
- "@vaadin/a11y-base": "25.2.0-alpha8",
39
- "@vaadin/component-base": "25.2.0-alpha8",
40
- "@vaadin/vaadin-themable-mixin": "25.2.0-alpha8",
38
+ "@vaadin/a11y-base": "25.2.0-beta1",
39
+ "@vaadin/component-base": "25.2.0-beta1",
40
+ "@vaadin/vaadin-themable-mixin": "25.2.0-beta1",
41
41
  "lit": "^3.0.0"
42
42
  },
43
43
  "devDependencies": {
44
- "@vaadin/aura": "25.2.0-alpha8",
45
- "@vaadin/chai-plugins": "25.2.0-alpha8",
46
- "@vaadin/icon": "25.2.0-alpha8",
47
- "@vaadin/icons": "25.2.0-alpha8",
48
- "@vaadin/test-runner-commands": "25.2.0-alpha8",
44
+ "@vaadin/aura": "25.2.0-beta1",
45
+ "@vaadin/chai-plugins": "25.2.0-beta1",
46
+ "@vaadin/icon": "25.2.0-beta1",
47
+ "@vaadin/icons": "25.2.0-beta1",
48
+ "@vaadin/test-runner-commands": "25.2.0-beta1",
49
49
  "@vaadin/testing-helpers": "^2.0.0",
50
- "@vaadin/vaadin-lumo-styles": "25.2.0-alpha8",
50
+ "@vaadin/vaadin-lumo-styles": "25.2.0-beta1",
51
51
  "lit": "^3.0.0",
52
52
  "sinon": "^21.0.2"
53
53
  },
@@ -56,5 +56,5 @@
56
56
  "web-types.json",
57
57
  "web-types.lit.json"
58
58
  ],
59
- "gitHead": "2b82e20cdfc605b1187e9a24ae42869e1500ab68"
59
+ "gitHead": "471a23f60d1eb725f98a33f62cb9664d9c0a4163"
60
60
  }
package/src/vaadin-side-nav-children-mixin.js CHANGED
@@ -35,11 +35,8 @@ class ChildrenController extends SlotController {
35
35
  }
36
36
  }
37
37
 
38
- /**
39
- * @polymerMixin
40
- */
41
38
  export const SideNavChildrenMixin = (superClass) =>
42
- class SideNavChildrenMixin extends I18nMixin(DEFAULT_I18N, superClass) {
39
+ class SideNavChildrenMixin extends I18nMixin(superClass) {
43
40
  static get properties() {
44
41
  return {
45
42
  /**
@@ -53,6 +50,10 @@ export const SideNavChildrenMixin = (superClass) =>
53
50
  };
54
51
  }
55
52
 
53
+ static get defaultI18n() {
54
+ return DEFAULT_I18N;
55
+ }
56
+
56
57
  constructor() {
57
58
  super();
58
59
 
package/src/vaadin-side-nav-item.d.ts CHANGED
@@ -74,6 +74,21 @@ export type SideNavItemEventMap = HTMLElementEventMap & SideNavItemCustomEventMa
74
74
  * `has-children` | Set when the element has child items.
75
75
  * `has-tooltip` | Set when the element has a slotted tooltip.
76
76
  *
77
+ * The following custom CSS properties are available for styling:
78
+ *
79
+ * Custom CSS property |
80
+ * :-----------------------------------------|
81
+ * | `--vaadin-side-nav-item-background` |
82
+ * | `--vaadin-side-nav-item-border-color` |
83
+ * | `--vaadin-side-nav-item-border-radius` |
84
+ * | `--vaadin-side-nav-item-border-width` |
85
+ * | `--vaadin-side-nav-item-font-size` |
86
+ * | `--vaadin-side-nav-item-font-weight` |
87
+ * | `--vaadin-side-nav-item-gap` |
88
+ * | `--vaadin-side-nav-item-line-height` |
89
+ * | `--vaadin-side-nav-item-padding` |
90
+ * | `--vaadin-side-nav-item-text-color` |
91
+ *
77
92
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
78
93
  *
79
94
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
package/src/vaadin-side-nav-item.js CHANGED
@@ -72,16 +72,27 @@ import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
72
72
  * `has-children` | Set when the element has child items.
73
73
  * `has-tooltip` | Set when the element has a slotted tooltip.
74
74
  *
75
+ * The following custom CSS properties are available for styling:
76
+ *
77
+ * Custom CSS property |
78
+ * :-----------------------------------------|
79
+ * | `--vaadin-side-nav-item-background` |
80
+ * | `--vaadin-side-nav-item-border-color` |
81
+ * | `--vaadin-side-nav-item-border-radius` |
82
+ * | `--vaadin-side-nav-item-border-width` |
83
+ * | `--vaadin-side-nav-item-font-size` |
84
+ * | `--vaadin-side-nav-item-font-weight` |
85
+ * | `--vaadin-side-nav-item-gap` |
86
+ * | `--vaadin-side-nav-item-line-height` |
87
+ * | `--vaadin-side-nav-item-padding` |
88
+ * | `--vaadin-side-nav-item-text-color` |
89
+ *
75
90
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
76
91
  *
77
92
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
78
93
  *
79
94
  * @customElement vaadin-side-nav-item
80
95
  * @extends HTMLElement
81
- * @mixes ThemableMixin
82
- * @mixes DisabledMixin
83
- * @mixes ElementMixin
84
- * @mixes SideNavChildrenMixin
85
96
  */
86
97
  class SideNavItem extends SideNavChildrenMixin(
87
98
  DisabledMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
@@ -111,7 +122,6 @@ class SideNavItem extends SideNavChildrenMixin(
111
122
 
112
123
  /**
113
124
  * Whether to show the child items or not
114
- *
115
125
  */
116
126
  expanded: {
117
127
  type: Boolean,
@@ -148,7 +158,6 @@ class SideNavItem extends SideNavChildrenMixin(
148
158
  *
149
159
  * The state is updated when the item is added to the DOM or when the browser
150
160
  * navigates to a new page.
151
- *
152
161
  */
153
162
  current: {
154
163
  type: Boolean,
@@ -342,15 +351,15 @@ class SideNavItem extends SideNavChildrenMixin(
342
351
  /** @private */
343
352
  __expandParentItems() {
344
353
  const sideNav = this.closest('vaadin-side-nav');
345
- if (sideNav && sideNav.noAutoExpand) {
354
+ if (sideNav?.noAutoExpand) {
346
355
  return;
347
356
  }
348
357
 
349
358
  const parentItem = this.__getParentItem();
350
359
  if (parentItem) {
351
360
  parentItem.__expandParentItems();
361
+ parentItem.expanded = true;
352
362
  }
353
- this.expanded = true;
354
363
  }
355
364
 
356
365
  /** @private */
package/src/vaadin-side-nav.d.ts CHANGED
@@ -78,6 +78,17 @@ export type NavigateEvent = {
78
78
  * `focus-ring` | Set when the label is focused using the keyboard.
79
79
  * `focused` | Set when the label is focused.
80
80
  *
81
+ * The following custom CSS properties are available for styling:
82
+ *
83
+ * Custom CSS property |
84
+ * :-----------------------------------------|
85
+ * | `--vaadin-side-nav-child-indent` |
86
+ * | `--vaadin-side-nav-items-gap` |
87
+ * | `--vaadin-side-nav-label-color` |
88
+ * | `--vaadin-side-nav-label-font-size` |
89
+ * | `--vaadin-side-nav-label-font-weight` |
90
+ * | `--vaadin-side-nav-label-line-height` |
91
+ *
81
92
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
82
93
  *
83
94
  * @fires {CustomEvent} collapsed-changed - Fired when the `collapsed` property changes.
package/src/vaadin-side-nav.js CHANGED
@@ -63,15 +63,23 @@ import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
63
63
  * `focus-ring` | Set when the label is focused using the keyboard.
64
64
  * `focused` | Set when the label is focused.
65
65
  *
66
+ * The following custom CSS properties are available for styling:
67
+ *
68
+ * Custom CSS property |
69
+ * :-----------------------------------------|
70
+ * | `--vaadin-side-nav-child-indent` |
71
+ * | `--vaadin-side-nav-items-gap` |
72
+ * | `--vaadin-side-nav-label-color` |
73
+ * | `--vaadin-side-nav-label-font-size` |
74
+ * | `--vaadin-side-nav-label-font-weight` |
75
+ * | `--vaadin-side-nav-label-line-height` |
76
+ *
66
77
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
67
78
  *
68
79
  * @fires {CustomEvent} collapsed-changed - Fired when the `collapsed` property changes.
69
80
  *
70
81
  * @customElement vaadin-side-nav
71
82
  * @extends HTMLElement
72
- * @mixes ThemableMixin
73
- * @mixes ElementMixin
74
- * @mixes SideNavChildrenMixin
75
83
  */
76
84
  class SideNav extends SideNavChildrenMixin(
77
85
  SlotStylesMixin(FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))))),
@@ -88,7 +96,6 @@ class SideNav extends SideNavChildrenMixin(
88
96
  return {
89
97
  /**
90
98
  * Whether the side nav is collapsible. When enabled, the toggle icon is shown.
91
- *
92
99
  */
93
100
  collapsible: {
94
101
  type: Boolean,
@@ -98,7 +105,6 @@ class SideNav extends SideNavChildrenMixin(
98
105
 
99
106
  /**
100
107
  * Whether the side nav is collapsed. When collapsed, the items are hidden.
101
- *
102
108
  */
103
109
  collapsed: {
104
110
  type: Boolean,
package/web-types.json CHANGED
@@ -1,23 +1,21 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/side-nav",
4
- "version": "25.2.0-alpha8",
4
+ "version": "25.2.0-beta1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-side-nav-item",
11
- "description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n Item 1\n <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n Child item 1\n </vaadin-side-nav-item>\n <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n Child item 2\n </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n Item\n <vaadin-badge slot=\"suffix\">Suffix</vaadin-badge>\n</vaadin-side-nav-item>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`content` | The element that wraps link and toggle button\n`children` | The element that wraps child items\n`link` | The clickable anchor used for navigation\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`disabled` | Set when the element is disabled.\n`expanded` | Set when the element is expanded.\n`has-children` | Set when the element has child items.\n`has-tooltip` | Set when the element has a slotted tooltip.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
11
+ "description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n Item 1\n <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n Child item 1\n </vaadin-side-nav-item>\n <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n Child item 2\n </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n Item\n <vaadin-badge slot=\"suffix\">Suffix</vaadin-badge>\n</vaadin-side-nav-item>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`content` | The element that wraps link and toggle button\n`children` | The element that wraps child items\n`link` | The clickable anchor used for navigation\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`disabled` | Set when the element is disabled.\n`expanded` | Set when the element is expanded.\n`has-children` | Set when the element has child items.\n`has-tooltip` | Set when the element has a slotted tooltip.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:-----------------------------------------|\n| `--vaadin-side-nav-item-background` |\n| `--vaadin-side-nav-item-border-color` |\n| `--vaadin-side-nav-item-border-radius` |\n| `--vaadin-side-nav-item-border-width` |\n| `--vaadin-side-nav-item-font-size` |\n| `--vaadin-side-nav-item-font-weight` |\n| `--vaadin-side-nav-item-gap` |\n| `--vaadin-side-nav-item-line-height` |\n| `--vaadin-side-nav-item-padding` |\n| `--vaadin-side-nav-item-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "disabled",
15
15
  "description": "If true, the user cannot interact with this element.",
16
16
  "value": {
17
17
  "type": [
18
- "boolean",
19
- "null",
20
- "undefined"
18
+ "boolean"
21
19
  ]
22
20
  }
23
21
  },
@@ -26,9 +24,7 @@
26
24
  "description": "Whether to show the child items or not",
27
25
  "value": {
28
26
  "type": [
29
- "boolean",
30
- "null",
31
- "undefined"
27
+ "boolean"
32
28
  ]
33
29
  }
34
30
  },
@@ -37,9 +33,7 @@
37
33
  "description": "Whether to also match nested paths / routes. `false` by default.\n\nWhen enabled, an item with the path `/path` is considered current when\nthe browser URL is `/path`, `/path/child`, `/path/child/grandchild`,\netc.\n\nNote that this only affects matching of the URLs path, not the base\norigin or query parameters.",
38
34
  "value": {
39
35
  "type": [
40
- "boolean",
41
- "null",
42
- "undefined"
36
+ "boolean"
43
37
  ]
44
38
  }
45
39
  },
@@ -48,9 +42,7 @@
48
42
  "description": "The path to navigate to",
49
43
  "value": {
50
44
  "type": [
51
- "string",
52
- "null",
53
- "undefined"
45
+ "string"
54
46
  ]
55
47
  }
56
48
  },
@@ -59,9 +51,7 @@
59
51
  "description": "Whether to exclude the item from client-side routing. When enabled,\nthis causes the item to behave like a regular anchor, causing a full\npage reload. This only works with supported routers, such as the one\nprovided in Vaadin apps, or when using the side nav `onNavigate` hook.",
60
52
  "value": {
61
53
  "type": [
62
- "boolean",
63
- "null",
64
- "undefined"
54
+ "boolean"
65
55
  ]
66
56
  }
67
57
  },
@@ -70,9 +60,7 @@
70
60
  "description": "The target of the link. Works only when `path` is set.",
71
61
  "value": {
72
62
  "type": [
73
- "string",
74
- "null",
75
- "undefined"
63
+ "string"
76
64
  ]
77
65
  }
78
66
  },
@@ -95,9 +83,7 @@
95
83
  "description": "If true, the user cannot interact with this element.",
96
84
  "value": {
97
85
  "type": [
98
- "boolean",
99
- "null",
100
- "undefined"
86
+ "boolean"
101
87
  ]
102
88
  }
103
89
  },
@@ -106,9 +92,7 @@
106
92
  "description": "Whether to show the child items or not",
107
93
  "value": {
108
94
  "type": [
109
- "boolean",
110
- "null",
111
- "undefined"
95
+ "boolean"
112
96
  ]
113
97
  }
114
98
  },
@@ -117,7 +101,7 @@
117
101
  "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```js\n{\n toggle: 'Toggle child items'\n}\n```",
118
102
  "value": {
119
103
  "type": [
120
- "?"
104
+ "Object"
121
105
  ]
122
106
  }
123
107
  },
@@ -126,9 +110,7 @@
126
110
  "description": "Whether to also match nested paths / routes. `false` by default.\n\nWhen enabled, an item with the path `/path` is considered current when\nthe browser URL is `/path`, `/path/child`, `/path/child/grandchild`,\netc.\n\nNote that this only affects matching of the URLs path, not the base\norigin or query parameters.",
127
111
  "value": {
128
112
  "type": [
129
- "boolean",
130
- "null",
131
- "undefined"
113
+ "boolean"
132
114
  ]
133
115
  }
134
116
  },
@@ -137,9 +119,7 @@
137
119
  "description": "The path to navigate to",
138
120
  "value": {
139
121
  "type": [
140
- "string",
141
- "null",
142
- "undefined"
122
+ "string"
143
123
  ]
144
124
  }
145
125
  },
@@ -148,7 +128,7 @@
148
128
  "description": "The list of alternative paths matching this item",
149
129
  "value": {
150
130
  "type": [
151
- "Array.<string>"
131
+ "Array<string>"
152
132
  ]
153
133
  }
154
134
  },
@@ -157,9 +137,7 @@
157
137
  "description": "Whether to exclude the item from client-side routing. When enabled,\nthis causes the item to behave like a regular anchor, causing a full\npage reload. This only works with supported routers, such as the one\nprovided in Vaadin apps, or when using the side nav `onNavigate` hook.",
158
138
  "value": {
159
139
  "type": [
160
- "boolean",
161
- "null",
162
- "undefined"
140
+ "boolean"
163
141
  ]
164
142
  }
165
143
  },
@@ -168,9 +146,7 @@
168
146
  "description": "The target of the link. Works only when `path` is set.",
169
147
  "value": {
170
148
  "type": [
171
- "string",
172
- "null",
173
- "undefined"
149
+ "string"
174
150
  ]
175
151
  }
176
152
  }
@@ -185,16 +161,14 @@
185
161
  },
186
162
  {
187
163
  "name": "vaadin-side-nav",
188
- "description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label` | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n <span slot=\"label\">Main menu</span>\n <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`label` | The label element\n`children` | The element that wraps child items\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`collapsed` | Set when the element is collapsed.\n`focus-ring` | Set when the label is focused using the keyboard.\n`focused` | Set when the label is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
164
+ "description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label` | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n <span slot=\"label\">Main menu</span>\n <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`label` | The label element\n`children` | The element that wraps child items\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`collapsed` | Set when the element is collapsed.\n`focus-ring` | Set when the label is focused using the keyboard.\n`focused` | Set when the label is focused.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:-----------------------------------------|\n| `--vaadin-side-nav-child-indent` |\n| `--vaadin-side-nav-items-gap` |\n| `--vaadin-side-nav-label-color` |\n| `--vaadin-side-nav-label-font-size` |\n| `--vaadin-side-nav-label-font-weight` |\n| `--vaadin-side-nav-label-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
189
165
  "attributes": [
190
166
  {
191
167
  "name": "collapsed",
192
168
  "description": "Whether the side nav is collapsed. When collapsed, the items are hidden.",
193
169
  "value": {
194
170
  "type": [
195
- "boolean",
196
- "null",
197
- "undefined"
171
+ "boolean"
198
172
  ]
199
173
  }
200
174
  },
@@ -203,18 +177,7 @@
203
177
  "description": "Whether the side nav is collapsible. When enabled, the toggle icon is shown.",
204
178
  "value": {
205
179
  "type": [
206
- "boolean",
207
- "null",
208
- "undefined"
209
- ]
210
- }
211
- },
212
- {
213
- "name": "location",
214
- "description": "A change to this property triggers an update of the highlighted item in the side navigation. While it typically\ncorresponds to the browser's URL, the specific value assigned to the property is irrelevant. The component has\nits own internal logic for determining which item is highlighted.\n\nThe main use case for this property is when the side navigation is used with a client-side router. In this case,\nthe component needs to be informed about route changes so it can update the highlighted item.",
215
- "value": {
216
- "type": [
217
- "any"
180
+ "boolean"
218
181
  ]
219
182
  }
220
183
  },
@@ -223,19 +186,7 @@
223
186
  "description": "Whether to expand parent items of the nested matching item after initial\nrendering or navigation. By default, all the parent items are expanded.\nSet to true to disable this behavior.",
224
187
  "value": {
225
188
  "type": [
226
- "boolean",
227
- "null",
228
- "undefined"
229
- ]
230
- }
231
- },
232
- {
233
- "name": "on-navigate",
234
- "description": "Callback function for router integration.\n\nWhen a side nav item link is clicked, this function is called and the default click action is cancelled.\nThis delegates the responsibility of navigation to the function's logic.\n\nThe click event action is not cancelled in the following cases:\n- The click event has a modifier (e.g. `metaKey`, `shiftKey`)\n- The click event is on an external link\n- The click event is on a link with `target=\"_blank\"`\n- The function explicitly returns `false`\n\nThe function receives an object with the properties of the clicked side-nav item:\n- `path`: The path of the navigation item.\n- `target`: The target of the navigation item.\n- `current`: A boolean indicating whether the navigation item is currently selected.\n- `expanded`: A boolean indicating whether the navigation item is expanded.\n- `pathAliases`: An array of path aliases for the navigation item.\n- `originalEvent`: The original DOM event that triggered the navigation.\n\nAlso see the `location` property for updating the highlighted navigation item on route change.",
235
- "value": {
236
- "type": [
237
- "function Object: boolean",
238
- "undefined"
189
+ "boolean"
239
190
  ]
240
191
  }
241
192
  },
@@ -258,9 +209,7 @@
258
209
  "description": "Whether the side nav is collapsed. When collapsed, the items are hidden.",
259
210
  "value": {
260
211
  "type": [
261
- "boolean",
262
- "null",
263
- "undefined"
212
+ "boolean"
264
213
  ]
265
214
  }
266
215
  },
@@ -269,9 +218,7 @@
269
218
  "description": "Whether the side nav is collapsible. When enabled, the toggle icon is shown.",
270
219
  "value": {
271
220
  "type": [
272
- "boolean",
273
- "null",
274
- "undefined"
221
+ "boolean"
275
222
  ]
276
223
  }
277
224
  },
@@ -280,7 +227,7 @@
280
227
  "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```js\n{\n toggle: 'Toggle child items'\n}\n```",
281
228
  "value": {
282
229
  "type": [
283
- "?"
230
+ "Object"
284
231
  ]
285
232
  }
286
233
  },
@@ -298,9 +245,7 @@
298
245
  "description": "Whether to expand parent items of the nested matching item after initial\nrendering or navigation. By default, all the parent items are expanded.\nSet to true to disable this behavior.",
299
246
  "value": {
300
247
  "type": [
301
- "boolean",
302
- "null",
303
- "undefined"
248
+ "boolean"
304
249
  ]
305
250
  }
306
251
  },
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.2.0-alpha8",
4
+ "version": "25.2.0-beta1",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-side-nav-item",
19
- "description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n Item 1\n <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n Child item 1\n </vaadin-side-nav-item>\n <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n Child item 2\n </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n Item\n <vaadin-badge slot=\"suffix\">Suffix</vaadin-badge>\n</vaadin-side-nav-item>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`content` | The element that wraps link and toggle button\n`children` | The element that wraps child items\n`link` | The clickable anchor used for navigation\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`disabled` | Set when the element is disabled.\n`expanded` | Set when the element is expanded.\n`has-children` | Set when the element has child items.\n`has-tooltip` | Set when the element has a slotted tooltip.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
19
+ "description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n Item 1\n <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n Child item 1\n </vaadin-side-nav-item>\n <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n Child item 2\n </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n Item\n <vaadin-badge slot=\"suffix\">Suffix</vaadin-badge>\n</vaadin-side-nav-item>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`content` | The element that wraps link and toggle button\n`children` | The element that wraps child items\n`link` | The clickable anchor used for navigation\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`disabled` | Set when the element is disabled.\n`expanded` | Set when the element is expanded.\n`has-children` | Set when the element has child items.\n`has-tooltip` | Set when the element has a slotted tooltip.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:-----------------------------------------|\n| `--vaadin-side-nav-item-background` |\n| `--vaadin-side-nav-item-border-color` |\n| `--vaadin-side-nav-item-border-radius` |\n| `--vaadin-side-nav-item-border-width` |\n| `--vaadin-side-nav-item-font-size` |\n| `--vaadin-side-nav-item-font-weight` |\n| `--vaadin-side-nav-item-gap` |\n| `--vaadin-side-nav-item-line-height` |\n| `--vaadin-side-nav-item-padding` |\n| `--vaadin-side-nav-item-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
@@ -34,36 +34,36 @@
34
34
  }
35
35
  },
36
36
  {
37
- "name": "?matchNested",
38
- "description": "Whether to also match nested paths / routes. `false` by default.\n\nWhen enabled, an item with the path `/path` is considered current when\nthe browser URL is `/path`, `/path/child`, `/path/child/grandchild`,\netc.\n\nNote that this only affects matching of the URLs path, not the base\norigin or query parameters.",
37
+ "name": ".i18n",
38
+ "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```js\n{\n toggle: 'Toggle child items'\n}\n```",
39
39
  "value": {
40
40
  "kind": "expression"
41
41
  }
42
42
  },
43
43
  {
44
- "name": "?routerIgnore",
45
- "description": "Whether to exclude the item from client-side routing. When enabled,\nthis causes the item to behave like a regular anchor, causing a full\npage reload. This only works with supported routers, such as the one\nprovided in Vaadin apps, or when using the side nav `onNavigate` hook.",
44
+ "name": "?matchNested",
45
+ "description": "Whether to also match nested paths / routes. `false` by default.\n\nWhen enabled, an item with the path `/path` is considered current when\nthe browser URL is `/path`, `/path/child`, `/path/child/grandchild`,\netc.\n\nNote that this only affects matching of the URLs path, not the base\norigin or query parameters.",
46
46
  "value": {
47
47
  "kind": "expression"
48
48
  }
49
49
  },
50
50
  {
51
- "name": ".i18n",
52
- "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```js\n{\n toggle: 'Toggle child items'\n}\n```",
51
+ "name": ".path",
52
+ "description": "The path to navigate to",
53
53
  "value": {
54
54
  "kind": "expression"
55
55
  }
56
56
  },
57
57
  {
58
- "name": ".path",
59
- "description": "The path to navigate to",
58
+ "name": ".pathAliases",
59
+ "description": "The list of alternative paths matching this item",
60
60
  "value": {
61
61
  "kind": "expression"
62
62
  }
63
63
  },
64
64
  {
65
- "name": ".pathAliases",
66
- "description": "The list of alternative paths matching this item",
65
+ "name": "?routerIgnore",
66
+ "description": "Whether to exclude the item from client-side routing. When enabled,\nthis causes the item to behave like a regular anchor, causing a full\npage reload. This only works with supported routers, such as the one\nprovided in Vaadin apps, or when using the side nav `onNavigate` hook.",
67
67
  "value": {
68
68
  "kind": "expression"
69
69
  }
@@ -86,7 +86,7 @@
86
86
  },
87
87
  {
88
88
  "name": "vaadin-side-nav",
89
- "description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label` | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n <span slot=\"label\">Main menu</span>\n <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`label` | The label element\n`children` | The element that wraps child items\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`collapsed` | Set when the element is collapsed.\n`focus-ring` | Set when the label is focused using the keyboard.\n`focused` | Set when the label is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
89
+ "description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label` | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n <span slot=\"label\">Main menu</span>\n <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`label` | The label element\n`children` | The element that wraps child items\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`collapsed` | Set when the element is collapsed.\n`focus-ring` | Set when the label is focused using the keyboard.\n`focused` | Set when the label is focused.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:-----------------------------------------|\n| `--vaadin-side-nav-child-indent` |\n| `--vaadin-side-nav-items-gap` |\n| `--vaadin-side-nav-label-color` |\n| `--vaadin-side-nav-label-font-size` |\n| `--vaadin-side-nav-label-font-weight` |\n| `--vaadin-side-nav-label-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
90
90
  "extension": true,
91
91
  "attributes": [
92
92
  {
@@ -104,29 +104,29 @@
104
104
  }
105
105
  },
106
106
  {
107
- "name": "?noAutoExpand",
108
- "description": "Whether to expand parent items of the nested matching item after initial\nrendering or navigation. By default, all the parent items are expanded.\nSet to true to disable this behavior.",
107
+ "name": ".i18n",
108
+ "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```js\n{\n toggle: 'Toggle child items'\n}\n```",
109
109
  "value": {
110
110
  "kind": "expression"
111
111
  }
112
112
  },
113
113
  {
114
- "name": "?onNavigate",
115
- "description": "Callback function for router integration.\n\nWhen a side nav item link is clicked, this function is called and the default click action is cancelled.\nThis delegates the responsibility of navigation to the function's logic.\n\nThe click event action is not cancelled in the following cases:\n- The click event has a modifier (e.g. `metaKey`, `shiftKey`)\n- The click event is on an external link\n- The click event is on a link with `target=\"_blank\"`\n- The function explicitly returns `false`\n\nThe function receives an object with the properties of the clicked side-nav item:\n- `path`: The path of the navigation item.\n- `target`: The target of the navigation item.\n- `current`: A boolean indicating whether the navigation item is currently selected.\n- `expanded`: A boolean indicating whether the navigation item is expanded.\n- `pathAliases`: An array of path aliases for the navigation item.\n- `originalEvent`: The original DOM event that triggered the navigation.\n\nAlso see the `location` property for updating the highlighted navigation item on route change.",
114
+ "name": ".location",
115
+ "description": "A change to this property triggers an update of the highlighted item in the side navigation. While it typically\ncorresponds to the browser's URL, the specific value assigned to the property is irrelevant. The component has\nits own internal logic for determining which item is highlighted.\n\nThe main use case for this property is when the side navigation is used with a client-side router. In this case,\nthe component needs to be informed about route changes so it can update the highlighted item.",
116
116
  "value": {
117
117
  "kind": "expression"
118
118
  }
119
119
  },
120
120
  {
121
- "name": ".i18n",
122
- "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```js\n{\n toggle: 'Toggle child items'\n}\n```",
121
+ "name": "?noAutoExpand",
122
+ "description": "Whether to expand parent items of the nested matching item after initial\nrendering or navigation. By default, all the parent items are expanded.\nSet to true to disable this behavior.",
123
123
  "value": {
124
124
  "kind": "expression"
125
125
  }
126
126
  },
127
127
  {
128
- "name": ".location",
129
- "description": "A change to this property triggers an update of the highlighted item in the side navigation. While it typically\ncorresponds to the browser's URL, the specific value assigned to the property is irrelevant. The component has\nits own internal logic for determining which item is highlighted.\n\nThe main use case for this property is when the side navigation is used with a client-side router. In this case,\nthe component needs to be informed about route changes so it can update the highlighted item.",
128
+ "name": ".onNavigate",
129
+ "description": "Callback function for router integration.\n\nWhen a side nav item link is clicked, this function is called and the default click action is cancelled.\nThis delegates the responsibility of navigation to the function's logic.\n\nThe click event action is not cancelled in the following cases:\n- The click event has a modifier (e.g. `metaKey`, `shiftKey`)\n- The click event is on an external link\n- The click event is on a link with `target=\"_blank\"`\n- The function explicitly returns `false`\n\nThe function receives an object with the properties of the clicked side-nav item:\n- `path`: The path of the navigation item.\n- `target`: The target of the navigation item.\n- `current`: A boolean indicating whether the navigation item is currently selected.\n- `expanded`: A boolean indicating whether the navigation item is expanded.\n- `pathAliases`: An array of path aliases for the navigation item.\n- `originalEvent`: The original DOM event that triggered the navigation.\n\nAlso see the `location` property for updating the highlighted navigation item on route change.",
130
130
  "value": {
131
131
  "kind": "expression"
132
132
  }