@vaadin/side-nav 24.1.0-alpha9 → 24.1.0-beta1

package/LICENSE

@@ -175,7 +175,7 @@
 
    END OF TERMS AND CONDITIONS
 
-   Copyright 2017 Vaadin Ltd.
+   Copyright 2023 Vaadin Ltd.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/README.md

@@ -48,7 +48,7 @@ import '@vaadin/side-nav';
 
 ## Themes
 
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material. 
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
 This component currently does not support Material theme.
 The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/side-nav/vaadin-side-nav.js) of the package uses the Lumo theme.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/side-nav",
-  "version": "24.1.0-alpha9",
+  "version": "24.1.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -20,13 +20,13 @@
   "module": "vaadin-side-nav.js",
   "type": "module",
   "files": [
+    "enable.js",
     "src",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
-    "web-types.lit.json",
-    "enable.js"
+    "web-types.lit.json"
   ],
   "keywords": [
     "Vaadin",
@@ -35,10 +35,10 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/component-base": "24.1.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.1.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.1.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.1.0-alpha9",
+    "@vaadin/component-base": "24.1.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.1.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.1.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.1.0-beta1",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -51,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "db4fe44603a6702b85b0da2a6d033ddf8ffea5c4"
+  "gitHead": "f0ddb6576073a6af05ab29867bc5ec82e334f9d7"
 }

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

@@ -44,7 +44,7 @@ export type SideNavItemEventMap = HTMLElementEventMap & SideNavItemCustomEventMa
  * `prefix`  | A slot for content before the label (e.g. an icon).
  * `suffix`  | A slot for content after the label (e.g. an icon).
  *
- * #### Example:
+ * #### Example
  *
  * ```html
  * <vaadin-side-nav-item>

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

@@ -39,7 +39,7 @@ function isEnabled() {
  * `prefix`  | A slot for content before the label (e.g. an icon).
  * `suffix`  | A slot for content after the label (e.g. an icon).
  *
- * #### Example:
+ * #### Example
  *
  * ```html
  * <vaadin-side-nav-item>
@@ -61,10 +61,6 @@ class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
     return 'vaadin-side-nav-item';
   }
 
-  static get observers() {
-    return ['__pathChanged(path)'];
-  }
-
   static get properties() {
     return {
       /**
@@ -109,10 +105,33 @@ class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
     return this.shadowRoot.querySelector('button');
   }
 
+  /**
+   * @protected
+   * @override
+   */
+  firstUpdated() {
+    // By default, if the user hasn't provided a custom role,
+    // the role attribute is set to "listitem".
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'listitem');
+    }
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  updated(props) {
+    super.updated(props);
+
+    if (props.has('path')) {
+      this.__updateActive();
+    }
+  }
+
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute('role', 'listitem');
     this.__updateActive();
     this.__boundUpdateActive = this.__updateActive.bind(this);
     window.addEventListener('popstate', this.__boundUpdateActive);
@@ -144,11 +163,6 @@ class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
     `;
   }
 
-  /** @private */
-  __pathChanged() {
-    this.__updateActive();
-  }
-
   /** @private */
   __toggleExpanded(e) {
     e.preventDefault();

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { LitElement } from 'lit';
@@ -21,6 +21,7 @@ export type SideNavEventMap = HTMLElementEventMap & SideNavCustomEventMap;
 
 /**
  * `<vaadin-side-nav>` is a Web Component for navigation menus.
+ *
  * ```html
  * <vaadin-side-nav>
  *   <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>
@@ -38,7 +39,8 @@ export type SideNavEventMap = HTMLElementEventMap & SideNavCustomEventMap;
  * ----------|-------------
  * `label`   | The label (text) inside the side nav.
  *
- * #### Example:
+ * #### Example
+ *
  * ```html
  * <vaadin-side-nav>
  *   <span slot="label">Main menu</span>

package/src/vaadin-side-nav.js

@@ -1,9 +1,8 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-
 import { html, LitElement } from 'lit';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
@@ -17,6 +16,7 @@ function isEnabled() {
 
 /**
  * `<vaadin-side-nav>` is a Web Component for navigation menus.
+ *
  * ```html
  * <vaadin-side-nav>
  *   <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>
@@ -34,7 +34,8 @@ function isEnabled() {
  * ----------|-------------
  * `label`   | The label (text) inside the side nav.
  *
- * #### Example:
+ * #### Example
+ *
  * ```html
  * <vaadin-side-nav>
  *   <span slot="label">Main menu</span>
@@ -87,8 +88,6 @@ class SideNav extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
 
   /** @protected */
   firstUpdated() {
-    super.ready();
-
     // By default, if the user hasn't provided a custom role,
     // the role attribute is set to "navigation".
     if (!this.hasAttribute('role')) {

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.1.0-alpha9",
+  "version": "24.1.0-beta1",
   "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```",
+          "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```",
           "attributes": [
             {
               "name": "path",
@@ -75,7 +75,7 @@
         },
         {
           "name": "vaadin-side-nav",
-          "description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\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```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```",
+          "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```",
           "attributes": [
             {
               "name": "collapsible",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.1.0-alpha9",
+  "version": "24.1.0-beta1",
   "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```",
+          "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```",
           "extension": true,
           "attributes": [
             {
@@ -44,7 +44,7 @@
         },
         {
           "name": "vaadin-side-nav",
-          "description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\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```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```",
+          "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```",
           "extension": true,
           "attributes": [
             {