refactor: minor code style improvements and cleanup

packages/side-nav/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.

packages/side-nav/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.
 

packages/side-nav/package.json

@@ -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",

packages/side-nav/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>

packages/side-nav/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();

packages/side-nav/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>

packages/side-nav/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')) {