@statistikzh/leu 0.5.0 → 0.6.0

package/src/components/menu/test/menu.test.js

@@ -1,17 +1,35 @@
 import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
 import { fixture, expect } from "@open-wc/testing"
+import { sendKeys } from "@web/test-runner-commands"
 
 import "../leu-menu.js"
 import "../leu-menu-item.js"
+import "../../icon/leu-icon.js"
 
-async function defaultFixture() {
-  return fixture(html` <leu-menu>
-    <leu-menu-item label="Menu Item 1" before="EMPTY"></leu-menu-item>
-    <leu-menu-item label="Menu Item 2" before="check" active></leu-menu-item>
-    <leu-menu-item label="Menu Item 3" before="EMPTY"></leu-menu-item>
+async function defaultFixture(args = {}) {
+  return fixture(html` <leu-menu
+    role=${ifDefined(args.role)}
+    selects=${ifDefined(args.selects)}
+  >
+    <leu-menu-item
+      ><leu-icon slot="before"></leu-icon>Menu Item 1</leu-menu-item
+    >
+    <leu-menu-item active
+      ><leu-icon slot="before" name="check"></leu-icon>Menu Item
+      2</leu-menu-item
+    >
+    <leu-menu-item
+      ><leu-icon slot="before"></leu-icon>Menu Item 3</leu-menu-item
+    >
     <hr />
-    <leu-menu-item label="Menu Item 3" before="pin" after="CH"></leu-menu-item>
-    <leu-menu-item label="Menu Item 4"></leu-menu-item>
+    <leu-menu-item
+      ><leu-icon name="pin" slot="before"></leu-icon>Menu Item 3<slot
+        name="after"
+        >CH</slot
+      ></leu-menu-item
+    >
+    <leu-menu-item>Menu Item 4</leu-menu-item>
   </leu-menu>`)
 }
 
@@ -25,6 +43,81 @@ describe("LeuMenu", () => {
   it("passes the a11y audit", async () => {
     const el = await defaultFixture()
 
-    await expect(el).shadowDom.to.be.accessible()
+    await expect(el).dom.to.be.accessible()
+  })
+
+  it("sets 'menu' as the default role", async () => {
+    const el = await defaultFixture()
+
+    expect(el.getAttribute("role")).to.equal("menu")
+  })
+
+  it("sets 'menuitem' as the default role for menu items", async () => {
+    const el = await defaultFixture()
+
+    const menuItems = el.querySelectorAll("leu-menu-item")
+
+    menuItems.forEach((menuItem) => {
+      expect(menuItem.componentRole).to.equal("menuitem")
+    })
+  })
+
+  it("sets 'menuitemradio' as the role for menu items when only one item can be selected", async () => {
+    const el = await defaultFixture({ selects: "single" })
+
+    const menuItems = el.querySelectorAll("leu-menu-item")
+
+    menuItems.forEach((menuItem) => {
+      expect(menuItem.componentRole).to.equal("menuitemradio")
+    })
+  })
+
+  it("sets 'menuitemcheckbox' as the role for menu items when multiple items can be selected", async () => {
+    const el = await defaultFixture({ selects: "multiple" })
+
+    const menuItems = el.querySelectorAll("leu-menu-item")
+
+    menuItems.forEach((menuItem) => {
+      expect(menuItem.componentRole).to.equal("menuitemcheckbox")
+    })
+  })
+
+  it("sets 'option' as the role for menu items when the menu role is 'listbox'", async () => {
+    const el = await defaultFixture({ role: "listbox" })
+
+    const menuItems = el.querySelectorAll("leu-menu-item")
+
+    menuItems.forEach((menuItem) => {
+      expect(menuItem.componentRole).to.equal("option")
+    })
+  })
+
+  it("moves the focus when the arrow keys are pressed", async () => {
+    const el = await defaultFixture()
+
+    const menuItems = Array.from(el.querySelectorAll("leu-menu-item"))
+
+    await sendKeys({ press: "Tab" })
+    expect(document.activeElement).to.equal(menuItems[0])
+
+    await sendKeys({ press: "ArrowDown" })
+    await sendKeys({ press: "ArrowDown" })
+
+    expect(document.activeElement).to.equal(menuItems[2])
+
+    await sendKeys({ press: "ArrowUp" })
+    await sendKeys({ press: "ArrowUp" })
+    await sendKeys({ press: "ArrowUp" })
+
+    expect(document.activeElement).to.equal(menuItems.at(-1))
+
+    await sendKeys({ press: "Home" })
+    expect(document.activeElement).to.equal(menuItems[0])
+
+    await sendKeys({ press: "End" })
+    expect(document.activeElement).to.equal(menuItems.at(-1))
+
+    await sendKeys({ press: "ArrowDown" })
+    expect(document.activeElement).to.equal(menuItems[0])
   })
 })

package/src/components/pagination/Pagination.js

@@ -1,24 +1,33 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
 import { live } from "lit/directives/live.js"
 
-import "../button/leu-button.js"
-import styles from "./pagination.css"
+import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuButton } from "../button/Button.js"
+import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
+import { LeuIcon } from "../icon/Icon.js"
 
-import "../visually-hidden/leu-visually-hidden.js"
+// @ts-ignore
+import styles from "./pagination.css"
 
 const MIN_PAGE = 1
 
 /**
  * @tagname leu-pagination
  */
-export class LeuPagination extends LitElement {
+export class LeuPagination extends LeuElement {
+  static dependencies = {
+    "leu-button": LeuButton,
+    "leu-icon": LeuIcon,
+    "leu-visually-hidden": LeuVisuallyHidden,
+  }
+
   static styles = styles
 
   /**
    * @internal
    */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
@@ -26,15 +35,6 @@ export class LeuPagination extends LitElement {
     defaultPage: { type: Number, reflect: true },
     itemsPerPage: { type: Number, reflect: true },
     numOfItems: { type: Number, reflect: true },
-
-    /**
-     * Internal page state that contains an
-     * already clamped page number. Should only
-     * be accessed through the `page` getter and
-     * setter.
-     * @type {Number}
-     * @internal
-     */
     _page: { state: true },
   }
 
@@ -43,9 +43,18 @@ export class LeuPagination extends LitElement {
 
     /** @type {Number} */
     this.numOfItems = 1
+
     /** @type {Number} */
     this.itemsPerPage = 1
-    /** @type {Number} */
+
+    /**
+     * Internal page state that contains an
+     * already clamped page number. Should only
+     * be accessed through the `page` getter and
+     * setter.
+     * @type {Number}
+     * @internal
+     */
     this._page = 1
   }
 
@@ -148,22 +157,22 @@ export class LeuPagination extends LitElement {
       <div class="label">von ${this._maxPage}</div>
       <div class="button-group">
         <leu-button
-          icon="angleLeft"
           variant="secondary"
           label="Vorherige Seite"
           @click=${(_) => {
             this._updatePage(this.page - 1)
           }}
           ?disabled=${this._isFirstPage()}
+          ><leu-icon name="angleLeft"></leu-icon
         ></leu-button>
         <leu-button
-          icon="angleRight"
           variant="secondary"
           label="Nächste Seite"
           @click=${(_) => {
             this._updatePage(this.page + 1)
           }}
           ?disabled=${this._isLastPage()}
+          ><leu-icon name="angleRight"></leu-icon
         ></leu-button>
       </div>
     `

package/src/components/pagination/leu-pagination.js

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuPagination } from "./Pagination.js"
 
 export { LeuPagination }
 
-defineElement("pagination", LeuPagination)
+LeuPagination.define("leu-pagination")

package/src/components/popup/Popup.js

@@ -1,4 +1,4 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
 import {
   autoUpdate,
   computePosition,
@@ -6,34 +6,37 @@ import {
   shift,
   size,
 } from "@floating-ui/dom"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+// @ts-ignore
 import styles from "./popup.css"
 
+/**
+ * @typedef {"top"|"top-start"|"top-end"|"bottom"|"bottom-start"|"bottom-end"|"left"|"left-start"|"left-end"|"right"|"right-start"|"right-end"} Placement
+ */
+
 /**
  * @tagname leu-popup
  */
-export class LeuPopup extends LitElement {
+export class LeuPopup extends LeuElement {
   static styles = styles
 
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
   static properties = {
     anchor: {},
-    active: { type: Boolean },
-    /**
-     * @type {"top"|"top-start"|"top-end"|"bottom"|"bottom-start"|"bottom-end"|"left"|"left-start"|"left-end"|"right"|"right-start"|"right-end"}
-     */
-    placement: { type: String },
-    flip: { type: Boolean },
-    shift: { type: Boolean },
-    shiftPadding: { type: Number },
-    /** @type {"width" | "height" | "both"} */
-    matchSize: { type: String },
-    /** @type {"width" | "height" | "both"} */
-    autoSize: { type: String },
-    autoSizePadding: { type: Number },
+    active: { type: Boolean, reflect: true },
+    placement: { type: String, reflect: true },
+    flip: { type: Boolean, reflect: true },
+    shift: { type: Boolean, reflect: true },
+    shiftPadding: { type: Number, reflect: true },
+    matchSize: { type: String, reflect: true },
+    autoSize: { type: String, reflect: true },
+    autoSizePadding: { type: Number, reflect: true },
   }
 
   constructor() {
@@ -43,6 +46,23 @@ export class LeuPopup extends LitElement {
     this.cleanup = undefined
     this.flip = false
     this.shift = false
+
+    this.active = false
+
+    /** @type {Placement} */
+    this.placement = undefined
+
+    /** @type {"width" | "height" | "both"} */
+    this.matchSize = undefined
+
+    /** @type {"width" | "height" | "both"} */
+    this.autoSize = undefined
+
+    this.shiftPadding = 0
+    this.autoSizePadding = 0
+
+    /** @type {string | HTMLElement} */
+    this.anchor = undefined
   }
 
   disconnectedCallback() {
@@ -68,6 +88,9 @@ export class LeuPopup extends LitElement {
     }
   }
 
+  /**
+   * @returns {HTMLElement | null}
+   */
   get popupEl() {
     return this.renderRoot?.querySelector(".popup") ?? null
   }

package/src/components/popup/leu-popup.js

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuPopup } from "./Popup.js"
 
 export { LeuPopup }
 
-defineElement("popup", LeuPopup)
+LeuPopup.define("leu-popup")

package/src/components/popup/popup.css

@@ -19,6 +19,7 @@
   position: absolute;
   top: 0;
   left: 0;
+  z-index: var(--leu-z-index-popup);
 }
 
 /* TODO: Should visibility be a matter of the popup component? */

package/src/components/radio/Radio.js

@@ -1,30 +1,35 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+// @ts-ignore
 import styles from "./radio.css"
 
 /**
  * @tagname leu-radio
  */
-export class LeuRadio extends LitElement {
+export class LeuRadio extends LeuElement {
   static styles = styles
 
+  /** @internal */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
   static properties = {
     checked: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
-    identifier: { type: String, reflect: true },
     value: { type: String, reflect: true },
     name: { type: String, reflect: true },
-    label: { type: String, reflect: true },
   }
 
   constructor() {
     super()
     this.checked = false
     this.disabled = false
+    this.name = ""
+    this.value = ""
   }
 
   handleChange(event) {
@@ -41,7 +46,7 @@ export class LeuRadio extends LitElement {
   render() {
     return html`
       <input
-        id=${this.identifier}
+        id=${`radio-${this.name}`}
         class="radio"
         type="radio"
         name="${this.name}"
@@ -51,7 +56,7 @@ export class LeuRadio extends LitElement {
         ?disabled=${this.disabled}
         .value=${this.value}
       />
-      <label for=${this.identifier} class="label">${this.label}</label>
+      <label for=${`radio-${this.name}`} class="label"><slot></slot></label>
     `
   }
 }

package/src/components/radio/RadioGroup.js

@@ -1,12 +1,15 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 
+import { LeuElement } from "../../lib/LeuElement.js"
+
+// @ts-ignore
 import styles from "./radio-group.css"
 
 /**
  * @tagname leu-radio-group
  */
-export class LeuRadioGroup extends LitElement {
+export class LeuRadioGroup extends LeuElement {
   static styles = styles
 
   static properties = {
@@ -129,7 +132,7 @@ export class LeuRadioGroup extends LitElement {
   }
 
   handleItems() {
-    this.items = [...this.querySelectorAll(":scope > *:not([slot])")]
+    this.items = Array.from(this.querySelectorAll(":scope > *:not([slot])"))
     this.initializeIndex()
     this.setTabIndex()
   }

package/src/components/radio/leu-radio-group.js

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuRadioGroup } from "./RadioGroup.js"
 
 export { LeuRadioGroup }
 
-defineElement("radio-group", LeuRadioGroup)
+LeuRadioGroup.define("leu-radio-group")

package/src/components/radio/leu-radio.js

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuRadio } from "./Radio.js"
 
 export { LeuRadio }
 
-defineElement("radio", LeuRadio)
+LeuRadio.define("leu-radio")

package/src/components/radio/stories/radio-group.stories.js

@@ -27,25 +27,11 @@ function Template({ label, orientation }) {
       orientation=${ifDefined(orientation)}
       label=${ifDefined(label)}
     >
-      <leu-radio
-        identifier="1"
-        value="1"
-        name="radio-button"
-        label="Kurz"
-        disabled
-      ></leu-radio>
-      <leu-radio
-        identifier="2"
-        value="2"
-        name="radio-button"
-        label="Etwas Länger"
-      ></leu-radio>
-      <leu-radio
-        identifier="3"
-        value="3"
-        name="radio-button"
-        label="Ein langes Label um sicher ein umbruch zu erzwingen"
-      ></leu-radio>
+      <leu-radio value="1" name="radio-button" disabled>Kurz</leu-radio>
+      <leu-radio value="2" name="radio-button">Etwas Länger</leu-radio>
+      <leu-radio value="3" name="radio-button"
+        >Ein langes Label um sicher ein umbruch zu erzwingen</leu-radio
+      >
     </leu-radio-group>
   `
 }

package/src/components/radio/stories/radio.stories.js

@@ -24,13 +24,8 @@ function Template({
   disabled = false,
 }) {
   return html`
-    <leu-radio
-      .value=${value}
-      ?checked=${checked}
-      ?disabled=${disabled}
-      identifier=${"radio-1"}
-      label=${label}
-    >
+    <leu-radio .value=${value} ?checked=${checked} ?disabled=${disabled}>
+      ${label}
     </leu-radio>
   `
 }

package/src/components/radio/test/radio-group.test.js

@@ -9,27 +9,24 @@ async function defaultFixture(args = {}) {
     <leu-radio-group>
       <span slot="legend">Legende</span>
       <leu-radio
-        identifier="1"
         value="1"
         name="radio-button"
         disabled
-        label="Kurz"
         ?checked=${args.checkedValue === "1"}
-      ></leu-radio>
+        >Kurz</leu-radio
+      >
       <leu-radio
-        identifier="2"
         value="2"
         name="radio-button"
-        label="Etwas Länger"
         ?checked=${args.checkedValue === "2"}
-      ></leu-radio>
+        >Etwas Länger</leu-radio
+      >
       <leu-radio
-        identifier="3"
         value="3"
         name="radio-button"
-        label="Ein langes Label um sicher ein umbruch zu erzwingen"
         ?checked=${args.checkedValue === "3"}
-      ></leu-radio>
+        >Ein langes Label um sicher ein umbruch zu erzwingen</leu-radio
+      >
     </leu-radio-group>
   `)
 }

package/src/components/radio/test/radio.test.js

@@ -6,12 +6,9 @@ import "../leu-radio.js"
 
 async function defaultFixture() {
   return fixture(html`
-    <leu-radio
-      identifier="b"
-      value="3"
-      name="radio-button"
-      label="Ein langes Label um sicher ein umbruch zu erzwingen"
-    ></leu-radio>
+    <leu-radio identifier="b" value="3" name="radio-button"
+      >Ein langes Label um sicher ein umbruch zu erzwingen</leu-radio
+    >
   `)
 }
 
@@ -119,11 +116,4 @@ describe("LeuRadio", () => {
 
     expect(event).to.exist
   })
-
-  it("applies the identifier to the input and the label", async () => {
-    const el = await defaultFixture()
-
-    expect(el.shadowRoot.querySelector("input").id).to.equal("b")
-    expect(el.shadowRoot.querySelector("label").htmlFor).to.equal("b")
-  })
 })

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

@@ -1,14 +1,24 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 
-import styles from "./scroll-top.css"
-import "../button/leu-button.js"
+import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuButton } from "../button/Button.js"
+import { LeuIcon } from "../icon/Icon.js"
+
 import { throttle } from "../../lib/utils.js"
 
+// @ts-ignore
+import styles from "./scroll-top.css"
+
 /**
  * @tagname leu-scroll-top
  */
-export class LeuScrollTop extends LitElement {
+export class LeuScrollTop extends LeuElement {
+  static dependencies = {
+    "leu-button": LeuButton,
+    "leu-icon": LeuIcon,
+  }
+
   static styles = styles
 
   static properties = {
@@ -75,11 +85,11 @@ export class LeuScrollTop extends LitElement {
     return html`
       <div class=${classMap(cssClasses)}>
         <leu-button
-          icon="arrowUp"
           label="Zum Seitenanfang"
           round
           @click="${() => LeuScrollTop.scrollToTop()}"
         >
+          <leu-icon name="arrowUp"></leu-icon>
         </leu-button>
       </div>
     `

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

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