@statistikzh/leu 0.4.0 → 0.5.1

package/src/components/scroll-top/stories/scroll-top.stories.js

@@ -0,0 +1,217 @@
+import { html } from "lit"
+import "../leu-scroll-top.js"
+
+export default {
+  title: "ScrollTop",
+  component: "leu-scroll-top",
+}
+
+function Template() {
+  return html`
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+      dolor sit amet.
+    </p>
+    <p>
+      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+      molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
+      eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
+      zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
+      euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+    </p>
+    <p>
+      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
+      suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
+      eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
+      vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
+      iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
+      duis dolore te feugait nulla facilisi.
+    </p>
+    <p>
+      Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
+      doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit
+      amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
+      tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
+      minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
+      nisl ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+      molestie consequat, vel illum dolore eu feugiat nulla facilisis.
+    </p>
+    <p>
+      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+      gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
+      ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam
+      aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed
+      tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna
+      no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor
+      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat.
+    </p>
+    <p>
+      Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+      labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+      accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+      sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+      ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+      accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+      sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+      ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+      accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+      sea takimata sanctus.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+      dolor sit amet.
+    </p>
+    <p>
+      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+      molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
+      eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
+      zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
+      euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+    </p>
+    <p>
+      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
+      suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
+      eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
+      vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
+      iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
+      duis dolore te feugait nulla facilisi.
+    </p>
+    <p>
+      Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
+      doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit
+      amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
+      tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
+      minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
+      nisl ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+      molestie consequat, vel illum dolore eu feugiat nulla facilisis.
+    </p>
+    <p>
+      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+      gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
+      ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam
+      aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed
+      tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna
+      no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor
+      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat.
+    </p>
+    <p>
+      Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+      labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+      accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+      sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+      ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+      accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+      sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+      ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+      accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+      sea takimata sanctus.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+      dolor sit amet.
+    </p>
+    <p>
+      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+      molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
+      eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
+      zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
+      euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+    </p>
+    <p>
+      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
+      suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
+      eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
+      vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
+      iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
+      duis dolore te feugait nulla facilisi.
+    </p>
+    <p>
+      Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
+      doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit
+      amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
+      tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
+      minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
+      nisl ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+      molestie consequat, vel illum dolore eu feugiat nulla facilisis.
+    </p>
+    <p>
+      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+      gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
+      ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam
+      aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed
+      tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna
+      no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor
+      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat.
+    </p>
+    <leu-scroll-top />
+  `
+}
+
+export const Regular = Template.bind({})

package/src/components/scroll-top/test/scroll-top.test.js

