@vaadin/side-nav 25.1.0-beta2 → 25.1.0-beta3

package/README.md

@@ -13,7 +13,7 @@ A web component for navigation menus.
   <vaadin-side-nav-item path="/dashboard">
     <vaadin-icon icon="vaadin:chart" slot="prefix"></vaadin-icon>
     Dashboard
-    <span theme="badge primary" slot="suffix" aria-label="(2 new items)">2</span>
+    <vaadin-badge slot="suffix" number="2" theme="number-only">new items</vaadin-badge>
   </vaadin-side-nav-item>
 
   <vaadin-side-nav-item>

package/custom-elements.json

@@ -44,10 +44,12 @@
             {
               "kind": "field",
               "name": "i18n",
-              "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```",
+              "privacy": "public",
               "type": {
                 "text": "Object"
               },
+              "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```",
+              "attribute": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
                 "package": "@vaadin/component-base/src/i18n-mixin.js"
@@ -57,6 +59,11 @@
           "attributes": [
             {
               "name": "i18n",
+              "type": {
+                "text": "Object"
+              },
+              "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\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
+              "fieldName": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
                 "package": "@vaadin/component-base/src/i18n-mixin.js"
@@ -93,7 +100,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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  <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\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.",
+          "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.",
           "name": "SideNavItem",
           "members": [
             {
@@ -120,10 +127,12 @@
             {
               "kind": "field",
               "name": "i18n",
-              "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```",
+              "privacy": "public",
               "type": {
                 "text": "Object"
               },
+              "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```",
+              "attribute": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
                 "package": "@vaadin/component-base/src/i18n-mixin.js"
@@ -143,6 +152,9 @@
               "kind": "field",
               "name": "path",
               "privacy": "public",
+              "type": {
+                "text": "string"
+              },
               "description": "The path to navigate to",
               "attribute": "path"
             },
@@ -170,6 +182,9 @@
               "kind": "field",
               "name": "target",
               "privacy": "public",
+              "type": {
+                "text": "string"
+              },
               "description": "The target of the link. Works only when `path` is set.",
               "attribute": "target"
             }
@@ -202,6 +217,11 @@
             },
             {
               "name": "i18n",
+              "type": {
+                "text": "Object"
+              },
+              "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\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
+              "fieldName": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
                 "package": "@vaadin/component-base/src/i18n-mixin.js"
@@ -217,6 +237,9 @@
             },
             {
               "name": "path",
+              "type": {
+                "text": "string"
+              },
               "description": "The path to navigate to",
               "fieldName": "path"
             },
@@ -230,6 +253,9 @@
             },
             {
               "name": "target",
+              "type": {
+                "text": "string"
+              },
               "description": "The target of the link. Works only when `path` is set.",
               "fieldName": "target"
             }
@@ -311,10 +337,12 @@
             {
               "kind": "field",
               "name": "i18n",
-              "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```",
+              "privacy": "public",
               "type": {
                 "text": "Object"
               },
+              "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```",
+              "attribute": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
                 "package": "@vaadin/component-base/src/i18n-mixin.js"
@@ -378,6 +406,11 @@
             },
             {
               "name": "i18n",
+              "type": {
+                "text": "Object"
+              },
+              "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\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
+              "fieldName": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
                 "package": "@vaadin/component-base/src/i18n-mixin.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/side-nav",
-  "version": "25.1.0-beta2",
+  "version": "25.1.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -35,26 +35,26 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.1.0-beta2",
-    "@vaadin/component-base": "25.1.0-beta2",
-    "@vaadin/vaadin-themable-mixin": "25.1.0-beta2",
+    "@vaadin/a11y-base": "25.1.0-beta3",
+    "@vaadin/component-base": "25.1.0-beta3",
+    "@vaadin/vaadin-themable-mixin": "25.1.0-beta3",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.1.0-beta2",
-    "@vaadin/chai-plugins": "25.1.0-beta2",
-    "@vaadin/icon": "25.1.0-beta2",
-    "@vaadin/icons": "25.1.0-beta2",
-    "@vaadin/test-runner-commands": "25.1.0-beta2",
+    "@vaadin/aura": "25.1.0-beta3",
+    "@vaadin/chai-plugins": "25.1.0-beta3",
+    "@vaadin/icon": "25.1.0-beta3",
+    "@vaadin/icons": "25.1.0-beta3",
+    "@vaadin/test-runner-commands": "25.1.0-beta3",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.1.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "25.1.0-beta3",
     "lit": "^3.0.0",
-    "sinon": "^21.0.0"
+    "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ffbedbae08a5160d13bcd1c6fcaa328df5103a05"
+  "gitHead": "4251850231a42298fda23b83928da588831cdb5d"
 }

package/src/vaadin-side-nav-item.d.ts

@@ -50,7 +50,7 @@ export type SideNavItemEventMap = HTMLElementEventMap & SideNavItemCustomEventMa
  * <vaadin-side-nav-item>
  *   <vaadin-icon icon="vaadin:chart" slot="prefix"></vaadin-icon>
  *   Item
- *   <span theme="badge primary" slot="suffix">Suffix</span>
+ *   <vaadin-badge slot="suffix">Suffix</vaadin-badge>
  * </vaadin-side-nav-item>
  * ```
  *

package/src/vaadin-side-nav-item.js

@@ -48,7 +48,7 @@ import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
  * <vaadin-side-nav-item>
  *   <vaadin-icon icon="vaadin:chart" slot="prefix"></vaadin-icon>
  *   Item
- *   <span theme="badge primary" slot="suffix">Suffix</span>
+ *   <vaadin-badge slot="suffix">Suffix</vaadin-badge>
  * </vaadin-side-nav-item>
  * ```
  *
@@ -95,7 +95,9 @@ class SideNavItem extends SideNavChildrenMixin(
       /**
        * The path to navigate to
        */
-      path: String,
+      path: {
+        type: String,
+      },
 
       /**
        * The list of alternative paths matching this item
@@ -158,7 +160,9 @@ class SideNavItem extends SideNavChildrenMixin(
       /**
        * The target of the link. Works only when `path` is set.
        */
-      target: String,
+      target: {
+        type: String,
+      },
 
       /**
        * Whether to exclude the item from client-side routing. When enabled,

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "25.1.0-beta2",
+  "version": "25.1.0-beta3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-side-nav-item",
-          "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  <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\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.",
+          "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.",
           "attributes": [
             {
               "name": "disabled",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "25.1.0-beta2",
+  "version": "25.1.0-beta3",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-side-nav-item",
-          "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  <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\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.",
+          "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.",
           "extension": true,
           "attributes": [
             {