@nanoporetech-digital/components 2.0.1 → 2.1.2

package/dist/collection/components/date-input/date-input.js

@@ -393,7 +393,7 @@ export class DateInput {
         "references": {
           "LocalDateOpts": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -514,7 +514,7 @@ export class DateInput {
         "references": {
           "DaysOfWeek": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
           }
         }
       },
@@ -538,7 +538,7 @@ export class DateInput {
         "references": {
           "DuetLocalizedText": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -580,7 +580,7 @@ export class DateInput {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -932,7 +932,7 @@ export class DateInput {
         "references": {
           "DateInputChangeEventDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -955,7 +955,7 @@ export class DateInput {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -977,7 +977,7 @@ export class DateInput {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"

package/dist/collection/components/date-picker/date-picker.js

@@ -370,7 +370,7 @@ export class DatePicker {
         "references": {
           "DaysOfWeek": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
           }
         }
       },
@@ -395,7 +395,7 @@ export class DatePicker {
         "references": {
           "DuetLocalizedText": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -418,7 +418,7 @@ export class DatePicker {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -442,7 +442,7 @@ export class DatePicker {
         "references": {
           "DateDisabledPredicate": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -521,7 +521,7 @@ export class DatePicker {
         "references": {
           "PickerChangeEvent": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/details/details.js

@@ -234,7 +234,7 @@ export class Details {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },

package/dist/collection/components/dialog/dialog.js

@@ -336,7 +336,7 @@ export class Dialog {
         "references": {
           "StorageMethods": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
           }
         }
       },

package/dist/collection/components/file-upload/file-upload.js

@@ -655,7 +655,7 @@ export class FileUpload {
         "references": {
           "FileWithUrl": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -713,7 +713,7 @@ export class FileUpload {
         "references": {
           "FileInputChangeEventDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -766,7 +766,7 @@ export class FileUpload {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -788,7 +788,7 @@ export class FileUpload {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"

package/dist/collection/components/global-nav/global-nav.js

@@ -1353,7 +1353,7 @@ export class GlobalNav {
           },
           "SearchIndex": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -1602,7 +1602,7 @@ export class GlobalNav {
         "references": {
           "AloliaSearchResultDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1622,7 +1622,7 @@ export class GlobalNav {
         "references": {
           "AlgoliaNetworkError": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1642,7 +1642,7 @@ export class GlobalNav {
         "references": {
           "AloliaSearchResultDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/grid/grid-item.js

@@ -124,7 +124,7 @@ export class GridItem {
           },
           "GridSizes": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<void>"

package/dist/collection/components/icon/icon.js

@@ -116,7 +116,7 @@ export class Icon {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },

package/dist/collection/components/input/input.js

@@ -423,7 +423,7 @@ export class Input {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -994,7 +994,7 @@ export class Input {
         "references": {
           "TextFieldTypes": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -1153,7 +1153,7 @@ export class Input {
         "references": {
           "InputChangeEventDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1242,7 +1242,7 @@ export class Input {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1264,7 +1264,7 @@ export class Input {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"

package/dist/collection/components/nav-item/nav-item.js

@@ -488,7 +488,7 @@ export class NavItem {
         "references": {
           "NavItemEventDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -508,7 +508,7 @@ export class NavItem {
         "references": {
           "NavItemEventDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -528,7 +528,7 @@ export class NavItem {
         "references": {
           "NavItemEventDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -548,7 +548,7 @@ export class NavItem {
         "references": {
           "NavItemEventDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/range/range.js

@@ -370,7 +370,7 @@ export class Range {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -594,7 +594,7 @@ export class Range {
         "references": {
           "RangeValue": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -632,7 +632,7 @@ export class Range {
         "references": {
           "RangeChangeEventDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -655,7 +655,7 @@ export class Range {
         "references": {
           "StyleEventDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/resize-observe/resize-observe.js

@@ -176,7 +176,7 @@ export class ResizeObserve {
         "references": {
           "ResizeStateChangeEventDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/select/select.js

@@ -624,7 +624,7 @@ export class Select {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -1005,7 +1005,7 @@ export class Select {
           },
           "OptionInterface": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/components/option/option-interface.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/components/option/option-interface.ts"
           }
         }
       },
@@ -1090,7 +1090,7 @@ export class Select {
           },
           "Dropdown": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/components/dropdown/dropdown.tsx"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/components/dropdown/dropdown.tsx"
           }
         }
       },
@@ -1131,7 +1131,7 @@ export class Select {
         "references": {
           "SelectChangeEventDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1217,7 +1217,7 @@ export class Select {
         "references": {
           "InputChangeEventDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1240,7 +1240,7 @@ export class Select {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1262,7 +1262,7 @@ export class Select {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"

package/dist/collection/components/slides/slides.js

@@ -453,7 +453,7 @@ export class Slides {
         "references": {
           "FlickityOptions": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -556,7 +556,7 @@ export class Slides {
         "references": {
           "SlideAnimation": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -747,7 +747,7 @@ export class Slides {
         "references": {
           "DragEvent": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -767,7 +767,7 @@ export class Slides {
         "references": {
           "DragEvent": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -787,7 +787,7 @@ export class Slides {
         "references": {
           "DragEvent": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -807,7 +807,7 @@ export class Slides {
         "references": {
           "DragEvent": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1114,7 +1114,7 @@ export class Slides {
           },
           "Flickity": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<Flickity>"

package/dist/collection/components/tabs/tab-group.css

@@ -115,8 +115,8 @@
 }
 .nano-tab-group__active-tab-indicator {
   position: absolute;
-  -webkit-transition: var(--indicator-transition) transform ease;
-  transition: var(--indicator-transition) transform ease;
+  -webkit-transition: var(--indicator-transition) transform ease, var(--indicator-transition) width ease;
+  transition: var(--indicator-transition) transform ease, var(--indicator-transition) width ease;
 }
 .nano-tab-group__body {
   background: var(--content-bg);

package/dist/collection/components/tabs/tab-group.js

@@ -5,7 +5,7 @@ import { Component, Element, Event, Method, Prop, State, Watch, h, Host, Listen,
 import ResizeObserver from 'resize-observer-polyfill';
 import { scrollIntoView } from '../../utils/scroll';
 import { focusVisible } from '../../utils/focus-visible';
-import { displayTransition, createColorClasses, getOffset, getDirectChildren, } from '../../utils';
+import { displayTransition, createColorClasses, getOffset, getDirectChildren, raf, } from '../../utils';
 import { ComponentStore, } from '../../utils/store/component-store';
 /**
  * A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.
@@ -17,11 +17,18 @@ import { ComponentStore, } from '../../utils/store/component-store';
  * @slot tabs - Add `nano-tab` elements to add clickable tabs.
  * @slot tab-content-header - a header bar displayed above tab content.
  * @slot - Add `nano-tab-content` elements to add tabbable content.
+ *
+ * @part base - the main tab-group wrapper
+ * @part nav - the bar surrounding all the tabs and nav buttons
+ * @part tabs - the wrapper around the `nano-tab` components
+ * @part active-tab-indicator - the active indicator line
+ * @part body - the wrapper around the `nano-tab-content` components
  */
 export class TabGroup {
   constructor() {
     this.initialTouchX = null;
     this.initialTouchY = null;
+    this.mutationObservers = new WeakMap();
     this.hasScrollControls = false;
     this.hideControlRight = true;
     this.hideControlLeft = true;
@@ -179,6 +186,39 @@ export class TabGroup {
       this.initialTouchX = null;
       this.initialTouchY = null;
     };
+    this.handleContentSlotChange = () => {
+      setTimeout(() => {
+        this.setAriaLabels();
+        this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
+      });
+    };
+    this.handleTabSlotChange = (ev) => {
+      setTimeout(() => {
+        this.setAriaLabels();
+        this.handleTabScroll();
+        this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
+        this.updateScrollControls();
+      }, 500);
+      /** maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */
+      const nodes = ev.target.assignedNodes({ flatten: true });
+      nodes.forEach((node) => {
+        if (!this.mutationObservers.get(node)) {
+          const mo = new MutationObserver(() => {
+            setTimeout(() => {
+              this.syncActiveTabIndicator();
+              this.handleTabScroll();
+              this.updateScrollControls();
+            }, 500);
+          });
+          this.mutationObservers.set(node, mo);
+          mo.observe(node, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+          });
+        }
+      });
+    };
   }
   handleTabNameChange() {
     if (this.activeTab && this.activeTab.panel === this.tab)
@@ -350,25 +390,14 @@ export class TabGroup {
       focusVisible.observe(this.leftBtn);
       focusVisible.observe(this.rightBtn);
     }
-    this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());
-    this.resizeObserver.observe(this.nav);
-    this.mutationObserver = new MutationObserver((mutations) => {
-      if (mutations.some((mutation) => {
-        return !['aria-labelledby', 'aria-controls'].includes(mutation.attributeName);
-      })) {
-        setTimeout(() => this.setAriaLabels());
-      }
-      setTimeout(() => this.handleTabScroll(), 500);
-      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
-      if (this.activeTab)
-        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');
-    });
-    this.mutationObserver.observe(this.host, {
-      attributes: true,
-      childList: true,
-      subtree: true,
+    this.resizeObserver = new ResizeObserver(() => {
+      setTimeout(() => {
+        this.updateScrollControls();
+        this.syncActiveTabIndicator();
+      }, 500);
     });
-    requestAnimationFrame(() => this.updateScrollControls());
+    this.resizeObserver.observe(this.nav);
+    raf(() => this.updateScrollControls());
   }
   connectedCallback() {
     this.isRtl =
@@ -376,8 +405,6 @@ export class TabGroup {
         this.host.ownerDocument.dir === 'rtl';
   }
   disconnectedCallback() {
-    if (this.mutationObserver)
-      this.mutationObserver.disconnect();
     focusVisible.unobserve(this.tabGroup);
     if (this.leftBtn) {
       focusVisible.unobserve(this.leftBtn);
@@ -397,16 +424,16 @@ export class TabGroup {
           'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,
           'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,
         }, onClick: this.handleClick, onKeyDown: this.handleKeyDown },
-        h("div", { class: "nano-tab-group__nav-container" },
+        h("div", { class: "nano-tab-group__nav-container", part: "nav" },
           this.placement === 'top' && (h("button", { class: {
               'nano-tab-group__scroll-button': true,
               'nano-tab-group__scroll-button--left': true,
             }, ref: (btn) => (this.leftBtn = btn), onClick: () => this.handleBtnClick(false) },
             h("nano-icon", { name: "light/chevron-left" }))),
-          h("div", { ref: (el) => (this.nav = el), key: "nav", part: "nav", class: "nano-tab-group__nav", onScroll: this.handleTabScroll },
+          h("div", { ref: (el) => (this.nav = el), class: "nano-tab-group__nav", onScroll: this.handleTabScroll },
             h("div", { ref: (el) => (this.tabs = el), part: "tabs", class: "nano-tab-group__tabs", role: "tablist" },
               h("div", { ref: (el) => (this.activeTabIndicator = el), part: "active-tab-indicator", class: "nano-tab-group__active-tab-indicator" }),
-              h("slot", { name: "tabs" }))),
+              h("slot", { name: "tabs", onSlotchange: this.handleTabSlotChange }))),
           this.placement === 'top' && (h("button", { class: {
               'nano-tab-group__scroll-button': true,
               'nano-tab-group__scroll-button--right': true,
@@ -414,7 +441,7 @@ export class TabGroup {
             h("nano-icon", { name: "light/chevron-right" })))),
         h("slot", { name: "tab-content-header" }),
         h("div", { part: "body", class: "nano-tab-group__body", onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd },
-          h("slot", null)))));
+          h("slot", { onSlotchange: this.handleContentSlotChange })))));
   }
   static get is() { return "nano-tab-group"; }
   static get encapsulation() { return "shadow"; }
@@ -474,7 +501,7 @@ export class TabGroup {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -517,7 +544,7 @@ export class TabGroup {
         "references": {
           "StorageMethods": {
             "location": "import",
-            "path": "/builds/B3xEGUt6/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
+            "path": "/builds/KNNHetV4/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
           }
         }
       },