@@ -0,0 +1,22 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-scroll-top.js"
+
+async function defaultFixture() {
+  return fixture(html` <leu-scroll-top /> `)
+}
+
+describe("LeuScrollTop", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-scroll-top")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+})

package/src/components/select/Select.js

@@ -13,6 +13,7 @@ import "../menu/leu-menu-item.js"
 import "../input/leu-input.js"
 import "../popup/leu-popup.js"
 
+// @ts-ignore
 import styles from "./select.css"
 
 /**
@@ -25,8 +26,7 @@ export class LeuSelect extends LitElement {
 
   static get properties() {
     return {
-      open: { type: Boolean, attribute: "open" },
-
+      open: { type: Boolean, reflect: true },
       label: { type: String, reflect: true },
       options: { type: Array },
       value: { type: Array },
@@ -53,9 +53,14 @@ export class LeuSelect extends LitElement {
   constructor() {
     super()
     this.open = false
+    this.disabled = false
+    this.open = false
+    this.multiple = false
     this.clearable = false
+    this.filterable = false
     this.value = []
     this.options = []
+    this.label = ""
 
     /** @internal */
     this._arrowIcon = Icon("angleDropDown")
@@ -69,8 +74,17 @@ export class LeuSelect extends LitElement {
     /** @internal */
     this.deferedChangeEvent = false
 
+    /**
+     * @type {import("lit/directives/ref").Ref<import("../menu/Menu").LeuMenu>}
+     */
     this.menuRef = createRef()
+    /**
+     * @type {import("lit/directives/ref").Ref<import("../input/Input").LeuInput>}
+     */
     this.optionFilterRef = createRef()
+    /**
+     * @type {import("lit/directives/ref").Ref<HTMLButtonElement>}
+     */
     this.toggleButtonRef = createRef()
   }
 
@@ -102,7 +116,11 @@ export class LeuSelect extends LitElement {
    * @param {MouseEvent} event
    */
   handleDocumentClick = (event) => {
-    if (!this.contains(event.target) && this.open) {
+    if (
+      event.target instanceof Node &&
+      !this.contains(event.target) &&
+      this.open
+    ) {
       this.closeDropdown()
     }
   }
@@ -289,9 +307,9 @@ export class LeuSelect extends LitElement {
           type="button"
           class="apply-button"
           @click=${this.handleApplyClick}
-          label="Anwenden"
           fluid
-        ></leu-button>
+          >Anwenden</leu-button
+        >
       `
     }
 
@@ -320,7 +338,7 @@ export class LeuSelect extends LitElement {
       <span class="label" id="select-label">${this.label}</span>
       <span class="value"> ${this.getDisplayValue(this.value)} </span>
       <span class="arrow-icon"> ${this._arrowIcon} </span>
-      ${this.clearable && this.value !== "" && this.value.length !== 0
+      ${this.clearable && this.value.length !== 0
         ? html`<button
             type="button"
             class="clear-button"

package/src/components/select/select.css

@@ -26,8 +26,8 @@
 
   --select-clear-color: var(--leu-color-black-60);
 
-  --select-font-regular: var(--leu-font-regular);
-  --select-font-black: var(--leu-font-black);
+  --select-font-regular: var(--leu-font-family-regular);
+  --select-font-black: var(--leu-font-family-black);
 
   --select-apply-button-color: var(--leu-color-black-100);
   --select-apply-button-color-focus: var(--leu-color-black-80);

package/src/components/table/table.css

@@ -28,7 +28,7 @@ table {
   border-spacing: 0;
   color: rgb(0 0 0 / 60%);
   font-size: 16px;
-  font-family: var(--leu-font-regular);
+  font-family: var(--leu-font-family-regular);
   line-height: 1.5;
 }
 
@@ -41,7 +41,7 @@ th {
   text-align: left;
   font-size: 12px;
   font-weight: normal;
-  font-family: var(--leu-font-black);
+  font-family: var(--leu-font-family-black);
   background: var(--table-even-row-bg);
 }
 

package/src/components/visually-hidden/VisuallyHidden.js

@@ -0,0 +1,13 @@
+import { html, LitElement } from "lit"
+import styles from "./visually-hidden.css"
+
+/**
+ * @tagname leu-visually-hidden
+ */
+export class LeuVisuallyHidden extends LitElement {
+  static styles = styles
+
+  render() {
+    return html`<slot></slot>`
+  }
+}

package/src/components/visually-hidden/leu-visually-hidden.js

@@ -0,0 +1,6 @@
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuVisuallyHidden } from "./VisuallyHidden.js"
+
+export { LeuVisuallyHidden }
+
+defineElement("visually-hidden", LeuVisuallyHidden)

package/src/components/visually-hidden/stories/visually-hidden.stories.js

@@ -0,0 +1,22 @@
+import { html } from "lit"
+import "../leu-visually-hidden.js"
+
+export default {
+  title: "VisuallyHidden",
+  component: "leu-visually-hidden",
+  argTypes: {
+    content: {
+      control: "text",
+    },
+  },
+}
+
+function Template({ content }) {
+  return html` <leu-visually-hidden>${content}</leu-visually-hidden>`
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  content:
+    "This is a text that isn't visible but still accessible for screenreaders.",
+}

package/src/components/visually-hidden/test/visually-hidden.test.js

@@ -0,0 +1,36 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-visually-hidden.js"
+
+async function defaultFixture() {
+  return fixture(
+    html`
+      <leu-visually-hidden>
+        This is a text that shouldn't be visible but still accessible.
+      </leu-visually-hidden>
+    `
+  )
+}
+
+describe("LeuVisuallyHidden", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-visually-hidden")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).to.be.accessible()
+  })
+
+  it("renders the default slot content", async () => {
+    const el = await defaultFixture()
+
+    expect(el).dom.to.equal(
+      "<leu-visually-hidden>This is a text that shouldn't be visible but still accessible.</leu-visually-hidden>"
+    )
+  })
+})

package/src/components/visually-hidden/visually-hidden.css

@@ -0,0 +1,10 @@
+:host {
+  clip: rect(0 0 0 0);
+  border: 0;
+  height: 1px;
+  margin: -1px !important;
+  overflow: hidden;
+  padding: 0 !important;
+  position: absolute;
+  width: 1px;
+}

package/src/lib/defineElement.js

@@ -2,7 +2,7 @@
  * 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 {HTMLElement} constructor
+ * @param {CustomElementConstructor} constructor
  */
 export function defineElement(name, constructor) {
   if (!customElements.get(`leu-${name}`)) {

package/src/lib/hasSlotController.js

@@ -5,7 +5,8 @@
 
 /**
  * A reactive controller that determines when slots exist.
- * @implements { import("lit").ReactiveController }
+ * @typedef {import("lit").ReactiveController} ReactiveController
+ * @implements {ReactiveController}
  */
 export class HasSlotController {
   constructor(host, slotNames) {
@@ -76,8 +77,9 @@ export class HasSlotController {
     const slot = event.target
 
     if (
-      (this.slotNames.includes("[default]") && !slot.name) ||
-      (slot.name && this.slotNames.includes(slot.name))
+      slot instanceof HTMLSlotElement &&
+      ((this.slotNames.includes("[default]") && !slot.name) ||
+        (slot.name && this.slotNames.includes(slot.name)))
     ) {
       this.host.requestUpdate()
     }

package/src/lib/utils.js

@@ -1,10 +1,10 @@
 /**
- * Wrap a Function to nsure that time-consuming tasks do not fire so often
+ * 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 (func, timeout = 500) {
+const debounce = function debounce(func, timeout = 500) {
   let timer = null
   return (...args) => {
     clearTimeout(timer)
@@ -14,4 +14,22 @@ const debounce = function (func, timeout = 500) {
   }
 }
 
-export { debounce }
+/**
+ * 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, throttle }

package/src/styles/custom-properties.css

@@ -1,3 +1,5 @@
+@import url("./custom-media.css");
+
 :root {
   --leu-color-black-100: #000;
   --leu-color-black-80: #333;
@@ -42,10 +44,12 @@
   --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-font-styles './font-definitions.json';
 }