@vaadin/side-nav 25.0.0-alpha2 → 25.0.0-alpha21

package/package.json

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

package/{theme/lumo/vaadin-side-nav.js → src/styles/vaadin-side-nav-base-styles.d.ts}

@@ -3,6 +3,8 @@
  * 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';
+import type { CSSResult } from 'lit';
+
+export const sideNavStyles: CSSResult;
+
+export const sideNavSlotStyles: CSSResult;

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

@@ -0,0 +1,64 @@
+/**
+ * @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/component-base/src/styles/style-props.js';
+import { css } from 'lit';
+import { sharedStyles } from './vaadin-side-nav-shared-base-styles.js';
+
+const sideNav = css`
+  :host {
+    white-space: nowrap;
+    touch-action: manipulation;
+  }
+
+  [part='label'] {
+    align-self: start;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    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, max(11px, 0.875em));
+    font-weight: var(--vaadin-side-nav-label-font-weight, 500);
+    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-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);
+  }
+
+  vaadin-side-nav:not(:has([slot='label']))::part(label) {
+    display: none;
+  }
+`;

package/{theme/lumo/vaadin-side-nav-item.js → src/styles/vaadin-side-nav-item-base-styles.d.ts}

@@ -3,5 +3,6 @@
  * 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';
+import type { CSSResult } from 'lit';
+
+export const sideNavItemStyles: CSSResult;

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

@@ -0,0 +1,124 @@
+/**
+ * @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/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-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-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);
+    border-radius: var(--vaadin-side-nav-item-border-radius, var(--vaadin-radius-m));
+    cursor: var(--vaadin-clickable-cursor);
+    touch-action: manipulation;
+  }
+
+  :host([current]) [part='content'] {
+    --vaadin-side-nav-item-background: var(--vaadin-background-container);
+    --vaadin-side-nav-item-color: var(--vaadin-text-color);
+  }
+
+  :host([disabled]) {
+    --vaadin-clickable-cursor: var(--vaadin-disabled-cursor);
+  }
+
+  :host([disabled]) [part='content'] {
+    --vaadin-side-nav-item-color: var(--vaadin-text-color-disabled);
+  }
+
+  [part='link'] {
+    flex: auto;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: inherit;
+    text-decoration: none;
+    color: inherit;
+    outline: 0;
+  }
+
+  :host(:not([has-children])) [part='toggle-button'] {
+    display: none !important;
+  }
+
+  slot:not([name]) {
+    display: block;
+    flex: auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    /* Don't clip ascenders or descenders */
+    padding-block: 0.25em;
+    margin-block: -0.25em;
+  }
+
+  slot:is([name='prefix'], [name='suffix'])::slotted(*) {
+    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 {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+  }
+
+  [part='content']:not(:has([href])) [part='toggle-button']:focus-visible {
+    outline: 0;
+  }
+
+  /* Hierarchy indentation */
+  [part='content']::before {
+    content: '';
+    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(--_gap) * -1);
+  }
+
+  [part='children'] {
+    --_level: calc(var(--_level-2, 0) + 1);
+  }
+
+  [part='children'] ::slotted(*) {
+    --_level-2: var(--_level);
+  }
+
+  @media (forced-colors: active) {
+    [part='content'] {
+      border: 1px solid Canvas !important;
+    }
+
+    :host([current]) [part='content'] {
+      color: Highlight !important;
+      border-color: Highlight !important;
+    }
+
+    :host([disabled]) [part='content'] {
+      --vaadin-side-nav-item-color: GrayText !important;
+    }
+
+    :host([disabled]) [part='toggle-button']::before {
+      background: GrayText !important;
+    }
+  }
+`;
+
+export const sideNavItemStyles = [sharedStyles, screenReaderOnly, sideNavItem];

package/{theme/lumo/vaadin-side-nav-item.d.ts → src/styles/vaadin-side-nav-shared-base-styles.d.ts}

@@ -3,5 +3,6 @@
  * 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';
+import type { CSSResult } from 'lit';
+
+export const sharedStyles: CSSResult;

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

@@ -0,0 +1,97 @@
+/**
+ * @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/component-base/src/styles/style-props.js';
+import { css } from 'lit';
+
+export const sharedStyles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    max-width: 100%;
+    gap: var(--vaadin-side-nav-items-gap, var(--vaadin-gap-s));
+    cursor: default;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([hidden]),
+  [hidden] {
+    display: none !important;
+  }
+
+  button {
+    appearance: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    cursor: var(--vaadin-clickable-cursor);
+    flex: none;
+  }
+
+  [part='toggle-button'] {
+    border-radius: var(--vaadin-side-nav-item-border-radius, var(--vaadin-radius-s));
+    color: var(--vaadin-text-color-secondary);
+  }
+
+  [part='toggle-button']::before {
+    content: '';
+    display: block;
+    background: currentColor;
+    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;
+  }
+
+  :host([dir='rtl']) [part='toggle-button']::before {
+    scale: -1;
+  }
+
+  :host(:is(vaadin-side-nav-item[expanded], vaadin-side-nav:not([collapsed]))) [part='toggle-button'] {
+    rotate: 90deg;
+  }
+
+  :host([dir='rtl']:is(vaadin-side-nav-item[expanded], vaadin-side-nav:not([collapsed]))) [part='toggle-button'] {
+    rotate: -90deg;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    [part='toggle-button'] {
+      transition: rotate 150ms;
+    }
+  }
+
+  :host([disabled]) [part='toggle-button'] {
+    opacity: 0.5;
+  }
+
+  [part='children'] {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--vaadin-side-nav-items-gap, var(--vaadin-gap-s));
+  }
+
+  [part='children'] slot {
+    --_icon-indent-2: var(--_icon-indent);
+  }
+
+  :focus-visible {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+  }
+
+  @media (forced-colors: active) {
+    [part='toggle-button']::before {
+      background: CanvasText;
+    }
+  }
+`;

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,10 +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 { sideNavItemBaseStyles } from './vaadin-side-nav-base-styles.js';
+import { sideNavItemStyles } from './styles/vaadin-side-nav-item-base-styles.js';
 import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
 
 /**
@@ -68,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.
  *
@@ -80,7 +83,9 @@ import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
  * @mixes ElementMixin
  * @mixes SideNavChildrenMixin
  */
