diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index ecdd88f0..52ed83d8 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -34,8 +34,9 @@ export class Card {
     this.host.shadowRoot.addEventListener('slotchange', this.updateSlots);
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.host.shadowRoot.removeEventListener('slotchange', this.updateSlots);
+    console.log('cleanup');
   }
 
   updateSlots() {
diff --git a/src/components/details/details.tsx b/src/components/details/details.tsx
index 226c7672..cf8d97aa 100644
--- a/src/components/details/details.tsx
+++ b/src/components/details/details.tsx
@@ -69,7 +69,7 @@ export class Details {
     }
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     focusVisible.unobserve(this.details);
   }
 
diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
index 1aeedd82..c5e0666f 100644
--- a/src/components/dialog/dialog.tsx
+++ b/src/components/dialog/dialog.tsx
@@ -90,7 +90,7 @@ export class Dialog {
     }
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     unlockBodyScrolling(this.host);
 
     this.host.shadowRoot.removeEventListener('slotchange', this.updateSlots);
diff --git a/src/components/drawer/drawer.tsx b/src/components/drawer/drawer.tsx
index df9f3a1b..b37b13ab 100644
--- a/src/components/drawer/drawer.tsx
+++ b/src/components/drawer/drawer.tsx
@@ -98,7 +98,7 @@ export class Drawer {
     }
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     unlockBodyScrolling(this.host);
 
     this.host.shadowRoot.removeEventListener('slotchange', this.updateSlots);
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index 202e878f..8e95c403 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -118,7 +118,7 @@ export class Dropdown {
     }
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.hide();
     this.popover.destroy();
   }
diff --git a/src/components/icon-button/icon-button.tsx b/src/components/icon-button/icon-button.tsx
index c786ec2b..70b0255e 100644
--- a/src/components/icon-button/icon-button.tsx
+++ b/src/components/icon-button/icon-button.tsx
@@ -32,7 +32,7 @@ export class IconButton {
     focusVisible.observe(this.button);
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     focusVisible.unobserve(this.button);
   }
 
diff --git a/src/components/rating/rating.tsx b/src/components/rating/rating.tsx
index 7ec9a952..b0ac3b81 100644
--- a/src/components/rating/rating.tsx
+++ b/src/components/rating/rating.tsx
@@ -74,7 +74,7 @@ export class Rating {
     focusVisible.observe(this.rating);
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     focusVisible.unobserve(this.rating);
   }
 
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index 2a4df8ff..f0d2d5bf 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -121,7 +121,7 @@ export class Select {
     requestAnimationFrame(() => this.syncItemsFromValue());
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.menu.querySelector('slot').removeEventListener('slotchange', this.handleSlotChange);
   }
 
diff --git a/src/components/tab-group/tab-group.tsx b/src/components/tab-group/tab-group.tsx
index 05540c03..4d4bb02f 100644
--- a/src/components/tab-group/tab-group.tsx
+++ b/src/components/tab-group/tab-group.tsx
@@ -88,7 +88,7 @@ export class TabGroup {
     this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.mutationObserver.disconnect();
     focusVisible.unobserve(this.tabGroup);
     this.resizeObserver.unobserve(this.nav);
diff --git a/src/components/textarea/textarea.tsx b/src/components/textarea/textarea.tsx
index 767eb6e4..6f1eacfb 100644
--- a/src/components/textarea/textarea.tsx
+++ b/src/components/textarea/textarea.tsx
@@ -114,7 +114,7 @@ export class Textarea {
     this.resizeObserver.observe(this.textarea);
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.resizeObserver.unobserve(this.textarea);
   }
 
diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
index 7ec12875..22bdd1a5 100644
--- a/src/components/tooltip/tooltip.tsx
+++ b/src/components/tooltip/tooltip.tsx
@@ -114,7 +114,7 @@ export class Tooltip {
     this.syncOptions();
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.popover.destroy();
 
     this.host.removeEventListener('blur', this.handleBlur, true);