@vaadin/side-nav 25.0.0-alpha8 → 25.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/side-nav",
-  "version": "25.0.0-alpha8",
+  "version": "25.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -37,22 +34,22 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha8",
-    "@vaadin/component-base": "25.0.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
+    "@vaadin/a11y-base": "25.0.0-beta1",
+    "@vaadin/component-base": "25.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha8",
-    "@vaadin/test-runner-commands": "25.0.0-alpha8",
+    "@vaadin/chai-plugins": "25.0.0-beta1",
+    "@vaadin/test-runner-commands": "25.0.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-beta1",
     "lit": "^3.0.0",
-    "sinon": "^18.0.0"
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
+  "gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
 }

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2023 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 import { sharedStyles } from './vaadin-side-nav-shared-base-styles.js';
 
@@ -18,25 +18,47 @@ const sideNav = css`
     display: flex;
     align-items: center;
     justify-content: start;
-    gap: var(--vaadin-side-nav-item-gap, var(--vaadin-gap-container-inline));
+    gap: var(--vaadin-side-nav-item-gap, var(--vaadin-gap-s));
     padding: var(--vaadin-side-nav-item-padding, var(--vaadin-padding-container));
-    font-size: var(--vaadin-side-nav-label-font-size, 0.875em);
+    font-size: var(--vaadin-side-nav-label-font-size, max(11px, 0.875em));
     font-weight: var(--vaadin-side-nav-label-font-weight, 500);
-    color: var(--vaadin-side-nav-label-color, var(--vaadin-color-subtle));
+    color: var(--vaadin-side-nav-label-color, var(--vaadin-text-color-secondary));
     line-height: var(--vaadin-side-nav-label-line-height, inherit);
     border-radius: var(--vaadin-side-nav-item-border-radius, var(--vaadin-radius-m));
     touch-action: manipulation;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  ::slotted([slot='label']) {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
   }
 `;
 
 export const sideNavStyles = [sharedStyles, sideNav];
 
 export const sideNavSlotStyles = css`
-  :where(vaadin-side-nav:has(vaadin-icon[slot='prefix'])) {
-    --_has-prefix-icon: '';
+  :where(vaadin-side-nav:has(> vaadin-side-nav-item > vaadin-icon[slot='prefix']))::part(children),
+  :where(vaadin-side-nav-item:has(> vaadin-side-nav-item[slot='children'] > vaadin-icon[slot='prefix']))::part(
+    children
+  ) {
+    --_icon-indent: calc(var(--_icon-indent-2, 0) + 1);
+  }
+
+  :where(vaadin-side-nav-item:has(> vaadin-icon[slot='prefix']))::part(content) {
+    --_icon-indent: calc(var(--_icon-indent-2) - 1);
+  }
+
+  :where(
+    vaadin-side-nav-item:has(> vaadin-icon[slot='prefix']):has(> vaadin-side-nav-item > vaadin-icon[slot='prefix'])
+  )::part(children) {
+    --_level: var(--_level-2, 0);
   }
 
-  :where(vaadin-side-nav-item:has(> vaadin-icon[slot='prefix']))::part(link) {
-    --_has-prefix-icon:;
+  vaadin-side-nav:not(:has([slot='label']))::part(label) {
+    display: none;
   }
 `;

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

@@ -3,20 +3,24 @@
  * Copyright (c) 2023 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
+import { screenReaderOnly } from '@vaadin/a11y-base/src/styles/sr-only-styles.js';
 import { sharedStyles } from './vaadin-side-nav-shared-base-styles.js';
 
 const sideNavItem = css`
   [part='content'] {
     display: flex;
     align-items: center;
+    min-width: 0;
+    max-width: 100%;
     padding: var(--vaadin-side-nav-item-padding, var(--vaadin-padding-container));
-    gap: var(--vaadin-side-nav-item-gap, var(--vaadin-gap-container-inline));
+    --_gap: var(--vaadin-side-nav-item-gap, var(--vaadin-gap-s));
+    gap: var(--_gap);
     font-size: var(--vaadin-side-nav-item-font-size, 1em);
     font-weight: var(--vaadin-side-nav-item-font-weight, 500);
     line-height: var(--vaadin-side-nav-item-line-height, inherit);
-    color: var(--vaadin-side-nav-item-color, var(--vaadin-color-subtle));
+    color: var(--vaadin-side-nav-item-text-color, var(--vaadin-text-color-secondary));
     background: var(--vaadin-side-nav-item-background, transparent);
     background-origin: border-box;
     border: var(--vaadin-side-nav-item-border-width, 0) solid var(--vaadin-side-nav-item-border-color, transparent);
@@ -27,7 +31,7 @@ const sideNavItem = css`
 
   :host([current]) [part='content'] {
     --vaadin-side-nav-item-background: var(--vaadin-background-container);
-    --vaadin-side-nav-item-color: var(--vaadin-color);
+    --vaadin-side-nav-item-text-color: var(--vaadin-text-color);
   }
 
   :host([disabled]) {
@@ -35,7 +39,7 @@ const sideNavItem = css`
   }
 
   :host([disabled]) [part='content'] {
-    --vaadin-side-nav-item-color: var(--vaadin-color-disabled);
+    --vaadin-side-nav-item-text-color: var(--vaadin-text-color-disabled);
   }
 
   [part='link'] {
@@ -68,14 +72,6 @@ const sideNavItem = css`
     flex: none;
   }
 
