@vaadin/side-nav 25.2.0-alpha10 → 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 (9) hide show
  1. package/custom-elements.json +2 -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 +16 -7
  6. package/src/vaadin-side-nav.d.ts +11 -0
  7. package/src/vaadin-side-nav.js +11 -5
  8. package/web-types.json +3 -3
  9. 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-alpha10",
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-alpha10",
39
- "@vaadin/component-base": "25.2.0-alpha10",
40
- "@vaadin/vaadin-themable-mixin": "25.2.0-alpha10",
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-alpha10",
45
- "@vaadin/chai-plugins": "25.2.0-alpha10",
46
- "@vaadin/icon": "25.2.0-alpha10",
47
- "@vaadin/icons": "25.2.0-alpha10",
48
- "@vaadin/test-runner-commands": "25.2.0-alpha10",
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-alpha10",
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": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
59
+ "gitHead": "ae1e4373aec3653d63a45b6be18eee36f4b245a1"
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,
@@ -349,8 +358,8 @@ class SideNavItem extends SideNavChildrenMixin(
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,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-alpha10",
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-alpha10",
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
  {