-class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement))))) {
+class SideNavItem extends SideNavChildrenMixin(
+  DisabledMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
+) {
   static get is() {
     return 'vaadin-side-nav-item';
   }
@@ -171,11 +176,16 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
         type: Boolean,
         value: false,
       },
+
+      /** @private */
+      __tooltipText: {
+        type: String,
+      },
     };
   }
 
   static get styles() {
-    return [sideNavItemBaseStyles];
+    return sideNavItemStyles;
   }
 
   constructor() {
@@ -243,7 +253,7 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
   /** @protected */
   render() {
     return html`
-      <div part="content" @click="${this._onContentClick}">
+      <div id="content" part="content" @click="${this._onContentClick}">
         <a
           id="link"
           ?disabled="${this.disabled}"
@@ -256,6 +266,7 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
         >
           <slot name="prefix"></slot>
           <slot></slot>
+          <div class="sr-only">${this.__tooltipText}</div>
           <slot name="suffix"></slot>
         </a>
         <button
@@ -271,9 +282,29 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
         <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
@@ -283,9 +314,13 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
   }
 
   /** @private */
-  _onContentClick() {
+  _onContentClick(e) {
+    // Navigate if path is defined and not clicking on the link directly
+    if (this.path && !e.composedPath().find((el) => el === this.$.link)) {
+      this.$.link.click();
+    }
     // Toggle item expanded state unless the link has a non-empty path
-    if (this.path == null && this.hasAttribute('has-children')) {
+    else if (this.path == null && this.hasAttribute('has-children') && !this.disabled) {
       this.__toggleExpanded();
     }
   }

package/src/vaadin-side-nav.js

@@ -3,14 +3,17 @@
  * 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 { html, LitElement } from 'lit';
 import { FocusMixin } from '@vaadin/a11y-base/src/focus-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 { 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 { sideNavBaseStyles } from './vaadin-side-nav-base-styles.js';
+import { sideNavSlotStyles, sideNavStyles } from './styles/vaadin-side-nav-base-styles.js';
 import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
 
 /**
@@ -70,7 +73,9 @@ import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
  * @mixes ElementMixin
  * @mixes SideNavChildrenMixin
  */
-class SideNav extends SideNavChildrenMixin(FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement))))) {
+class SideNav extends SideNavChildrenMixin(
+  SlotStylesMixin(FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))))),
+) {
   static get is() {
     return 'vaadin-side-nav';
   }
@@ -149,7 +154,12 @@ class SideNav extends SideNavChildrenMixin(FocusMixin(ElementMixin(ThemableMixin
   }
 
   static get styles() {
-    return sideNavBaseStyles;
+    return sideNavStyles;
+  }
+
+  /** @protected */
+  get slotStyles() {
+    return [sideNavSlotStyles];
   }
 
   constructor() {

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-alpha2",
+  "version": "25.0.0-alpha21",
   "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"
@@ -228,7 +228,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"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "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"
               }
@@ -112,7 +112,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"
               }

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

@@ -1,102 +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 sideNavItemBaseStyles = 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 {
-    -webkit-appearance: none;
-    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;
-  }
-`;
-
-export const sideNavBaseStyles = 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;
-  }
-`;

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,125 +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;
-  }
-
-  @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 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-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';