From 4dfddcd80e47bee5e047b3eee203d72e0e9d8fba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dan=20B=C3=BCschlen?= <danbueschlen@gmail.com>
Date: Wed, 19 Jun 2024 15:09:37 +0200
Subject: [PATCH] feat: register dependency elements not before the dependent
 element

---
 .../generate-component/templates/[Name].js    |  9 ++++--
 src/components/accordion/Accordion.js         |  7 +++--
 src/components/accordion/leu-accordion.js     |  3 +-
 src/components/breadcrumb/Breadcrumb.js       | 26 +++++++++++------
 src/components/breadcrumb/leu-breadcrumb.js   |  3 +-
 src/components/button-group/ButtonGroup.js    |  6 ++--
 .../button-group/leu-button-group.js          |  3 +-
 src/components/button/Button.js               | 13 ++++++---
 src/components/button/leu-button.js           |  3 +-
 src/components/checkbox/Checkbox.js           | 13 ++++++---
 src/components/checkbox/CheckboxGroup.js      |  6 ++--
 src/components/checkbox/leu-checkbox-group.js |  3 +-
 src/components/checkbox/leu-checkbox.js       |  3 +-
 src/components/chip/Chip.js                   |  7 +++--
 src/components/chip/ChipGroup.js              |  6 ++--
 src/components/chip/ChipRemovable.js          |  6 +++-
 src/components/chip/leu-chip-group.js         |  3 +-
 src/components/chip/leu-chip-link.js          |  3 +-
 src/components/chip/leu-chip-removable.js     |  3 +-
 src/components/chip/leu-chip-selectable.js    |  3 +-
 src/components/dropdown/Dropdown.js           | 20 +++++++++----
 src/components/dropdown/leu-dropdown.js       |  3 +-
 src/components/icon/Icon.js                   |  7 +++--
 src/components/icon/leu-icon.js               |  3 +-
 src/components/input/Input.js                 | 14 ++++++----
 src/components/input/leu-input.js             |  3 +-
 src/components/menu/Menu.js                   |  7 +++--
 src/components/menu/MenuItem.js               | 14 ++++++----
 src/components/menu/leu-menu-item.js          |  3 +-
 src/components/menu/leu-menu.js               |  3 +-
 src/components/pagination/Pagination.js       | 21 +++++++++-----
 src/components/pagination/leu-pagination.js   |  3 +-
 src/components/popup/Popup.js                 |  9 ++++--
 src/components/popup/leu-popup.js             |  3 +-
 src/components/radio/Radio.js                 |  9 ++++--
 src/components/radio/RadioGroup.js            |  6 ++--
 src/components/radio/leu-radio-group.js       |  3 +-
 src/components/radio/leu-radio.js             |  3 +-
 src/components/scroll-top/ScrollTop.js        | 18 ++++++++----
 src/components/scroll-top/leu-scroll-top.js   |  3 +-
 src/components/select/Select.js               | 28 +++++++++++++------
 src/components/select/leu-select.js           |  3 +-
 src/components/table/Table.js                 | 14 +++++++---
 src/components/table/leu-table.js             |  3 +-
 .../visually-hidden/VisuallyHidden.js         |  7 +++--
 .../visually-hidden/leu-visually-hidden.js    |  3 +-
 src/lib/LeuElement.js                         | 23 +++++++++++++++
 src/lib/defineElement.js                      | 13 ---------
 48 files changed, 232 insertions(+), 146 deletions(-)
 create mode 100644 src/lib/LeuElement.js
 delete mode 100644 src/lib/defineElement.js

diff --git a/scripts/generate-component/templates/[Name].js b/scripts/generate-component/templates/[Name].js
index 854f726d..0f882bc0 100644
--- a/scripts/generate-component/templates/[Name].js
+++ b/scripts/generate-component/templates/[Name].js
@@ -1,14 +1,17 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
 import styles from "./[name].css"
 
 /**
  * @tagname [namespace]-[name]
  */
