@statistikzh/leu 0.14.2 → 0.14.4

package/src/components/chip/{ChipGroup.js → ChipGroup.ts}

@@ -2,7 +2,6 @@ import { html, unsafeStatic } from "lit/static-html.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./chip-group.css"
 
 /* Figma https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=131766-248643&mode=design&t=Kjo5VDiqivihn8dh-11 */

package/src/components/chip/{leu-chip-group.js → leu-chip-group.ts}

@@ -3,3 +3,9 @@ import { LeuChipGroup } from "./ChipGroup.js"
 export { LeuChipGroup }
 
 LeuChipGroup.define("leu-chip-group")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-chip-group": LeuChipGroup
+  }
+}

package/src/components/chip/{leu-chip-link.js → leu-chip-link.ts}

@@ -3,3 +3,9 @@ import { LeuChipLink } from "./ChipLink.js"
 export { LeuChipLink }
 
 LeuChipLink.define("leu-chip-link")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-chip-link": LeuChipLink
+  }
+}

package/src/components/chip/{leu-chip-removable.js → leu-chip-removable.ts}

@@ -3,3 +3,9 @@ import { LeuChipRemovable } from "./ChipRemovable.js"
 export { LeuChipRemovable }
 
 LeuChipRemovable.define("leu-chip-removable")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-chip-removable": LeuChipRemovable
+  }
+}

package/src/components/chip/{leu-chip-selectable.js → leu-chip-selectable.ts}

@@ -3,3 +3,9 @@ import { LeuChipSelectable } from "./ChipSelectable.js"
 export { LeuChipSelectable }
 
 LeuChipSelectable.define("leu-chip-selectable")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-chip-selectable": LeuChipSelectable
+  }
+}

package/src/components/dialog/{Dialog.js → Dialog.ts}

@@ -8,7 +8,6 @@ import { LeuIcon } from "../icon/Icon.js"
 
 // design: https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&node-type=FRAME
 
