@vaadin/tabsheet 24.3.9 → 24.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tabsheet",
-  "version": "24.3.9",
+  "version": "24.3.11",
   "publishConfig": {
     "access": "public"
   },
@@ -36,12 +36,12 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~24.3.9",
-    "@vaadin/scroller": "~24.3.9",
-    "@vaadin/tabs": "~24.3.9",
-    "@vaadin/vaadin-lumo-styles": "~24.3.9",
-    "@vaadin/vaadin-material-styles": "~24.3.9",
-    "@vaadin/vaadin-themable-mixin": "~24.3.9"
+    "@vaadin/component-base": "~24.3.11",
+    "@vaadin/scroller": "~24.3.11",
+    "@vaadin/tabs": "~24.3.11",
+    "@vaadin/vaadin-lumo-styles": "~24.3.11",
+    "@vaadin/vaadin-material-styles": "~24.3.11",
+    "@vaadin/vaadin-themable-mixin": "~24.3.11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -52,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "89f71cc95b22840de910070c145f9cbf9714f4f4"
+  "gitHead": "890abeb0937416074456782aa90ed92c1bfe9cac"
 }

package/src/vaadin-tabsheet.js

@@ -25,11 +25,29 @@ class TabsSlotController extends SlotController {
     super(host, 'tabs');
     this.__tabsItemsChangedListener = this.__tabsItemsChangedListener.bind(this);
     this.__tabsSelectedChangedListener = this.__tabsSelectedChangedListener.bind(this);
+    this.__tabIdObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        const tab = mutation.target;
+
+        host.__linkTabAndPanel(tab);
+
+        if (tab.selected) {
+          host.__togglePanels(tab);
+        }
+      });
+    });
   }
 
   /** @private */
   __tabsItemsChangedListener() {
-    this.host._setItems(this.tabs.items);
+    this.__tabIdObserver.disconnect();
+    const items = this.tabs.items || [];
+    items.forEach((tab) => {
+      this.__tabIdObserver.observe(tab, {
+        attributeFilter: ['id'],
+      });
+    });
+    this.host._setItems(items);
   }
 
   /** @private */
@@ -242,16 +260,7 @@ class TabSheet extends ControllerMixin(DelegateStateMixin(ElementMixin(ThemableM
     }
 
     items.forEach((tabItem) => {
-      const panel = panels.find((panel) => panel.getAttribute('tab') === tabItem.id);
-      if (panel) {
-        panel.role = 'tabpanel';
-        if (!panel.id) {
-          panel.id = `tabsheet-panel-${generateUniqueId()}`;
-        }
-        panel.setAttribute('aria-labelledby', tabItem.id);
-
-        tabItem.setAttribute('aria-controls', panel.id);
-      }
+      this.__linkTabAndPanel(tabItem, panels);
     });
   }
 
@@ -264,11 +273,14 @@ class TabSheet extends ControllerMixin(DelegateStateMixin(ElementMixin(ThemableM
       return;
     }
 
-    const content = this.shadowRoot.querySelector('[part="content"]');
+    this.__togglePanels(items[selected], panels);
+  }
 
-    const selectedTab = items[selected];
+  /** @private */
+  __togglePanels(selectedTab, panels = this.__panels) {
     const selectedTabId = selectedTab ? selectedTab.id : '';
     const selectedPanel = panels.find((panel) => panel.getAttribute('tab') === selectedTabId);
+    const content = this.shadowRoot.querySelector('[part="content"]');
 
     // Mark loading state if a selected panel is not found.
     this.toggleAttribute('loading', !selectedPanel);
@@ -288,6 +300,19 @@ class TabSheet extends ControllerMixin(DelegateStateMixin(ElementMixin(ThemableM
       panel.hidden = panel !== selectedPanel;
     });
   }
+
+  /** @private */
+  __linkTabAndPanel(tab, panels = this.__panels) {
+    const panel = panels.find((panel) => panel.getAttribute('tab') === tab.id);
+    if (panel) {
+      panel.role = 'tabpanel';
+      if (!panel.id) {
+        panel.id = `tabsheet-panel-${generateUniqueId()}`;
+      }
+      panel.setAttribute('aria-labelledby', tab.id);
+      tab.setAttribute('aria-controls', panel.id);
+    }
+  }
 }
 
 defineCustomElement(TabSheet);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tabsheet",
-  "version": "24.3.9",
+  "version": "24.3.11",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tabsheet",
-  "version": "24.3.9",
+  "version": "24.3.11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {