@statistikzh/leu 0.7.0 → 0.9.0

package/src/lib/LeuElement.js

@@ -1,23 +1,31 @@
 import { LitElement } from "lit"
 
 export class LeuElement extends LitElement {
+  static version = __LEU_VERSION__
+
   static dependencies = {}
 
   static define(name, constructor = this, options = {}) {
-    if (!customElements.get(name)) {
+    Object.entries(this.dependencies).forEach(([n, c]) => c.define(n))
+
+    const currentlyRegisteredConstructor = customElements.get(name)
+
+    if (currentlyRegisteredConstructor === undefined) {
       customElements.define(name, constructor, options)
-    } else {
-      console.info(`${name} is already defined`)
+      return
     }
-  }
 
-  constructor() {
-    super()
+    if (currentlyRegisteredConstructor !== constructor) {
+      console.warn(
+        `The custom element with the name <${name}> is already registered with a different constructor. This can happen when the same element has been loaded from different modules (e.g. multiple CDN requests or bundles).`
+      )
+      return
+    }
 
-    Object.entries(this.constructor.dependencies).forEach(
-      ([name, component]) => {
-        this.constructor.define(name, component)
-      }
-    )
+    if (currentlyRegisteredConstructor.version !== constructor.version) {
+      console.warn(
+        `The custom element with the name <${name}> is already defined with the same constructor but a different version (${currentlyRegisteredConstructor.version}).`
+      )
+    }
   }
 }

package/src/styles/custom-properties.css

@@ -1,6 +1,7 @@
 @import url("./custom-media.css");
 
-:root {
+:root,
+:host {
   --leu-color-black-100: #000;
   --leu-color-black-80: #333;
   --leu-color-black-60: #666;
@@ -44,8 +45,12 @@
   --leu-color-func-red: #d93c1a;
   --leu-color-func-green: #1a7f1f;
 
-  --leu-font-family-regular: HelveticaNowRegular, Helvetica, sans-serif; /* stylelint-disable-line value-keyword-case */
-  --leu-font-family-black: HelveticaNowBlack, Arial Black, Helvetica, sans-serif; /* stylelint-disable-line value-keyword-case */
+  /* stylelint-disable value-keyword-case */
+  --leu-font-family-regular: InterRegular, HelveticaNowRegular, Helvetica,
+    sans-serif;
+  --leu-font-family-black: InterBlack, HelveticaNowBlack, Arial Black, Helvetica,
+    sans-serif;
+  /* stylelint-enable value-keyword-case */
 
   --leu-box-shadow-short: 0px 0px 2px var(--leu-color-black-transp-40);
   --leu-box-shadow-regular: 0px 0px 16px var(--leu-color-black-transp-20);

package/dist/LeuElement-ba5ea33d.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LeuElement-ba5ea33d.d.ts","sourceRoot":"","sources":["LeuElement-ba5ea33d.js"],"names":[],"mappings":"AA+BA;IACE,8EAMC;CAOF;AA3CD,sEAaC;2BAf0B,KAAK"}