-// @ts-ignore
 import styles from "./dialog.css"
 
 /**

package/src/components/dialog/{leu-dialog.js → leu-dialog.ts}

@@ -3,3 +3,9 @@ import { LeuDialog } from "./Dialog.js"
 export { LeuDialog }
 
 LeuDialog.define("leu-dialog")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-dialog": LeuDialog
+  }
+}

package/src/components/dropdown/{Dropdown.js → Dropdown.ts}

@@ -9,7 +9,6 @@ import { LeuMenu } from "../menu/Menu.js"
 import { LeuMenuItem } from "../menu/MenuItem.js"
 import { LeuPopup } from "../popup/Popup.js"
 
-// @ts-ignore
 import styles from "./dropdown.css"
 
 /**

package/src/components/dropdown/{leu-dropdown.js → leu-dropdown.ts}

@@ -3,3 +3,9 @@ import { LeuDropdown } from "./Dropdown.js"
 export { LeuDropdown }
 
 LeuDropdown.define("leu-dropdown")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-dropdown": LeuDropdown
+  }
+}

package/src/components/icon/{Icon.js → Icon.ts}

@@ -2,7 +2,6 @@ import { html, svg } from "lit"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./icon.css"
 import { paths } from "./paths.js"
 

package/src/components/icon/{leu-icon.js → leu-icon.ts}

@@ -3,3 +3,9 @@ import { LeuIcon } from "./Icon.js"
 export { LeuIcon }
 
 LeuIcon.define("leu-icon")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-icon": LeuIcon
+  }
+}

package/src/components/input/{Input.js → Input.ts}

@@ -7,7 +7,6 @@ import { createRef, ref } from "lit/directives/ref.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-// @ts-ignore
 import styles from "./input.css"
 
 export const SIZES = Object.freeze({

package/src/components/input/{leu-input.js → leu-input.ts}

@@ -3,3 +3,9 @@ import { LeuInput } from "./Input.js"
 export { LeuInput }
 
 LeuInput.define("leu-input")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-input": LeuInput
+  }
+}

package/src/components/menu/{Menu.js → Menu.ts}

@@ -4,7 +4,6 @@ import { LeuElement } from "../../lib/LeuElement.js"
 
 import { LeuMenuItem } from "./MenuItem.js"
 
-// @ts-ignore
 import styles from "./menu.css"
 
 /**
@@ -135,7 +134,8 @@ export class LeuMenu extends LeuElement {
 
   focusItem(index) {
     const currentItem = this.setCurrentItem(index)
-    currentItem.focus()
+
+    currentItem?.focus()
   }
 
   firstUpdated() {

package/src/components/menu/{MenuItem.js → MenuItem.ts}

@@ -4,7 +4,6 @@ import { ifDefined } from "lit/directives/if-defined.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-// @ts-ignore
 import styles from "./menu-item.css"
 
 /**

package/src/components/menu/{leu-menu-item.js → leu-menu-item.ts}

@@ -3,3 +3,9 @@ import { LeuMenuItem } from "./MenuItem.js"
 export { LeuMenuItem }
 
 LeuMenuItem.define("leu-menu-item")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-menu-item": LeuMenuItem
+  }
+}

package/src/components/menu/{leu-menu.js → leu-menu.ts}

@@ -3,3 +3,9 @@ import { LeuMenu } from "./Menu.js"
 export { LeuMenu }
 
 LeuMenu.define("leu-menu")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-menu": LeuMenu
+  }
+}

package/src/components/pagination/{Pagination.js → Pagination.ts}

@@ -6,7 +6,6 @@ import { LeuButton } from "../button/Button.js"
 import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-// @ts-ignore
 import styles from "./pagination.css"
 
 const MIN_PAGE = 1

package/src/components/pagination/{leu-pagination.js → leu-pagination.ts}

@@ -3,3 +3,9 @@ import { LeuPagination } from "./Pagination.js"
 export { LeuPagination }
 
 LeuPagination.define("leu-pagination")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-pagination": LeuPagination
+  }
+}

package/src/components/popup/{Popup.js → Popup.ts}

@@ -9,7 +9,6 @@ import {
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./popup.css"
 
 /**

package/src/components/popup/{leu-popup.js → leu-popup.ts}

@@ -3,3 +3,9 @@ import { LeuPopup } from "./Popup.js"
 export { LeuPopup }
 
 LeuPopup.define("leu-popup")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-popup": LeuPopup
+  }
+}

package/src/components/radio/{Radio.js → Radio.ts}

@@ -2,7 +2,6 @@ import { html } from "lit"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./radio.css"
 
 /**

package/src/components/radio/{RadioGroup.js → RadioGroup.ts}

@@ -3,7 +3,6 @@ import { classMap } from "lit/directives/class-map.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./radio-group.css"
 
 /**

package/src/components/radio/{leu-radio-group.js → leu-radio-group.ts}

@@ -3,3 +3,9 @@ import { LeuRadioGroup } from "./RadioGroup.js"
 export { LeuRadioGroup }
 
 LeuRadioGroup.define("leu-radio-group")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-radio-group": LeuRadioGroup
+  }
+}

package/src/components/radio/{leu-radio.js → leu-radio.ts}

@@ -3,3 +3,9 @@ import { LeuRadio } from "./Radio.js"
 export { LeuRadio }
 
 LeuRadio.define("leu-radio")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-radio": LeuRadio
+  }
+}

package/src/components/range/{leu-range.js → leu-range.ts}

@@ -3,3 +3,9 @@ import { LeuRange } from "./Range.js"
 export { LeuRange }
 
 LeuRange.define("leu-range")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-range": LeuRange
+  }
+}

package/src/components/scroll-top/{ScrollTop.js → ScrollTop.ts}

@@ -7,7 +7,6 @@ import { LeuIcon } from "../icon/Icon.js"
 
 import { throttle } from "../../lib/utils.js"
 
-// @ts-ignore
 import styles from "./scroll-top.css"
 
 /**

package/src/components/scroll-top/{leu-scroll-top.js → leu-scroll-top.ts}

@@ -3,3 +3,9 @@ import { LeuScrollTop } from "./ScrollTop.js"
 export { LeuScrollTop }
 
 LeuScrollTop.define("leu-scroll-top")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-scroll-top": LeuScrollTop
+  }
+}

package/src/components/select/{Select.js → Select.ts}

@@ -13,7 +13,6 @@ import { LeuIcon } from "../icon/Icon.js"
 import { LeuInput } from "../input/Input.js"
 import { LeuPopup } from "../popup/Popup.js"
 
-// @ts-ignore
 import styles from "./select.css"
 
 /**
@@ -207,6 +206,20 @@ export class LeuSelect extends LeuElement {
     }
   }
 
+  /**
+   * Update all the menu items when the slot changes
+   * to make sure that the menu items are in sync
+   * with the state of the component.
+   * @internal
+   */
+  _handleItemSlotChange() {
+    this._updateMenuItems({
+      value: true,
+      optionFilter: true,
+      multiple: true,
+    })
+  }
+
   /**
    * Handles clicks outside of the component to close the dropdown.
    * @internal
@@ -344,7 +357,8 @@ export class LeuSelect extends LeuElement {
         : this.value.concat(value)
 
       this._deferedChangeEvent = true
-    } else {
+    } else if (this.clearable || !isSelected) {
+      // Only clear if clearable is true or if the value is not selected.
       this.value = isSelected ? [] : [value]
       this._displayValue = isSelected ? "" : menuItem.textContent
     }
@@ -468,9 +482,9 @@ export class LeuSelect extends LeuElement {
               @click=${this._handleMenuItemClick}
               aria-labelledby="select-label"
             >
-              <slot></slot>
+              <slot @slotchange=${this._handleItemSlotChange}> </slot>
             </leu-menu>
-            ${this._hasFilterResults
+            ${this._hasFilterResults || this._optionFilter === ""
               ? nothing
               : html` <p class="filter-message-empty" aria-live="polite">
                   Keine Resultate

package/src/components/select/{leu-select.js → leu-select.ts}

@@ -3,3 +3,9 @@ import { LeuSelect } from "./Select.js"
 export { LeuSelect }
 
 LeuSelect.define("leu-select")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-select": LeuSelect
+  }
+}

package/src/components/select/test/{fixtures.js → fixtures.ts}

@@ -159,4 +159,4 @@ export const MUNICIPALITIES = [
   "Illnau-Effretikon",
   "Bauma",
   "Wiesendangen",
-]
+] as const

package/src/components/select/test/{select.test.js → select.test.ts}

@@ -258,6 +258,63 @@ describe("LeuSelect", () => {
     const emptyMessage = el.shadowRoot.querySelector(".filter-message-empty")
     expect(emptyMessage).to.exist
     expect(emptyMessage).to.have.attribute("aria-live", "polite")
+    expect(emptyMessage).to.have.trimmed.text("Keine Resultate")
+  })
+
+  it("doesn't render a message when no options are available and no filter is set", async () => {
+    const el = await defaultFixture({
+      options: [],
+      label: "Gemeinde",
+      filterable: true,
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const emptyMessage = el.shadowRoot.querySelector(".filter-message-empty")
+    expect(emptyMessage).not.to.exist
+  })
+
+  it("syncs the state to the menu items when they're updated lazily", async () => {
+    const el = await defaultFixture({
+      options: [],
+      label: "Gemeinde",
+      value: ["Affoltern am Albis"],
+      filterable: true,
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const filterInput = el.shadowRoot.querySelector(".select-search")
+    filterInput.focus()
+
+    await sendKeys({ type: "am albis" })
+    await elementUpdated(el)
+
+    let emptyMessage = el.shadowRoot.querySelector(".filter-message-empty")
+    expect(emptyMessage).to.exist
+
+    const fragment = document.createDocumentFragment()
+    MUNICIPALITIES.forEach((option) => {
+      const menuItem = document.createElement("leu-menu-item")
+      menuItem.textContent = option
+      fragment.appendChild(menuItem)
+    })
+
+    el.appendChild(fragment)
+
+    // Two calls to elementUpdated are needed because the _hasFilterResults
+    // property is set during the updated lifecycle
+    await elementUpdated(el)
+    await elementUpdated(el)
+    emptyMessage = el.shadowRoot.querySelector(".filter-message-empty")
+    expect(emptyMessage).to.be.null
+
+    const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
+      (item) => item.textContent === "Affoltern am Albis",
+    )
+    expect(menuItem).to.have.attribute("active")
   })
 
   it("renders a apply button when multiple selection is allowed", async () => {
@@ -305,6 +362,41 @@ describe("LeuSelect", () => {
     expect(el.value).to.deep.equal(["Maur"])
   })
 
+  it("doesn't allow unselecting the value", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      value: ["Maur"],
+    })
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
+      (item) => item.textContent === "Maur",
+    )
+
+    menuItem.click()
+    expect(el.value).to.deep.equal(["Maur"])
+  })
+
+  it("allows unselecting the value when clearable is set", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      value: ["Maur"],
+      clearable: true,
+    })
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
+      (item) => item.textContent === "Maur",
+    )
+
+    menuItem.click()
+    expect(el.value).to.deep.equal([])
+  })
+
   it("allows a value with multiple values", async () => {
     const el = await defaultFixture({
       options: MUNICIPALITIES,

package/src/components/spinner/{leu-spinner.js → leu-spinner.ts}

@@ -3,3 +3,9 @@ import { LeuSpinner } from "./Spinner.js"
 export { LeuSpinner }
 
 LeuSpinner.define("leu-spinner")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-spinner": LeuSpinner
+  }
+}

package/src/components/table/{Table.js → Table.ts}

@@ -7,7 +7,6 @@ import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuIcon } from "../icon/Icon.js"
 import { LeuPagination } from "../pagination/Pagination.js"
 
-// @ts-ignore
 import styles from "./table.css"
 
 /**

package/src/components/table/{leu-table.js → leu-table.ts}

@@ -3,3 +3,9 @@ import { LeuTable } from "./Table.js"
 export { LeuTable }
 
 LeuTable.define("leu-table")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-table": LeuTable
+  }
+}

package/src/components/visually-hidden/{VisuallyHidden.js → VisuallyHidden.ts}

@@ -2,7 +2,6 @@ import { html } from "lit"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./visually-hidden.css"
 
 /**

package/src/components/visually-hidden/{leu-visually-hidden.js → leu-visually-hidden.ts}

@@ -3,3 +3,9 @@ import { LeuVisuallyHidden } from "./VisuallyHidden.js"
 export { LeuVisuallyHidden }
 
 LeuVisuallyHidden.define("leu-visually-hidden")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-visually-hidden": LeuVisuallyHidden
+  }
+}

package/src/docs/theme.mdx

@@ -1,6 +1,7 @@
 import { Meta, Markdown, Canvas } from "@storybook/blocks"
+import React from "react"
 
-import * as GridStories from "../styles/style.stories.js"
+import * as GridStories from "../styles/style.stories"
 
 <Meta title="Introduction/Theme" />
 
@@ -16,7 +17,7 @@ export const ColorTable = ({ prefix, shades }) => {
       <tbody>
         {shades.map((shade) => {
           return (
-            <tr>
+            <tr key={`${prefix}-${shade}`}>
               <td
                 style={{
                   background:
@@ -160,6 +161,7 @@ box-shadow: var(--leu-box-shadow-short);
 <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
   {["short", "regular", "long"].map((shadow) => (
     <div
+      key={shadow}
       style={{
         boxShadow: `var(--leu-box-shadow-${shadow})`,
         padding: "1rem",
@@ -183,14 +185,16 @@ The font files and the font face declaration are not part of the package. You ne
 Each weight has a unique font family name. The `@font-face` declaration has to match this naming.
 
 <table>
-  <tr>
-    <td>regular</td>
-    <td>InterRegular</td>
-  </tr>
-  <tr>
-    <td>black</td>
-    <td>InterBlack</td>
-  </tr>
+  <tbody>
+    <tr>
+      <td>regular</td>
+      <td>InterRegular</td>
+    </tr>
+    <tr>
+      <td>black</td>
+      <td>InterBlack</td>
+    </tr>
+  </tbody>
 </table>
 
 In the theme those two definitions including fallbacks are defined as custom properties.

package/src/global.d.ts

@@ -0,0 +1,11 @@
+declare module "*.css" {
+  import { CSSResult } from "lit"
+
+  const css: CSSResult
+  export default css
+}
+
+/**
+ * The value is injected at build time.
+ */
+declare const __LEU_VERSION__: string

package/src/index.ts

@@ -0,0 +1,17 @@
+export * from "./components/accordion/Accordion.js"
+export * from "./components/button/Button.js"
+export * from "./components/button-group/ButtonGroup.js"
+export * from "./components/checkbox/Checkbox.js"
+export * from "./components/checkbox/CheckboxGroup.js"
+export * from "./components/chip/exports.js"
+export * from "./components/dropdown/Dropdown.js"
+export * from "./components/input/Input.js"
+export * from "./components/menu/Menu.js"
+export * from "./components/menu/MenuItem.js"
+export * from "./components/pagination/Pagination.js"
+export * from "./components/popup/Popup.js"
+export * from "./components/radio/Radio.js"
+export * from "./components/radio/RadioGroup.js"
+export * from "./components/select/Select.js"
+export * from "./components/table/Table.js"
+export * from "./lib/LeuElement.js"

package/src/lib/{LeuElement.js → LeuElement.ts}

@@ -1,17 +1,23 @@
-import { LitElement } from "lit"
+import { CSSResultGroup, LitElement } from "lit"
 import commonStyles from "../styles/common-styles.css"
 
 export class LeuElement extends LitElement {
   static version = __LEU_VERSION__
 
-  static dependencies = {}
+  static dependencies: Record<string, typeof LeuElement> = {}
 
-  static styles = commonStyles
+  static styles: CSSResultGroup = commonStyles
 
-  static define(name, constructor = this, options = {}) {
+  static define(
+    name: string,
+    constructor = this,
+    options: ElementDefinitionOptions = {},
+  ) {
     Object.entries(this.dependencies).forEach(([n, c]) => c.define(n))
 
-    const currentlyRegisteredConstructor = customElements.get(name)
+    const currentlyRegisteredConstructor = customElements.get(name) as
+      | CustomElementConstructor
+      | typeof LeuElement
 
     if (currentlyRegisteredConstructor === undefined) {
       customElements.define(name, constructor, options)
@@ -25,7 +31,10 @@ export class LeuElement extends LitElement {
       return
     }
 
-    if (currentlyRegisteredConstructor.version !== constructor.version) {
+    if (
+      "version" in currentlyRegisteredConstructor &&
+      currentlyRegisteredConstructor.version !== constructor.version
+    ) {
       console.warn(
         `The custom element with the name <${name}> is already defined with the same constructor but a different version (${currentlyRegisteredConstructor.version}).`,
       )

package/src/lib/{a11y.js → a11y.ts}

@@ -9,7 +9,7 @@ export const ARIA_CHECKED_ROLES = [
   "option",
   "radio",
   "switch",
-]
+] as const
 
 /**
  * All roles that are associated with a aria-selected attribute
@@ -23,4 +23,4 @@ export const ARIA_SELECTED_ROLES = [
   "columnheader",
   "rowheader",
   "treeitem",
-]
+] as const