fix: hide side-nav label element when it is empty (#10194)

jouni · web-flow · commit 89bdb78afae3 · 2025-09-23T13:55:27.000+03:00
diff --git a/packages/side-nav/src/styles/vaadin-side-nav-base-styles.js b/packages/side-nav/src/styles/vaadin-side-nav-base-styles.js
@@ -57,4 +57,8 @@ export const sideNavSlotStyles = css`
   )::part(children) {
     --_level: var(--_level-2, 0);
   }
+
+  vaadin-side-nav:not(:has([slot='label']))::part(label) {
+    display: none;
+  }
 `;
diff --git a/packages/side-nav/test/accessibility.test.js b/packages/side-nav/test/accessibility.test.js
@@ -92,6 +92,7 @@ describe('accessibility', () => {
         <div>
           <input />
           <vaadin-side-nav collapsible>
+            <span slot="label">Label</span>
             <vaadin-side-nav-item path="/foo">Foo</vaadin-side-nav-item>
             <vaadin-side-nav-item path="/bar">Bar</vaadin-side-nav-item>
           </vaadin-side-nav>

Original file line number	Diff line number	Diff line change
@@ -57,4 +57,8 @@ export const sideNavSlotStyles = css`
`57`	`57`	`)::part(children) {`
`58`	`58`	`--_level: var(--_level-2, 0);`
`59`	`59`	`}`
	`60`	`+`
	`61`	`+ vaadin-side-nav:not(:has([slot='label']))::part(label) {`
	`62`	`+ display: none;`
	`63`	`+ }`
`60`	`64`	`;