@statistikzh/leu 0.3.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,61 +3,88 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.3.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:css": "postcss src/styles/theme.css -o dist/theme.css",
+    "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",
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
     "prepare": "husky install",
-    "storybook": "npm run analyze && web-dev-server --config web-dev-server-storybook.config.mjs --watch",
-    "build-storybook": "storybook build"
+    "storybook": "npm run storybook:start",
+    "storybook:start": "npm run analyze && npm run watch:css & storybook dev -p 8080 --no-open",
+    "storybook:build": "npm run analyze && npm run build:css && storybook build --output-dir docs"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.6.3",
     "lit": "^3.0.2"
   },
   "devDependencies": {
     "@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": "^3.1.6",
+    "@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.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/dev-server-storybook": "^1.0.6",
-    "@web/storybook-builder": "^0.1.0",
+    "@web/storybook-builder": "^0.1.6",
     "@web/storybook-framework-web-components": "^0.1.1",
-    "@web/test-runner": "^0.14.0",
-    "@web/test-runner-commands": "^0.8.0",
-    "@web/test-runner-playwright": "^0.10.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.19.4",
+    "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",
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
@@ -66,16 +93,19 @@
     "prettier": "^2.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-syntax-highlighter": "^15.5.0",
     "rimraf": "^5.0.5",
     "rollup": "^3.29.4",
     "rollup-plugin-esbuild": "^6.0.2",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-postcss-lit": "^2.1.0",
-    "storybook": "^7.4.5",
+    "sinon": "^17.0.1",
+    "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,