@vaadin/side-nav 24.1.0 → 24.2.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/side-nav",
-  "version": "24.1.0",
+  "version": "24.2.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,15 +35,15 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/component-base": "~24.1.0",
-    "@vaadin/vaadin-lumo-styles": "~24.1.0",
-    "@vaadin/vaadin-material-styles": "~24.1.0",
-    "@vaadin/vaadin-themable-mixin": "~24.1.0",
+    "@vaadin/component-base": "24.2.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha1",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.0",
+    "@vaadin/testing-helpers": "^0.4.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -51,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "7fdfe7d5ceb4c305a894f8e9dc11e5b7d04cf1f2"
+  "gitHead": "0dbb118320203ab6c0c07450a3e718815367589f"
 }

package/src/vaadin-side-nav-base-styles.js

@@ -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 { css } from 'lit';
@@ -14,7 +14,7 @@ export const sideNavItemBaseStyles = css`
     display: none !important;
   }
 
-  a {
+  [part='link'] {
     flex: auto;
     min-width: 0;
     display: flex;
@@ -30,6 +30,16 @@ export const sideNavItemBaseStyles = css`
     flex: none;
   }
 
+  [part='children'] {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+  }
+
+  :host(:not([has-children])) button {
+    display: none !important;
+  }
+
   :host(:not([path])) a {
     position: relative;
   }
@@ -56,12 +66,6 @@ export const sideNavItemBaseStyles = css`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-
-  slot[name='children'] {
-    /* Needed to make role="list" work */
-    display: block;
-    width: 100%;
-  }
 `;
 
 export const sideNavBaseStyles = css`
@@ -73,32 +77,24 @@ export const sideNavBaseStyles = css`
     display: none !important;
   }
 
