feat: register dependency elements not before the dependent element

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,
   }
 

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,
   }
 

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")

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 = {

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")

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() {

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")

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,
   }
 

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")

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,
   }
 

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 = {

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")

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")

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,
   }
 

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 = {

src/components/chip/ChipRemovable.js

@@ -1,14 +1,18 @@
 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
  * @tagname leu-chip-removable
  * @fires remove - Dispatched when the user clicks on the chip
  */
 export class LeuChipRemovable extends LeuChipBase {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+  }
+
   static properties = {
     ...LeuChipBase.properties,
   }

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")

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")

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")

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")

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 = {

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")

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 = {

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")