@vaadin/side-nav 24.8.5 → 24.9.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/side-nav",
-  "version": "24.8.5",
+  "version": "24.9.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -35,16 +35,16 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "~24.8.5",
-    "@vaadin/component-base": "~24.8.5",
-    "@vaadin/vaadin-lumo-styles": "~24.8.5",
-    "@vaadin/vaadin-material-styles": "~24.8.5",
-    "@vaadin/vaadin-themable-mixin": "~24.8.5",
+    "@vaadin/a11y-base": "24.9.0-alpha2",
+    "@vaadin/component-base": "24.9.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "24.9.0-alpha2",
+    "@vaadin/vaadin-material-styles": "24.9.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "24.9.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.8.5",
-    "@vaadin/test-runner-commands": "~24.8.5",
+    "@vaadin/chai-plugins": "24.9.0-alpha2",
+    "@vaadin/test-runner-commands": "24.9.0-alpha2",
     "@vaadin/testing-helpers": "^1.1.0",
     "lit": "^3.0.0",
     "sinon": "^18.0.0"
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "a519b0d2b1d09d1ddaa4ff6829819f8a2be30ad8"
+  "gitHead": "dd99dece1b54942ab0e421892b089e506822c5f5"
 }

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

@@ -6,9 +6,11 @@
 import { html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import { screenReaderOnly } from '@vaadin/a11y-base/src/styles/sr-only-styles.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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { location } from './location.js';
@@ -171,11 +173,16 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
         type: Boolean,
         value: false,
       },
+
+      /** @private */
+      __tooltipText: {
+        type: String,
+      },
     };
   }
 
   static get styles() {
-    return [sideNavItemBaseStyles];
+    return [sideNavItemBaseStyles, screenReaderOnly];
   }
 
   constructor() {
@@ -243,7 +250,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 +263,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 +279,30 @@ 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) {
+        const overlay = node._overlayElement;
+        this.__tooltipText = overlay ? overlay.textContent.trim() : '';
+        node.setAttribute('aria-hidden', 'true');
+      } else {
+        this.__tooltipText = '';
+      }
+    });
+    this.addController(this._tooltipController);
+  }
+
   /** @private */
   _onButtonClick(event) {
     // Prevent the event from being handled

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.8.5",
+  "version": "24.9.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.8.5",
+  "version": "24.9.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {