@statistikzh/leu 0.4.0 → 0.5.0

package/src/components/pagination/stories/pagination.stories.js

@@ -1,8 +1,11 @@
 import { html } from "lit"
+import { action } from "@storybook/addon-actions"
+
 import "../leu-pagination.js"
 
 // https://stackoverflow.com/questions/72566428/storybook-angular-how-to-dynamically-update-args-from-the-template
 import { UPDATE_STORY_ARGS } from "@storybook/core-events" // eslint-disable-line
+import { ifDefined } from "lit/directives/if-defined.js"
 function updateStorybookArgss(id, args) {
   const channel = window.__STORYBOOK_ADDONS_CHANNEL__
   channel.emit(UPDATE_STORY_ARGS, {
@@ -56,6 +59,9 @@ const items = [
 export default {
   title: "Pagination",
   component: "leu-pagination",
+  args: {
+    onPageChange: action("leu:pagechange"),
+  },
   parameters: {
     design: {
       type: "figma",
@@ -64,15 +70,20 @@ export default {
   },
 }
 
-function Template({ startIndex, endIndex }, { id }) {
+function Template(
+  { startIndex, endIndex, onPageChange, itemsPerPage, defaultPage },
+  { id }
+) {
   return html`
     ${items
       .slice(startIndex, endIndex)
       .map((item) => html`<div>${item.label}</div>`)}
     <leu-pagination
       numOfItems=${items.length}
-      itemsPerPage="5"
+      itemsPerPage=${ifDefined(itemsPerPage)}
+      defaultPage=${ifDefined(defaultPage)}
       @leu:pagechange=${(e) => {
+        onPageChange(e)
         updateStorybookArgss(id, {
           startIndex: e.detail.startIndex,
           endIndex: e.detail.endIndex,
@@ -87,4 +98,6 @@ export const Regular = Template.bind({})
 Regular.args = {
   startIndex: 0,
   endIndex: 5,
+  itemsPerPage: 5,
+  // defaultPage: 2,
 }

package/src/components/pagination/test/pagination.test.js

@@ -10,7 +10,7 @@ async function defaultFixture(args = {}) {
   return fixture(html`<leu-pagination
     numOfItems=${ifDefined(args.numOfItems)}
     itemsPerPage=${ifDefined(args.itemsPerPage)}
-    page=${ifDefined(args.page)}
+    defaultPage=${ifDefined(args.defaultPage)}
   >
   </leu-pagination>`)
 }
@@ -26,7 +26,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 1,
+      defaultPage: 1,
     })
 
     await expect(el).shadowDom.to.be.accessible()
@@ -36,7 +36,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 1,
+      defaultPage: 1,
     })
 
     const previous = el.shadowRoot.querySelectorAll("leu-button")[0]
@@ -48,7 +48,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 14,
+      defaultPage: 14,
     })
 
     const next = el.shadowRoot.querySelectorAll("leu-button")[1]
@@ -60,7 +60,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 1,
+      defaultPage: 1,
     })
 
     const label = el.shadowRoot.querySelectorAll(".label")
@@ -72,7 +72,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 2,
+      defaultPage: 2,
     })
 
     const input = el.shadowRoot.querySelector("input")
@@ -84,7 +84,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 1,
+      defaultPage: 1,
     })
 
     const next = el.shadowRoot.querySelectorAll("leu-button")[1]
@@ -99,7 +99,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 10,
+      defaultPage: 10,
     })
 
     const next = el.shadowRoot.querySelectorAll("leu-button")[0]
@@ -114,7 +114,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 1,
+      defaultPage: 1,
     })
 
     el.focus()
@@ -131,7 +131,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 13,
+      defaultPage: 13,
     })
 
     el.focus()
@@ -148,18 +148,18 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 50,
       itemsPerPage: 10,
-      page: 6,
+      defaultPage: 6,
     })
 
     const input = el.shadowRoot.querySelector("input")
 
-    expect(el.boundPage).to.equal(5)
+    expect(el.page).to.equal(5)
     expect(input.value).to.equal("5")
 
     el.page = 0
     await elementUpdated(el)
 
-    expect(el.boundPage).to.equal(1)
+    expect(el.page).to.equal(1)
     expect(input.value).to.equal("1")
 
     el.focus()
@@ -169,7 +169,7 @@ describe("LeuPagination", () => {
     })
     await elementUpdated(el)
 
-    expect(el.boundPage).to.equal(1)
+    expect(el.page).to.equal(1)
     expect(input.value).to.equal("1")
 
     await sendKeys({ press: "ArrowUp" })
@@ -178,7 +178,7 @@ describe("LeuPagination", () => {
     await sendKeys({ press: "ArrowUp" })
     await sendKeys({ press: "ArrowUp" })
 
-    expect(el.boundPage).to.equal(5)
+    expect(el.page).to.equal(5)
     expect(input.value).to.equal("5")
   })
 

package/src/components/popup/popup.css

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

package/src/components/popup/stories/popup.stories.js

@@ -44,7 +44,7 @@ function Template(args = {}) {
     ?shift=${args.shift}
     placement=${ifDefined(args.placement)}
   >
-    <leu-button slot="anchor" label="Open popup"></leu-button>
+    <leu-button slot="anchor">Open popup</leu-button>
     <div style=${styleMap(popupStyles)}>Popup content</div>
   </leu-popup>`
 }

package/src/components/radio/radio-group.css

@@ -1,6 +1,6 @@
 :host {
-  --group-font-regular: var(--leu-font-regular);
-  --group-font-black: var(--leu-font-black);
+  --group-font-regular: var(--leu-font-family-regular);
+  --group-font-black: var(--leu-font-family-black);
 
   font-family: var(--group-font-regular);
 }

package/src/components/radio/radio.css

@@ -6,7 +6,7 @@
   --radio-label-color: var(--leu-color-black-100);
   --radio-label-color-disabled: var(--radio-color-disabled);
 
-  --radio-font-regular: var(--leu-font-regular);
+  --radio-font-regular: var(--leu-font-family-regular);
 
   display: inline-flex;
   align-items: flex-start;

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

@@ -0,0 +1,87 @@
+import { html, LitElement } from "lit"
+import { classMap } from "lit/directives/class-map.js"
+
+import styles from "./scroll-top.css"
+import "../button/leu-button.js"
+import { throttle } from "../../lib/utils.js"
+
+/**
+ * @tagname leu-scroll-top
+ */
+export class LeuScrollTop extends LitElement {
+  static styles = styles
+
+  static properties = {
+    _showButton: { state: true },
+  }
+
+  constructor() {
+    super()
+    /** @internal */
+    this._prevYPos = 0
+    /** @internal */
+    this._showButton = false
+    /** @internal */
+    this._scrollDown = false
+
+    /** @internal */
+    this._scrollListener = undefined
+  }
+
+  scroll = () => {
+    const delta = window.scrollY - this._prevYPos
+
+    if (this._scrollDown) {
+      if (delta < 0) {
+        this._scrollDown = false
+      }
+    } else if (delta > 0) {
+      this._scrollDown = true
+    }
+
+    /**
+     * Only show the button when
+     * ... the current scroll position is greater than the window height (below-the-fold) and when
+     * ... scrolling up
+     */
+    this._showButton = window.scrollY > window.innerHeight && !this._scrollDown
+    this._prevYPos = window.scrollY
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this._scrollListener = throttle(this.scroll, 100)
+    document.addEventListener("scroll", this._scrollListener, true)
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener("scroll", this._scrollListener, true)
+    super.disconnectedCallback()
+  }
+
+  static scrollToTop() {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: "smooth",
+    })
+  }
+
+  render() {
+    const cssClasses = {
+      "scroll-top": true,
+      hide: !this._showButton,
+    }
+    return html`
+      <div class=${classMap(cssClasses)}>
+        <leu-button
+          icon="arrowUp"
+          label="Zum Seitenanfang"
+          round
+          @click="${() => LeuScrollTop.scrollToTop()}"
+        >
+        </leu-button>
+      </div>
+    `
+  }
+}

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

@@ -0,0 +1,6 @@
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuScrollTop } from "./ScrollTop.js"
+
+export { LeuScrollTop }
+
+defineElement("scroll-top", LeuScrollTop)

package/src/components/scroll-top/scroll-top.css

@@ -0,0 +1,34 @@
+.scroll-top {
+  overflow: hidden;
+  position: fixed;
+  right: 1.5rem;
+  z-index: 1099;
+  bottom: 8.125rem;
+
+  /* show */
+  height: 50px;
+  pointer-events: auto;
+  transition: height, bottom 0.9s, 0.6s ease;
+}
+
+.hide {
+  height: 0;
+  pointer-events: none;
+  transition: height, top 0.9s, 0.6s ease;
+}
+
+@keyframes hide-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(90deg);
+  }
+}
+
+.hide leu-button {
+  animation-name: hide-animation;
+  animation-duration: 0.45s;
+  animation-timing-function: ease;
+}

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