-  /* Reserved space for icon */
-  slot[name='prefix']::before {
-    content: var(--_has-prefix-icon);
-    display: block;
-    width: var(--vaadin-icon-size, 1lh);
-    flex: none;
-  }
-
   [part='content']:not(:has([href])):has([part='toggle-button']:focus-visible),
   [part='content']:has(:not([part='toggle-button']):focus-visible),
   [part='content']:has([href]) [part='toggle-button']:focus-visible {
@@ -89,34 +85,40 @@ const sideNavItem = css`
   /* Hierarchy indentation */
   [part='content']::before {
     content: '';
-    --_hierarchy-indent: calc(var(--_level, 0) * var(--vaadin-side-nav-child-indent, var(--vaadin-icon-size, 1lh)));
-    --_icon-indent: calc(var(--_level, 0) * var(--vaadin-side-nav-item-gap, var(--vaadin-gap-container-inline)));
-    width: calc(var(--_hierarchy-indent) + var(--_icon-indent));
+    width: calc(
+      var(--vaadin-side-nav-child-indent, 1em) * var(--_level, 0) + var(--_icon-indent, 0) *
+        (var(--vaadin-icon-size, 1lh) + var(--_gap))
+    );
     flex: none;
-    margin-inline-start: calc(var(--vaadin-side-nav-item-gap, var(--vaadin-gap-container-inline)) * -1);
+    margin-inline-start: calc(var(--_gap) * -1);
   }
 
-  slot[name='children'] {
+  [part='children'] {
     --_level: calc(var(--_level-2, 0) + 1);
   }
 
-  slot[name='children']::slotted(*) {
+  [part='children'] ::slotted(*) {
     --_level-2: var(--_level);
   }
 
   @media (forced-colors: active) {
+    [part='content'] {
+      border: 1px solid Canvas !important;
+    }
+
     :host([current]) [part='content'] {
-      color: Highlight;
+      color: Highlight !important;
+      border-color: Highlight !important;
     }
 
     :host([disabled]) [part='content'] {
-      --vaadin-side-nav-item-color: GrayText;
+      --vaadin-side-nav-item-text-color: GrayText !important;
     }
 
     :host([disabled]) [part='toggle-button']::before {
-      background: GrayText;
+      background: GrayText !important;
     }
   }
 `;
 
-export const sideNavItemStyles = [sharedStyles, sideNavItem];
+export const sideNavItemStyles = [sharedStyles, screenReaderOnly, sideNavItem];

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

@@ -3,14 +3,16 @@
  * Copyright (c) 2023 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const sharedStyles = css`
   :host {
     display: flex;
     flex-direction: column;
-    gap: var(--vaadin-side-nav-items-gap, var(--vaadin-gap-container-block));
+    min-width: 0;
+    max-width: 100%;
+    gap: var(--vaadin-side-nav-items-gap, var(--vaadin-gap-s));
     cursor: default;
     -webkit-tap-highlight-color: transparent;
   }
@@ -35,14 +37,14 @@ export const sharedStyles = css`
 
   [part='toggle-button'] {
     border-radius: var(--vaadin-side-nav-item-border-radius, var(--vaadin-radius-s));
-    color: var(--vaadin-color-subtle);
+    color: var(--vaadin-text-color-secondary);
   }
 
   [part='toggle-button']::before {
     content: '';
     display: block;
     background: currentColor;
-    mask-image: var(--_vaadin-icon-chevron-down);
+    mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
     height: var(--vaadin-icon-size, 1lh);
     rotate: -90deg;
@@ -76,7 +78,11 @@ export const sharedStyles = css`
     list-style-type: none;
     display: flex;
     flex-direction: column;
-    gap: var(--vaadin-side-nav-items-gap, var(--vaadin-gap-container-block));
+    gap: var(--vaadin-side-nav-items-gap, var(--vaadin-gap-s));
+  }
+
+  [part='children'] slot {
+    --_icon-indent-2: var(--_icon-indent);
   }
 
   :focus-visible {

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

@@ -21,7 +21,7 @@ export declare class SideNavChildrenMixinClass {
    * just the individual properties you want to change.
    *
    * The object has the following structure and default values:
-   * ```
+   * ```js
    * {
    *   toggle: 'Toggle child items'
    * }

package/src/vaadin-side-nav-children-mixin.js

@@ -65,7 +65,7 @@ export const SideNavChildrenMixin = (superClass) =>
      * just the individual properties you want to change.
      *
      * The object has the following structure and default values:
-     * ```
+     * ```js
      * {
      *   toggle: 'Toggle child items'
      * }

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

@@ -72,6 +72,7 @@ export type SideNavItemEventMap = HTMLElementEventMap & SideNavItemCustomEventMa
  * `disabled`     | Set when the element is disabled.
  * `expanded`     | Set when the element is expanded.
  * `has-children` | Set when the element has child items.
+ * `has-tooltip`  | Set when the element has a slotted tooltip.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

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

@@ -9,11 +9,12 @@ import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { matchPaths } from '@vaadin/component-base/src/url-utils.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { location } from './location.js';
-import { sideNavItemStyles } from './styles/vaadin-side-nav-item-core-styles.js';
+import { sideNavItemStyles } from './styles/vaadin-side-nav-item-base-styles.js';
 import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
 
 /**
@@ -69,6 +70,7 @@ import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
  * `disabled`     | Set when the element is disabled.
  * `expanded`     | Set when the element is expanded.
  * `has-children` | Set when the element has child items.
+ * `has-tooltip`  | Set when the element has a slotted tooltip.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
@@ -174,6 +176,11 @@ class SideNavItem extends SideNavChildrenMixin(
         type: Boolean,
         value: false,
       },
+
+      /** @private */
+      __tooltipText: {
+        type: String,
+      },
     };
   }
 
@@ -246,7 +253,7 @@ class SideNavItem extends SideNavChildrenMixin(
   /** @protected */
   render() {
     return html`
-      <div part="content" @click="${this._onContentClick}">
+      <div id="content" part="content" @click="${this._onContentClick}">
         <a
           id="link"
           ?disabled="${this.disabled}"
@@ -259,6 +266,7 @@ class SideNavItem extends SideNavChildrenMixin(
         >
           <slot name="prefix"></slot>
           <slot></slot>
+          <div class="sr-only">${this.__tooltipText}</div>
           <slot name="suffix"></slot>
         </a>
         <button
@@ -274,9 +282,29 @@ class SideNavItem extends SideNavChildrenMixin(
         <slot name="children"></slot>
       </ul>
       <div hidden id="i18n">${this.__effectiveI18n.toggle}</div>
+      <slot name="tooltip"></slot>
     `;
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._tooltipController = new TooltipController(this);
+    this._tooltipController.setTarget(this.$.content);
+    this._tooltipController.setAriaTarget(null);
+    this._tooltipController.addEventListener('tooltip-changed', (event) => {
+      const { node } = event.detail;
+      if (node) {
+        this.__tooltipText = node.textContent.trim();
+        node.setAttribute('aria-hidden', 'true');
+      } else {
+        this.__tooltipText = '';
+      }
+    });
+    this.addController(this._tooltipController);
+  }
+
   /** @private */
   _onButtonClick(event) {
     // Prevent the event from being handled
@@ -313,6 +341,11 @@ class SideNavItem extends SideNavChildrenMixin(
 
   /** @private */
   __expandParentItems() {
+    const sideNav = this.closest('vaadin-side-nav');
+    if (sideNav && sideNav.noAutoExpand) {
+      return;
+    }
+
     const parentItem = this.__getParentItem();
     if (parentItem) {
       parentItem.__expandParentItems();

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

@@ -127,6 +127,15 @@ declare class SideNav extends SideNavChildrenMixin(FocusMixin(ElementMixin(Thema
    */
   location: any;
 
+  /**
+   * Whether to expand parent items of the nested matching item after initial
+   * rendering or navigation. By default, all the parent items are expanded.
+   * Set to true to disable this behavior.
+   *
+   * @attr {boolean} no-auto-expand
+   */
+  noAutoExpand: boolean;
+
   addEventListener<K extends keyof SideNavEventMap>(
     type: K,
     listener: (this: SideNav, ev: SideNavEventMap[K]) => void,

package/src/vaadin-side-nav.js

@@ -13,7 +13,7 @@ import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { sideNavSlotStyles, sideNavStyles } from './styles/vaadin-side-nav-core-styles.js';
+import { sideNavSlotStyles, sideNavStyles } from './styles/vaadin-side-nav-base-styles.js';
 import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
 
 /**
@@ -150,6 +150,19 @@ class SideNav extends SideNavChildrenMixin(
       location: {
         observer: '__locationChanged',
       },
+
+      /**
+       * Whether to expand parent items of the nested matching item after initial
+       * rendering or navigation. By default, all the parent items are expanded.
+       * Set to true to disable this behavior.
+       *
+       * @attr {boolean} no-auto-expand
+       */
+      noAutoExpand: {
+        type: Boolean,
+        reflectToAttribute: true,
+        value: false,
+      },
     };
   }
 

package/vaadin-side-nav-item.js

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

package/vaadin-side-nav.js

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

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "25.0.0-alpha8",
+  "version": "25.0.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```\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\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  <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.",
           "attributes": [
             {
               "name": "disabled",
@@ -97,7 +97,7 @@
               },
               {
                 "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```\n{\n  toggle: 'Toggle child items'\n}\n```",
+                "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```",
                 "value": {
                   "type": [
                     "SideNavI18n"
@@ -212,6 +212,17 @@
                 ]
               }
             },
+            {
+              "name": "no-auto-expand",
+              "description": "Whether to expand parent items of the nested matching item after initial\nrendering or navigation. By default, all the parent items are expanded.\nSet to true to disable this behavior.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -228,7 +239,7 @@
             "properties": [
               {
                 "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```\n{\n  toggle: 'Toggle child items'\n}\n```",
+                "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```",
                 "value": {
                   "type": [
                     "SideNavI18n"
@@ -271,6 +282,17 @@
                     "any"
                   ]
                 }
+              },
+              {
+                "name": "noAutoExpand",
+                "description": "Whether to expand parent items of the nested matching item after initial\nrendering or navigation. By default, all the parent items are expanded.\nSet to true to disable this behavior.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "25.0.0-alpha8",
+  "version": "25.0.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```\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\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  <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.",
           "extension": true,
           "attributes": [
             {
@@ -49,7 +49,7 @@
             },
             {
               "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```\n{\n  toggle: 'Toggle child items'\n}\n```",
+              "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```",
               "value": {
                 "kind": "expression"
               }
@@ -110,9 +110,16 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "?noAutoExpand",
+              "description": "Whether to expand parent items of the nested matching item after initial\nrendering or navigation. By default, all the parent items are expanded.\nSet to true to disable this behavior.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "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```\n{\n  toggle: 'Toggle child items'\n}\n```",
+              "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```",
               "value": {
                 "kind": "expression"
               }

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

@@ -1,10 +0,0 @@
-/**
- * @license
- * Copyright (c) 2023 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { CSSResult } from 'lit';
-
-export const sideNavStyles: CSSResult;
-
-export const sideNavSlotStyles: CSSResult;

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

@@ -1,39 +0,0 @@
-/**
- * @license
- * Copyright (c) 2023 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from 'lit';
-
-export const sideNavStyles = css`
-  :host {
-    display: block;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  button {
-    display: flex;
-    align-items: center;
-    justify-content: inherit;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    background-color: initial;
-    color: inherit;
-    border: initial;
-    outline: none;
-    font: inherit;
-    text-align: inherit;
-  }
-
-  [part='children'] {
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-  }
-`;
-
-export const sideNavSlotStyles = css``;

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

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2023 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { CSSResult } from 'lit';
-
-export const sideNavItemStyles: CSSResult;

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

@@ -1,70 +0,0 @@
-/**
- * @license
- * Copyright (c) 2023 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from 'lit';
-
-export const sideNavItemStyles = css`
-  :host {
-    display: block;
-  }
-
-  :host([hidden]),
-  [hidden] {
-    display: none !important;
-  }
-
-  :host([disabled]) {
-    pointer-events: none;
-  }
-
-  [part='content'] {
-    display: flex;
-    align-items: center;
-  }
-
-  [part='link'] {
-    flex: auto;
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    color: inherit;
-    font: inherit;
-  }
-
-  button {
-    appearance: none;
-    flex: none;
-    position: relative;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: transparent;
-  }
-
-  [part='children'] {
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-  }
-
-  :host(:not([has-children])) button {
-    display: none !important;
-  }
-
-  slot[name='prefix'],
-  slot[name='suffix'] {
-    flex: none;
-  }
-
-  slot:not([name]) {
-    display: block;
-    flex: auto;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-`;

package/theme/lumo/vaadin-side-nav-item-styles.d.ts

@@ -1,7 +0,0 @@
-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';
-export declare const sideNavItemStyles: import("lit").CSSResult;

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

@@ -1,123 +0,0 @@
-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 { fieldButton } from '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-export const sideNavItemStyles = css`
-  :host {
-    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
-    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
-  }
-
-  [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='link'][href] {
-    cursor: pointer;
-  }
-
-  :host([disabled]) [part='link'] {
-    color: var(--lumo-disabled-text-color);
-  }
-
-  [part='toggle-button'] {
-    margin-inline-end: calc(var(--lumo-space-xs) * -1);
-    width: var(--lumo-size-s);
-    height: var(--lumo-size-s);
-  }
-
-  :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 {
-    content: var(--lumo-icons-dropdown);
-    transform: rotate(-90deg);
-    transition: transform 140ms;
-  }
-
-  :host([dir='rtl']) [part='toggle-button']::before {
-    transform: rotate(90deg);
-  }
-
-  :host([expanded]) [part='toggle-button']::before {
-    transform: none;
-  }
-
-  [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 var(--_focus-ring-width) var(--_focus-ring-color);
-  }
-
-  [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;
-    flex-shrink: 0;
-    color: var(--lumo-contrast-60pct);
-  }
-
-  :host([disabled]) slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
-    color: var(--lumo-disabled-text-color);
-  }
-
-  :host([current]) 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([current]) [part='content'] {
-    background-color: var(--lumo-primary-color-10pct);
-    color: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
-    border-radius: var(--lumo-border-radius-m);
-  }
-`;
-
-registerStyles('vaadin-side-nav-item', [fieldButton, sideNavItemStyles], { moduleId: 'lumo-side-nav-item' });

package/theme/lumo/vaadin-side-nav-item.d.ts

@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright (c) 2023 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-side-nav-item-styles.js';
-import '../../src/vaadin-side-nav-item.js';

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

@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright (c) 2023 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-side-nav-item-styles.js';
-import '../../src/vaadin-side-nav-item.js';

package/theme/lumo/vaadin-side-nav-styles.d.ts

@@ -1,7 +0,0 @@
-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';
-export declare const sideNavStyles: import("lit").CSSResult;

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

@@ -1,81 +0,0 @@
-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 sideNavStyles = css`
-  :host {
-    font-family: var(--lumo-font-family);
-    font-size: var(--lumo-font-size-m);
-    font-weight: 500;
-    line-height: var(--lumo-line-height-xs);
-    color: var(--lumo-body-text-color);
-    -webkit-tap-highlight-color: transparent;
-    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
-    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
-  }
-
-  [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);
-  }
-
-  [part='label'] ::slotted([slot='label']) {
-    color: var(--lumo-secondary-text-color);
-    margin: var(--lumo-space-s);
-  }
-
-  :host([focus-ring]) [part='label'] {
-    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
-  }
-
-  [part='toggle-button'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--lumo-size-s);
-    height: var(--lumo-size-s);
-    margin-inline: auto 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);
-  }
-
-  [part='toggle-button']::before {
-    content: var(--lumo-icons-angle-right);
-    transition: transform 140ms;
-  }
-
-  :host(:not([collapsible])) [part='toggle-button'] {
-    display: none !important;
-  }
-
-  :host(:not([collapsed])) [part='toggle-button']::before {
-    transform: rotate(90deg);
-  }
-
-  :host([collapsed][dir='rtl']) [part='toggle-button']::before {
-    transform: rotate(180deg);
-  }
-
-  @media (any-hover: hover) {
-    [part='label']:hover [part='toggle-button'] {
-      color: var(--lumo-body-text-color);
-    }
-  }
-`;
-
-registerStyles('vaadin-side-nav', sideNavStyles, { moduleId: 'lumo-side-nav' });

package/theme/lumo/vaadin-side-nav.d.ts

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2023 - 2025 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/lumo/vaadin-side-nav.js

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2023 - 2025 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';