@vaadin/side-nav 25.2.0-alpha11 → 25.2.0-alpha12

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 (8) hide show
  1. package/custom-elements.json +2 -2
  2. package/package.json +11 -11
  3. package/src/vaadin-side-nav-item.d.ts +15 -0
  4. package/src/vaadin-side-nav-item.js +15 -0
  5. package/src/vaadin-side-nav.d.ts +11 -0
  6. package/src/vaadin-side-nav.js +11 -0
  7. package/web-types.json +3 -3
  8. package/web-types.lit.json +3 -3
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
  {
@@ -337,7 +337,7 @@
337
337
  "declarations": [
338
338
  {
339
339
  "kind": "class",
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\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.",
341
341
  "name": "SideNav",
342
342
  "members": [
343
343
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/side-nav",
3
- "version": "25.2.0-alpha11",
3
+ "version": "25.2.0-alpha12",
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-alpha11",
39
- "@vaadin/component-base": "25.2.0-alpha11",
40
- "@vaadin/vaadin-themable-mixin": "25.2.0-alpha11",
38
+ "@vaadin/a11y-base": "25.2.0-alpha12",
39
+ "@vaadin/component-base": "25.2.0-alpha12",
40
+ "@vaadin/vaadin-themable-mixin": "25.2.0-alpha12",
41
41
  "lit": "^3.0.0"
42
42
  },
43
43
  "devDependencies": {
44
- "@vaadin/aura": "25.2.0-alpha11",
45
- "@vaadin/chai-plugins": "25.2.0-alpha11",
46
- "@vaadin/icon": "25.2.0-alpha11",
47
- "@vaadin/icons": "25.2.0-alpha11",
48
- "@vaadin/test-runner-commands": "25.2.0-alpha11",
44
+ "@vaadin/aura": "25.2.0-alpha12",
45
+ "@vaadin/chai-plugins": "25.2.0-alpha12",
46
+ "@vaadin/icon": "25.2.0-alpha12",
47
+ "@vaadin/icons": "25.2.0-alpha12",
48
+ "@vaadin/test-runner-commands": "25.2.0-alpha12",
49
49
  "@vaadin/testing-helpers": "^2.0.0",
50
- "@vaadin/vaadin-lumo-styles": "25.2.0-alpha11",
50
+ "@vaadin/vaadin-lumo-styles": "25.2.0-alpha12",
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": "fdc37e932709f95491a027aeb2090911cb7528c6"
59
+ "gitHead": "ae1e4373aec3653d63a45b6be18eee36f4b245a1"
60
60
  }
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,6 +72,21 @@ 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.
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,6 +63,17 @@ 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.
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/side-nav",
4
- "version": "25.2.0-alpha11",
4
+ "version": "25.2.0-alpha12",
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",
@@ -161,7 +161,7 @@
161
161
  },
162
162
  {
163
163
  "name": "vaadin-side-nav",
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\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.",
165
165
  "attributes": [
166
166
  {
167
167
  "name": "collapsed",
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-alpha11",
4
+ "version": "25.2.0-alpha12",
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
  {
@@ -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
  {