-  summary {
+  button {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-  }
-
-  summary ::slotted([slot='label']) {
-    display: block;
-  }
-
-  summary::-webkit-details-marker {
-    display: none;
-  }
-
-  summary::marker {
-    content: '';
-  }
-
-  summary::after {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    justify-content: inherit;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    background-color: initial;
+    color: inherit;
+    border: initial;
+    outline: none;
+    font: inherit;
+    text-align: inherit;
   }
 
-  slot {
-    /* Needed to make role="list" work */
-    display: block;
+  [part='children'] {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
   }
 `;

package/src/vaadin-side-nav-item.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';
@@ -54,6 +54,17 @@ export type SideNavItemEventMap = HTMLElementEventMap & SideNavItemCustomEventMa
  * </vaadin-side-nav-item>
  * ```
  *
+ * ### Styling
+ *
+ * Part name       | Description
+ * ----------------|----------------
+ * `content`       | The element that wraps link and toggle button
+ * `children`      | The element that wraps child items
+ * `link`          | The clickable anchor used for navigation
+ * `toggle-button` | The toggle button
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
  */
 declare class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
@@ -62,6 +73,13 @@ declare class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitEle
    */
   path: string | null | undefined;
 
+  /**
+   * A comma-separated list of alternative paths matching this item.
+   *
+   * @attr {string} path-aliases
+   */
+  pathAliases: string | null | undefined;
+
   /**
    * Whether to show the child items or not
    */

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

@@ -1,12 +1,14 @@
 /**
  * @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 { ifDefined } from 'lit/directives/if-defined.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+import { matchPaths } from '@vaadin/component-base/src/url-utils.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { sideNavItemBaseStyles } from './vaadin-side-nav-base-styles.js';
 
@@ -14,6 +16,31 @@ function isEnabled() {
   return window.Vaadin && window.Vaadin.featureFlags && !!window.Vaadin.featureFlags.sideNavComponent;
 }
 
+/**
+ * A controller to manage the item content children slot.
+ */
+class ChildrenController extends SlotController {
+  constructor(host) {
+    super(host, 'children', null, { observe: true, multiple: true });
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  initAddedNode() {
+    this.host.requestUpdate();
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  teardownNode() {
+    this.host.requestUpdate();
+  }
+}
+
 /**
  * A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.
  * Not intended to be used separately.
@@ -49,6 +76,17 @@ function isEnabled() {
  * </vaadin-side-nav-item>
  * ```
  *
+ * ### Styling
+ *
+ * Part name       | Description
+ * ----------------|----------------
+ * `content`       | The element that wraps link and toggle button
+ * `children`      | The element that wraps child items
+ * `link`          | The clickable anchor used for navigation
+ * `toggle-button` | The toggle button
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
  *
  * @extends LitElement
@@ -68,6 +106,13 @@ class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
        */
       path: String,
 
+      /**
+       * A comma-separated list of alternative paths matching this item.
+       *
+       * @attr {string} path-aliases
+       */
+      pathAliases: String,
+
       /**
        * Whether to show the child items or not
        *
@@ -100,6 +145,12 @@ class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
     return sideNavItemBaseStyles;
   }
 
+  constructor() {
+    super();
+
+    this._childrenController = new ChildrenController(this);
+  }
+
   /** @protected */
   get _button() {
     return this.shadowRoot.querySelector('button');
@@ -110,6 +161,9 @@ class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
    * @override
    */
   firstUpdated() {
+    // Controller to detect whether the item has child items.
+    this.addController(this._childrenController);
+
     // By default, if the user hasn't provided a custom role,
     // the role attribute is set to "listitem".
     if (!this.hasAttribute('role')) {
@@ -124,9 +178,11 @@ class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
   updated(props) {
     super.updated(props);
 
-    if (props.has('path')) {
+    if (props.has('path') || props.has('pathAliases')) {
       this.__updateActive();
     }
+
+    this.toggleAttribute('has-children', this._childrenController.nodes.length > 0);
   }
 
   /** @protected */
@@ -146,27 +202,44 @@ class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
   /** @protected */
   render() {
     return html`
-      <a href="${ifDefined(this.path)}" part="item" aria-current="${this.active ? 'page' : 'false'}">
-        <slot name="prefix"></slot>
-        <slot></slot>
-        <slot name="suffix"></slot>
+      <div part="content" @click="${this._onContentClick}">
+        <a href="${ifDefined(this.path)}" part="link" aria-current="${this.active ? 'page' : 'false'}">
+          <slot name="prefix"></slot>
+          <slot></slot>
+          <slot name="suffix"></slot>
+        </a>
         <button
           part="toggle-button"
-          @click="${this.__toggleExpanded}"
-          ?hidden="${!this.querySelector('[slot=children]')}"
+          @click="${this._onButtonClick}"
           aria-controls="children"
           aria-expanded="${this.expanded}"
           aria-label="Toggle child items"
         ></button>
-      </a>
-      <slot name="children" role="list" part="children" id="children" ?hidden="${!this.expanded}"></slot>
+      </div>
+      <ul part="children" ?hidden="${!this.expanded}">
+        <slot name="children"></slot>
+      </ul>
     `;
   }
 
   /** @private */
-  __toggleExpanded(e) {
-    e.preventDefault();
-    e.stopPropagation();
+  _onButtonClick(event) {
+    // Prevent the event from being handled
+    // by the content click listener below
+    event.stopPropagation();
+    this.__toggleExpanded();
+  }
+
+  /** @private */
+  _onContentClick() {
+    // Toggle item expanded state unless the link has a non-empty path
+    if (this.path == null && this.hasAttribute('has-children')) {
+      this.__toggleExpanded();
+    }
+  }
+
+  /** @private */
+  __toggleExpanded() {
     this.expanded = !this.expanded;
   }
 
@@ -185,23 +258,16 @@ class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
 
   /** @private */
   __calculateActive() {
-    const pathAbsolute = this.path.startsWith('/');
-    // Absolute path or no base uri in use. No special comparison needed
-    if (pathAbsolute) {
-      // Compare an absolute view path
-      return document.location.pathname === this.path;
+    if (this.path == null) {
+      return false;
     }
-    const hasBaseUri = document.baseURI !== document.location.href;
-    if (!hasBaseUri) {
-      // Compare a relative view path (strip the starting slash)
-      return document.location.pathname.substring(1) === this.path;
+    if (matchPaths(document.location.pathname, this.path)) {
+      return true;
     }
-    const pathRelativeToRoot = document.location.pathname;
-    const basePath = new URL(document.baseURI).pathname;
-    const pathWithoutBase = pathRelativeToRoot.substring(basePath.length);
-    const pathRelativeToBase =
-      basePath !== pathRelativeToRoot && pathRelativeToRoot.startsWith(basePath) ? pathWithoutBase : pathRelativeToRoot;
-    return pathRelativeToBase === this.path;
+    return (
+      this.pathAliases != null &&
+      this.pathAliases.split(',').some((alias) => matchPaths(document.location.pathname, alias))
+    );
   }
 }
 

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { LitElement } from 'lit';
+import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -48,9 +49,19 @@ export type SideNavEventMap = HTMLElementEventMap & SideNavCustomEventMap;
  * </vaadin-side-nav>
  * ```
  *
+ * ### Styling
+ *
+ * Part name       | Description
+ * ----------------|----------------
+ * `label`         | The label element
+ * `children`      | The element that wraps child items
+ * `toggle-button` | The toggle button
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
  * @fires {CustomEvent} collapsed-changed - Fired when the `collapsed` property changes.
  */
-declare class SideNav extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
+declare class SideNav extends FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
   /**
    * Whether the side nav is collapsible. When enabled, the toggle icon is shown.
    */

package/src/vaadin-side-nav.js

@@ -4,6 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
@@ -43,6 +45,16 @@ function isEnabled() {
  * </vaadin-side-nav>
  * ```
  *
+ * ### Styling
+ *
+ * Part name       | Description
+ * ----------------|----------------
+ * `label`         | The label element
+ * `children`      | The element that wraps child items
+ * `toggle-button` | The toggle button
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
  * @fires {CustomEvent} collapsed-changed - Fired when the `collapsed` property changes.
  *
  * @extends LitElement
@@ -50,11 +62,15 @@ function isEnabled() {
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class SideNav extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
+class SideNav extends FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-side-nav';
   }
 
+  static get shadowRootOptions() {
+    return { ...LitElement.shadowRootOptions, delegatesFocus: true };
+  }
+
   static get properties() {
     return {
       /**
@@ -86,6 +102,17 @@ class SideNav extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
     return sideNavBaseStyles;
   }
 
+  constructor() {
+    super();
+
+    this._labelId = `side-nav-label-${generateUniqueId()}`;
+  }
+
+  /** @protected */
+  get focusElement() {
+    return this.shadowRoot.querySelector('button');
+  }
+
   /** @protected */
   firstUpdated() {
     // By default, if the user hasn't provided a custom role,
@@ -97,34 +124,55 @@ class SideNav extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
 
   /** @protected */
   render() {
-    const label = this.querySelector('[slot="label"]');
-    if (label && this.collapsible) {
-      return html`
-        <details ?open="${!this.collapsed}" @toggle="${this.__toggleCollapsed}">${this.__renderBody(label)}</details>
-      `;
+    return html`
+      <button
+        part="label"
+        @click="${this._onLabelClick}"
+        aria-expanded="${ifDefined(this.collapsible ? !this.collapsed : null)}"
+        aria-controls="children"
+      >
+        <slot name="label" @slotchange="${this._onLabelSlotChange}"></slot>
+        <span part="toggle-button" aria-hidden="true"></span>
+      </button>
+      <ul id="children" part="children" ?hidden="${this.collapsed}" aria-hidden="${this.collapsed ? 'true' : 'false'}">
+        <slot></slot>
+      </ul>
+    `;
+  }
+
+  /**
+   * @param {Event} event
+   * @return {boolean}
+   * @protected
+   * @override
+   */
+  _shouldSetFocus(event) {
+    return event.composedPath()[0] === this.focusElement;
+  }
+
+  /** @private */
+  _onLabelClick() {
+    if (this.collapsible) {
+      this.__toggleCollapsed();
     }
-    return this.__renderBody(label);
   }
 
   /** @private */
-  __renderBody(label) {
+  _onLabelSlotChange() {
+    const label = this.querySelector('[slot="label"]');
     if (label) {
-      if (!label.id) label.id = `side-nav-label-${generateUniqueId()}`;
+      if (!label.id) {
+        label.id = this._labelId;
+      }
       this.setAttribute('aria-labelledby', label.id);
     } else {
       this.removeAttribute('aria-labelledby');
     }
-    return html`
-      <summary part="label" ?hidden="${label == null}">
-        <slot name="label" @slotchange="${() => this.requestUpdate()}"></slot>
-      </summary>
-      <slot role="list"></slot>
-    `;
   }
 
   /** @private */
-  __toggleCollapsed(e) {
-    this.collapsed = !e.target.open;
+  __toggleCollapsed() {
+    this.collapsed = !this.collapsed;
   }
 }
 

package/theme/lumo/vaadin-side-nav-item-styles.js

@@ -0,0 +1,117 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/font-icons.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export const sideNavItemStyles = css`
+  [part='content'] {
+    display: flex;
+    align-items: center;
+  }
+
+  [part='link'] {
+    width: 100%;
+    gap: var(--lumo-space-xs);
+    padding: var(--lumo-space-s);
+    padding-inline-start: calc(var(--lumo-space-s) + var(--_child-indent, 0px));
+    border-radius: var(--lumo-border-radius-m);
+    transition: background-color 140ms, color 140ms;
+    cursor: var(--lumo-clickable-cursor, default);
+    min-height: var(--lumo-icon-size-m);
+  }
+
+  [part='toggle-button'] {
+    position: relative;
+    border: 0;
+    margin: calc((var(--lumo-icon-size-m) - var(--lumo-size-s)) / 2) 0;
+    margin-inline-end: calc(var(--lumo-space-xs) * -1);
+    padding: 0;
+    background: transparent;
+    font: inherit;
+    color: var(--lumo-tertiary-text-color);
+    width: var(--lumo-size-s);
+    height: var(--lumo-size-s);
+    cursor: var(--lumo-clickable-cursor, default);
+    transition: color 140ms;
+  }
+
+  :host([has-children]) [part='content'] {
+    padding-inline-end: var(--lumo-space-s);
+  }
+
+  @media (any-hover: hover) {
+    [part='link']:hover {
+      color: var(--lumo-header-text-color);
+    }
+
+    [part='toggle-button']:hover {
+      color: var(--lumo-body-text-color);
+    }
+  }
+
+  [part='link']:active:focus {
+    background-color: var(--lumo-contrast-5pct);
+  }
+
+  [part='toggle-button']::before {
+    font-family: lumo-icons;
+    content: var(--lumo-icons-dropdown);
+    font-size: 1.5em;
+    line-height: var(--lumo-size-s);
+    display: inline-block;
+    transform: rotate(-90deg);
+    transition: transform 140ms;
+  }
+
+  :host([expanded]) [part='toggle-button']::before {
+    transform: none;
+  }
+
+  @supports selector(:focus-visible) {
+    [part='link'],
+    [part='toggle-button'] {
+      outline: none;
+    }
+
+    [part='link']:focus-visible,
+    [part='toggle-button']:focus-visible {
+      border-radius: var(--lumo-border-radius-m);
+      box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+    }
+  }
+
+  [part='link']:active {
+    color: var(--lumo-header-text-color);
+  }
+
+  slot:not([name]) {
+    margin: 0 var(--lumo-space-s);
+  }
+
+  slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
+    padding: 0.1em;
+    color: var(--lumo-contrast-60pct);
+  }
+
+  :host([active]) slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
+    color: inherit;
+  }
+
+  slot[name='children'] {
+    --_child-indent: calc(var(--_child-indent-2, 0px) + var(--vaadin-side-nav-child-indent, var(--lumo-space-l)));
+  }
+
+  slot[name='children']::slotted(*) {
+    --_child-indent-2: var(--_child-indent);
+  }
+
+  :host([active]) [part='link'] {
+    color: var(--lumo-primary-text-color);
+    background-color: var(--lumo-primary-color-10pct);
+  }
+`;
+
+registerStyles('vaadin-side-nav-item', sideNavItemStyles, { moduleId: 'lumo-side-nav-item' });

package/theme/lumo/vaadin-side-nav-item.js

@@ -1,7 +1,7 @@
 /**
  * @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 './vaadin-side-nav-styles.js';
+import './vaadin-side-nav-item-styles.js';
 import '../../src/vaadin-side-nav-item.js';

package/theme/lumo/vaadin-side-nav-styles.js

@@ -6,104 +6,6 @@ import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-export const sideNavItemStyles = css`
-  a {
-    gap: var(--lumo-space-xs);
-    padding: var(--lumo-space-s);
-    padding-inline-start: calc(var(--lumo-space-s) + var(--_child-indent, 0px));
-    border-radius: var(--lumo-border-radius-m);
-    transition: background-color 140ms, color 140ms;
-    cursor: var(--lumo-clickable-cursor, default);
-    min-height: var(--lumo-icon-size-m);
-  }
-
-  button {
-    border: 0;
-    margin: calc((var(--lumo-icon-size-m) - var(--lumo-size-s)) / 2) 0;
-    margin-inline-end: calc(var(--lumo-space-xs) * -1);
-    padding: 0;
-    background: transparent;
-    font: inherit;
-    color: var(--lumo-tertiary-text-color);
-    width: var(--lumo-size-s);
-    height: var(--lumo-size-s);
-    cursor: var(--lumo-clickable-cursor, default);
-    transition: color 140ms;
-  }
-
-  @media (any-hover: hover) {
-    a:hover {
-      color: var(--lumo-header-text-color);
-    }
-
-    button:hover {
-      color: var(--lumo-body-text-color);
-    }
-  }
-
-  a:active:focus {
-    background-color: var(--lumo-contrast-5pct);
-  }
-
-  button::before {
-    font-family: lumo-icons;
-    content: var(--lumo-icons-dropdown);
-    font-size: 1.5em;
-    line-height: var(--lumo-size-s);
-    display: inline-block;
-    transform: rotate(-90deg);
-    transition: transform 140ms;
-  }
-
-  :host([expanded]) button::before {
-    transform: none;
-  }
-
-  @supports selector(:focus-visible) {
-    a,
-    button {
-      outline: none;
-    }
-
-    a:focus-visible,
-    button:focus-visible {
-      border-radius: var(--lumo-border-radius-m);
-      box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
-    }
-  }
-
-  a:active {
-    color: var(--lumo-header-text-color);
-  }
-
-  slot:not([name]) {
-    margin: 0 var(--lumo-space-xs);
-  }
-
-  slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
-    color: var(--lumo-contrast-60pct);
-  }
-
-  :host([active]) slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
-    color: inherit;
-  }
-
-  slot[name='children'] {
-    --_child-indent: calc(var(--_child-indent-2, 0px) + var(--vaadin-side-nav-child-indent, var(--lumo-space-l)));
-  }
-
-  slot[name='children']::slotted(*) {
-    --_child-indent-2: var(--_child-indent);
-  }
-
-  :host([active]) a {
-    color: var(--lumo-primary-text-color);
-    background-color: var(--lumo-primary-color-10pct);
-  }
-`;
-
-registerStyles('vaadin-side-nav-item', sideNavItemStyles, { moduleId: 'lumo-side-nav-item' });
-
 export const sideNavStyles = css`
   :host {
     font-family: var(--lumo-font-family);
@@ -114,49 +16,58 @@ export const sideNavStyles = css`
     -webkit-tap-highlight-color: transparent;
   }
 
-  summary {
-    cursor: var(--lumo-clickable-cursor, default);
+  [part='label'] {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    outline: none;
+    box-sizing: border-box;
     border-radius: var(--lumo-border-radius-m);
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-s);
+    font-weight: 500;
+    line-height: var(--lumo-line-height-xs);
   }
 
-  summary ::slotted([slot='label']) {
-    font-size: var(--lumo-font-size-s);
+  [part='label'] ::slotted([slot='label']) {
     color: var(--lumo-secondary-text-color);
     margin: var(--lumo-space-s);
-    border-radius: inherit;
   }
 
-  summary::after {
-    font-family: lumo-icons;
-    color: var(--lumo-tertiary-text-color);
-    font-size: var(--lumo-icon-size-m);
+  :host([focus-ring]) [part='label'] {
+    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+  }
+
+  [part='toggle-button'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: var(--lumo-size-s);
     height: var(--lumo-size-s);
-    transition: transform 140ms;
-    margin: 0 var(--lumo-space-xs);
+    margin-inline-start: auto;
+    margin-inline-end: var(--lumo-space-xs);
+    font-size: var(--lumo-icon-size-m);
+    line-height: 1;
+    color: var(--lumo-contrast-60pct);
+    font-family: 'lumo-icons';
+    cursor: var(--lumo-clickable-cursor);
   }
 
-  :host([collapsible]) summary::after {
-    content: var(--lumo-icons-dropdown);
+  [part='toggle-button']::before {
+    content: var(--lumo-icons-angle-right);
   }
 
-  @media (any-hover: hover) {
-    summary:hover::after {
-      color: var(--lumo-body-text-color);
-    }
+  :host(:not([collapsible])) [part='toggle-button'] {
+    display: none !important;
   }
 
-  :host([collapsed]) summary::after {
-    transform: rotate(-90deg);
+  :host(:not([collapsed])) [part='toggle-button'] {
+    transform: rotate(90deg);
   }
 
-  @supports selector(:focus-visible) {
-    summary {
-      outline: none;
-    }
-
-    summary:focus-visible {
-      box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+  @media (any-hover: hover) {
+    [part='label']:hover [part='toggle-button'] {
+      color: var(--lumo-body-text-color);
     }
   }
 `;

package/theme/lumo/vaadin-side-nav.js

@@ -1,7 +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 './vaadin-side-nav-item.js';
+import './vaadin-side-nav-styles.js';
 import '../../src/vaadin-side-nav.js';

package/theme/material/vaadin-side-nav.js

@@ -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 '../../src/vaadin-side-nav.js';

package/vaadin-side-nav-item.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-side-nav.js';
+import './theme/lumo/vaadin-side-nav-item.js';
 export * from './src/vaadin-side-nav-item.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.1.0",
+  "version": "24.2.0-alpha1",
   "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```\n\n### 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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "path",
@@ -21,6 +21,17 @@
                 ]
               }
             },
+            {
+              "name": "path-aliases",
+              "description": "A comma-separated list of alternative paths matching this item.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "expanded",
               "description": "Whether to show the child items or not",
@@ -55,6 +66,17 @@
                   ]
                 }
               },
+              {
+                "name": "pathAliases",
+                "description": "A comma-separated list of alternative paths matching this item.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "expanded",
                 "description": "Whether to show the child items or not",
@@ -75,7 +97,7 @@
         },
         {
           "name": "vaadin-side-nav",
-          "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```",
+          "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\nPart name       | Description\n----------------|----------------\n`label`         | The label element\n`children`      | The element that wraps child items\n`toggle-button` | The toggle button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "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",
+  "version": "24.2.0-alpha1",
   "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```\n\n### 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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -33,6 +33,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".pathAliases",
+              "description": "A comma-separated list of alternative paths matching this item.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@expanded-changed",
               "description": "Fired when the `expanded` property changes.",
@@ -44,7 +51,7 @@
         },
         {
           "name": "vaadin-side-nav",
-          "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```",
+          "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\nPart name       | Description\n----------------|----------------\n`label`         | The label element\n`children`      | The element that wraps child items\n`toggle-button` | The toggle button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {