fix: enforce tabsheet panels to be hidden (#10002)

sissbruecker · web-flow · commit 9ac5abea6abd · 2025-08-15T11:42:44.000+03:00
diff --git a/packages/tabsheet/src/styles/vaadin-tabsheet-base-styles.js b/packages/tabsheet/src/styles/vaadin-tabsheet-base-styles.js
@@ -38,6 +38,10 @@ export const tabSheetStyles = [
       min-width: 128px;
     }
 
+    ::slotted([hidden]) {
+      display: none !important;
+    }
+
     [part='content'] {
       position: relative;
       flex: 1;
diff --git a/packages/tabsheet/test/tabsheet.test.js b/packages/tabsheet/test/tabsheet.test.js
@@ -161,6 +161,15 @@ describe('tabsheet', () => {
       expect(getPanels()[2].hidden).to.be.true;
     });
 
+    it('should override display style when panel is hidden', async () => {
+      tabsheet.selected = 1;
+      await nextFrame();
+      const panel2 = getPanels()[2];
+      panel2.style.display = 'contents';
+      const display = getComputedStyle(panel2).display;
+      expect(display).to.equal('none');
+    });
+
     it('should bind dynamically added tab and panel', async () => {
       // Create a new tab and panel
       const tab = document.createElement('vaadin-tab');
diff --git a/packages/vaadin-lumo-styles/src/components/tabsheet.css b/packages/vaadin-lumo-styles/src/components/tabsheet.css
@@ -33,6 +33,10 @@
     margin: calc(var(--lumo-space-xs) * -1) calc(var(--lumo-space-s) * -1);
   }
 
+  ::slotted([hidden]) {
+    display: none !important;
+  }
+
   [part='content'] {
     position: relative;
     flex: 1;
