@statistikzh/leu 0.4.0 → 0.5.0

package/dist/theme.css

@@ -42,10 +42,394 @@
   --leu-color-func-red: #d93c1a;
   --leu-color-func-green: #1a7f1f;
 
-  --leu-font-regular: HelveticaNowRegular, Helvetica, sans-serif; /* stylelint-disable-line value-keyword-case */
-  --leu-font-black: HelveticaNowBlack, Arial Black, Helvetica, sans-serif; /* stylelint-disable-line value-keyword-case */
+  --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 */
 
   --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);
   --leu-box-shadow-long: 0px 0px 80px var(--leu-color-black-transp-20);
+
+  --leu-t-30-regular-font-size: 0.75rem;
+
+  --leu-t-30-regular-line-height: 1.5;
+
+  --leu-t-30-regular-spacing: 0.5625rem;
+
+  --leu-t-30-regular-font: var(--leu-t-30-regular-font-size) / var(--leu-t-30-regular-line-height) var(--leu-font-family-regular);
+
+  --leu-t-30-black-font-size: 0.75rem;
+
+  --leu-t-30-black-line-height: 1.5;
+
+  --leu-t-30-black-spacing: 0.5625rem;
+
+  --leu-t-30-black-font: var(--leu-t-30-black-font-size) / var(--leu-t-30-black-line-height) var(--leu-font-family-black);
+
+  --leu-t-35-regular-font-size: 0.875rem;
+
+  --leu-t-35-regular-line-height: 1.4;
+
+  --leu-t-35-regular-spacing: 0.625rem;
+
+  --leu-t-35-regular-font: var(--leu-t-35-regular-font-size) / var(--leu-t-35-regular-line-height) var(--leu-font-family-regular);
+
+  --leu-t-35-black-font-size: 0.875rem;
+
+  --leu-t-35-black-line-height: 1.4;
+
+  --leu-t-35-black-spacing: 0.625rem;
+
+  --leu-t-35-black-font: var(--leu-t-35-black-font-size) / var(--leu-t-35-black-line-height) var(--leu-font-family-black);
+
+  --leu-t-40-regular-font-size: 1rem;
+
+  --leu-t-40-regular-line-height: 1.5;
+
+  --leu-t-40-regular-spacing: 0.75rem;
+
+  --leu-t-40-regular-font: var(--leu-t-40-regular-font-size) / var(--leu-t-40-regular-line-height) var(--leu-font-family-regular);
+
+  --leu-t-40-black-font-size: 1rem;
+
+  --leu-t-40-black-line-height: 1.5;
+
+  --leu-t-40-black-spacing: 0.75rem;
+
+  --leu-t-40-black-font: var(--leu-t-40-black-font-size) / var(--leu-t-40-black-line-height) var(--leu-font-family-black);
+
+  --leu-t-45-regular-font-size: 1.125rem;
+
+  --leu-t-45-regular-line-height: 1.5;
+
+  --leu-t-45-regular-spacing: 0.8125rem;
+
+  --leu-t-45-regular-font: var(--leu-t-45-regular-font-size) / var(--leu-t-45-regular-line-height) var(--leu-font-family-regular);
+
+  --leu-t-45-black-font-size: 1.125rem;
+
+  --leu-t-45-black-line-height: 1.3;
+
+  --leu-t-45-black-spacing: 0.75rem;
+
+  --leu-t-45-black-font: var(--leu-t-45-black-font-size) / var(--leu-t-45-black-line-height) var(--leu-font-family-black);
+
+  --leu-t-50-regular-font-size: 1.25rem;
+
+  --leu-t-50-regular-line-height: 1.5;
+
+  --leu-t-50-regular-spacing: 0.9375rem;
+
+  --leu-t-50-regular-font: var(--leu-t-50-regular-font-size) / var(--leu-t-50-regular-line-height) var(--leu-font-family-regular);
+
+  --leu-t-50-black-font-size: 1.25rem;
+
+  --leu-t-50-black-line-height: 1.3;
+
+  --leu-t-50-black-spacing: 0.8125rem;
+
+  --leu-t-50-black-font: var(--leu-t-50-black-font-size) / var(--leu-t-50-black-line-height) var(--leu-font-family-black);
+
+  --leu-t-60-regular-font-size: 1.5rem;
+
+  --leu-t-60-regular-line-height: 1.5;
+
+  --leu-t-60-regular-spacing: 1.125rem;
+
+  --leu-t-60-regular-font: var(--leu-t-60-regular-font-size) / var(--leu-t-60-regular-line-height) var(--leu-font-family-regular);
+
+  --leu-t-60-black-font-size: 1.5rem;
+
+  --leu-t-60-black-line-height: 1.3;
+
+  --leu-t-60-black-spacing: 0.9375rem;
+
+  --leu-t-60-black-font: var(--leu-t-60-black-font-size) / var(--leu-t-60-black-line-height) var(--leu-font-family-black);
+
+  --leu-t-70-black-font-size: 1.75rem;
+
+  --leu-t-70-black-line-height: 1.2;
+
+  --leu-t-70-black-spacing: 1.0625rem;
+
+  --leu-t-70-black-font: var(--leu-t-70-black-font-size) / var(--leu-t-70-black-line-height) var(--leu-font-family-black);
+
+  --leu-t-80-black-font-size: 2rem;
+
+  --leu-t-80-black-line-height: 1.2;
+
+  --leu-t-80-black-spacing: 1.1875rem;
+
+  --leu-t-80-black-font: var(--leu-t-80-black-font-size) / var(--leu-t-80-black-line-height) var(--leu-font-family-black);
+
+  --leu-t-100-black-font-size: 2.5rem;
+
+  --leu-t-100-black-line-height: 1.2;
+
+  --leu-t-100-black-spacing: 1.5rem;
+
+  --leu-t-100-black-font: var(--leu-t-100-black-font-size) / var(--leu-t-100-black-line-height) var(--leu-font-family-black);
+
+  --leu-t-120-black-font-size: 3rem;
+
+  --leu-t-120-black-line-height: 1;
+
+  --leu-t-120-black-spacing: 1.5rem;
+
+  --leu-t-120-black-font: var(--leu-t-120-black-font-size) / var(--leu-t-120-black-line-height) var(--leu-font-family-black);
+
+  --leu-t-140-black-font-size: 3.5rem;
+
+  --leu-t-140-black-line-height: 1;
+
+  --leu-t-140-black-spacing: 1.75rem;
+
+  --leu-t-140-black-font: var(--leu-t-140-black-font-size) / var(--leu-t-140-black-line-height) var(--leu-font-family-black);
+
+  --leu-t-180-black-font-size: 4.5rem;
+
+  --leu-t-180-black-line-height: 1;
+
+  --leu-t-180-black-spacing: 2.25rem;
+
+  --leu-t-180-black-font: var(--leu-t-180-black-font-size) / var(--leu-t-180-black-line-height) var(--leu-font-family-black);
+
+  --leu-t-curve-35-black-font-size:  var(--leu-t-30-black-font-size);
+
+  --leu-t-curve-35-black-line-height:  var(--leu-t-30-black-line-height);
+
+  --leu-t-curve-35-black-spacing:  var(--leu-t-30-black-spacing);
+
+  --leu-t-curve-35-black-font:  var(--leu-t-30-black-font);
+
+  --leu-t-curve-45-black-font-size:  var(--leu-t-35-black-font-size);
+
+  --leu-t-curve-45-black-line-height:  var(--leu-t-35-black-line-height);
+
+  --leu-t-curve-45-black-spacing:  var(--leu-t-35-black-spacing);
+
+  --leu-t-curve-45-black-font:  var(--leu-t-35-black-font);
+
+  --leu-t-curve-50-black-font-size:  var(--leu-t-40-black-font-size);
+
+  --leu-t-curve-50-black-line-height:  var(--leu-t-40-black-line-height);
+
+  --leu-t-curve-50-black-spacing:  var(--leu-t-40-black-spacing);
+
+  --leu-t-curve-50-black-font:  var(--leu-t-40-black-font);
+
+  --leu-t-curve-60-black-font-size:  var(--leu-t-45-black-font-size);
+
+  --leu-t-curve-60-black-line-height:  var(--leu-t-45-black-line-height);
+
+  --leu-t-curve-60-black-spacing:  var(--leu-t-45-black-spacing);
+
+  --leu-t-curve-60-black-font:  var(--leu-t-45-black-font);
+
+  --leu-t-curve-70-black-font-size:  var(--leu-t-45-black-font-size);
+
+  --leu-t-curve-70-black-line-height:  var(--leu-t-45-black-line-height);
+
+  --leu-t-curve-70-black-spacing:  var(--leu-t-45-black-spacing);
+
+  --leu-t-curve-70-black-font:  var(--leu-t-45-black-font);
+
+  --leu-t-curve-80-black-font-size:  var(--leu-t-45-black-font-size);
+
+  --leu-t-curve-80-black-line-height:  var(--leu-t-45-black-line-height);
+
+  --leu-t-curve-80-black-spacing:  var(--leu-t-45-black-spacing);
+
+  --leu-t-curve-80-black-font:  var(--leu-t-45-black-font);
+
+  --leu-t-curve-120-black-font-size:  var(--leu-t-60-black-font-size);
+
+  --leu-t-curve-120-black-line-height:  var(--leu-t-60-black-line-height);
+
+  --leu-t-curve-120-black-spacing:  var(--leu-t-60-black-spacing);
+
+  --leu-t-curve-120-black-font:  var(--leu-t-60-black-font);
+
+  --leu-t-curve-180-black-font-size:  var(--leu-t-70-black-font-size);
+
+  --leu-t-curve-180-black-line-height:  var(--leu-t-70-black-line-height);
+
+  --leu-t-curve-180-black-spacing:  var(--leu-t-70-black-spacing);
+
+  --leu-t-curve-180-black-font:  var(--leu-t-70-black-font);
+}
+@media (min-width: 600px) {
+  :root {
+    --leu-t-curve-35-black-font-size:  var(--leu-t-35-black-font-size);
+    --leu-t-curve-35-black-line-height:  var(--leu-t-35-black-line-height);
+    --leu-t-curve-35-black-spacing:  var(--leu-t-35-black-spacing);
+    --leu-t-curve-35-black-font:  var(--leu-t-35-black-font);
+}
+}
+@media (min-width: 600px) {
+  :root {
+    --leu-t-curve-45-black-font-size:  var(--leu-t-40-black-font-size);
+    --leu-t-curve-45-black-line-height:  var(--leu-t-40-black-line-height);
+    --leu-t-curve-45-black-spacing:  var(--leu-t-40-black-spacing);
+    --leu-t-curve-45-black-font:  var(--leu-t-40-black-font);
+}
+}
+@media (min-width: 1024px) {
+  :root {
+    --leu-t-curve-45-black-font-size:  var(--leu-t-45-black-font-size);
+    --leu-t-curve-45-black-line-height:  var(--leu-t-45-black-line-height);
+    --leu-t-curve-45-black-spacing:  var(--leu-t-45-black-spacing);
+    --leu-t-curve-45-black-font:  var(--leu-t-45-black-font);
+}
+}
+@media (min-width: 400px) {
+  :root {
+    --leu-t-curve-50-black-font-size:  var(--leu-t-45-black-font-size);
+    --leu-t-curve-50-black-line-height:  var(--leu-t-45-black-line-height);
+    --leu-t-curve-50-black-spacing:  var(--leu-t-45-black-spacing);
+    --leu-t-curve-50-black-font:  var(--leu-t-45-black-font);
+}
+}
+@media (min-width: 1280px) {
+  :root {
+    --leu-t-curve-50-black-font-size:  var(--leu-t-50-black-font-size);
+    --leu-t-curve-50-black-line-height:  var(--leu-t-50-black-line-height);
+    --leu-t-curve-50-black-spacing:  var(--leu-t-50-black-spacing);
+    --leu-t-curve-50-black-font:  var(--leu-t-50-black-font);
+}
+}
+@media (min-width: 600px) {
+  :root {
+    --leu-t-curve-60-black-font-size:  var(--leu-t-50-black-font-size);
+    --leu-t-curve-60-black-line-height:  var(--leu-t-50-black-line-height);
+    --leu-t-curve-60-black-spacing:  var(--leu-t-50-black-spacing);
+    --leu-t-curve-60-black-font:  var(--leu-t-50-black-font);
+}
+}
+@media (min-width: 1280px) {
+  :root {
+    --leu-t-curve-60-black-font-size:  var(--leu-t-60-black-font-size);
+    --leu-t-curve-60-black-line-height:  var(--leu-t-60-black-line-height);
+    --leu-t-curve-60-black-spacing:  var(--leu-t-60-black-spacing);
+    --leu-t-curve-60-black-font:  var(--leu-t-60-black-font);
+}
+}
+@media (min-width: 400px) {
+  :root {
+    --leu-t-curve-70-black-font-size:  var(--leu-t-50-black-font-size);
+    --leu-t-curve-70-black-line-height:  var(--leu-t-50-black-line-height);
+    --leu-t-curve-70-black-spacing:  var(--leu-t-50-black-spacing);
+    --leu-t-curve-70-black-font:  var(--leu-t-50-black-font);
+}
+}
+@media (min-width: 1024px) {
+  :root {
+    --leu-t-curve-70-black-font-size:  var(--leu-t-60-black-font-size);
+    --leu-t-curve-70-black-line-height:  var(--leu-t-60-black-line-height);
+    --leu-t-curve-70-black-spacing:  var(--leu-t-60-black-spacing);
+    --leu-t-curve-70-black-font:  var(--leu-t-60-black-font);
+}
+}
+@media (min-width: 1280px) {
+  :root {
+    --leu-t-curve-70-black-font-size:  var(--leu-t-70-black-font-size);
+    --leu-t-curve-70-black-line-height:  var(--leu-t-70-black-line-height);
+    --leu-t-curve-70-black-spacing:  var(--leu-t-70-black-spacing);
+    --leu-t-curve-70-black-font:  var(--leu-t-70-black-font);
+}
+}
+@media (min-width: 600px) {
+  :root {
+    --leu-t-curve-80-black-font-size:  var(--leu-t-60-black-font-size);
+    --leu-t-curve-80-black-line-height:  var(--leu-t-60-black-line-height);
+    --leu-t-curve-80-black-spacing:  var(--leu-t-60-black-spacing);
+    --leu-t-curve-80-black-font:  var(--leu-t-60-black-font);
+}
+}
+@media (min-width: 1024px) {
+  :root {
+    --leu-t-curve-80-black-font-size:  var(--leu-t-70-black-font-size);
+    --leu-t-curve-80-black-line-height:  var(--leu-t-70-black-line-height);
+    --leu-t-curve-80-black-spacing:  var(--leu-t-70-black-spacing);
+    --leu-t-curve-80-black-font:  var(--leu-t-70-black-font);
+}
+}
+@media (min-width: 1280px) {
+  :root {
+    --leu-t-curve-80-black-font-size:  var(--leu-t-80-black-font-size);
+    --leu-t-curve-80-black-line-height:  var(--leu-t-80-black-line-height);
+    --leu-t-curve-80-black-spacing:  var(--leu-t-80-black-spacing);
+    --leu-t-curve-80-black-font:  var(--leu-t-80-black-font);
+}
+}
+@media (min-width: 600px) {
+  :root {
+    --leu-t-curve-120-black-font-size:  var(--leu-t-70-black-font-size);
+    --leu-t-curve-120-black-line-height:  var(--leu-t-70-black-line-height);
+    --leu-t-curve-120-black-spacing:  var(--leu-t-70-black-spacing);
+    --leu-t-curve-120-black-font:  var(--leu-t-70-black-font);
+}
+}
+@media (min-width: 840px) {
+  :root {
+    --leu-t-curve-120-black-font-size:  var(--leu-t-80-black-font-size);
+    --leu-t-curve-120-black-line-height:  var(--leu-t-80-black-line-height);
+    --leu-t-curve-120-black-spacing:  var(--leu-t-80-black-spacing);
+    --leu-t-curve-120-black-font:  var(--leu-t-80-black-font);
+}
+}
+@media (min-width: 1024px) {
+  :root {
+    --leu-t-curve-120-black-font-size:  var(--leu-t-100-black-font-size);
+    --leu-t-curve-120-black-line-height:  var(--leu-t-100-black-line-height);
+    --leu-t-curve-120-black-spacing:  var(--leu-t-100-black-spacing);
+    --leu-t-curve-120-black-font:  var(--leu-t-100-black-font);
+}
+}
+@media (min-width: 1280px) {
+  :root {
+    --leu-t-curve-120-black-font-size:  var(--leu-t-120-black-font-size);
+    --leu-t-curve-120-black-line-height:  var(--leu-t-120-black-line-height);
+    --leu-t-curve-120-black-spacing:  var(--leu-t-120-black-spacing);
+    --leu-t-curve-120-black-font:  var(--leu-t-120-black-font);
+}
+}
+@media (min-width: 400px) {
+  :root {
+    --leu-t-curve-180-black-font-size:  var(--leu-t-80-black-font-size);
+    --leu-t-curve-180-black-line-height:  var(--leu-t-80-black-line-height);
+    --leu-t-curve-180-black-spacing:  var(--leu-t-80-black-spacing);
+    --leu-t-curve-180-black-font:  var(--leu-t-80-black-font);
+}
+}
+@media (min-width: 600px) {
+  :root {
+    --leu-t-curve-180-black-font-size:  var(--leu-t-100-black-font-size);
+    --leu-t-curve-180-black-line-height:  var(--leu-t-100-black-line-height);
+    --leu-t-curve-180-black-spacing:  var(--leu-t-100-black-spacing);
+    --leu-t-curve-180-black-font:  var(--leu-t-100-black-font);
+}
+}
+@media (min-width: 840px) {
+  :root {
+    --leu-t-curve-180-black-font-size:  var(--leu-t-120-black-font-size);
+    --leu-t-curve-180-black-line-height:  var(--leu-t-120-black-line-height);
+    --leu-t-curve-180-black-spacing:  var(--leu-t-120-black-spacing);
+    --leu-t-curve-180-black-font:  var(--leu-t-120-black-font);
+}
+}
+@media (min-width: 1024px) {
+  :root {
+    --leu-t-curve-180-black-font-size:  var(--leu-t-140-black-font-size);
+    --leu-t-curve-180-black-line-height:  var(--leu-t-140-black-line-height);
+    --leu-t-curve-180-black-spacing:  var(--leu-t-140-black-spacing);
+    --leu-t-curve-180-black-font:  var(--leu-t-140-black-font);
+}
+}
+@media (min-width: 1280px) {
+  :root {
+    --leu-t-curve-180-black-font-size:  var(--leu-t-180-black-font-size);
+    --leu-t-curve-180-black-line-height:  var(--leu-t-180-black-line-height);
+    --leu-t-curve-180-black-spacing:  var(--leu-t-180-black-spacing);
+    --leu-t-curve-180-black-font:  var(--leu-t-180-black-font);
+}
 }

package/dist/utils-65469421.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Return a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.
+ * @param {Function} func - Your function
+ * @param {Number} timeout - Default is 500 ms
+ * @returns {Function} - Your function wrapped in a timeout function
+ */
+declare function debounce(func: Function, timeout?: number): Function;
+/**
+ * Return a throttled function that only invokes func at most once per every wait milliseconds.
+ * @param {Function} func - Your function
+ * @param {Number} timeout - Default is 500 ms
+ * @returns {Function} - Your function wrapped in a timeout function
+ */
+declare function throttle(func: Function, timeout?: number): Function;
+export { debounce as d, throttle as t };
+//# sourceMappingURL=utils-65469421.d.ts.map

package/dist/utils-65469421.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils-65469421.d.ts","sourceRoot":"","sources":["utils-65469421.js"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,sEAQC;AAED;;;;;GAKG;AACH,sEAUC"}

package/dist/utils-65469421.js

@@ -0,0 +1,35 @@
+/**
+ * Return a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.
+ * @param {Function} func - Your function
+ * @param {Number} timeout - Default is 500 ms
+ * @returns {Function} - Your function wrapped in a timeout function
+ */
+const debounce = function debounce(func, timeout = 500) {
+  let timer = null;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(this, args);
+    }, timeout);
+  };
+};
+
+/**
+ * Return a throttled function that only invokes func at most once per every wait milliseconds.
+ * @param {Function} func - Your function
+ * @param {Number} timeout - Default is 500 ms
+ * @returns {Function} - Your function wrapped in a timeout function
+ */
+const throttle = function throttle(func, timeout = 500) {
+  let timer = null;
+  return (...args) => {
+    if (timer === null) {
+      func(...args);
+      timer = setTimeout(() => {
+        timer = null;
+      }, timeout);
+    }
+  };
+};
+
+export { debounce as d, throttle as t };