-export class Leu[Name] extends LitElement {
+export class Leu[Name] extends LeuElement {
   static styles = styles
 
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
diff --git a/src/components/accordion/Accordion.js b/src/components/accordion/Accordion.js
index b027e33d..811e255f 100644
--- a/src/components/accordion/Accordion.js
+++ b/src/components/accordion/Accordion.js
@@ -1,5 +1,6 @@
-import { LitElement, nothing } from "lit"
+import { nothing } from "lit"
 import { html, unsafeStatic } from "lit/static-html.js"
+import { LeuElement } from "../../lib/LeuElement.js"
 
 import styles from "./accordion.css"
 
@@ -13,12 +14,12 @@ import styles from "./accordion.css"
  * @attr {Number} heading-level - The heading level of the accordion title. Must be between 1 and 6.
  * @attr {String} label-prefix - The prefix of the accordion label. e.g. "01"
  */
-export class LeuAccordion extends LitElement {
+export class LeuAccordion extends LeuElement {
   static styles = styles
 
   /** @internal */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
diff --git a/src/components/accordion/leu-accordion.js b/src/components/accordion/leu-accordion.js
index a7a68d72..1a0671c3 100644
--- a/src/components/accordion/leu-accordion.js
+++ b/src/components/accordion/leu-accordion.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuAccordion } from "./Accordion.js"
 
 export { LeuAccordion }
 
-defineElement("accordion", LeuAccordion)
+LeuAccordion.define("leu-accordion")
diff --git a/src/components/breadcrumb/Breadcrumb.js b/src/components/breadcrumb/Breadcrumb.js
index 01e5020f..7d292f8f 100644
--- a/src/components/breadcrumb/Breadcrumb.js
+++ b/src/components/breadcrumb/Breadcrumb.js
@@ -1,14 +1,16 @@
-import { html, LitElement, nothing } from "lit"
+import { html, nothing } from "lit"
 import { createRef, ref } from "lit/directives/ref.js"
 import { classMap } from "lit/directives/class-map.js"
 
-import styles from "./breadcrumb.css"
-import "../icon/leu-icon.js"
-import "../menu/leu-menu.js"
-import "../menu/leu-menu-item.js"
-import "../popup/leu-popup.js"
-import "../visually-hidden/leu-visually-hidden.js"
+import { LeuElement } from "../../lib/LeuElement.js"
 import { debounce } from "../../lib/utils.js"
+import { LeuIcon } from "../icon/Icon.js"
+import { LeuMenu } from "../menu/Menu.js"
+import { LeuMenuItem } from "../menu/MenuItem.js"
+import { LeuPopup } from "../popup/Popup.js"
+import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
+
+import styles from "./breadcrumb.css"
 
 /**
  * A Breadcrumb Navigation.
@@ -44,7 +46,15 @@ import { debounce } from "../../lib/utils.js"
  *
  * @tagname leu-breadcrumb
  */
-export class LeuBreadcrumb extends LitElement {
+export class LeuBreadcrumb extends LeuElement {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+    "leu-menu": LeuMenu,
+    "leu-menu-item": LeuMenuItem,
+    "leu-popup": LeuPopup,
+    "leu-visually-hidden": LeuVisuallyHidden,
+  }
+
   static styles = styles
 
   static properties = {
diff --git a/src/components/breadcrumb/leu-breadcrumb.js b/src/components/breadcrumb/leu-breadcrumb.js
index ffd30d4c..af8e5dec 100644
--- a/src/components/breadcrumb/leu-breadcrumb.js
+++ b/src/components/breadcrumb/leu-breadcrumb.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuBreadcrumb } from "./Breadcrumb.js"
 
 export { LeuBreadcrumb }
 
-defineElement("breadcrumb", LeuBreadcrumb)
+LeuBreadcrumb.define("leu-breadcrumb")
diff --git a/src/components/button-group/ButtonGroup.js b/src/components/button-group/ButtonGroup.js
index 9cd20d6b..15f073fe 100644
--- a/src/components/button-group/ButtonGroup.js
+++ b/src/components/button-group/ButtonGroup.js
@@ -1,4 +1,6 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
+import { LeuElement } from "../../lib/LeuElement.js"
+
 // @ts-ignore
 import styles from "./button-group.css"
 
@@ -8,7 +10,7 @@ import styles from "./button-group.css"
  * @prop {string} value - The value of the currenty selected (active) button
  * @fires input - When the value of the group changes by clicking a button
  */
-export class LeuButtonGroup extends LitElement {
+export class LeuButtonGroup extends LeuElement {
   static styles = styles
 
   constructor() {
diff --git a/src/components/button-group/leu-button-group.js b/src/components/button-group/leu-button-group.js
index 7b846bb0..41c5e5d9 100644
--- a/src/components/button-group/leu-button-group.js
+++ b/src/components/button-group/leu-button-group.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuButtonGroup } from "./ButtonGroup.js"
 
 export { LeuButtonGroup }
 
-defineElement("button-group", LeuButtonGroup)
+LeuButtonGroup.define("leu-button-group")
diff --git a/src/components/button/Button.js b/src/components/button/Button.js
index 6dfb6046..68029f0b 100644
--- a/src/components/button/Button.js
+++ b/src/components/button/Button.js
@@ -1,8 +1,9 @@
-import { html, nothing, LitElement } from "lit"
+import { html, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 
-import "../icon/leu-icon.js"
+import { LeuIcon } from "../icon/Icon.js"
+import { LeuElement } from "../../lib/LeuElement.js"
 import { HasSlotController } from "../../lib/hasSlotController.js"
 import { ARIA_CHECKED_ROLES, ARIA_SELECTED_ROLES } from "../../lib/a11y.js"
 
@@ -34,14 +35,18 @@ Object.freeze(BUTTON_EXPANDED_OPTIONS)
  * @slot after - The icon to display after the label
  * @slot - The label of the button or the icon if no label is set
  */
-export class LeuButton extends LitElement {
+export class LeuButton extends LeuElement {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+  }
+
   static styles = styles
 
   /**
    * @internal
    */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
diff --git a/src/components/button/leu-button.js b/src/components/button/leu-button.js
index 1d0a5cc6..27538733 100644
--- a/src/components/button/leu-button.js
+++ b/src/components/button/leu-button.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuButton } from "./Button.js"
 
 export { LeuButton }
 
-defineElement("button", LeuButton)
+LeuButton.define("leu-button")
diff --git a/src/components/checkbox/Checkbox.js b/src/components/checkbox/Checkbox.js
index 80c0b9cb..92aefacc 100644
--- a/src/components/checkbox/Checkbox.js
+++ b/src/components/checkbox/Checkbox.js
@@ -1,17 +1,22 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
 
-import "../icon/leu-icon.js"
+import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuIcon } from "../icon/Icon.js"
 
 import styles from "./checkbox.css"
 
 /**
  * @tagname leu-checkbox
  */
-export class LeuCheckbox extends LitElement {
+export class LeuCheckbox extends LeuElement {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+  }
+
   static styles = styles
 
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
diff --git a/src/components/checkbox/CheckboxGroup.js b/src/components/checkbox/CheckboxGroup.js
index 4d342526..a678c29c 100644
--- a/src/components/checkbox/CheckboxGroup.js
+++ b/src/components/checkbox/CheckboxGroup.js
@@ -1,12 +1,14 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 
+import { LeuElement } from "../../lib/LeuElement.js"
+
 import styles from "./checkbox-group.css"
 
 /**
  * @tagname leu-checkbox-group
  */
-export class LeuCheckboxGroup extends LitElement {
+export class LeuCheckboxGroup extends LeuElement {
   static styles = styles
 
   static properties = {
diff --git a/src/components/checkbox/leu-checkbox-group.js b/src/components/checkbox/leu-checkbox-group.js
index 29f10cef..a78babef 100644
--- a/src/components/checkbox/leu-checkbox-group.js
+++ b/src/components/checkbox/leu-checkbox-group.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuCheckboxGroup } from "./CheckboxGroup.js"
 
 export { LeuCheckboxGroup }
 
-defineElement("checkbox-group", LeuCheckboxGroup)
+LeuCheckboxGroup.define("leu-checkbox-group")
diff --git a/src/components/checkbox/leu-checkbox.js b/src/components/checkbox/leu-checkbox.js
index 81164866..1433c467 100644
--- a/src/components/checkbox/leu-checkbox.js
+++ b/src/components/checkbox/leu-checkbox.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuCheckbox } from "./Checkbox.js"
 
 export { LeuCheckbox }
 
-defineElement("checkbox", LeuCheckbox)
+LeuCheckbox.define("leu-checkbox")
diff --git a/src/components/chip/Chip.js b/src/components/chip/Chip.js
index 1948e190..f5138bd0 100644
--- a/src/components/chip/Chip.js
+++ b/src/components/chip/Chip.js
@@ -1,14 +1,15 @@
-import { LitElement } from "lit"
+import { LeuElement } from "../../lib/LeuElement.js"
+
 import styles from "./chip.css"
 
 /* Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=21161-184433&mode=design&t=Kjo5VDiqivihn8dh-11 */
 
-export class LeuChipBase extends LitElement {
+export class LeuChipBase extends LeuElement {
   static styles = styles
 
   /** @internal */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
diff --git a/src/components/chip/ChipGroup.js b/src/components/chip/ChipGroup.js
index e42735ee..58e6ab47 100644
--- a/src/components/chip/ChipGroup.js
+++ b/src/components/chip/ChipGroup.js
@@ -1,5 +1,7 @@
-import { LitElement } from "lit"
 import { html, unsafeStatic } from "lit/static-html.js"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
 import styles from "./chip-group.css"
 
 /* Figma https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=131766-248643&mode=design&t=Kjo5VDiqivihn8dh-11 */
@@ -15,7 +17,7 @@ export const SELECTION_MODES = {
  * @cssproperty --leu-chip-group-gap - The gap between the chips
  * @tagname leu-chip-group
  */
-export class LeuChipGroup extends LitElement {
+export class LeuChipGroup extends LeuElement {
   static styles = styles
 
   static properties = {
diff --git a/src/components/chip/ChipRemovable.js b/src/components/chip/ChipRemovable.js
index 12c24b8d..674a0b97 100644
--- a/src/components/chip/ChipRemovable.js
+++ b/src/components/chip/ChipRemovable.js
@@ -1,7 +1,7 @@
 import { html } from "lit"
 
 import { LeuChipBase } from "./Chip.js"
-import "../icon/leu-icon.js"
+import { LeuIcon } from "../icon/Icon.js"
 
 /**
  * @slot - The content of the chip
@@ -9,6 +9,10 @@ import "../icon/leu-icon.js"
  * @fires remove - Dispatched when the user clicks on the chip
  */
 export class LeuChipRemovable extends LeuChipBase {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+  }
+
   static properties = {
     ...LeuChipBase.properties,
   }
diff --git a/src/components/chip/leu-chip-group.js b/src/components/chip/leu-chip-group.js
index 5b7a15ff..1ab2f627 100644
--- a/src/components/chip/leu-chip-group.js
+++ b/src/components/chip/leu-chip-group.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuChipGroup } from "./ChipGroup.js"
 
 export { LeuChipGroup }
 
-defineElement("chip-group", LeuChipGroup)
+LeuChipGroup.define("leu-chip-group")
diff --git a/src/components/chip/leu-chip-link.js b/src/components/chip/leu-chip-link.js
index c4aeadae..4ceab2c5 100644
--- a/src/components/chip/leu-chip-link.js
+++ b/src/components/chip/leu-chip-link.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuChipLink } from "./ChipLink.js"
 
 export { LeuChipLink }
 
-defineElement("chip-link", LeuChipLink)
+LeuChipLink.define("leu-chip-link")
diff --git a/src/components/chip/leu-chip-removable.js b/src/components/chip/leu-chip-removable.js
index f1078cd5..7933a568 100644
--- a/src/components/chip/leu-chip-removable.js
+++ b/src/components/chip/leu-chip-removable.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuChipRemovable } from "./ChipRemovable.js"
 
 export { LeuChipRemovable }
 
-defineElement("chip-removable", LeuChipRemovable)
+LeuChipRemovable.define("leu-chip-removable")
diff --git a/src/components/chip/leu-chip-selectable.js b/src/components/chip/leu-chip-selectable.js
index 2c9e5c21..62c8b840 100644
--- a/src/components/chip/leu-chip-selectable.js
+++ b/src/components/chip/leu-chip-selectable.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuChipSelectable } from "./ChipSelectable.js"
 
 export { LeuChipSelectable }
 
-defineElement("chip-selectable", LeuChipSelectable)
+LeuChipSelectable.define("leu-chip-selectable")
diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
index 12e14018..1b238008 100644
--- a/src/components/dropdown/Dropdown.js
+++ b/src/components/dropdown/Dropdown.js
@@ -1,19 +1,27 @@
-import { html, LitElement, nothing } from "lit"
+import { html, nothing } from "lit"
 import { createRef, ref } from "lit/directives/ref.js"
 
+import { LeuElement } from "../../lib/LeuElement.js"
 import { HasSlotController } from "../../lib/hasSlotController.js"
 
-import "../button/leu-button.js"
-import "../menu/leu-menu.js"
-import "../menu/leu-menu-item.js"
-import "../popup/leu-popup.js"
+import { LeuButton } from "../button/Button.js"
+import { LeuMenu } from "../menu/Menu.js"
+import { LeuMenuItem } from "../menu/MenuItem.js"
+import { LeuPopup } from "../popup/Popup.js"
 
 import styles from "./dropdown.css"
 
 /**
  * @tagname leu-dropdown
  */
-export class LeuDropdown extends LitElement {
+export class LeuDropdown extends LeuElement {
+  static dependencies = {
+    "leu-button": LeuButton,
+    "leu-menu": LeuMenu,
+    "leu-menu-item": LeuMenuItem,
+    "leu-popup": LeuPopup,
+  }
+
   static styles = styles
 
   static properties = {
diff --git a/src/components/dropdown/leu-dropdown.js b/src/components/dropdown/leu-dropdown.js
index b0ce9e0f..8d2e4100 100644
--- a/src/components/dropdown/leu-dropdown.js
+++ b/src/components/dropdown/leu-dropdown.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuDropdown } from "./Dropdown.js"
 
 export { LeuDropdown }
 
-defineElement("dropdown", LeuDropdown)
+LeuDropdown.define("leu-dropdown")
diff --git a/src/components/icon/Icon.js b/src/components/icon/Icon.js
index ef79c11b..5dd9bf6b 100644
--- a/src/components/icon/Icon.js
+++ b/src/components/icon/Icon.js
@@ -1,4 +1,7 @@
-import { html, svg, LitElement } from "lit"
+import { html, svg } from "lit"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
 import styles from "./icon.css"
 import { paths } from "./paths.js"
 
@@ -12,7 +15,7 @@ import { paths } from "./paths.js"
  * @prop {import("./paths").IconPathName} name - The name of the icon to display.
  * @cssprop --leu-icon-size - The size of the icon.
  */
-export class LeuIcon extends LitElement {
+export class LeuIcon extends LeuElement {
   static styles = styles
 
   static properties = {
diff --git a/src/components/icon/leu-icon.js b/src/components/icon/leu-icon.js
index eeb10630..80dad1a9 100644
--- a/src/components/icon/leu-icon.js
+++ b/src/components/icon/leu-icon.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuIcon } from "./Icon.js"
 
 export { LeuIcon }
 
-defineElement("icon", LeuIcon)
+LeuIcon.define("leu-icon")
diff --git a/src/components/input/Input.js b/src/components/input/Input.js
index 35c96da9..b6c52958 100644
--- a/src/components/input/Input.js
+++ b/src/components/input/Input.js
@@ -1,10 +1,11 @@
-import { html, LitElement, nothing } from "lit"
+import { html, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 import { live } from "lit/directives/live.js"
 import { createRef, ref } from "lit/directives/ref.js"
 
-import "../icon/leu-icon.js"
+import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuIcon } from "../icon/Icon.js"
 
 import styles from "./input.css"
 
@@ -63,14 +64,18 @@ const VALIDATION_MESSAGES = {
  *
  * @tagname leu-input
  */
-export class LeuInput extends LitElement {
+export class LeuInput extends LeuElement {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+  }
+
   static styles = styles
 
   /**
    * @internal
    */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
@@ -100,7 +105,6 @@ export class LeuInput extends LitElement {
     novalidate: { type: Boolean, reflect: true },
     step: { type: String, reflect: true },
 
-    /** @type {ValidityState} */
     _validity: { state: true },
   }
 
diff --git a/src/components/input/leu-input.js b/src/components/input/leu-input.js
index 18e2d9f1..71a01ca5 100644
--- a/src/components/input/leu-input.js
+++ b/src/components/input/leu-input.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuInput } from "./Input.js"
 
 export { LeuInput }
 
-defineElement("input", LeuInput)
+LeuInput.define("leu-input")
diff --git a/src/components/menu/Menu.js b/src/components/menu/Menu.js
index 2fdb0904..c0f093ce 100644
--- a/src/components/menu/Menu.js
+++ b/src/components/menu/Menu.js
@@ -1,4 +1,7 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
 import styles from "./menu.css"
 
 /**
@@ -8,7 +11,7 @@ import styles from "./menu.css"
 /**
  * @tagname leu-menu
  */
-export class LeuMenu extends LitElement {
+export class LeuMenu extends LeuElement {
   static styles = styles
 
   static properties = {
diff --git a/src/components/menu/MenuItem.js b/src/components/menu/MenuItem.js
index b13594b1..fb18a8ea 100644
--- a/src/components/menu/MenuItem.js
+++ b/src/components/menu/MenuItem.js
@@ -1,10 +1,10 @@
-import { LitElement } from "lit"
 import { html, unsafeStatic } from "lit/static-html.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 
-import styles from "./menu-item.css"
+import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuIcon } from "../icon/Icon.js"
 
-import "../icon/leu-icon.js"
+import styles from "./menu-item.css"
 
 /**
  * @typedef {'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'none'} MenuItemRole
@@ -14,14 +14,18 @@ import "../icon/leu-icon.js"
  * @tagname leu-menu-item
  * @slot - The label of the menu item
  */
-export class LeuMenuItem extends LitElement {
+export class LeuMenuItem extends LeuElement {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+  }
+
   static styles = styles
 
   /**
    * @internal
    */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
diff --git a/src/components/menu/leu-menu-item.js b/src/components/menu/leu-menu-item.js
index c2d58698..b92023b8 100644
--- a/src/components/menu/leu-menu-item.js
+++ b/src/components/menu/leu-menu-item.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuMenuItem } from "./MenuItem.js"
 
 export { LeuMenuItem }
 
-defineElement("menu-item", LeuMenuItem)
+LeuMenuItem.define("leu-menu-item")
diff --git a/src/components/menu/leu-menu.js b/src/components/menu/leu-menu.js
index ff6d3168..b6cf86e0 100644
--- a/src/components/menu/leu-menu.js
+++ b/src/components/menu/leu-menu.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuMenu } from "./Menu.js"
 
 export { LeuMenu }
 
-defineElement("menu", LeuMenu)
+LeuMenu.define("leu-menu")
diff --git a/src/components/pagination/Pagination.js b/src/components/pagination/Pagination.js
index 12b1bf6f..3f8b5504 100644
--- a/src/components/pagination/Pagination.js
+++ b/src/components/pagination/Pagination.js
@@ -1,25 +1,32 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
 import { live } from "lit/directives/live.js"
 
-import "../button/leu-button.js"
-import "../icon/leu-icon.js"
-import styles from "./pagination.css"
+import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuButton } from "../button/Button.js"
+import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
+import { LeuIcon } from "../icon/Icon.js"
 
-import "../visually-hidden/leu-visually-hidden.js"
+import styles from "./pagination.css"
 
 const MIN_PAGE = 1
 
 /**
  * @tagname leu-pagination
  */
-export class LeuPagination extends LitElement {
+export class LeuPagination extends LeuElement {
+  static dependencies = {
+    "leu-button": LeuButton,
+    "leu-icon": LeuIcon,
+    "leu-visually-hidden": LeuVisuallyHidden,
+  }
+
   static styles = styles
 
   /**
    * @internal
    */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
diff --git a/src/components/pagination/leu-pagination.js b/src/components/pagination/leu-pagination.js
index adc4034c..6da6f3e9 100644
--- a/src/components/pagination/leu-pagination.js
+++ b/src/components/pagination/leu-pagination.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuPagination } from "./Pagination.js"
 
 export { LeuPagination }
 
-defineElement("pagination", LeuPagination)
+LeuPagination.define("leu-pagination")
diff --git a/src/components/popup/Popup.js b/src/components/popup/Popup.js
index b2d47552..889cc8a2 100644
--- a/src/components/popup/Popup.js
+++ b/src/components/popup/Popup.js
@@ -1,4 +1,4 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
 import {
   autoUpdate,
   computePosition,
@@ -6,16 +6,19 @@ import {
   shift,
   size,
 } from "@floating-ui/dom"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
 import styles from "./popup.css"
 
 /**
  * @tagname leu-popup
  */
-export class LeuPopup extends LitElement {
+export class LeuPopup extends LeuElement {
   static styles = styles
 
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
diff --git a/src/components/popup/leu-popup.js b/src/components/popup/leu-popup.js
index e99d55c7..d09ebcc7 100644
--- a/src/components/popup/leu-popup.js
+++ b/src/components/popup/leu-popup.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuPopup } from "./Popup.js"
 
 export { LeuPopup }
 
-defineElement("popup", LeuPopup)
+LeuPopup.define("leu-popup")
diff --git a/src/components/radio/Radio.js b/src/components/radio/Radio.js
index f04597fa..f901b5d8 100644
--- a/src/components/radio/Radio.js
+++ b/src/components/radio/Radio.js
@@ -1,14 +1,17 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
 import styles from "./radio.css"
 
 /**
  * @tagname leu-radio
  */
-export class LeuRadio extends LitElement {
+export class LeuRadio extends LeuElement {
   static styles = styles
 
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
diff --git a/src/components/radio/RadioGroup.js b/src/components/radio/RadioGroup.js
index 0ee15d8f..6fb4a65c 100644
--- a/src/components/radio/RadioGroup.js
+++ b/src/components/radio/RadioGroup.js
@@ -1,12 +1,14 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 
+import { LeuElement } from "../../lib/LeuElement.js"
+
 import styles from "./radio-group.css"
 
 /**
  * @tagname leu-radio-group
  */
-export class LeuRadioGroup extends LitElement {
+export class LeuRadioGroup extends LeuElement {
   static styles = styles
 
   static properties = {
diff --git a/src/components/radio/leu-radio-group.js b/src/components/radio/leu-radio-group.js
index 7dd63af4..157b1212 100644
--- a/src/components/radio/leu-radio-group.js
+++ b/src/components/radio/leu-radio-group.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuRadioGroup } from "./RadioGroup.js"
 
 export { LeuRadioGroup }
 
-defineElement("radio-group", LeuRadioGroup)
+LeuRadioGroup.define("leu-radio-group")
diff --git a/src/components/radio/leu-radio.js b/src/components/radio/leu-radio.js
index 3997cb11..bffcd446 100644
--- a/src/components/radio/leu-radio.js
+++ b/src/components/radio/leu-radio.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuRadio } from "./Radio.js"
 
 export { LeuRadio }
 
-defineElement("radio", LeuRadio)
+LeuRadio.define("leu-radio")
diff --git a/src/components/scroll-top/ScrollTop.js b/src/components/scroll-top/ScrollTop.js
index 511dde63..77e74560 100644
--- a/src/components/scroll-top/ScrollTop.js
+++ b/src/components/scroll-top/ScrollTop.js
@@ -1,15 +1,23 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 
-import styles from "./scroll-top.css"
-import "../button/leu-button.js"
-import "../icon/leu-icon.js"
+import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuButton } from "../button/Button.js"
+import { LeuIcon } from "../icon/Icon.js"
+
 import { throttle } from "../../lib/utils.js"
 
+import styles from "./scroll-top.css"
+
 /**
  * @tagname leu-scroll-top
  */
-export class LeuScrollTop extends LitElement {
+export class LeuScrollTop extends LeuElement {
+  static dependencies = {
+    "leu-button": LeuButton,
+    "leu-icon": LeuIcon,
+  }
+
   static styles = styles
 
   static properties = {
diff --git a/src/components/scroll-top/leu-scroll-top.js b/src/components/scroll-top/leu-scroll-top.js
index 398a241a..74756feb 100644
--- a/src/components/scroll-top/leu-scroll-top.js
+++ b/src/components/scroll-top/leu-scroll-top.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuScrollTop } from "./ScrollTop.js"
 
 export { LeuScrollTop }
 
-defineElement("scroll-top", LeuScrollTop)
+LeuScrollTop.define("leu-scroll-top")
diff --git a/src/components/select/Select.js b/src/components/select/Select.js
index e7c0612a..7ef1d3ce 100644
--- a/src/components/select/Select.js
+++ b/src/components/select/Select.js
@@ -1,16 +1,17 @@
-import { html, LitElement, nothing } from "lit"
+import { html, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
-
 import { map } from "lit/directives/map.js"
 import { createRef, ref } from "lit/directives/ref.js"
 
+import { LeuElement } from "../../lib/LeuElement.js"
 import { HasSlotController } from "../../lib/hasSlotController.js"
-import "../button/leu-button.js"
-import "../menu/leu-menu.js"
-import "../menu/leu-menu-item.js"
-import "../icon/leu-icon.js"
-import "../input/leu-input.js"
-import "../popup/leu-popup.js"
+
+import { LeuButton } from "../button/Button.js"
+import { LeuMenu } from "../menu/Menu.js"
+import { LeuMenuItem } from "../menu/MenuItem.js"
+import { LeuIcon } from "../icon/Icon.js"
+import { LeuInput } from "../input/Input.js"
+import { LeuPopup } from "../popup/Popup.js"
 
 // @ts-ignore
 import styles from "./select.css"
@@ -20,7 +21,16 @@ import styles from "./select.css"
  * @slot before - Optional content the appears before the option list
  * @slot after - Optional content the appears after the option list
  */
-export class LeuSelect extends LitElement {
+export class LeuSelect extends LeuElement {
+  static dependencies = {
+    "leu-button": LeuButton,
+    "leu-menu": LeuMenu,
+    "leu-menu-item": LeuMenuItem,
+    "leu-icon": LeuIcon,
+    "leu-input": LeuInput,
+    "leu-popup": LeuPopup,
+  }
+
   static styles = styles
 
   static get properties() {
diff --git a/src/components/select/leu-select.js b/src/components/select/leu-select.js
index 9e974c89..651823a1 100644
--- a/src/components/select/leu-select.js
+++ b/src/components/select/leu-select.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuSelect } from "./Select.js"
 
 export { LeuSelect }
 
-defineElement("select", LeuSelect)
+LeuSelect.define("leu-select")
diff --git a/src/components/table/Table.js b/src/components/table/Table.js
index 634a2618..a3dfa567 100644
--- a/src/components/table/Table.js
+++ b/src/components/table/Table.js
@@ -1,17 +1,23 @@
-import { html, LitElement, nothing } from "lit"
+import { html, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { styleMap } from "lit/directives/style-map.js"
 import { createRef, ref } from "lit/directives/ref.js"
 
-import "../icon/leu-icon.js"
-import "../pagination/leu-pagination.js"
+import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuIcon } from "../icon/Icon.js"
+import { LeuPagination } from "../pagination/Pagination.js"
 
 import styles from "./table.css"
 
 /**
  * @tagname leu-table
  */
-export class LeuTable extends LitElement {
+export class LeuTable extends LeuElement {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+    "leu-pagination": LeuPagination,
+  }
+
   static styles = styles
 
   static properties = {
diff --git a/src/components/table/leu-table.js b/src/components/table/leu-table.js
index bb21bace..73a7e57f 100644
--- a/src/components/table/leu-table.js
+++ b/src/components/table/leu-table.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuTable } from "./Table.js"
 
 export { LeuTable }
 
-defineElement("table", LeuTable)
+LeuTable.define("leu-table")
diff --git a/src/components/visually-hidden/VisuallyHidden.js b/src/components/visually-hidden/VisuallyHidden.js
index d0b6eed1..4ff2618d 100644
--- a/src/components/visually-hidden/VisuallyHidden.js
+++ b/src/components/visually-hidden/VisuallyHidden.js
@@ -1,10 +1,13 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
 import styles from "./visually-hidden.css"
 
 /**
  * @tagname leu-visually-hidden
  */
-export class LeuVisuallyHidden extends LitElement {
+export class LeuVisuallyHidden extends LeuElement {
   static styles = styles
 
   render() {
diff --git a/src/components/visually-hidden/leu-visually-hidden.js b/src/components/visually-hidden/leu-visually-hidden.js
index 7bc34611..a7df0f38 100644
--- a/src/components/visually-hidden/leu-visually-hidden.js
+++ b/src/components/visually-hidden/leu-visually-hidden.js
@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuVisuallyHidden } from "./VisuallyHidden.js"
 
 export { LeuVisuallyHidden }
 
-defineElement("visually-hidden", LeuVisuallyHidden)
+LeuVisuallyHidden.define("leu-visually-hidden")
diff --git a/src/lib/LeuElement.js b/src/lib/LeuElement.js
new file mode 100644
index 00000000..939a2de8
--- /dev/null
+++ b/src/lib/LeuElement.js
@@ -0,0 +1,23 @@
+import { LitElement } from "lit"
+
+export class LeuElement extends LitElement {
+  static dependencies = {}
+
+  static define(name, constructor = this, options = {}) {
+    if (!customElements.get(name)) {
+      customElements.define(name, constructor, options)
+    } else {
+      console.info(`${name} is already defined`)
+    }
+  }
+
+  constructor() {
+    super()
+
+    Object.entries(this.constructor.dependencies).forEach(
+      ([name, component]) => {
+        this.constructor.define(name, component)
+      }
+    )
+  }
+}
diff --git a/src/lib/defineElement.js b/src/lib/defineElement.js
deleted file mode 100644
index 6f011c53..00000000
--- a/src/lib/defineElement.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Adds a definition for a custom element to the custom element
- * registry if it isn't defined before. Prefixes the name with `leu-`.
- * @param {string} name
- * @param {CustomElementConstructor} constructor
- */
-export function defineElement(name, constructor) {
-  if (!customElements.get(`leu-${name}`)) {
-    customElements.define(`leu-${name}`, constructor)
-  } else {
-    console.info(`leu-${name} is already defined`)
-  }
-}