package/index.js

@@ -1,3 +1,5 @@
+export * from "./src/components/accordion/Accordion.js"
+export * from "./src/components/breadcrumb/Breadcrumb.js"
 export * from "./src/components/button/Button.js"
 export * from "./src/components/button-group/ButtonGroup.js"
 export * from "./src/components/checkbox/Checkbox.js"
@@ -8,6 +10,7 @@ export * from "./src/components/input/Input.js"
 export * from "./src/components/menu/Menu.js"
 export * from "./src/components/menu/MenuItem.js"
 export * from "./src/components/pagination/Pagination.js"
+export * from "./src/components/popup/Popup.js"
 export * from "./src/components/radio/Radio.js"
 export * from "./src/components/radio/RadioGroup.js"
 export * from "./src/components/select/Select.js"

package/package.json

@@ -3,25 +3,37 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "customElements": "dist/custom-elements.json",
+  "web-types": "./dist/web-types.json",
+  "exports": {
+    ".": {
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": "./dist/*"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/statistikzh/leu.git"
   },
   "homepage": "https://github.com/statistikzh/leu/",
   "scripts": {
-    "analyze": "cem analyze --litelement --globs \"src/**/*.js\"",
-    "build": "rimraf dist && npm run build:js && npm run build:css",
+    "analyze": "cem analyze --config custom-elements-manifest.config.js",
+    "build": "rimraf dist && npm run build:js && npm run build:types && npm run build:css",
     "build:js": "rollup -c rollup.config.js",
+    "build:types": "tsc -p tsconfig.build.json",
     "build:css": "postcss src/styles/theme.css -o dist/theme.css && cp dist/theme.css .storybook/static/",
     "watch:css": "nodemon --watch 'src/styles/*' -e css --exec npm run build:css",
     "lint": "npm run lint:eslint && npm run lint:prettier",
     "lint:eslint": "eslint --ext .js,.mjs,.html . --ignore-path .gitignore ",
     "lint:prettier": "prettier \"**/*.{js,mjs,md,html,json}\" --check --ignore-path .gitignore",
     "lint:stylelint": "stylelint \"**/*.{js,css}\" --ignore-path .gitignore",
+    "lint:types": "tsc",
     "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint --ext .js,.mjs,.html . --fix --ignore-path .gitignore",
     "format:prettier": "prettier \"**/*.{js,mjs,md,html,json}\" --write --ignore-path .gitignore",
@@ -40,31 +52,36 @@
     "@babel/preset-env": "^7.23.3",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@open-wc/eslint-config": "^9.2.1",
     "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-designs": "^7.0.9",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/blocks": "^7.6.10",
-    "@storybook/web-components": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/web-components": "^7.6.17",
     "@web/dev-server": "^0.1.34",
     "@web/dev-server-rollup": "^0.5.2",
-    "@web/storybook-builder": "^0.1.2",
+    "@web/storybook-builder": "^0.1.6",
     "@web/storybook-framework-web-components": "^0.1.1",
     "@web/test-runner": "^0.18.0",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
     "@whitespace/storybook-addon-html": "^5.1.6",
     "arg": "^5.0.2",
+    "custom-element-jet-brains-integration": "^1.4.4",
+    "custom-element-vs-code-integration": "^1.2.3",
+    "custom-element-vuejs-integration": "^1.1.0",
     "es-dev-server": "^2.1.0",
     "esbuild": "^0.20.0",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-storybook": "^0.6.14",
+    "glob": "^10.3.10",
     "husky": "^8.0.0",
     "lint-staged": "^10.5.4",
     "nodemon": "^3.0.2",
@@ -83,11 +100,12 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-postcss-lit": "^2.1.0",
     "sinon": "^17.0.1",
-    "storybook": "^7.6.10",
+    "storybook": "^7.6.17",
     "stylelint": "^15.10.3",
-    "stylelint-config-standard": "^34.0.0"
+    "stylelint-config-standard": "^34.0.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.3"
   },
-  "customElements": "custom-elements.json",
   "prettier": {
     "semi": false
   },

package/postcss.config.cjs

@@ -1,10 +1,12 @@
 const postcssPresetEnv = require("postcss-preset-env")
 const atImport = require("postcss-import")
+const leuFontStyles = require("./scripts/postcss-leu-font-styles.cjs")
 
 module.exports = {
   stage: 2,
   plugins: [
     atImport(),
+    leuFontStyles(),
     postcssPresetEnv({
       features: {
         "custom-media-queries": true,

package/rollup.config.js

@@ -1,3 +1,6 @@
+import { globSync } from "glob"
+import path from "path"
+import { fileURLToPath } from "url"
 import postcss from "rollup-plugin-postcss"
 import postcssLit from "rollup-plugin-postcss-lit"
 import { babel } from "@rollup/plugin-babel"
@@ -17,44 +20,25 @@ export const plugins = [
   },
 ]
 
+/**
+ * @type {import("rollup").RollupOptions}
+ */
 export default {
-  input: [
-    "index.js",
-    "./src/components/button/leu-button.js",
-    "./src/components/button/Button.js",
-    "./src/components/button-group/leu-button-group.js",
-    "./src/components/button-group/ButtonGroup.js",
-    "./src/components/checkbox/leu-checkbox.js",
-    "./src/components/checkbox/leu-checkbox-group.js",
-    "./src/components/checkbox/Checkbox.js",
-    "./src/components/checkbox/CheckboxGroup.js",
-    "./src/components/chip/leu-chip-group.js",
-    "./src/components/chip/leu-chip-link.js",
-    "./src/components/chip/leu-chip-removable.js",
-    "./src/components/chip/leu-chip-selectable.js",
-    "./src/components/chip/ChipGroup.js",
-    "./src/components/chip/ChipLink.js",
-    "./src/components/chip/ChipRemovable.js",
-    "./src/components/chip/ChipSelectable.js",
-    "./src/components/dropdown/leu-dropdown.js",
-    "./src/components/dropdown/Dropdown.js",
-    "./src/components/input/leu-input.js",
-    "./src/components/input/Input.js",
-    "./src/components/menu/leu-menu.js",
-    "./src/components/menu/leu-menu-item.js",
-    "./src/components/menu/Menu.js",
-    "./src/components/menu/MenuItem.js",
-    "./src/components/pagination/leu-pagination.js",
-    "./src/components/pagination/Pagination.js",
-    "./src/components/radio/leu-radio.js",
-    "./src/components/radio/leu-radio-group.js",
-    "./src/components/radio/Radio.js",
-    "./src/components/radio/RadioGroup.js",
-    "./src/components/select/leu-select.js",
-    "./src/components/select/Select.js",
-    "./src/components/table/leu-table.js",
-    "./src/components/table/Table.js",
-  ],
+  // Select all files in a direct subdirectory of src/components
+  // that have a name starting with
+  // -  a capital letter
+  // -  or "leu-"
+  input: {
+    "index.js": "index.js",
+    ...Object.fromEntries(
+      globSync("src/components/*/{[A-Z],leu-}*.js", { nocase: false }).map(
+        (file) => [
+          path.basename(file, path.extname(file)),
+          fileURLToPath(new URL(file, import.meta.url)),
+        ]
+      )
+    ),
+  },
   output: {
     dir: "./dist/",
     format: "esm",
@@ -66,6 +50,3 @@ export default {
   ],
   external: /^lit(\/.*\.js)?$/,
 }
-
-// TODO: add a second config for a bundle with esbuild
-// import esbuild from "rollup-plugin-esbuild"

package/scripts/generate-component/templates/[name].css

@@ -4,8 +4,8 @@
 }
 
 :host {
-  --[name]-font-regular: var(--leu-font-regular);
-  --[name]-font-black: var(--leu-font-black);
+  --[name]-font-regular: var(--leu-font-family-regular);
+  --[name]-font-black: var(--leu-font-family-black);
 
   font-family: var(--[name]-font-regular);
 }